diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-14 14:30:47 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-15 07:48:59 +0100 |
| commit | faa96e657621455284245018b8a3b5050b613e6b (patch) | |
| tree | a307a407e4b101b688fee89af9959001a9aae187 /files/fr/learn/tools_and_testing | |
| parent | e26d24940b2234a1a5e63b19d19d298bf36354e2 (diff) | |
| download | translated-content-faa96e657621455284245018b8a3b5050b613e6b.tar.gz translated-content-faa96e657621455284245018b8a3b5050b613e6b.tar.bz2 translated-content-faa96e657621455284245018b8a3b5050b613e6b.zip | |
convert content to md
Diffstat (limited to 'files/fr/learn/tools_and_testing')
16 files changed, 3178 insertions, 3260 deletions
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. |