diff options
Diffstat (limited to 'files/fr/learn/tools_and_testing')
6 files changed, 10 insertions, 10 deletions
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 2d4e767327..b4830fc154 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 @@ -285,7 +285,7 @@ Maintenant que nous avons couvers les considérations de l'accessibilité pour l 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 : -- [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. +- [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. 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 633912f9a9..d746f9ca35 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 @@ -313,7 +313,7 @@ form > #date 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/). 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. +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>` : ```html @@ -392,11 +392,11 @@ Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut deve 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. +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 -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). +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). Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom : 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 ab222b654f..807f81d444 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 @@ -248,7 +248,7 @@ Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans Par exemple : - 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. +- 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. @@ -294,7 +294,7 @@ Les librairies JavaScript sont essentiellement une partie externe d'unités de c Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) : - 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 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. 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 c6846a30ca..8f2e474df0 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 @@ -197,7 +197,7 @@ Nous couvrirons chacune des autres options plus bas. 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. -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/)). +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/)). Le plus souvent, vous allez devoir installer un émulateur. Les appareils/navigateurs les plus courants que vous allez devoir tester sont les suivants : diff --git a/files/fr/learn/tools_and_testing/github/index.md b/files/fr/learn/tools_and_testing/github/index.md index 263030b674..813f0afe66 100644 --- a/files/fr/learn/tools_and_testing/github/index.md +++ b/files/fr/learn/tools_and_testing/github/index.md @@ -66,7 +66,7 @@ Notez que les liens ci-après vous amènent à des ressources sur des sites exte - [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_. -> **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/) +> **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/) ## Voir aussi 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 b52f11de84..5c7a47de2a 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 @@ -176,7 +176,7 @@ cd Bureau/projet/src 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". -> **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. +> **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. ### Lister le contenu d'un répertoire @@ -225,7 +225,7 @@ Jouez avec elles dans un répertoire que vous aurez créé quelque part de faço - `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. -> **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`. +> **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`. ## Le terminal — une pratique à risque ? |