diff --git a/translations/fr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/fr/1-getting-started-lessons/1-intro-to-programming-languages/README.md new file mode 100644 index 00000000..58812465 --- /dev/null +++ b/translations/fr/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -0,0 +1,214 @@ + +# Introduction aux langages de programmation et outils du métier + +Cette leçon couvre les bases des langages de programmation. Les sujets abordés ici s'appliquent à la plupart des langages de programmation modernes. Dans la section "Outils du métier", vous découvrirez des logiciels utiles pour vous en tant que développeur. + +![Intro Programmation](../../../../sketchnotes/webdev101-programming.png) +> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz avant la leçon +[Quiz avant la leçon](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) + +## Introduction + +Dans cette leçon, nous aborderons : + +- Qu'est-ce que la programmation ? +- Les types de langages de programmation +- Les éléments de base d'un programme +- Les logiciels et outils utiles pour le développeur professionnel + +> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) ! + +## Qu'est-ce que la programmation ? + +La programmation (également appelée codage) est le processus d'écriture d'instructions pour un appareil tel qu'un ordinateur ou un appareil mobile. Nous écrivons ces instructions avec un langage de programmation, qui est ensuite interprété par l'appareil. Ces ensembles d'instructions peuvent être appelés de différentes manières, mais *programme*, *programme informatique*, *application (app)* et *exécutable* sont quelques noms courants. + +Un *programme* peut être tout ce qui est écrit avec du code : sites web, jeux, applications mobiles, etc. Bien qu'il soit possible de créer un programme sans écrire de code, la logique sous-jacente est interprétée par l'appareil, et cette logique a très probablement été écrite avec du code. Un programme qui *s'exécute* ou *interprète* du code exécute des instructions. L'appareil que vous utilisez pour lire cette leçon exécute un programme pour l'afficher sur votre écran. + +✅ Faites une petite recherche : qui est considéré comme le premier programmeur informatique au monde ? + +## Les langages de programmation + +Les langages de programmation permettent aux développeurs d'écrire des instructions pour un appareil. Les appareils ne comprennent que le binaire (1 et 0), et pour *la plupart* des développeurs, ce n'est pas une manière très efficace de communiquer. Les langages de programmation servent de moyen de communication entre les humains et les ordinateurs. + +Les langages de programmation existent sous différents formats et peuvent avoir des objectifs variés. Par exemple, JavaScript est principalement utilisé pour les applications web, tandis que Bash est principalement utilisé pour les systèmes d'exploitation. + +Les *langages de bas niveau* nécessitent généralement moins d'étapes que les *langages de haut niveau* pour qu'un appareil interprète les instructions. Cependant, ce qui rend les langages de haut niveau populaires, c'est leur lisibilité et leur support. JavaScript est considéré comme un langage de haut niveau. + +Le code suivant illustre la différence entre un langage de haut niveau avec JavaScript et un langage de bas niveau avec le code assembleur ARM. + +```javascript +let number = 10 +let n1 = 0, n2 = 1, nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Croyez-le ou non, *ils font exactement la même chose* : afficher une séquence de Fibonacci jusqu'à 10. + +✅ Une séquence de Fibonacci est [définie](https://en.wikipedia.org/wiki/Fibonacci_number) comme un ensemble de nombres où chaque nombre est la somme des deux précédents, en commençant par 0 et 1. Les 10 premiers nombres de la séquence de Fibonacci sont 0, 1, 1, 2, 3, 5, 8, 13, 21 et 34. + +## Les éléments d'un programme + +Une seule instruction dans un programme est appelée une *instruction* (*statement*) et comporte généralement un caractère ou un espacement de ligne qui marque où l'instruction se termine, ou *se termine*. La manière dont un programme se termine varie selon le langage. + +Les instructions dans un programme peuvent dépendre de données fournies par un utilisateur ou provenant d'ailleurs pour exécuter des instructions. Les données peuvent modifier le comportement d'un programme, c'est pourquoi les langages de programmation incluent un moyen de stocker temporairement des données pour une utilisation ultérieure. Ces moyens sont appelés *variables*. Les variables sont des instructions qui demandent à un appareil de sauvegarder des données dans sa mémoire. Les variables dans les programmes sont similaires aux variables en algèbre, où elles ont un nom unique et leur valeur peut changer au fil du temps. + +Il est possible que certaines instructions ne soient pas exécutées par un appareil. Cela se produit généralement par conception lorsqu'elles sont écrites par le développeur ou par accident lorsqu'une erreur inattendue survient. Ce type de contrôle sur une application la rend plus robuste et maintenable. En général, ces changements de contrôle se produisent lorsque certaines conditions sont remplies. Une instruction courante utilisée dans la programmation moderne pour contrôler l'exécution d'un programme est l'instruction `if..else`. + +✅ Vous en apprendrez davantage sur ce type d'instruction dans les leçons suivantes. + +## Outils du métier + +[![Outils du métier](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Outils du métier") + +> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les outils + +Dans cette section, vous découvrirez des logiciels que vous pourriez trouver très utiles au début de votre parcours de développement professionnel. + +Un **environnement de développement** est un ensemble unique d'outils et de fonctionnalités qu'un développeur utilise fréquemment lorsqu'il écrit des logiciels. Certains de ces outils ont été personnalisés pour répondre aux besoins spécifiques d'un développeur et peuvent évoluer avec le temps si ce développeur change de priorités dans son travail, ses projets personnels ou lorsqu'il utilise un autre langage de programmation. Les environnements de développement sont aussi uniques que les développeurs qui les utilisent. + +### Éditeurs + +L'un des outils les plus cruciaux pour le développement logiciel est l'éditeur. Les éditeurs sont l'endroit où vous écrivez votre code et parfois où vous l'exécutez. + +Les développeurs s'appuient sur les éditeurs pour plusieurs raisons supplémentaires : + +- Le *débogage* permet de découvrir des bogues et des erreurs en parcourant le code, ligne par ligne. Certains éditeurs disposent de capacités de débogage ; ils peuvent être personnalisés et ajoutés pour des langages de programmation spécifiques. +- La *coloration syntaxique* ajoute des couleurs et des formats de texte au code, ce qui le rend plus facile à lire. La plupart des éditeurs permettent une coloration syntaxique personnalisée. +- Les *extensions et intégrations* sont des outils spécialisés pour les développeurs, créés par des développeurs. Ces outils ne sont pas intégrés à l'éditeur de base. Par exemple, de nombreux développeurs documentent leur code pour expliquer son fonctionnement. Ils peuvent installer une extension de vérification orthographique pour repérer les fautes de frappe dans la documentation. La plupart des extensions sont conçues pour être utilisées dans un éditeur spécifique, et la plupart des éditeurs permettent de rechercher les extensions disponibles. +- La *personnalisation* permet aux développeurs de créer un environnement de développement unique adapté à leurs besoins. La plupart des éditeurs sont extrêmement personnalisables et peuvent également permettre aux développeurs de créer des extensions personnalisées. + +#### Éditeurs populaires et extensions pour le développement web + +- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) +- [Sublimetext](https://www.sublimetext.com/) + - [emmet](https://emmet.io/) + - [SublimeLinter](http://www.sublimelinter.com/en/stable/) + +### Navigateurs + +Un autre outil crucial est le navigateur. Les développeurs web s'appuient sur le navigateur pour voir comment leur code s'exécute sur le web. Il est également utilisé pour afficher les éléments visuels d'une page web écrits dans l'éditeur, comme le HTML. + +De nombreux navigateurs sont équipés d'*outils de développement* (DevTools) qui contiennent un ensemble de fonctionnalités utiles et d'informations pour aider les développeurs à collecter et capturer des informations importantes sur leur application. Par exemple : si une page web contient des erreurs, il est parfois utile de savoir quand elles se sont produites. Les DevTools d'un navigateur peuvent être configurés pour capturer ces informations. + +#### Navigateurs populaires et DevTools + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### Outils en ligne de commande + +Certains développeurs préfèrent une vue moins graphique pour leurs tâches quotidiennes et s'appuient sur la ligne de commande pour y parvenir. Écrire du code nécessite une quantité importante de saisie, et certains développeurs préfèrent ne pas interrompre leur flux sur le clavier. Ils utiliseront des raccourcis clavier pour basculer entre les fenêtres du bureau, travailler sur différents fichiers et utiliser des outils. La plupart des tâches peuvent être effectuées avec une souris, mais un avantage de la ligne de commande est qu'il est possible d'accomplir beaucoup de choses avec des outils en ligne de commande sans avoir à alterner entre la souris et le clavier. Un autre avantage de la ligne de commande est qu'elle est configurable : vous pouvez enregistrer une configuration personnalisée, la modifier plus tard et l'importer sur d'autres machines de développement. Étant donné que les environnements de développement sont si uniques à chaque développeur, certains éviteront d'utiliser la ligne de commande, d'autres s'y fieront entièrement, et certains préféreront un mélange des deux. + +### Options populaires pour la ligne de commande + +Les options pour la ligne de commande diffèrent selon le système d'exploitation que vous utilisez. + +*💻 = préinstallé sur le système d'exploitation.* + +#### Windows + +- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (également connu sous le nom de CMD) 💻 +- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon) +- [mintty](https://mintty.github.io/) + +#### MacOS + +- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 +- [iTerm](https://iterm2.com/) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) + +#### Linux + +- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 +- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) + +#### Outils populaires en ligne de commande + +- [Git](https://git-scm.com/) (💻 sur la plupart des systèmes d'exploitation) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentation + +Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tourne souvent vers la documentation pour comprendre comment l'utiliser. Les développeurs s'appuient souvent sur la documentation pour les guider dans l'utilisation correcte des outils et des langages, et aussi pour approfondir leur compréhension de leur fonctionnement. + +#### Documentation populaire sur le développement web + +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), par Mozilla, les éditeurs du navigateur [Firefox](https://www.mozilla.org/firefox/) +- [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), par Google, éditeurs de [Chrome](https://www.google.com/chrome/) +- [Documentation pour développeurs de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), pour [Microsoft Edge](https://www.microsoft.com/edge) +- [W3 Schools](https://www.w3schools.com/where_to_start.asp) + +✅ Faites des recherches : Maintenant que vous connaissez les bases de l'environnement d'un développeur web, comparez-le avec celui d'un designer web. + +--- + +## 🚀 Défi + +Comparez quelques langages de programmation. Quelles sont les caractéristiques uniques de JavaScript par rapport à Java ? Et de COBOL par rapport à Go ? + +## Quiz après la leçon +[Quiz après la leçon](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2) + +## Révision et auto-apprentissage + +Étudiez un peu les différents langages disponibles pour le programmeur. Essayez d'écrire une ligne dans un langage, puis réécrivez-la dans deux autres. Qu'avez-vous appris ? + +## Devoir + +[Lire la documentation](assignment.md) + +**Avertissement** : +Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction. \ No newline at end of file diff --git a/translations/fr/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/fr/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md new file mode 100644 index 00000000..ccc024e5 --- /dev/null +++ b/translations/fr/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md @@ -0,0 +1,23 @@ + +# Lire la documentation + +## Instructions + +Il existe de nombreux outils dont un développeur web peut avoir besoin, disponibles sur la [documentation MDN sur les outils côté client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils qui ne sont pas abordés dans la leçon, expliquez pourquoi un développeur web les utiliserait, et recherchez un outil qui appartient à cette catégorie en partageant sa documentation. Ne choisissez pas le même exemple d'outil mentionné dans la documentation MDN. + +## Grille d'évaluation + +Exemplaire | Adéquat | À améliorer +--- | --- | -- | +| Expliqué pourquoi un développeur web utiliserait l'outil | Expliqué comment, mais pas pourquoi un développeur utiliserait l'outil | N'a pas mentionné comment ou pourquoi un développeur utiliserait l'outil | + +**Avertissement** : +Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction. \ No newline at end of file diff --git a/translations/fr/1-getting-started-lessons/2-github-basics/README.md b/translations/fr/1-getting-started-lessons/2-github-basics/README.md new file mode 100644 index 00000000..d5b8c486 --- /dev/null +++ b/translations/fr/1-getting-started-lessons/2-github-basics/README.md @@ -0,0 +1,337 @@ + +# Introduction à GitHub + +Cette leçon couvre les bases de GitHub, une plateforme pour héberger et gérer les modifications de votre code. + +![Intro à GitHub](../../../../sketchnotes/webdev101-github.png) +> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pré-Leçon +[Quiz pré-leçon](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3) + +## Introduction + +Dans cette leçon, nous aborderons : + +- le suivi du travail effectué sur votre machine +- le travail sur des projets avec d'autres personnes +- comment contribuer aux logiciels open source + +### Prérequis + +Avant de commencer, vérifiez si Git est installé. Dans le terminal, tapez : +`git --version` + +Si Git n'est pas installé, [téléchargez Git](https://git-scm.com/downloads). Ensuite, configurez votre profil Git local dans le terminal : +* `git config --global user.name "votre-nom"` +* `git config --global user.email "votre-email"` + +Pour vérifier si Git est déjà configuré, vous pouvez taper : +`git config --list` + +Vous aurez également besoin d'un compte GitHub, d'un éditeur de code (comme Visual Studio Code) et d'ouvrir votre terminal (ou : invite de commande). + +Rendez-vous sur [github.com](https://github.com/) pour créer un compte si ce n'est pas déjà fait, ou connectez-vous et complétez votre profil. + +✅ GitHub n'est pas le seul dépôt de code au monde ; il en existe d'autres, mais GitHub est le plus connu. + +### Préparation + +Vous aurez besoin d'un dossier contenant un projet de code sur votre machine locale (ordinateur portable ou PC) et d'un dépôt public sur GitHub, qui servira d'exemple pour apprendre à contribuer aux projets des autres. + +--- + +## Gestion du code + +Supposons que vous avez un dossier localement avec un projet de code et que vous souhaitez commencer à suivre vos progrès en utilisant git - le système de contrôle de version. Certaines personnes comparent l'utilisation de git à l'écriture d'une lettre d'amour à votre futur vous-même. En lisant vos messages de commit des jours, semaines ou mois plus tard, vous pourrez vous rappeler pourquoi vous avez pris une décision ou "revenir en arrière" sur une modification - à condition d'écrire de bons "messages de commit". + +### Tâche : Créer un dépôt et commettre du code + +> Regardez la vidéo +> +> [![Vidéo sur les bases de Git et GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) + +1. **Créer un dépôt sur GitHub**. Sur GitHub.com, dans l'onglet des dépôts ou depuis la barre de navigation en haut à droite, trouvez le bouton **nouveau dépôt**. + + 1. Donnez un nom à votre dépôt (dossier). + 1. Sélectionnez **créer un dépôt**. + +1. **Naviguer vers votre dossier de travail**. Dans votre terminal, passez au dossier (également appelé répertoire) que vous souhaitez commencer à suivre. Tapez : + + ```bash + cd [name of your folder] + ``` + +1. **Initialiser un dépôt git**. Dans votre projet, tapez : + + ```bash + git init + ``` + +1. **Vérifier le statut**. Pour vérifier le statut de votre dépôt, tapez : + + ```bash + git status + ``` + + La sortie peut ressembler à ceci : + + ```output + Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git checkout -- ..." to discard changes in working directory) + + modified: file.txt + modified: file2.txt + ``` + + Typiquement, une commande `git status` vous indique des informations comme les fichiers prêts à être _enregistrés_ dans le dépôt ou ceux qui ont des modifications que vous pourriez vouloir conserver. + +1. **Ajouter tous les fichiers pour le suivi** + Cela s'appelle également mettre en scène les fichiers / ajouter des fichiers à la zone de staging. + + ```bash + git add . + ``` + + L'argument `git add` suivi de `.` indique que tous vos fichiers et modifications sont prêts pour le suivi. + +1. **Ajouter des fichiers sélectionnés pour le suivi** + + ```bash + git add [file or folder name] + ``` + + Cela permet d'ajouter uniquement des fichiers sélectionnés à la zone de staging lorsque vous ne souhaitez pas tout commettre en une seule fois. + +1. **Désépingler tous les fichiers** + + ```bash + git reset + ``` + + Cette commande permet de désépingler tous les fichiers en une seule fois. + +1. **Désépingler un fichier particulier** + + ```bash + git reset [file or folder name] + ``` + + Cette commande permet de désépingler uniquement un fichier particulier que vous ne souhaitez pas inclure dans le prochain commit. + +1. **Conserver votre travail**. À ce stade, vous avez ajouté les fichiers dans une zone appelée _staging area_. Un endroit où Git suit vos fichiers. Pour rendre la modification permanente, vous devez _commettre_ les fichiers. Pour ce faire, créez un _commit_ avec la commande `git commit`. Un _commit_ représente un point de sauvegarde dans l'historique de votre dépôt. Tapez la commande suivante pour créer un _commit_ : + + ```bash + git commit -m "first commit" + ``` + + Cela commet tous vos fichiers, en ajoutant le message "premier commit". Pour les futurs messages de commit, vous voudrez être plus descriptif pour indiquer le type de modification que vous avez apportée. + +1. **Connecter votre dépôt Git local à GitHub**. Un dépôt Git est utile sur votre machine, mais à un moment donné, vous voudrez sauvegarder vos fichiers quelque part et inviter d'autres personnes à travailler avec vous sur votre dépôt. Un excellent endroit pour cela est GitHub. Rappelez-vous que nous avons déjà créé un dépôt sur GitHub, donc la seule chose à faire est de connecter notre dépôt Git local à GitHub. La commande `git remote add` fera cela. Tapez la commande suivante : + + > Notez, avant de taper la commande, allez sur la page de votre dépôt GitHub pour trouver l'URL du dépôt. Vous l'utiliserez dans la commande ci-dessous. Remplacez ```https://github.com/username/repository_name.git``` par votre URL GitHub. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + Cela crée un _remote_, ou connexion, nommé "origin" pointant vers le dépôt GitHub que vous avez créé précédemment. + +1. **Envoyer les fichiers locaux à GitHub**. Jusqu'à présent, vous avez créé une _connexion_ entre le dépôt local et le dépôt GitHub. Envoyons ces fichiers à GitHub avec la commande suivante `git push`, comme suit : + + > Notez, le nom de votre branche peut être différent par défaut de ```main```. + + ```bash + git push -u origin main + ``` + + Cela envoie vos commits dans votre branche "main" à GitHub. + +2. **Ajouter d'autres modifications**. Si vous souhaitez continuer à apporter des modifications et les envoyer à GitHub, vous n'aurez besoin que des trois commandes suivantes : + + ```bash + git add . + git commit -m "type your commit message here" + git push + ``` + + > Astuce, vous pourriez également vouloir adopter un fichier `.gitignore` pour empêcher les fichiers que vous ne voulez pas suivre d'apparaître sur GitHub - comme ce fichier de notes que vous stockez dans le même dossier mais qui n'a pas sa place dans un dépôt public. Vous pouvez trouver des modèles pour les fichiers `.gitignore` sur [.gitignore templates](https://github.com/github/gitignore). + +#### Messages de commit + +Un excellent sujet de message de commit complète la phrase suivante : +Si appliqué, ce commit va + +Pour le sujet, utilisez l'impératif au présent : "modifier" et non "modifié" ni "modifie". +Comme pour le sujet, dans le corps (facultatif), utilisez également l'impératif au présent. Le corps doit inclure la motivation du changement et contraster cela avec le comportement précédent. Vous expliquez le `pourquoi`, pas le `comment`. + +✅ Prenez quelques minutes pour explorer GitHub. Pouvez-vous trouver un message de commit vraiment excellent ? Pouvez-vous en trouver un vraiment minimaliste ? Quelles informations pensez-vous être les plus importantes et utiles à transmettre dans un message de commit ? + +### Tâche : Collaborer + +La principale raison de mettre des choses sur GitHub était de rendre possible la collaboration avec d'autres développeurs. + +## Travailler sur des projets avec d'autres + +> Regardez la vidéo +> +> [![Vidéo sur les bases de Git et GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +Dans votre dépôt, naviguez vers `Insights > Community` pour voir comment votre projet se compare aux standards communautaires recommandés. + +Voici quelques éléments qui peuvent améliorer votre dépôt GitHub : +- **Description**. Avez-vous ajouté une description pour votre projet ? +- **README**. Avez-vous ajouté un README ? GitHub fournit des conseils pour rédiger un [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon). +- **Lignes directrices pour contribuer**. Votre projet a-t-il des [lignes directrices pour contribuer](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon) ? +- **Code de conduite**. Un [Code de conduite](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/) ? +- **Licence**. Peut-être le plus important, une [licence](https://docs.github.com/articles/adding-a-license-to-a-repository/) ? + +Toutes ces ressources faciliteront l'intégration de nouveaux membres dans l'équipe. Et ce sont généralement les choses que les nouveaux contributeurs regardent avant même de consulter votre code, pour savoir si votre projet est le bon endroit où investir leur temps. + +✅ Les fichiers README, bien qu'ils prennent du temps à préparer, sont souvent négligés par les mainteneurs occupés. Pouvez-vous trouver un exemple particulièrement descriptif ? Note : il existe des [outils pour aider à créer de bons README](https://www.makeareadme.com/) que vous pourriez essayer. + +### Tâche : Fusionner du code + +Les documents de contribution aident les gens à contribuer au projet. Ils expliquent quels types de contributions vous recherchez et comment le processus fonctionne. Les contributeurs devront suivre une série d'étapes pour pouvoir contribuer à votre dépôt sur GitHub : + +1. **Forker votre dépôt**. Vous voudrez probablement que les gens _forkent_ votre projet. Forker signifie créer une réplique de votre dépôt sur leur profil GitHub. +1. **Cloner**. À partir de là, ils cloneront le projet sur leur machine locale. +1. **Créer une branche**. Vous voudrez leur demander de créer une _branche_ pour leur travail. +1. **Concentrer leur modification sur une seule zone**. Demandez aux contributeurs de concentrer leurs contributions sur une seule chose à la fois - de cette façon, les chances que vous puissiez _fusionner_ leur travail sont plus élevées. Imaginez qu'ils corrigent un bug, ajoutent une nouvelle fonctionnalité et mettent à jour plusieurs tests - que faire si vous voulez, ou ne pouvez implémenter que 2 sur 3, ou 1 sur 3 modifications ? + +✅ Imaginez une situation où les branches sont particulièrement critiques pour écrire et livrer du bon code. À quels cas d'utilisation pouvez-vous penser ? + +> Note, soyez le changement que vous voulez voir dans le monde, et créez des branches pour votre propre travail également. Tous les commits que vous faites seront effectués sur la branche sur laquelle vous êtes actuellement "checkout". Utilisez `git status` pour voir sur quelle branche vous êtes. + +Passons en revue un flux de travail de contributeur. Supposons que le contributeur a déjà _forké_ et _cloné_ le dépôt afin qu'il ait un dépôt Git prêt à être travaillé sur sa machine locale : + +1. **Créer une branche**. Utilisez la commande `git branch` pour créer une branche qui contiendra les modifications qu'ils souhaitent contribuer : + + ```bash + git branch [branch-name] + ``` + +1. **Passer à la branche de travail**. Passez à la branche spécifiée et mettez à jour le répertoire de travail avec `git switch` : + + ```bash + git switch [branch-name] + ``` + +1. **Travailler**. À ce stade, vous voulez ajouter vos modifications. N'oubliez pas d'en informer Git avec les commandes suivantes : + + ```bash + git add . + git commit -m "my changes" + ``` + + Assurez-vous de donner un bon nom à votre commit, pour votre bien ainsi que pour le mainteneur du dépôt que vous aidez. + +1. **Combiner votre travail avec la branche `main`**. À un moment donné, vous avez terminé de travailler et vous voulez combiner votre travail avec celui de la branche `main`. La branche `main` a peut-être changé entre-temps, alors assurez-vous de la mettre d'abord à jour avec les commandes suivantes : + + ```bash + git switch main + git pull + ``` + + À ce stade, vous voulez vous assurer que tous les _conflits_, situations où Git ne peut pas facilement _combiner_ les modifications, se produisent dans votre branche de travail. Par conséquent, exécutez les commandes suivantes : + + ```bash + git switch [branch_name] + git merge main + ``` + + Cela intégrera toutes les modifications de `main` dans votre branche et, espérons-le, vous pourrez simplement continuer. Sinon, VS Code vous indiquera où Git est _confus_ et vous modifierez les fichiers concernés pour indiquer quel contenu est le plus précis. + +1. **Envoyer votre travail à GitHub**. Envoyer votre travail à GitHub signifie deux choses : pousser votre branche vers votre dépôt et ensuite ouvrir une PR (Pull Request). + + ```bash + git push --set-upstream origin [branch-name] + ``` + + La commande ci-dessus crée la branche sur votre dépôt forké. + +1. **Ouvrir une PR**. Ensuite, vous voulez ouvrir une PR. Pour ce faire, naviguez vers le dépôt forké sur GitHub. Vous verrez une indication sur GitHub vous demandant si vous souhaitez créer une nouvelle PR, cliquez dessus et vous serez dirigé vers une interface où vous pourrez modifier le titre du message de commit, lui donner une description plus appropriée. Maintenant, le mainteneur du dépôt que vous avez forké verra cette PR et _croisons les doigts_ il appréciera et _fusionnera_ votre PR. Vous êtes maintenant un contributeur, yay :) + +1. **Nettoyer**. Il est considéré comme une bonne pratique de _nettoyer_ après avoir fusionné avec succès une PR. Vous voulez nettoyer à la fois votre branche locale et la branche que vous avez poussée sur GitHub. Supprimons-la d'abord localement avec la commande suivante : + + ```bash + git branch -d [branch-name] + ``` +Assurez-vous d'aller sur la page GitHub du dépôt forké ensuite et de supprimer la branche distante que vous venez d'y pousser. + +`Pull request` semble être un terme étrange, car en réalité, vous voulez pousser vos modifications au projet. Mais le mainteneur (propriétaire du projet) ou l'équipe principale doit examiner vos modifications avant de les fusionner avec la branche "main" du projet. Vous demandez donc une décision de modification à un mainteneur. + +Une pull request est l'endroit où comparer et discuter des différences introduites sur une branche avec des revues, des commentaires, des tests intégrés, et plus encore. Une bonne pull request suit à peu près les mêmes règles qu'un message de commit. Vous pouvez ajouter une référence à un problème dans le gestionnaire de problèmes, par exemple lorsque votre travail corrige un problème. Cela se fait en utilisant un `#` suivi du numéro de votre problème. Par exemple `#97`. + +🤞Croisons les doigts pour que tous les contrôles passent et que le(s) propriétaire(s) du projet fusionne(nt) vos modifications dans le projet🤞 + +Mettez à jour votre branche de travail locale actuelle avec tous les nouveaux commits de la branche distante correspondante sur GitHub : + +`git pull` + +## Comment contribuer à l'open source + +Tout d'abord, trouvons un dépôt (ou **repo**) sur GitHub qui vous intéresse et auquel vous souhaitez apporter une modification. Vous voudrez copier son contenu sur votre machine. + +✅ Une bonne façon de trouver des dépôts adaptés aux débutants est de [rechercher par le tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Copier un dépôt localement](../../../../1-getting-started-lessons/2-github-basics/images/clone_repo.png) + +Il existe plusieurs façons de copier du code. Une méthode consiste à "cloner" le contenu du dépôt, en utilisant HTTPS, SSH, ou en utilisant l'interface en ligne de commande GitHub CLI. + +Ouvrez votre terminal et clonez le dépôt comme ceci : +`git clone https://github.com/ProjectURL` + +Pour travailler sur le projet, passez au bon dossier : +`cd ProjectURL` + +Vous pouvez également ouvrir l'ensemble du projet en utilisant [Codespaces](https://github.com/features/codespaces), l'éditeur de code intégré / environnement de développement cloud de GitHub, ou [GitHub Desktop](https://desktop.github.com/). + +Enfin, vous pouvez télécharger le code dans un dossier compressé. + +### Quelques informations intéressantes sur GitHub + +Vous pouvez étoiler, surveiller et/ou "forker" tout dépôt public sur GitHub. Vous pouvez retrouver vos dépôts étoilés dans le menu déroulant en haut à droite. C'est comme ajouter un favori, mais pour du code. + +Les projets ont un gestionnaire de problèmes, généralement sur GitHub dans l'onglet "Issues" sauf indication contraire, où les gens discutent des problèmes liés au projet. Et l'onglet Pull Requests est l'endroit où les gens discutent et examinent les modifications en cours. + +Les projets peuvent également avoir des discussions dans des forums, des listes de diffusion ou des canaux de chat comme Slack, Discord ou IRC. + +✅ Explorez votre nouveau dépôt GitHub et essayez quelques fonctionnalités, comme modifier les paramètres, ajouter des informations à votre dépôt, et créer un projet (comme un tableau Kanban). Il y a beaucoup à découvrir ! + +--- + +## 🚀 Défi + +Associez-vous à un ami pour travailler sur le code de chacun. Créez un projet collaboratif, forkez du code, créez des branches, et fusionnez des modifications. + +## Quiz post-lecture +[Quiz post-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4) + +## Révision & Auto-apprentissage + +Lisez davantage sur [comment contribuer à un logiciel open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Cheatsheet Git](https://training.github.com/downloads/github-git-cheat-sheet/). + +Pratiquez, pratiquez, pratiquez. GitHub propose d'excellents parcours d'apprentissage via [skills.github.com](https://skills.github.com) : + +- [Première semaine sur GitHub](https://skills.github.com/#first-week-on-github) + +Vous trouverez également des cours plus avancés. + +## Devoir + +Complétez [le cours Première semaine sur GitHub](https://skills.github.com/#first-week-on-github). + +**Avertissement** : +Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction. \ No newline at end of file diff --git a/translations/fr/1-getting-started-lessons/3-accessibility/README.md b/translations/fr/1-getting-started-lessons/3-accessibility/README.md new file mode 100644 index 00000000..1fedb624 --- /dev/null +++ b/translations/fr/1-getting-started-lessons/3-accessibility/README.md @@ -0,0 +1,242 @@ + +# Créer des pages web accessibles + +![Tout sur l'accessibilité](../../../../sketchnotes/webdev101-a11y.png) +> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz avant le cours +[Quiz avant le cours](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5) + +> La puissance du Web réside dans son universalité. L'accès pour tous, indépendamment des handicaps, est un aspect essentiel. +> +> \- Sir Timothy Berners-Lee, directeur du W3C et inventeur du World Wide Web + +Cette citation illustre parfaitement l'importance de créer des sites web accessibles. Une application qui ne peut pas être utilisée par tous est, par définition, exclusive. En tant que développeurs web, nous devons toujours garder l'accessibilité à l'esprit. En adoptant cette approche dès le début, vous serez bien préparé pour garantir que tout le monde puisse accéder aux pages que vous créez. Dans cette leçon, vous apprendrez à utiliser des outils pour garantir l'accessibilité de vos ressources web et à concevoir en tenant compte de l'accessibilité. + +> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) ! + +## Outils à utiliser + +### Lecteurs d'écran + +Les lecteurs d'écran sont parmi les outils d'accessibilité les plus connus. + +[Les lecteurs d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran) sont des outils couramment utilisés par les personnes ayant des déficiences visuelles. Tout comme nous nous assurons qu'un navigateur transmet correctement les informations que nous souhaitons partager, nous devons également veiller à ce qu'un lecteur d'écran fasse de même. + +Dans sa forme la plus basique, un lecteur d'écran lit une page de haut en bas de manière audible. Si votre page est entièrement composée de texte, le lecteur transmettra les informations de manière similaire à un navigateur. Bien sûr, les pages web ne sont que rarement composées uniquement de texte ; elles contiennent des liens, des images, des couleurs et d'autres éléments visuels. Il est donc essentiel de s'assurer que ces informations sont correctement interprétées par un lecteur d'écran. + +Chaque développeur web devrait se familiariser avec un lecteur d'écran. Comme mentionné précédemment, c'est l'outil que vos utilisateurs utiliseront. De la même manière que vous connaissez le fonctionnement d'un navigateur, vous devriez apprendre à utiliser un lecteur d'écran. Heureusement, la plupart des systèmes d'exploitation intègrent des lecteurs d'écran. + +Certains navigateurs disposent également d'outils intégrés et d'extensions capables de lire le texte à haute voix ou de fournir des fonctionnalités de navigation de base, comme [ces outils d'accessibilité pour le navigateur Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Bien qu'importants, ces outils fonctionnent différemment des lecteurs d'écran et ne doivent pas être confondus avec des outils de test pour lecteurs d'écran. + +✅ Essayez un lecteur d'écran et un outil de lecture de texte dans un navigateur. Sous Windows, [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) est inclus par défaut, et [JAWS](https://webaim.org/articles/jaws/) et [NVDA](https://www.nvaccess.org/about-nvda/) peuvent également être installés. Sous macOS et iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) est installé par défaut. + +### Zoom + +Un autre outil couramment utilisé par les personnes ayant des déficiences visuelles est le zoom. Le type de zoom le plus basique est le zoom statique, contrôlé via `Control + signe plus (+)` ou en diminuant la résolution de l'écran. Ce type de zoom redimensionne l'ensemble de la page, il est donc important d'utiliser un [design responsive](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) pour offrir une bonne expérience utilisateur à des niveaux de zoom élevés. + +Un autre type de zoom repose sur des logiciels spécialisés qui agrandissent une zone spécifique de l'écran et permettent de se déplacer, un peu comme avec une loupe. Sous Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) est intégré, et [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) est un logiciel tiers de grossissement avec plus de fonctionnalités et une base d'utilisateurs plus large. macOS et iOS disposent également d'un logiciel de grossissement intégré appelé [Zoom](https://www.apple.com/accessibility/mac/vision/). + +### Vérificateurs de contraste + +Les couleurs des sites web doivent être soigneusement choisies pour répondre aux besoins des utilisateurs daltoniens ou de ceux ayant des difficultés à percevoir les couleurs à faible contraste. + +✅ Testez un site web que vous aimez avec une extension de navigateur comme [le vérificateur de contraste WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Qu'avez-vous appris ? + +### Lighthouse + +Dans la section des outils de développement de votre navigateur, vous trouverez l'outil Lighthouse. Cet outil est important pour obtenir une première analyse de l'accessibilité (ainsi que d'autres aspects) d'un site web. Bien qu'il ne faille pas se fier exclusivement à Lighthouse, un score de 100 % est un bon point de départ. + +✅ Trouvez Lighthouse dans le panneau des outils de développement de votre navigateur et analysez un site. Qu'avez-vous découvert ? + +## Concevoir pour l'accessibilité + +L'accessibilité est un sujet relativement vaste. Pour vous aider, de nombreuses ressources sont disponibles. + +- [Accessible U - Université du Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +Bien que nous ne puissions pas couvrir tous les aspects de la création de sites accessibles, voici quelques principes de base que vous voudrez mettre en œuvre. Concevoir une page accessible dès le départ est **toujours** plus facile que de revenir sur une page existante pour la rendre accessible. + +## Bonnes pratiques d'affichage + +### Palettes de couleurs sûres + +Les gens perçoivent le monde différemment, y compris les couleurs. Lorsque vous choisissez un schéma de couleurs pour votre site, assurez-vous qu'il soit accessible à tous. Un excellent [outil pour générer des palettes de couleurs est Color Safe](http://colorsafe.co/). + +✅ Identifiez un site web qui pose problème dans son utilisation des couleurs. Pourquoi ? + +### Utilisez le bon HTML + +Avec CSS et JavaScript, il est possible de faire ressembler n'importe quel élément à n'importe quel type de contrôle. `` pourrait être utilisé pour créer un `