diff --git a/.github/ISSUE_TEMPLATE/translations_checklist.md b/.github/ISSUE_TEMPLATE/translations_checklist.md new file mode 100644 index 00000000..ddd098e3 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/translations_checklist.md @@ -0,0 +1,70 @@ +--- +name: Translations Checklist +about: These are all the files that need to be translated +title: "[TRANSLATIONS]" +labels: translations +assignees: '' + +--- + +- [ ] Base README.md +- [ ] for-teachers.md +- [ ] Quizzes +- [ ] 1-getting-started-lessons base README + - [ ] intro-to-programming-languages README + - [ ] intro-to-programming-languages assignment + - [ ] github-basics README + - [ ] accessibility README + - [ ] accessibility assignment +- [ ] 2-js-basics base README + - [ ] data-types README + - [ ] data-types assignment + - [ ] functions-methods README + - [ ] functions-methods assignment + - [ ] making-decisions README + - [ ] making-decisions assignment + - [ ] arrays-loops README + - [ ] arrays-loops assignment +- [ ] 3-terrarium base README + - [ ] intro-to-html README + - [ ] intro-to-html assignment + - [ ] intro-to-css README + - [ ] intro-to-css assignment + - [ ] intro-to-DOM-and-closures README + - [ ] intro-to-DOM-and-closures assignment + - [ ] solution base README +- [ ] 4-typing-game base README + - [ ] typing-game README + - [ ] typing-game assignment +- [ ] 5-browser-extension base README + - [ ] about-browsers README + - [ ] about-browsers assignment + - [ ] forms-browsers-local-storage README + - [ ] forms-browsers-local-storage assignment + - [ ] background-tasks-and-performance README + - [ ] background-tasks-and-performance assignment + - [ ] solution base README + - [ ] start base README +- [ ] 6-space-game base README + - [ ] introduction README + - [ ] introduction assignment + - [ ] drawing-to-canvas README + - [ ] drawing-to-canvas assignment + - [ ] moving-elements-around README + - [ ] moving-elements-around assignment + - [ ] collision-detection README + - [ ] collision-detection assignment + - [ ] keeping-score README + - [ ] keeping-score assignment + - [ ] end-condition README + - [ ] end-condition assignment +- [ ] 7-bank-project base README + - [ ] template-route README + - [ ] template-route assignment + - [ ] forms README + - [ ] forms assignment + - [ ] data README + - [ ] data assignment + - [ ] state-management README + - [ ] state-management assignment + - [ ] solution base README diff --git a/.github/PULL_REQUEST_TEMPLATE/translation_checklist.md b/.github/PULL_REQUEST_TEMPLATE/translation_checklist.md index 2cd8d256..458020f1 100644 --- a/.github/PULL_REQUEST_TEMPLATE/translation_checklist.md +++ b/.github/PULL_REQUEST_TEMPLATE/translation_checklist.md @@ -7,6 +7,7 @@ Each lesson includes a translation of the README.md and the Assignment.md file, - [ ] 1-2 - [ ] 1-3 - [ ] 2 +- [ ] 2 - [ ] 2-1 - [ ] 2-2 - [ ] 2-3 diff --git a/.github/PULL_REQUEST_TEMPLATE/translation_checklist.pt.md b/.github/PULL_REQUEST_TEMPLATE/translation_checklist.pt.md new file mode 100644 index 00000000..812fcc1a --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE/translation_checklist.pt.md @@ -0,0 +1,38 @@ +## Track translation progress by opening a draft PR using this template and checking off the translations completed + +Each lesson includes a translation of the README.md and the Assignment.md file, if available. Only mark the lesson complete if both those files are translated per lesson, please. + +- [ x ] 1 +- [ x ] 1-1 +- [ x ] 1-2 +- [ x ] 1-3 +- [ ] 2 +- [ ] 2 +- [ ] 2-1 +- [ ] 2-2 +- [ ] 2-3 +- [ ] 2-4 +- [ ] 3 +- [ ] 3-1 +- [ ] 3-2 +- [ ] 3-3 +- [ ] 4 +- [ ] 4-1 +- [ ] 5 +- [ ] 5-1 +- [ ] 5-2 +- [ ] 5-3 +- [ ] 6 +- [ ] 6-1 +- [ ] 6-2 +- [ ] 6-3 +- [ ] 6-4 +- [ ] 6-5 +- [ ] 6-6 +- [ ] 7 +- [ ] 7-1 +- [ ] 7-2 +- [ ] 7-3 +- [ ] 7-4 + +- [ ] Quiz (add a file in the quiz-app with all localizations) diff --git a/.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml b/.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml index 8f48b5eb..c379b4e5 100644 --- a/.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml +++ b/.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml @@ -4,10 +4,10 @@ on: push: branches: - main - pull_request: - types: [opened, synchronize, reopened, closed] - branches: - - main +# pull_request: +# types: [opened, synchronize, reopened, closed] +# branches: +# - main jobs: build_and_deploy_job: diff --git a/.gitignore b/.gitignore index 9bb88d37..0a9b4b47 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,357 @@ -/.DS_Store +## Ignore Visual Studio temporary files, build results, and +## files generated by popular Visual Studio add-ons. +## +## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore + +# User-specific files +*.rsuser +*.suo +*.user +*.userosscache +*.sln.docstates + +# User-specific files (MonoDevelop/Xamarin Studio) +*.userprefs + +# Mono auto generated files +mono_crash.* + +# Build results +[Dd]ebug/ +[Dd]ebugPublic/ +[Rr]elease/ +[Rr]eleases/ +x64/ +x86/ +[Aa][Rr][Mm]/ +[Aa][Rr][Mm]64/ +bld/ +[Bb]in/ +[Oo]bj/ +[Ll]og/ +[Ll]ogs/ + +# Visual Studio 2015/2017 cache/options directory +.vs/ +# Visual Studio Code cache/options directory +.vscode/ +# Uncomment if you have tasks that create the project's static files in wwwroot +#wwwroot/ + +dist/ + +# Visual Studio 2017 auto generated files +Generated\ Files/ + +# MSTest test Results +[Tt]est[Rr]esult*/ +[Bb]uild[Ll]og.* + +# NUnit +*.VisualState.xml +TestResult.xml +nunit-*.xml + +# Build Results of an ATL Project +[Dd]ebugPS/ +[Rr]eleasePS/ +dlldata.c + +# Benchmark Results +BenchmarkDotNet.Artifacts/ + +# .NET Core +project.lock.json +project.fragment.lock.json +artifacts/ + +# StyleCop +StyleCopReport.xml + +# Files built by Visual Studio +*_i.c +*_p.c +*_h.h +*.ilk +*.meta +*.obj +*.iobj +*.pch +*.pdb +*.ipdb +*.pgc +*.pgd +*.rsp +*.sbr +*.tlb +*.tli +*.tlh +*.tmp +*.tmp_proj +*_wpftmp.csproj +*.log +*.vspscc +*.vssscc +.builds +*.pidb +*.svclog +*.scc + +# Chutzpah Test files +_Chutzpah* + +# Visual C++ cache files +ipch/ +*.aps +*.ncb +*.opendb +*.opensdf +*.sdf +*.cachefile +*.VC.db +*.VC.VC.opendb + +# Visual Studio profiler +*.psess +*.vsp +*.vspx +*.sap + +# Visual Studio Trace Files +*.e2e + +# TFS 2012 Local Workspace +$tf/ + +# Guidance Automation Toolkit +*.gpState + +# ReSharper is a .NET coding add-in +_ReSharper*/ +*.[Rr]e[Ss]harper +*.DotSettings.user + +# TeamCity is a build add-in +_TeamCity* + +# DotCover is a Code Coverage Tool +*.dotCover + +# AxoCover is a Code Coverage Tool +.axoCover/* +!.axoCover/settings.json + +# Visual Studio code coverage results +*.coverage +*.coveragexml + +# NCrunch +_NCrunch_* +.*crunch*.local.xml +nCrunchTemp_* + +# MightyMoose +*.mm.* +AutoTest.Net/ + +# Web workbench (sass) +.sass-cache/ + +# Installshield output folder +[Ee]xpress/ + +# DocProject is a documentation generator add-in +DocProject/buildhelp/ +DocProject/Help/*.HxT +DocProject/Help/*.HxC +DocProject/Help/*.hhc +DocProject/Help/*.hhk +DocProject/Help/*.hhp +DocProject/Help/Html2 +DocProject/Help/html + +# Click-Once directory +publish/ + +# Publish Web Output +*.[Pp]ublish.xml +*.azurePubxml +# Note: Comment the next line if you want to checkin your web deploy settings, +# but database connection strings (with potential passwords) will be unencrypted +*.pubxml +*.publishproj + +# Microsoft Azure Web App publish settings. Comment the next line if you want to +# checkin your Azure Web App publish settings, but sensitive information contained +# in these scripts will be unencrypted +PublishScripts/ + +# NuGet Packages +*.nupkg +# NuGet Symbol Packages +*.snupkg +# The packages folder can be ignored because of Package Restore +**/[Pp]ackages/* +# except build/, which is used as an MSBuild target. +!**/[Pp]ackages/build/ +# Uncomment if necessary however generally it will be regenerated when needed +#!**/[Pp]ackages/repositories.config +# NuGet v3's project.json files produces more ignorable files +*.nuget.props +*.nuget.targets + +# Microsoft Azure Build Output +csx/ +*.build.csdef + +# Microsoft Azure Emulator +ecf/ +rcf/ + +# Windows Store app package directories and files +AppPackages/ +BundleArtifacts/ +Package.StoreAssociation.xml +_pkginfo.txt +*.appx +*.appxbundle +*.appxupload + +# Visual Studio cache files +# files ending in .cache can be ignored +*.[Cc]ache +# but keep track of directories ending in .cache +!?*.[Cc]ache/ + +# Others +ClientBin/ +~$* +*~ +*.dbmdl +*.dbproj.schemaview +*.jfm +*.pfx +*.publishsettings +orleans.codegen.cs + +# Including strong name files can present a security risk +# (https://github.com/github/gitignore/pull/2483#issue-259490424) +#*.snk + +# Since there are multiple workflows, uncomment next line to ignore bower_components +# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) +#bower_components/ + +# RIA/Silverlight projects +Generated_Code/ + +# Backup & report files from converting an old project file +# to a newer Visual Studio version. Backup files are not needed, +# because we have git ;-) +_UpgradeReport_Files/ +Backup*/ +UpgradeLog*.XML +UpgradeLog*.htm +ServiceFabricBackup/ +*.rptproj.bak + +# SQL Server files +*.mdf +*.ldf +*.ndf + +# Business Intelligence projects +*.rdl.data +*.bim.layout +*.bim_*.settings +*.rptproj.rsuser +*- [Bb]ackup.rdl +*- [Bb]ackup ([0-9]).rdl +*- [Bb]ackup ([0-9][0-9]).rdl + +# Microsoft Fakes +FakesAssemblies/ + +# GhostDoc plugin setting file +*.GhostDoc.xml + +# Node.js Tools for Visual Studio +.ntvs_analysis.dat +node_modules/ + +# Visual Studio 6 build log +*.plg + +# Visual Studio 6 workspace options file +*.opt + +# Visual Studio 6 auto-generated workspace file (contains which files were open etc.) +*.vbw + +# Visual Studio LightSwitch build output +**/*.HTMLClient/GeneratedArtifacts +**/*.DesktopClient/GeneratedArtifacts +**/*.DesktopClient/ModelManifest.xml +**/*.Server/GeneratedArtifacts +**/*.Server/ModelManifest.xml +_Pvt_Extensions + +# Paket dependency manager +.paket/paket.exe +paket-files/ + +# FAKE - F# Make +.fake/ + +# CodeRush personal settings +.cr/personal + +# Python Tools for Visual Studio (PTVS) +__pycache__/ +*.pyc + +# Cake - Uncomment if you are using it +# tools/** +# !tools/packages.config + +# Tabs Studio +*.tss + +# Telerik's JustMock configuration file +*.jmconfig + +# BizTalk build output +*.btp.cs +*.btm.cs +*.odx.cs +*.xsd.cs + +# OpenCover UI analysis results +OpenCover/ + +# Azure Stream Analytics local run output +ASALocalRun/ + +# MSBuild Binary and Structured Log +*.binlog + +# NVidia Nsight GPU debugger configuration file +*.nvuser + +# MFractors (Xamarin productivity tool) working folder +.mfractor/ + +# Local History for Visual Studio +.localhistory/ + +# BeatPulse healthcheck temp database +healthchecksdb + +# Backup folder for Package Reference Convert tool in Visual Studio 2017 +MigrationBackup/ + +# Ionide (cross platform F# VS Code tools) working folder +.ionide/ + +# Mac-specific +.DS_Store \ No newline at end of file diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 1742fe2e..4fa109b5 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -92,6 +92,8 @@ There's a chance that some statements will not be executed by a device. This is [![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") +> 🎥 Click the image above for a video about tooling + In this section, you'll learn about some software that you might find very useful as you start your professional development journey. A **development environment** is a unique set of tools and features that a developer will use often when writing software. Some of these tools have been customized for a developer specific needs, and may change over time if a developer changes priorities in work or personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them. @@ -156,7 +158,7 @@ Options for the command line will differ based on the operating system you use. #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### Popular Command Line Tools @@ -171,8 +173,10 @@ When a developer wants to learn something new, they'll most likely turn to docum #### Popular Documentation on Web Development -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, the publishers of the [Firefox](https://www.mozilla.org/firefox/) browser - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), from Google, publishers of [Chrome](https://www.google.com/chrome/) +- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), for [Microsoft Edge](https://www.microsoft.com/edge) ✅ Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment. diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md index e613f7b4..9b5d3aca 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md @@ -156,7 +156,7 @@ Las opciones para la línea de comando varian según el sistema operativo que ut #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### Línea de comandos (CLI) Populares @@ -171,8 +171,10 @@ Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recu #### Documentación popular sobre desarrollo de web -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de Mozilla, editores de [Firefox](https://www.mozilla.org/firefox/) - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), de Google, editores de [Chrome](https://www.google.com/chrome/) +- [Documentos para desarrolladores propios de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para [Microsoft Edge](https://www.microsoft.com/edge) ✅ Investiga un poco: ahora que conoces los conceptos básicos del entorno de un desarrollador web, compáralo y contrasta con el entorno de un diseñador web. diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md index f04fed52..887f4b18 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md @@ -5,8 +5,8 @@ Cette leçon couvre les bases des langages de programmation. Les sujets abordés ![Intro Programming](/sketchnotes/webdev101-programming.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) -## Pre-Lecture Quiz -[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) +## Quiz préalable +[Quiz préalable](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=fr) ## introduction @@ -19,7 +19,7 @@ Dans cette leçon, nous aborderons: ## Qu'est-ce que la programmation? -Pla programmation (également appelée codage) est le processus d'écriture d'instructions sur 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 désignés sous différents noms, mais *programme*, *programme informatique*, *application (application)* et *exécutable* sont quelques noms courants. +La programmation (également appelée codage) est le processus d'écriture d'instructions sur 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 désignés sous différents noms, mais *programme*, *programme informatique*, *application (application)* et *exécutable* sont quelques noms courants. Un *programme* peut être tout ce qui est écrit avec du code; les sites Web, les jeux et les applications téléphoniques sont des programmes. Bien qu'il soit possible de créer un programme sans écrire de code, la logique sous-jacente est interprétée sur le périphérique et cette logique a probablement été écrite avec du code. Un programme qui *exécute* ou *exécute du code* exécute des instructions. L'appareil avec lequel vous lisez actuellement cette leçon exécute un programme pour l'imprimer sur votre écran. @@ -72,9 +72,9 @@ back add r0,r1 end ``` -Croyez-le ou non, *they're both doing the same thing*: impression d'une séquence de Fibonacci jusqu'à 10. +Croyez-le ou non, *ils font tous les deux la même chose*: l'affichage d'une séquence de Fibonacci jusqu'à 10. -✅ Une séquence de Fibonacci est [defined](https://en.wikipedia.org/wiki/Fibonacci_number) comme un ensemble de nombres tels que chaque nombre est la somme des deux précédents, à partir de 0 et 1. +✅ Une séquence de Fibonacci est [définie](https://en.wikipedia.org/wiki/Fibonacci_number) comme un ensemble de nombres tels que chaque nombre est la somme des deux précédents, à partir de 0 et 1. ## Éléments d'un programme @@ -140,8 +140,8 @@ Les options de la ligne de commande varient en fonction du système d'exploitati #### Windows - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻 -- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻 -- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa) +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (appellé également CMD) 💻 +- [Terminal Windows](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa) - [mintty](https://mintty.github.io/) #### MacOS @@ -153,12 +153,12 @@ Les options de la ligne de commande varient en fonction du système d'exploitati #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### Popular Command Line Tools -- [Git](https://git-scm.com/) (💻 on most operating sytems) +- [Git](https://git-scm.com/) (💻 sur la plupart des SE) - [NPM](https://www.npmjs.com/) - [Yarn](https://classic.yarnpkg.com/en/docs/cli/) @@ -168,8 +168,10 @@ Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tourne #### Documentation populaire sur le développement Web -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de Mozilla, éditeurs de [Firefox](https://www.mozilla.org/firefox/) - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), de Google, éditeurs de [Chrome](https://www.google.com/chrome/) +- [Documents de développeur de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), pour [Microsoft Edge](https://www.microsoft.com/edge) ✅ Faites des recherches: maintenant que vous connaissez les bases de l'environnement d'un développeur Web, comparez-le et comparez-le à l'environnement d'un concepteur Web. @@ -179,13 +181,13 @@ Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tourne Comparez quelques langages de programmation. Quelles sont certaines des caractéristiques uniques de JavaScript par rapport à Java? Et COBOL vs Go? -## Quiz post-conférence -[Quiz post-conférence](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) +## Quiz de validation des connaissances +[Quiz de validation des connaissances](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=fr) -## Révision et auto-étude +## Révision et auto-apprentissage Étudiez un peu les différentes langues disponibles pour le programmeur. Essayez d'écrire une ligne dans une langue, puis refaites-la dans deux autres. Qu'apprenez-vous? -## Affectation +## Consigne [Lire la documentation](assignment.fr.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.gr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.gr.md index 4c924dca..d93995ad 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.gr.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.gr.md @@ -154,7 +154,7 @@ back add r0,r1 #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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) #### Δημοφιλή εργαλεία γραμμής εντολών @@ -169,8 +169,10 @@ back add r0,r1 #### Δημοφιλή documentation για την ανάπτυξη Ιστού(Web Development) -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), από τη Μοζίλα, εκδότες του [Firefox](https://www.mozilla.org/firefox/) - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), από την Google, εκδότες του [Chrome](https://www.google.com/chrome/) +- [Τα έγγραφα προγραμματιστών της Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), Για τον [Microsoft Edge](https://www.microsoft.com/edge) ✅ Κάντε λίγη έρευνα: Τώρα που γνωρίζετε τα βασικά για το περιβάλλον ενός προγραμματιστή ιστού(Web Developer), συγκρίνετέ το και βρείτε τις διαφορές με το περιβάλλον ενός σχεδιαστή ιστού(Web Designer). diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md index c637c1c8..1b4ebb7c 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md @@ -154,7 +154,7 @@ back add r0,r1 #### लिनक्स - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### लोकप्रिय कमांड लाइन टूल्स @@ -169,10 +169,12 @@ back add r0,r1 #### वेब विकास पर लोकप्रिय प्रलेखन -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla से, [Firefox](https://www.mozilla.org/firefox/) के प्रकाशक - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), Google की ओर से, [Chrome](https://www.google.com/chrome/) के प्रकाशक +- [Microsoft के अपने डेवलपर दस्तावेज़](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), के लिए [Microsoft Edge](https://www.microsoft.com/edge) -✅ कुछ शोध करें: अब जब आप एक वेब डेवलपर के वातावरण की मूल बातें जानते हैं, तो इसकी तुलना करें और वेब डिजाइनर के वातावरण के साथ इसके विपरीत करें। +✅ कुछ शोध करें: अब जब आप वेब डेवलपर के परिवेश की मूल बातें जानते हैं, तो इसकी तुलना वेब डिज़ाइनर के परिवेश से करें। --- diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md index c84fcc25..bae7d245 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md @@ -155,7 +155,7 @@ Pilihan untuk command line akan berbeda berdasarkan sistem operasi yang Anda gun #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### Alat Command Line Populer @@ -170,8 +170,11 @@ Ketika pengembang ingin mempelajari sesuatu yang baru, mereka kemungkinan besar #### Dokumentasi Populer tentang Pengembangan Web -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web) dari Mozilla, penerbit [Firefox](https://www.mozilla.org/firefox/) - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), dari Google, penerbit [Chrome](https://www.google.com/chrome/) +- [Dokumen pengembang Microsoft sendiri](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), untuk [Microsoft Edge](https://www.microsoft.com/edge) + ✅ Lakukan riset: Sekarang Anda tahu dasar-dasar lingkungan pengembang web, bandingkan dan kontras dengan lingkungan desainer web. --- diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md index ebceea1b..f6309b69 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md @@ -154,7 +154,7 @@ Le alternative per la riga di comando differiriscono in base al sistema operativ #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### Popolari Strumenti da Riga di Comando @@ -169,8 +169,10 @@ Quando uno sviluppatore vuole imparare qualcosa di nuovo, per la maggior parte d #### Popolari Documentazioni sullo Sviluppo Web -- [Mozilla sviluppatore Network](https://sviluppatore.mozilla.org/docs/Web) +- [Mozilla sviluppatore Network (MDN)](https://sviluppatore.mozilla.org/docs/Web), di Mozilla, editori di [Firefox](https://www.mozilla.org/firefox/) - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), di Google, editori di [Chrome](https://www.google.com/chrome/) +- [Documenti per sviluppatori di Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), per [Microsoft Edge](https://www.microsoft.com/edge) ✅ Fate qualche ricerca: Ora che sapete le basi per un ambiente di sviluppo web, confrontate e rilevate le differenze rispetto all'ambiente di sviluppo di un web designer. diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md index 401c664e..56b8e0fa 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -204,7 +204,7 @@ Web開発者は、自分のコードがWeb上でどのように実行される #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### 有名なコマンドラインツール @@ -220,8 +220,10 @@ Web開発者は、自分のコードがWeb上でどのように実行される #### Web開発者向けの有名なドキュメント -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), [Firefox](https://www.mozilla.org/firefox/) の発行元である Mozilla から - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), [Chrome](https://www.google.com/chrome/) の発行元である Google から +- [Microsoft 独自の開発者向けドキュメント](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) の場合 ✅ Web開発者の開発環境の基礎を理解したところで、Webデザイナーの開発環境との違いを見てみましょう。 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md index 0abd4d60..1ab7d38e 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md @@ -154,7 +154,7 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다. #### 리눅스 - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### 인기있는 Command Line 도구 @@ -169,8 +169,10 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다. #### 웹 개발의 인기있는 문서 -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla, [Firefox](https://www.mozilla.org/firefox/) 게시자 - [Frontend Masters](https://frontendmasters.com/learn/) +-[Web.dev](https://web.dev), Google의 [Chrome](https://www.google.com/chrome/) 게시자 +-[Microsoft 자체 개발자 문서](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) 용 ✅ 약간의 조사를 해보세요: 이제 웹 개발자 환경의 기본 사항을 알았으므로, 웹 디자이너 환경과 비교하고 대조하십시오. diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md index 1b649a80..7545638e 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md @@ -152,7 +152,7 @@ Pilihan untuk ('command line') akan berbeza berdasarkan sistem operasi yang anda #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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) #### Popular Command Line Tools @@ -167,8 +167,10 @@ Apabila pembangun ingin mempelajari sesuatu yang baru, kemungkinan besar mereka #### Dokumentasi Popular untuk Pembangunan Web -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), dari Mozilla, penerbit [Firefox](https://www.mozilla.org/firefox/) - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), dari Google, penerbit [Chrome](https://www.google.com/chrome/) +- [Dokumen pembangun Microsoft sendiri](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), untuk [Microsoft Edge](https://www.microsoft.com/edge) ✅ Lakukan penyelidikan: Sekarang setelah anda mengetahui asas-asas persekitaran pembangun web, membandingkan dan membezakannya dengan persekitaran pereka web. diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md index 504a5143..564a5b51 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md @@ -155,7 +155,7 @@ Beschikbaarheid van command lines verschilt op basis van het besturingssysteem w #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### Populaire Command Line Applicaties @@ -170,8 +170,10 @@ Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de b #### Populaire Documentatie over Web Ontwikkeling -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), van Mozilla, uitgevers van [Firefox](https://www.mozilla.org/firefox/) - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), van Google, uitgevers van [Chrome](https://www.google.com/chrome/) +- [eigen ontwikkelaarsdocumenten van Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), voor [Microsoft Edge](https://www.microsoft.com/edge) ✅ Doe wat onderzoek: Nu u de basis weet van de omgeving van een web ontwikkelaar, probeer eens uit te zoeken in hoeverre dit verschilt van een omgeving voor een web designer. diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md new file mode 100644 index 00000000..6cb4dbcf --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md @@ -0,0 +1,215 @@ +# Introdução a Linguagens de Programação e Ferramentas + +Essa lição trata dos básicos de linguagens de programação. Os tõpicos tratados aqui se aplicam na maioria das linguages de prorgamação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que que ajudarão como uma pessoa desenvolvedora. + +![Introdução a Programação](/sketchnotes/webdev101-programming.png) + +> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pré-Lição + +[Quiz Pré-Lição](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) + +## Introdução + +Nessa lição, vamos falar sobre: + +- O que é Programação? +- Tipos de linguagens de programação +- Elementos básicos de um programa +- Ferramentas e softwares utéis para a pessoa desenvolvedora + +## O que é Programação? + +Programação (também conhecida como codificação) é o processo de escrever instruções em um dispositivo, como um computador ou dispositivo móvel. Escrevemos essas instruções com uma linguagem de programação, que é então interpretada pelo dispositivo. Esses conjuntos de instruções podem ser chamados de vários nomes, mas _programa_, _programa de computador_, _aplicativo (app_ e _executável_ são alguns nomes populares. + +Um _programa_ pode ser qualquer coisa escrita com código; sites, jogos e aplicativos de celular são programas. Embora seja possível criar um programa sem escrever código, a lógica subjacente é interpretada para o dispositivo e essa lógica provavelmente foi escrita com o código. Um programa que está * executando* ou *executando código* está executando instruções. O dispositivo com o qual você está lendo esta lição está executando um programa para exibi-la em sua tela. + +✅ Faça uma pequena pesquisa: quem é considerado a primeira pessoa programadora de computador do mundo? + +## Linguagens de Programação + +Linguagens de programação têm um propósito principal: Serem usadas por pessoas desenvolvedoras para criar instruções para enviar a um dispositivo. Os dispositivos só podem entender binários (1s e 0s) e, para *a maioria* das pessoas desenvolvedoras, essa não é uma maneira muito eficiente de se comunicar. As linguagens de programação são um veículo de comunicação entre humanos e computadores. + +As linguagens de programação vêm em formatos diferentes e podem servir a propósitos diferentes. Por exemplo, JavaScript é usado principalmente para aplicativos da web, enquanto Bash é usado principalmente para sistemas operacionais. + +*Linguagens de baixo nível* normalmente requerem menos etapas do que *linguagens de alto nível* para um dispositivo interpretar as instruções. No entanto, o que torna as linguagens de alto nível populares é sua legibilidade e suporte. JavaScript é considerado uma linguagem de alto nível. + +O código a seguir ilustra a diferença entre uma linguagem de alto nível com JavaScript e uma linguagem de baixo nível com código ARM assembly. + +```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 +``` + +Acredite ou não, *ambos estão fazendo a mesma coisa*: imprimir uma sequência de Fibonacci de até 10. + +✅ A sequência de Fibonacci [definida](https://en.wikipedia.org/wiki/Fibonacci_number) como um conjunto de números em que cada número é a soma dos dois anteriores, começando em 0 e 1. + +## Elementos de um programa + +Uma única instrução em um programa é chamada de _declaração_ e geralmente terá um caractere ou espaçamento de linha que marca onde a instrução termina, ou _acaba_. Como um programa termina varia com cada idioma. + + +A maioria dos programas depende do uso de dados de um usuário ou de outro lugar, onde as declarações podem se basear em dados para realizar as instruções. Os dados podem alterar o comportamento de um programa, portanto, as linguagens de programação vêm com uma maneira de armazenar dados temporariamente que podem ser usados ​​posteriormente. Esses dados são chamados de _variáveis_. Variáveis ​​são statements que instruem um dispositivo a salvar dados em sua memória. As variáveis ​​nos programas são semelhantes às da álgebra, onde têm um nome exclusivo e seu valor pode mudar com o tempo. + + +Há uma chance de que algumas instruções não sejam executadas por um dispositivo. Isso geralmente ocorre de propósito, quando escrito pela pessoa desenvolvedora, ou por acidente, quando ocorre um erro inesperado. Esse tipo de controle de um aplicativo o torna mais robusto e sustentável. Normalmente, essas mudanças no controle acontecem quando certas decisões são cumpridas. Uma declaração comum em linguagens de programação modernas para controlar como um programa é executado é a declaração `if..else`. + + +✅ Você aprenderá mais sobre esse tipo de declaração nas lições seguintes + + +## Ferramentas + +[![Ferramentas](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Ferramentas") + +Nesta seção, você aprenderá sobre alguns softwares que podem ser muito úteis ao iniciar sua jornada de desenvolvimento profissional. + + +Um **ambiente de desenvolvimento** é um conjunto exclusivo de ferramentas e recursos que uma pessoa desenvolvedora usará com frequência ao escrever software. Algumas dessas ferramentas foram personalizadas para as necessidades específicas de uma pessoa desenvolvedora e podem mudar com o tempo se as prioridades de trabalho ou projetos pessoais forem alterados, ou quando usar uma linguagem de programação diferente. Os ambientes de desenvolvimento são tão exclusivos quanto as pessoas desenvolvedoras que os utilizam. + + +### Editores + +Uma das ferramentas mais importantes para o desenvolvimento de software é o editor. Os editores são onde você escreve seu código e, às vezes, onde o executará. + +Também contamos com os editores por alguns motivos adicionais: + + +- _Debugging_ Descobrir bugs e erros ao passar pelo código, linha por linha. Alguns editores têm recursos de depuração ou podem ser personalizados e adicionados para linguagens de programação específicas. +- _Destaque da sintaxe_ Adiciona cores e formatação de texto ao código, tornando-o mais fácil de ler. A maioria dos editores permite destaque de sintaxe personalizada. +- _Extensões e integrações_ Adições especializadas para pessoas desenvolvedoras, por pessoas desenvolvedoras, para acesso a ferramentas adicionais que não são incorporadas ao editor de base. Por exemplo, muitas vezes precisamos de uma maneira de documentar nosso código e explicar como ele funciona, nesse caso, instalaremos uma extensão de verificação ortográfica para verificar erros de digitação. A maioria dessas adições se destina ao uso em um editor específico, e a maioria dos editores vem com uma maneira de pesquisar as extensões disponíveis. +- _Personalização_ A maioria dos editores é extremamente personalizável e cada pessoa desenvolvedora terá seu ambiente de desenvolvimento exclusivo que atende às suas necessidades. Muitos também permitem que você crie suas próprias extensões. + + +#### Editores Populares e Extensões para Desenvolvimento de Web + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker - verificador ortográfico de código ](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share - Compartilhamento ao vivo](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Formatador de Código](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check - verificador ortográfico](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### Navegadores + +Outra ferramenta crucial é o navegador. As pessoas desenvolvedoras da web contam com o navegador para observar como seu código é executado na internet, isso também é usado para visualizar elementos visuais de uma página da web que são escritos no editor, como HTML. + +Muitos navegadores vêm com _ferramentas para desenvolvimento_ (DevTools) que contêm um conjunto de recursos e informações úteis que ajudam a coletar e capturar percepções importantes sobre seus aplicativos. Por exemplo: se uma página da web contém erros, às vezes é útil saber quando eles ocorreram. DevTools em um navegador pode ser configurado para capturar essas informações. + + +#### Navegadores Populares e DevTools + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### Ferramentas da Linah de Comando + +Algumas pessoas desenvolvedoras preferem uma visualização menos gráfica para suas tarefas diárias e contam com a linha de comando para fazer isso. O desenvolvimento de código requer uma quantidade significativa de digitação e algumas pessoas desenvolvedoras preferem não interromper seu fluxo no teclado e usam atalhos de teclado para alternar entre as janelas da área de trabalho, trabalhar em arquivos diferentes e usar ferramentas. +A maioria das tarefas pode ser concluída com um mouse, mas um benefício de usar a linha de comando é que muito pode ser feito com ferramentas de linha de comando sem a necessidade de alternar entre o mouse e o teclado. Outro benefício da linha de comando é que ela é configurável ​​e você pode salvar sua configuração personalizada, alterá-la posteriormente e também importá-la para novas máquinas de desenvolvimento. Como os ambientes de desenvolvimento são tão exclusivos para cada pessoa desenvolvedora, algumas evitam o uso da linha de comando e outras dependem dela inteiramente e existem também aquelas que preferem uma combinação dos dois. + + +### Opções Populares de Linhas de Comando + +As opções da linha de comando variam de acordo com o sistema operacional que você usa. + + +_💻 = já vem pré-instalado no sistema operacional._ + +#### Windows + +- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻 +- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa) +- [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-13441-cxa) + +#### 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-13441-cxa) + +#### Ferramentas Populares para Linha de Comando + +- [Git](https://git-scm.com/) (💻 na maioria dos sistemas operacionais) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentação + +Quando uma pessoa desenvolvedora deseja aprender algo novo, provavelmente recorrerá à documentação para aprender como usá-la. As pessoas desenvolvedoras geralmente contam com a documentação para orientá-las sobre como usar ferramentas e linguagens de maneira adequada e também para obter um conhecimento mais profundo de como funciona. + +#### Documentações Populares para Desenvolvimento de Web + +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), do Mozilla, editores do [Firefox](https://www.mozilla.org/firefox/) +- [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), do Google, editores do [Chrome](https://www.google.com/chrome/) +- [Documentos de desenvolvedor da própria Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para [Microsoft Edge](https://www.microsoft.com/edge) + +✅ Faça uma pesquisa: agora que você conhece os fundamentos do ambiente de desenvolvimento da web, compare-o com o ambiente de um web designer. + + +--- + +## 🚀 Desafio + +Compare algumas linguagens de programação. Quais são algumas das características únicas de JavaScript vs. Java? E COBOL x Go? + + + +## Quiz Pós-Aula + +[Quiz Pós-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) + +## Revisão & Autoestudo + +Estude um pouco sobre as diferentes linguagens de programação à disposição. Tente escrever uma linha em uma delas e depois refaça em outras duas. O que você aprende? + + +## Lição de casa + +[Lendo Documentação](assignment.pt.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md index 240028e1..06e9af03 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md @@ -154,7 +154,7 @@ back add r0,r1 #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### 常用命令行工具 @@ -169,8 +169,10 @@ back add r0,r1 #### Web 开发常用文档 -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), 来自 Mozilla，[Firefox](https://www.mozilla.org/firefox/) 的出版商 - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev)，来自 Google，[Chrome](https://www.google.com/chrome/) 的发布者 +- [Microsoft 自己的开发人员文档](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)，用于 [Microsoft Edge](https://www.microsoft.com/edge) ✅ 查一查：既然你已经对 Web 开发者的环境有所了解，何不比较一下其与 Web 设计师的环境的差异？ diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md index 29b71a3e..1f30cf4e 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md @@ -154,7 +154,7 @@ back add r0,r1 #### Linux - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa) #### 其他常用指令 @@ -169,8 +169,10 @@ back add r0,r1 #### 常用的網頁開發文件 -- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), 來自 Mozilla，[Firefox](https://www.mozilla.org/firefox/) 的出版商 - [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev)，來自 Google，[Chrome](https://www.google.com/chrome/) 的發布者 +- [Microsoft 自己的開發人員文檔](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)，用於 [Microsoft Edge](https://www.microsoft.com/edge) ✅ 研究項目： 現在你已經了解基本的網頁開發環境了。請比較「網頁開發環境」與「網頁設計環境」之間的差異。 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md new file mode 100644 index 00000000..65dea896 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md @@ -0,0 +1,11 @@ +# Lendo a documentação + +## Instruções + +Existem muitas ferramentas que uma pessoa desenvolvedora de web pode precisar que estão na [documentação MDN para ferramentas do lado do cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecione 3 ferramentas não abordadas na lição, explique por que uma dev Web as usaria, procure uma ferramenta que se enquadre nesta categoria e compartilhe sua documentação. Não use o mesmo exemplo de ferramenta em documentos MDN. + +## Rubrica + +Exemplar | Adequado | Precisa de melhorias +--- | --- | - | +| Explicado por que uma pessoa desenvolvedora de web usaria a ferramenta | Explicou como, mas não por que uma pessoa desenvolvedora de web usaria a ferramenta | Não mencionou como ou por que uma pessoa desenvolvedora de web usaria a ferramenta | \ No newline at end of file diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md new file mode 100644 index 00000000..2706f782 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md @@ -0,0 +1,13 @@ +# Soma Nyaraka + +## Maagizo + +Msanidi wa wavuti anaweza kuhitaji zana nyingi ambazo zinaweza kupatikana kwenye [Hati ya MDN ya Utengenezaji Upande wa Mteja](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). + +Chagua zana 3 ambazo hazijafunikwa kwenye somo, eleza ni kwanini msanidi wa wavuti atatumia, pata zana ambayo iko kwenye kitengo hiki, na ushiriki nyaraka zake. Usitumie zana sawa ya sampuli kwenye hati za MDN. + +## Kichwa + +| Nakili | Inatosha | Inahitaji kuimarishwa | +| ------ | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | +| Imefafanuliwa kwanini msanidi wa wavuti atatumia zana hiyo | Imefafanuliwa jinsi, lakini sio kwa nini msanidi programu atatumia zana | Haikutaja jinsi au kwa nini msanidi programu atatumia zana | diff --git a/1-getting-started-lessons/2-github-basics/translations/README.fr.md b/1-getting-started-lessons/2-github-basics/translations/README.fr.md new file mode 100644 index 00000000..836d01b0 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.fr.md @@ -0,0 +1,318 @@ +# Introduction à GitHub + +Cette leçon couvre les principes de base de GitHub, une plateforme permettant d’héberger et de gérer les modifications apportées à votre code. + +![Intro to GitHub](/sketchnotes/webdev101-github.png) +> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz préalable +[Quiz préalable](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=fr) + +## Introduction + +Dans cette leçon, nous allons couvrir : + +- suivre le travail que vous faites sur votre machine +- travailler sur des projets avec d’autres personnes +- comment contribuer aux logiciels open source + +### Prérequis + +Avant de commencer, vous devrez vérifier si Git est installé. Dans le type de terminal : +`git --version` + +Si Git n’est pas installé, [télécharger 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 " your-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 vous devrez ouvrir votre terminal (ou : invite de commandes). + +Accédez à [github.com](https://github.com/) et créez un compte si vous ne l’avez pas déjà fait, ou connectez-vous et remplissez votre profil. + +✅ GitHub n’est pas le seul référentiel de code au monde; il y en a d’autres, mais GitHub est le plus connu + +### Préparation + +Vous aurez besoin à la fois d’un dossier avec un projet de code sur votre ordinateur local (ordinateur portable ou PC) et d’un référentiel public sur GitHub, qui servira d’exemple pour contribuer aux projets d’autres personnes. + +--- + +## Gestion du code + +Supposons que vous ayez un dossier localement avec un projet de code et que vous souhaitiez commencer à suivre votre progression à l’aide de 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 moi. En lisant vos messages de validation des jours, des semaines ou des mois plus tard, vous pourrez vous rappeler pourquoi vous avez pris une décision, ou " annuler " une modification - c’est-à-dire lorsque vous écrivez de bons " messages de validation ". + +### Tâche : créer un référentiel et valider le code + +1. **Créer un référentiel sur GitHub**. Sur GitHub.com, dans l’onglet Référentiels ou dans la barre de navigation en haut à droite, recherchez le bouton **nouveau référentiel**. + + 1. Donnez un nom à votre référentiel (dossier) + 1. Sélectionnez **créer un référentiel**. + +1. **Accédez à votre dossier de travail**. Dans votre terminal, basculez vers le dossier (également connu sous le nom de répertoire) que vous souhaitez démarrer le suivi. Tapez : + + ```bash + cd [nom de votre dossier] + ``` + +1. **Initialiser un dépôt git**. Dans votre type de projet : + + ```bash + git init + ``` + +1. **Vérifier l’état**. Pour vérifier l’état de votre type de référentiel : + + ```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 + ``` + + En règle générale, une commande `git status` vous indique des choses comme quels fichiers sont prêts à être _enregistrés_ dans le référentiel ou contient des modifications que vous voudrez peut-être conserver. + +1. **Ajouter tous les fichiers pour le suivi** + Cela s’appelle aussi fichiers intermédiaires/ ajout de fichiers à la zone de transit. + + ```bash + git add . + ``` + + L’argument `git add` plus `.` indique que tous vos fichiers &changes pour le suivi. + +1. **Ajouter les fichiers sélectionnés pour le suivi** + + ```bash + git add [nom du fichier ou du dossier] + ``` + + Cela nous aide à ajouter uniquement les fichiers sélectionnés à la zone de transit lorsque nous ne voulons pas valider tous les fichiers à la fois. + +1. **Défaire la scène de tous les fichiers** + + ```bash + git reset + ``` + + Cette commande nous aide à défaire tous les fichiers à la fois. + +1. **Défaire un fichier particulier** + + ```bash + git reset [nom du fichier ou du dossier] + ``` + + Cette commande nous aide à défaire un fichier particulier à la fois que nous ne voulons pas inclure pour le prochain commit. + +1. **Persistance de votre travail**. À ce stade, vous avez ajouté les fichiers à un soi-disant _staging area_. Un endroit où Git suit vos fichiers. Pour rendre la modification permanente, vous devez _valider_ les fichiers. Pour ce faire, vous créez un _commit_ avec la commande `git commit`. Un _commit_ représente un point d’enregistrement dans l’historique de votre référentiel. Tapez ce qui suit pour créer un _commit_ : + + ```bash + git commit -m " premier commit " + ``` + + Cela valide tous vos fichiers, en ajoutant le message " premier commit ". Pour les futurs messages de validation, vous voudrez être plus descriptif dans votre description pour indiquer le type de modification que vous avez apportée. + +1. **Connectez votre référentiel Git local avec GitHub**. Un référentiel Git est bon sur votre machine, mais à un moment donné, vous voulez avoir une sauvegarde de vos fichiers quelque part et également inviter d’autres personnes à travailler avec vous sur votre dépôt. GitHub est un excellent endroit pour le faire. N’oubliez pas que nous avons déjà créé un référentiel sur GitHub, donc la seule chose que nous devons faire est de connecter notre référentiel Git local à GitHub. La commande `git remote add` fera exactement cela. Tapez la commande suivante : + + > Remarque, avant de taper la commande, accédez à votre page de référentiel GitHub pour trouver l’URL du référentiel. Vous l’utiliserez dans la commande ci-dessous. Remplacez `repository_name` par votre URL GitHub. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + Cela crée un _remote_, ou une connexion, nommé " origin " pointant vers le référentiel GitHub que vous avez créé précédemment. + +1. **Envoyer des fichiers locaux à GitHub**. Jusqu’à présent, vous avez créé une _connexion_ entre le référentiel local et le référentiel GitHub. Envoyons ces fichiers à GitHub avec la commande suivante `git push`, comme suit: + + ```bash + git push -u origin main + ``` + + Cela envoie vos commits dans votre branche "main" à GitHub.. + +1. **Pour ajouter d’autres modifications**. Si vous souhaitez continuer à apporter des modifications et à les pousser vers GitHub, il vous suffit d’utiliser les trois commandes suivantes: + + ```bash + git add . + git commit -m " tapez votre message de validation ici " + git push + ``` + + > Conseil, vous pouvez également adopter un fichier `.gitignore` pour empêcher les fichiers que vous ne souhaitez pas suivre d’apparaître sur GitHub - comme ce fichier de notes que vous stockez dans le même dossier mais n’a pas sa place sur un référentiel public. Vous pouvez trouver des modèles pour les fichiers `.gitignore` dans [.gitignore templates](https://github.com/github/gitignore). + +#### Valider les messages + +Une grande ligne d’objet de commit Git complète la phrase suivante: +S’il est appliqué, ce commit le sera + +Pour le sujet, utilisez l’impératif, présent: "changement" pas "changé" ni "changements". +Comme dans le sujet, dans le corps (facultatif) utilisez également l’impératif, le 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 surfer sur GitHub. Pouvez-vous trouver un très bon message d’engagement? Pouvez-vous en trouver un vraiment minime? Quelles informations pensez-vous être les plus importantes et les plus utiles à transmettre dans un message de validation ? + +### Tâche : Collaborer + +La principale raison de mettre des choses sur GitHub était de permettre de collaborer avec d’autres développeurs. + +## Travailler sur des projets avec d’autres + +Dans votre référentiel, accédez à `Insights > Community ` pour voir comment votre projet se compare aux normes communautaires recommandées. + + Voici quelques éléments qui peuvent améliorer votre référentiel GitHub : + - **Description**. Avez-vous ajouté une description pour votre projet ? + - **README**. Avez-vous ajouté un fichier README ? GitHub fournit des conseils pour l’écriture d’un [README](https://docs.github.com/articles/about-readmes/). + - **Guide de contribution**. Votre projet a-t-il des [directives de contribution](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), + - **Code de conduite**. Un [Code de conduite](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **Licence**. Peut-être plus important encore, une [licence](https://docs.github.com/articles/adding-a-license-to-a-repository/) ? + + +Toutes ces ressources profiteront à l’intégration des nouveaux membres de l’équipe. Et ce sont généralement le genre de choses que les nouveaux contributeurs regardent avant même de regarder votre code, pour savoir si votre projet est le bon endroit pour qu’ils passent leur temps. + +✅ 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? Remarque: il y a quelques [outils pour aider à créer de bons README](https://www.makeareadme.com/) que vous voudrez peut-être essayer. + +### Tâche : fusionner du code + +Les documents contributeurs aident les gens à contribuer au projet. Il explique les types de contributions que vous recherchez et comment le processus fonctionne. Les contributeurs devront passer par une série d’étapes pour pouvoir contribuer à votre référentiel sur GitHub : + + +1. **Forker votre repo** Vous voudrez probablement que les gens _fork_ votre projet. La duplication signifie la création d’un réplica de votre référentiel sur leur profil GitHub. +1. **Cloner**. De là, ils cloneront le projet sur leur ordinateur local. +1. **Créer une branche**. Vous voudrez leur demander de créer une _branche_ pour leur travail. +1. **Concentrez leur changement sur un seul domaine**. Demandez aux contributeurs de concentrer leurs contributions sur une chose à la fois - de cette façon, les chances que vous puissiez _fusionner_ dans leur travail sont plus élevées. Imaginez qu’ils écrivent un correctif de bogue, ajoutent une nouvelle fonctionnalité et mettent à jour plusieurs tests - que se passe-t-il si vous le souhaitez ou si vous ne pouvez implémenter que 2 modifications sur 3 ou 1 sur 3? + +✅ Imaginez une situation où les branches sont particulièrement essentielles à l’écriture et à l’expédition d’un bon code. À quels cas d’utilisation pouvez-vous penser ? + +> Remarque, soyez le changement que vous voulez voir dans le monde et créez également des branches pour votre propre travail. Tous les commits que vous faites seront effectués sur la branche que vous avez actuellement "extraite". Utilisez `git status` pour voir de quelle branche il s’agit. + +Passons en revue un flux de travail de contributeur. Supposons que le contributeur a déjà _forked_ et _cloné_ le référentiel afin qu’il ait un référentiel 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 veulent contribuer: + + ```bash + git branch [nom_branche] + ``` + +1. **Passer à la branche de travail**. Basculez vers la branche spécifiée et mettez à jour le répertoire de travail avec `git checkout`: + + ```bash + git checkout [nom_branche] + ``` + +1. **Travailler**. À ce stade, vous souhaitez ajouter vos modifications. N’oubliez pas d’en parler à Git avec les commandes suivantes: + + ```bash + git add . + git commit -m " mes modifications " + ``` + + Assurez-vous de donner à votre engagement une bonne réputation, pour votre bien ainsi que pour le mainteneur du repo que vous aidez. + +1. **Combinez votre travail avec la branche `main`**. À un moment donné, vous avez fini 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 à jour au plus tard avec les commandes suivantes: + + ```bash + git checkout principal + git pull + ``` + + À ce stade, vous voulez vous assurer que tous les _conflits_, les 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 checkout [branch_name] + git merge main + ``` + + Cela apportera tous les changements de `main` dans votre branche et j’espère que vous pourrez simplement continuer. Sinon, VS Code vous dira où Git est _confus_ et vous modifiez simplement les fichiers affectés pour dire quel contenu est le plus précis. + +1. **Envoyez votre travail à GitHub**. L’envoi de votre travail à GitHub signifie deux choses. Pousser votre succursale à votre dépôt, puis ouvrir un PR, Pull Request. + + ```bash + git push --set-upstream origin [nom_branche] + ``` + + La commande ci-dessus crée la branche sur votre référentiel duppliqué. + +1. **Ouvrez une PR**. Ensuite, vous souhaitez ouvrir une PR. Pour ce faire, accédez au référentiel forké sur GitHub. Vous verrez une indication sur GitHub où il vous demande si vous souhaitez créer une nouvelle PR, vous cliquez dessus et vous êtes emmené vers une interface où vous pouvez changer le titre du message de validation, lui donner une description plus appropriée. Maintenant, le mainteneur du repo que vous avez forké verra ce PR et _croisons les doigts_ qu’il apprécieront et _fusionnera_ votre PR. Vous êtes maintenant un contributeur, yay :) + +1. **Nettoyer**. Il est considéré comme une bonne pratique de _clean up_ après avoir fusionné avec succès un PR. Vous voulez nettoyer à la fois votre branche locale et la branche que vous avez poussée vers GitHub. Commençons par le supprimer localement avec la commande suivante: + + ```bash + git branch -d [nom_branche] + ``` + + Assurez-vous d’accéder à la page GitHub pour le référentiel duppliqué suivant et supprimez la branche distante que vous venez d’y pousser. + +`Pull request` semble être un terme stupide parce que vous voulez vraiment pousser vos modifications au projet. Mais le responsable (propriétaire du projet) ou l’équipe principale doit prendre en compte vos modifications avant de la fusionner avec la branche " principale " du projet, vous demandez donc vraiment une décision de modification à un responsable. + +Une pull request est l’endroit idéal pour comparer et discuter des différences introduites sur une branche avec des révisions, des commentaires, des tests intégrés, etc. Une bonne pull request suit à peu près les mêmes règles qu’un message de validation. Vous pouvez ajouter une référence à un problème dans le suivi des problèmes, lorsque votre travail, par exemple, résout un problème. Cela se fait à l’aide d’un `#` suivi du numéro de votre problème. Par exemple `#97`. + +🤞croisons les doigts pour que toutes les vérifications réussissent et que le ou les propriétaires du projet fusionnent 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 référentiel (ou **repo**) sur GitHub qui vous intéresse et auquel vous souhaitez apporter une modification. Vous voudrez copier son contenu sur votre machine. + +✅ Un bon moyen de trouver des repos " conviviaux pour les débutants " est de [rechercher par la balise 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Copy a repo locally](../images/clone_repo.png) + +Il existe plusieurs façons de copier du code. Une façon consiste à " cloner " le contenu du référentiel, en utilisant HTTPS, SSH ou en utilisant l’interface de ligne de commande GitHub CLI (Interface de ligne de commande). + +Ouvrez votre terminal et clonez le référentiel comme suit: +`git clone https://github.com/ProjectURL` + +Pour travailler sur le projet, basculez vers le dossier de droite : +`cd ProjectURL` + +Vous pouvez également ouvrir l’ensemble du projet à l’aide de [Codespaces](https://github.com/features/codespaces), de l’éditeur de code intégré / environnement de développement cloud de GitHub ou de [GitHub Desktop](https://desktop.github.com/). + +Enfin, vous pouvez télécharger le code dans un dossier compressé. + +### Quelques choses plus intéressantes sur GitHub + +Vous pouvez mettre en vedette, regarder et / ou " fork " n’importe quel référentiel public sur GitHub. Vous pouvez trouver vos référentiels étoilés dans le menu déroulant en haut à droite. C’est comme le bookmarking, mais pour le code. + +Les projets ont un suivi des problèmes, principalement sur GitHub dans l’onglet " Problèmes ", 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 tels que Slack, Discord ou IRC. + +✅ Jetez un coup d’œil à votre nouveau référentiel GitHub et essayez quelques éléments, comme la modification des paramètres, l’ajout d’informations à votre référentiel et la création d’un projet (comme un tableau Kanban). Il y a beaucoup de choses que vous pouvez faire! + +--- + +## 🚀 Challenge + +Associez-vous à un ami pour travailler sur le code de l’autre. Créez un projet en collaboration, bifurquez du code, créez des branches et fusionnez les modifications. + +## Quiz de validation des connaissances +[Quiz de validation des connaissances](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=fr) + +## Examen & Auto-apprentissage + +En savoir plus sur [contribuer à un logiciel open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/). + +Pratique, pratique, pratique. GitHub a d’excellents chemins d’apprentissage disponibles via [lab.github.com](https://lab.github.com/): + +- [Première semaine sur GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +Vous trouverez également des laboratoires plus avancés. + +## Affectation + +Complétez [la première semaine dans le laboratoire de formation GitHub](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.pt.md b/1-getting-started-lessons/2-github-basics/translations/README.pt.md new file mode 100644 index 00000000..644e6b87 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.pt.md @@ -0,0 +1,317 @@ +# Introdução ao GitHub + +Esta lição cobre os fundamentos do GitHub, uma plataforma para hospedar e gerenciar alterações em seu código. + +![Intro ao GitHub](/sketchnotes/webdev101-github.png) +> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pré-Aula +[Quiz Pré-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3) + +## Introdução + +Nesta lição vamos falar sobre: + +- rastreando o trabalho que você faz em sua máquina +- trabalhando em projetos com outros +- como contribuir com software de código aberto + +### Pré-requisitos + +Antes de começar, você precisará verificar se o Git está instalado. No terminal, digite: +`git --version` + +Se o Git não estiver instalado, [baixe o Git aqui](https://git-scm.com/downloads). Em seguida, configure seu perfil Git local no terminal: +* `git config --global user.name "your-name"` +* `git config --global user.email "your-email"` + +Para verificar se o Git já está configurado, você pode digitar: +`git config --list` + +Você também precisará de uma conta do GitHub, um editor de código (como o Visual Studio Code) e abrir seu terminal (ou: prompt de comando). + +Navegue para [github.com](https://github.com/) e crie uma conta, caso ainda não o tenha feito, ou faça login e preencha o seu perfil. + +✅ O GitHub não é o único repositório de código do mundo; existem outros, mas o GitHub é o mais conhecido + +### Preparação + +Você precisará de uma pasta com um projeto de código em sua máquina local (laptop ou PC) e de um repositório público no GitHub, que servirá como um exemplo de como contribuir com os projetos de outras pessoas. + +--- + +## Gerenciamento de código + +Digamos que você tenha uma pasta localmente com algum projeto de código e deseja começar a monitorar seu progresso usando git - o sistema de controle de versão. Algumas pessoas comparam o uso do git a escrever uma carta de amor para o seu futuro eu. Lendo suas mensagens de commit dias, semanas ou meses depois, você será capaz de se lembrar por que tomou uma decisão, ou "reverter" uma mudança - isto é, quando você escreve boas "mensagens de commit". + +### Tarefa: Faça um repositório e conmmit o código + +1. **Crie um repositório no GitHub**. No GitHub.com, na guia de repositórios ou na barra de navegação superior direita, encontre o botão **new repo** . + + 1. Dê um nome ao seu repositório (pasta) + 1. Selecione **create repository**. + +1. **Navegue até sua pasta de trabalho**. Em seu terminal, mude para a pasta (também conhecida como diretório) que deseja iniciar o rastreamento. Digite: + + ```bash + cd [nome da sua pasta] + ``` + +1. **Inicialize um repositório git**. No seu projeto, digite: + + ```bash + git init + ``` + +1. **Cheque status**. Para checar o status de seu repositório, digite: + + ```bash + git status + ``` + + a saída pode ser parecida com esta: + + ```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 + ``` + + Geralmente o comando `git status` diz a você coisas como quais arquivos estão prontos para serem _salvos_ para o repo ou tem alterações que você pode querer persistir. + +1. **Adicionar todos os arquivos para rastreamento** + Isso também é chamado de arquivos de teste / adição de arquivos à área de teste. + + ```bash + git add . + ``` + + O argumento `git add` plus `.` indiciona todos os seus arquivos e alterações para rastreamento. + +1. **Adicionar arquivos selecionados para rastreamento** + + ```bash + git add [nome do arquivo ou pasta] + ``` + +Isso nos ajuda a adicionar apenas os arquivos selecionados à área de teste quando não queremos enviar todos os arquivos de uma vez. + +1. **Unstage todos os arquivos** + + ```bash + git reset + ``` + Este comando nos ajuda a unstage todos os arquivos de uma vez. + +1. **Unstage um arquivo em particular** + + ```bash + git reset [nome do arquivo ou pasta] + ``` + + Este comando nos ajuda a remover stage de apenas um arquivo específico de uma vez que não queremos incluir no próximo commit. + +1. **Persistindo no seu trabalho**. Neste ponto, você adicionou os arquivos a um local chamado _staging area_. Um lugar onde o Git está rastreando seus arquivos. Para tornar a mudança permanente, você precisa _committar_ os arquivos. Para fazer isso, crie um _commit_ com o comando `git commit`. Um _commit_ representa um ponto na história do seu repo sendo salvo. Digite o seguinte para criar um _commit_: + + ```bash + git commit -m "first commit" + ``` + + Isso confirma todos os seus arquivos, adicionando a mensagem "first commit" (primeiro commit). Para mensagens de commit futuras, você desejará ser mais descritiva em sua descrição para transmitir que tipo de mudança você fez. + +1. **Conecte seu repositório Git local com GitHub**. Um repositório Git é bom em sua máquina, mas em algum momento você vai querer fazer backup de seus arquivos em algum lugar e também convidar outras pessoas para trabalhar com você em seu repositório. Um ótimo lugar para fazer isso é o GitHub. Lembre-se de que já criamos um repositório no GitHub, então a única coisa que precisamos fazer é conectar nosso repositório Git local ao GitHub. O comando `git remote add` fará exatamente isso. Digite o seguinte comando: + + > Antes de digitar o comando, vá para a página do repositório GitHub para encontrar o URL do repositório. Você o usará no comando abaixo. Substitua `repository_name` pelo seu URL do GitHub. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + Isso cria um _remote_, ou conexão, chamada "origin" apontando para o repositório GitHub que você criou anteriormente. + +1. **Envie arquivos locais para GitHub**. Até agora, você criou uma _conexão_ entre o repositório local e o repositório GitHub. Vamos enviar esses arquivos para o GitHub com o seguinte comando `git push`, assim: + + ```bash + git push -u origin main + ``` + + Isso envia seus commits em seu branch "principal" para o GitHub. + +1. **Para adicionar mais mudanças**. Se quiser continuar fazendo alterações e enviando-as para o GitHub, você só precisará usar os três comandos a seguir: + + ```bash + git add . + git commit -m "digite sua mensagem de commit aqui" + git push + ``` + + > Dica, você também pode adotar um arquivo `.gitignore` para evitar que arquivos que você não deseja rastrear apareçam no GitHub - como aquele arquivo de notas que você armazena na mesma pasta, mas não tem lugar em um repositório público. Você pode encontrar modelos para arquivos `.gitignore` em [modelos .gitignore](https://github.com/github/gitignore). + +#### Mensagens de Commit + +Uma ótima mensagem de Git commit completa a seguinte frase: +Se aplicado, este commit irá + +Para o assunto use o tempo presente imperativo: "mudar" e não "mudou" nem "muda". +Assim como no sujeito, no corpo (opcional) também use o tempo presente imperativo. O corpo deve incluir a motivação para a mudança e contrastar isso com o comportamento anterior. Você está explicando o `porquê`, não o` como`. + +✅ Reserve alguns minutos para navegar no GitHub. Você consegue encontrar uma mensagem de commit realmente ótima? Você pode encontrar uma ruim? Quais informações você acha que são as mais importantes e úteis para transmitir em uma mensagem de commit? + +### Tarefa: Colabore + +O principal motivo para colocar coisas no GitHub foi possibilitar a colaboração com outros desenvolvedores. + +## Trabalhando em projetos com outras pessoas + +Em seu repositório, navegue até `Insights> Community` para ver como seu projeto se compara aos padrões recomendados da comunidade. + + Aqui estão algumas coisas que podem melhorar seu repositório GitHub: + - **Descrição**. Você adicionou uma descrição para o seu projeto? + - **README**. Você adicionou um README? O GitHub fornece orientação para escrever um [README](https://docs.github.com/articles/about-readmes/). + - **Guia de Contribuição**. Seu projeto tem um [guia para contribuição](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), + - **Código de Conduta**. Um [Código de Conduta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **Licença**. Talvez o mais importante, a [licença](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + + +Todos esses recursos irão beneficiar a integração de novos membros da equipe. E esses são normalmente o tipo de coisas que os novas pessoas colaboradoras olham antes mesmo de olhar para o seu código, para descobrir se o seu projeto é o lugar certo para elas passarem o tempo. + +✅ Arquivos README, embora levem tempo para serem preparados, são freqüentemente negligenciados por pessoas mantenedores ocupadas. Você pode encontrar um exemplo particularmente descritivo? Nota: existem algumas [ferramentas para ajudar a criar bons READMEs](https://www.makeareadme.com/) que você pode querer experimentar. + +### Tarefa: Dar merge em algum código + +Documentos contribuintes ajudam as pessoas a contribuir para o projeto. Ele explica quais tipos de contribuições você está procurando e como funciona o processo. As pessoas colaboradoras precisarão seguir uma série de etapas para poder contribuir com seu repo no GitHub: + + + 1. **Bifurcando seu repo** Você provavelmente vai querer que as pessoas _fork_ seu projeto. Bifurcação significa criar uma réplica de seu repositório em seu perfil GitHub. +1. **Clone**. A partir daí, elas clonarão o projeto em sua máquina local. +1. **Crie um branch**. Você vai querer pedir a elas que criem um _branch_ para seu trabalho. +1. **Concentre sua mudança em uma área**. Peça aos colaboradores para concentrarem suas contribuições em uma coisa de cada vez - dessa forma, as chances de você se _mergir_ no trabalho delas são maiores. Imagine que elas escrevam uma correção de bug, adicionem um novo recurso e atualizem vários testes - e se você quiser ou só puder implementar 2 de 3, ou 1 de 3 alterações? + +✅ Imagine uma situação em que os branches são particularmente críticos para escrever e distribuir bons códigos. Em quais casos de uso você consegue pensar? + +> Nota, seja a mudança que você deseja ver no mundo e crie ramificações para o seu próprio trabalho também. Todos os commits que você fizer serão feitos no branch em que você está atualmente “check-out”. Use `git status` para ver qual branch é. + +Vamos analisar o fluxo de trabalho de uma pessoa colaboradora. Suponha que ela já _forked_ e _cloned_ o repo para que ela tenha um repositório Git pronto para ser trabalhado, em sua máquina local: + +1. **Crie um brancj**. Use o comando `git branch` para criar um branch que conterá as mudanças que pretendem contribuir: + + ```bash + git branch [branch-name] + ``` + +1. **Mudar para o branch de trabalho**. Mude para o branch especificado e atualize o diretório de trabalho com `git checkout`: + + ```bash + git checkout [branch-name] + ``` + +1. **Trabalhe**. Neste ponto, você deseja adicionar suas alterações. Não se esqueça de contar ao Git sobre isso com os seguintes comandos: + + ```bash + git add . + git commit -m "minhas mudancas" + ``` + + Certifique-se de dar ao seu commit um bom nome, para seu bem e também para os mantenedores do repo no qual você está ajudando. + +1. **Combine seu trabalho com o branch `main`**. Em algum ponto, você concluiu o trabalho e deseja combinar seu trabalho com o do branch `principal`. O branch `main` pode ter mudado enquanto isso, certifique-se de primeiro atualizá-lo para o mais recente com os seguintes comandos: + + ```bash + git checkout main + git pull + ``` + + Neste ponto, você quer ter certeza de que quaisquer _conflitos_, situações em que o Git não pode _combinar_ facilmente as mudanças aconteçam em seu branch de trabalho. Portanto, execute os seguintes comandos: + + ```bash + git checkout [branch_name] + git merge main + ``` + + Isso trará todas as mudanças de `main` em seu branch e esperançosamente você pode simplesmente continuar. Caso contrário, o VS Code dirá onde o Git está _confundido_ e você apenas alterará os arquivos afetados para dizer qual conteúdo é o mais preciso. + +1. **Envie seu trabalho para o GitHub**. Enviar seu trabalho para o GitHub significa duas coisas. Enviando seu branch para o repo e, em seguida, abra um PR, Pull Request. + + ```bash + git push --set-upstream origin [branch-name] + ``` + + O comando acima cria o branch em seu repositório bifurcado. + +1. **Abra um PR**. Em seguida, você deseja abrir um PR. Você faz isso navegando até o repositório bifurcado no GitHub. Você verá uma indicação no GitHub onde pergunta se você deseja criar um novo PR, você clica nele e é levado a uma interface onde pode alterar o título da mensagem de commit, dê-lhe uma descrição mais adequada. Agora, a mantenedora do repo que você bifurcou verá este PR e _dedos cruzados_, eles apreciarão e _mergirão_ seu PR. Agora você é uma pessoa contribuidora, eba :) + +1. **Limpeza**. É considerado uma boa prática _limpar_ após mesclar com sucesso um PR. Você deseja limpar seu branch local e o branch que você enviou para o GitHub. Primeiro, vamos excluí-lo localmente com o seguinte comando: + + ```bash + git branch -d [branch-name] + ``` + + Em seguida, vá para a página GitHub do repositório bifurcado e remova o branch remoto que você acabou de enviar para ele. + +`Pull request` parece um termo bobo porque na verdade você deseja enviar suas alterações para o projeto. Mas a pessoa mantendo o repo ou equipe central precisa considerar suas mudanças antes de fundi-las com o branch "principal" do projeto, então você está realmente solicitando uma decisão de mudança de uma pessoa mantenedora. + +Uma PR é o lugar para comparar e discutir as diferenças introduzidas em um branch com revisões, comentários, testes integrados e muito mais. Uma boa PR segue aproximadamente as mesmas regras de uma mensagem de commit. Você pode adicionar uma referência a um problema no rastreador de problemas, quando seu trabalho, por exemplo, corrige um problema. Isso é feito usando um `#` seguido pelo número do seu problema. Por exemplo `# 97`. + +🤞 Dedos cruzados para que todas as verificações sejam aprovadas e as pessoas proprietárias do projeto deem merge nas suas alterações no projeto🤞 + +Atualize seu branch de trabalho local atual com todos os novos commits do branch remoto correspondente no GitHub: + +`git pull` + +## Como contribuir com Open Source + +Primeiramente, vamos encontrar um repositório (ou **repo**) no GitHub de interesse para você e para o qual você gostaria de contribuir. Você vai querer copiar o conteúdo para desse repo parasua máquina. + +✅ Uma boa maneira de encontrar repos 'iniciantes' é [buscar usando a tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Copiar um repo localmente](../images/clone_repo.png) + +Existem várias maneiras de copiar códigos. Uma maneira é "clonar" o conteúdo do repositório, usando HTTPS, SSH ou usando o GitHub CLI (Command Line Interface). + +Abra seu terminal e clone o repositório assim: +`git clone https://github.com/ProjectURL` + +Para trabalhar no projeto, mude para a pasta certa: +`cd ProjectURL` + +Você também pode abrir todo o projeto usando [Codespaces](https://github.com/features/codespaces), O editor de código incorporado do GitHub/ ambiente de desenvolvimento em nuvem, ou o [GitHub Desktop](https://desktop.github.com/). + +Por último, você pode baixar o código em uma pasta com zíper. + +### Mais algumas coisas interessantes sobre o GitHub + +Você pode dar uma strela, assistir e/ou "bifurcação" em qualquer repositório público no GitHub. Você pode encontrar seus repositórios estrelados no menu suspenso de cima para a direita. É como marcar, mas para código. + +Os projetos têm um rastreador de problemas, no GitHub na aba "Problemas", a menos que indicado o contrário, onde as pessoas discutem questões relacionadas ao projeto. E a aba de Pull Requests é onde as pessoas discutem e analisam as mudanças que estão em andamento. + +Os projetos também podem ter discussão em fóruns, listas de discussão ou canais de bate-papo como Slack, Discord ou IRC. + +✅ Dê uma olhada no seu novo GitHub repo e experimente algumas coisas, como editar configurações, adicionar informações ao seu repo e criar um projeto (como uma placa Kanban). Há muita coisa que você pode fazer! + +--- + +## 🚀 Desafio + +Parear com uma amiga para trabalhar no código uma da outra. Crie um projeto de forma colaborativa, de fork no código, crie branches e de merge mudanças. + +## Quiz pós-aula +[Quiz pós-aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4) + +## Revisão & Auto estudo + +Leia mais sobre [contribuindo para o software de código aberto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/). + +Pratique, pratique, pratique. GitHub tem ótimos caminhos de aprendizagem disponíveis via [lab.github.com](https://lab.github.com/): + +- [Primeira semana no GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +Você também encontrará laboratórios mais avançados. + +## Lição de casa + +Complete [o lab a Primeira Semana gitHub](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/3-accessibility/assignment.md b/1-getting-started-lessons/3-accessibility/assignment.md index 9ae681f0..abe4bc35 100644 --- a/1-getting-started-lessons/3-accessibility/assignment.md +++ b/1-getting-started-lessons/3-accessibility/assignment.md @@ -1,11 +1,15 @@ -# Analyze a non-accessible web site +# Analyze an inaccessible site ## Instructions -Identify a web site that you believe is NOT accessible, and create an action plan to improve its accessibility. Your first task would be to identify this site, detail the ways that you think it is inaccessible without using analytic tools, and then put it through a Lighthouse analysis. Take the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved. +Identify a website that you believe is NOT accessible and create an action plan to improve its accessibility. +Your first task would be to identify this site, detail the ways in which you think it is inaccessible without using analytical tools, and then submit it to a Lighthouse analysis. Capture a pdf of the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved. -## Rubric +## Table to test site accessibility -| Criteria | Exemplary | Adequate | Needs Improvement | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- | -| student report | includes paragraphs on how the site is inadequate, the Lighthouse report captured as a pdf, a list of ten points to improve, with details on how to improve it | missing 20% of the required | missing 50% of the required | \ No newline at end of file +| Criteria | Exemplary | Adequate | Need to Improve | +|----------|-----------|----------|----------------| +| | missing <10% of what is required | missing 20% of what is required | missing 50% of what is required | + +---- +Student Report: includes paragraphs on how inaccessible the site is, the Lighthouse report captured in pdf, a list of ten points to improve, with details on how to improve it diff --git a/1-getting-started-lessons/3-accessibility/translations/README.fr.md b/1-getting-started-lessons/3-accessibility/translations/README.fr.md new file mode 100644 index 00000000..2444a083 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.fr.md @@ -0,0 +1,230 @@ +# Création de Pages Web Accessibles + +! [Tout sur l'accessibilité](/sketchnotes/webdev101-a11y.png) +> SketchNote par[Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz préalable +[Quiz préalable](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5) + +> La puissance du Web est dans son universalité. L'accès par tout le monde indépendamment d'invalidité est un aspect essentiel. +> +> \- Sir Timothy Berners-Lee, directeur du W3C et inventeur du World Wide Web + +Cette citation met parfaitement l'accent sur l'importance de créer des sites Web accessibles. Une application qui ne peut pas être accessible par tous est par définition exclusionnaire. En tant que développeurs Web, nous devrions toujours avoir l'accessibilité à l'esprit. En ayant cet objectif dès le début, vous serez déjà bien lancé sur la façon de vous assurer que tout le monde peut accéder aux pages que vous créez. Dans cette leçon, vous découvrirez les outils pouvant vous aider à vous assurer que vos éléments Web sont accessibles et comment développer avec l'accessibilité à l'esprit. + +> Vous pouvez accéder à cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-13441-cxa)! + +## Outils à utiliser + +### Lecteurs d'écran (Screen readers) + +L'un des outils d'accessibilité les plus connus sont les lecteurs d'écran. + +[Les lecteurs d'écran](https://en.wikipedia.org/wiki/Screen_reader) sont des clients couramment utilisés pour ceux qui ont des déficiences visuelles. De la même manière que nous passons du temps à nous assurer qu'un navigateur transmette correctement les informations que nous souhaitons partager, nous devons également le faire pour un lecteur d'écran. + +À la base, un lecteur d'écran lira une page de haut en bas de manière audible. Si votre page ne contient que du texte, le lecteur transmettra les informations de la même manière qu'un navigateur. Bien sûr, les pages Web sont rarement purement textuelles ; elles contiendront des liens, des graphiques, des couleurs et d'autres composants visuels. Il faut veiller à ce que ces informations soient lues correctement par un lecteur d'écran. + +Chaque développeur Web doit se familiariser avec un lecteur d'écran. Comme souligné ci-dessus, c'est le client que vos utilisateurs utiliseront. De la même manière que vous connaissez le fonctionnement d'un navigateur, vous devez apprendre comment fonctionne un lecteur d'écran. Heureusement, les lecteurs d'écran sont intégrés à la plupart des systèmes d'exploitation. + +Certains navigateurs disposent également d'outils et d'extensions intégrés qui peuvent lire le texte à voix haute ou même fournir des fonctionnalités de navigation de base, telles que [ces outils de navigateur Edge axés sur l'accessibilité](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Ce sont également des outils d'accessibilité importants, mais ils fonctionnent très différemment des lecteurs d'écran et ils ne doivent pas être confondus avec des outils de test de lecteurs d'écran. + +✅ Essayez un lecteur d'écran et un lecteur de texte de navigateur. Sous Windows, [Narrateur](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) 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. Sur 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 malvoyantes est le zoom. Le type de zoom le plus basique est le zoom statique, contrôlé par `Ctrl + signe plus (+)` ou en diminuant la résolution de l'écran. Ce type de zoom entraîne le redimensionnement de la page entière, 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 accrus . + +Un autre type de zoom repose sur un logiciel spécialisé pour agrandir une zone de l'écran et effectuer un panoramique, un peu comme avec une vraie loupe. Sous Windows, [Loupe](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 de grossissement tiers avec plus de fonctionnalités et une plus grande base d'utilisateurs. MacOS et iOS ont tous deux un logiciel de grossissement intégré appelé [Zoom](https://www.apple.com/accessibility/mac/vision/). + +### Contrôleurs de contraste + +Les couleurs sur les sites Web doivent être soigneusement choisies pour répondre aux besoins des utilisateurs daltoniens ou des personnes qui ont des difficultés à voir les couleurs à faible contraste. + +✅ Testez un site Web que vous aimez utiliser pour l'utilisation des couleurs avec une extension de navigateur telle que [le vérificateur de couleurs de WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Qu'apprenez-vous? + +### Lighthouse + +Dans la zone des outils de développement de votre navigateur, vous trouverez l'outil Lighthouse. Cet outil est important pour obtenir une première vue de l'accessibilité (ainsi que d'autres analyses) d'un site Web. Bien qu'il soit important de ne pas se fier exclusivement à Lighthouse, un score de 100 % est très utile comme référence. + +✅ Trouvez Lighthouse dans le panneau des outils de développement de votre navigateur et lancez une analyse sur n'importe quel site. Que découvrez vous ? + +## 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, vous trouverez ci-dessous quelques-uns des principes fondamentaux que vous voudrez mettre en œuvre. Concevoir une page accessible dès le départ est **toujours** plus facile que de revenir à une page existante pour la rendre accessible. + +## Bons principes d'affichage + +### Palettes de couleurs sûres + +Les gens voient le monde de différentes manières, et cela inclut les couleurs. Lorsque vous sélectionnez un schéma de couleurs pour votre site, vous devez vous assurer qu'il est accessible à tous. Un excellent [outil pour générer des palettes de couleurs est Color Safe](http://colorsafe.co/). + +✅ Identifiez un site Web qui est très problématique dans son utilisation de la couleur. Pourquoi? + +### Utilisez le bon code 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 `