diff --git a/.github/workflows/lock.yml b/.github/workflows/lock.yml new file mode 100644 index 00000000..6984af78 --- /dev/null +++ b/.github/workflows/lock.yml @@ -0,0 +1,13 @@ +name: Lock closed issue + +on: + issues: + types: [closed] + +jobs: + lock: + runs-on: ubuntu-latest + steps: + - uses: OSDKDev/lock-issues@v1.1 + with: + repo-token: "${{ secrets.GITHUB_TOKEN }}" 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 110623ca..5bce8be1 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 @@ -2,7 +2,7 @@ This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer. -![Intro Programming](webdev101-programming.png) +![Intro Programming](/sketchnotes/webdev101-programming.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md index 649d2ab6..c1206550 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md @@ -2,7 +2,7 @@ ## Instructions -There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs. +There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs. ## Rubric 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 d1da3963..e882d21c 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 @@ -1,6 +1,9 @@ # Introducción a lenguajes de programación y herramientas del oficio -Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que se tratan aquí se aplican a la mayoría de los lenguajes de programación modernos en la actualidad. En la sección 'Herramientas del oficio', aprenderá sobre software útil que lo ayuda como desarrollador. +Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que aprenderemos aquí se aplican a la mayoría de los lenguajes de programación modernos en la actualidad. En la sección 'Herramientas del oficio', aprenderás sobre software y herramientas que te ayudarán como desarrollador. + +![Intro Programming](/sketchnotes/webdev101-programming.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) ### Introducción @@ -10,21 +13,21 @@ En esta lección, cubriremos: - ¿Qué es la programación? - Tipos de lenguajes de programación - Elementos básicos de un programa -- Software y herramientas útiles para el desarrollador profesional. +- Software y herramientas para desarrolladores profesionales ## ¿Qué es la programación? -La programación (también conocida como codificación) es el proceso de escribir instrucciones en un dispositivo, como una computadora o un dispositivo móvil. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Estos conjuntos de instrucciones pueden tener varios nombres, pero *programa*, *programa de computadora*, *aplicación (app)* y *ejecutable* son algunos nombres populares. +La programación (también conocida como codificación) es el proceso de escribir instrucciones en un dispositivo, como una computadora o un celular. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Estos conjuntos de instrucciones pueden tener varios nombres, pero *programa*, *programa de computadora*, *aplicación (app)* y *ejecutable* son algunos nombres populares. -Un *programa* puede ser cualquier cosa que esté escrita con código; los sitios web, los juegos y las aplicaciones de teléfono son programas. Si bien es posible crear un programa sin escribir código, la lógica subyacente se interpreta al dispositivo y esa lógica probablemente se escribió con código. Un programa que está *ejecutándose* o *ejecutando código* está ejecutando instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para imprimirlo en tu pantalla. +Un *programa* puede ser cualquier cosa que esté escrita con código; los sitios web, los video juegos y las aplicaciones de teléfono son programas. Si bien es posible crear un programa sin escribir código, la lógica subyacente se interpreta al dispositivo y esa lógica probablemente se escribió con código. Un programa que está *ejecutándose* o *ejecutando código* está ejecutando instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para imprimirlo en tu pantalla. -✅ Investigua un poco: ¿quién se considera el primer programador de computadoras del mundo? +✅ Investigua un poco: ¿quién se considera el primer programador(a) de computadoras del mundo? ## Lenguajes de programación -Los lenguajes de programación tienen un propósito principal: que los desarrolladores creen instrucciones para enviarlas a un dispositivo. Los dispositivos solo pueden entender binarios (1 y 0), y para *la mayoría* de los desarrolladores esa no es una forma muy eficiente de comunicarse. Los lenguajes de programación son un vehículo para la comunicación entre humanos y computadoras. +Los lenguajes de programación tienen un propósito principal: que los desarrolladores crear instrucciones para enviarlas a un dispositivo. Los dispositivos solo pueden entender binarios (1 y 0), y para *la mayoría* de los desarrolladores, esa no es una forma muy eficiente de comunicarse. Los lenguajes de programación son un vehículo para la comunicación entre humanos y computadoras. -Los lenguajes de programación vienen en diferentes formatos y pueden tener diferentes propósitos. Por ejemplo, JavaScript se usa principalmente para aplicaciones web, mientras que Bash se usa principalmente para sistemas operativos. +Los lenguajes de programación vienen en diferentes formatos y tienen diferentes propósitos. Por ejemplo, JavaScript se usa principalmente para aplicaciones web, mientras que Bash se usa principalmente para sistemas operativos. *Los idiomas de bajo nivel* normalmente requieren menos pasos que los *idiomas de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace que los lenguajes de alto nivel sean populares es su legibilidad y soporte. JavaScript se considera un lenguaje de alto nivel. @@ -85,20 +88,20 @@ Existe la posibilidad de que un dispositivo no ejecute algunas declaraciones. Es [![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") -En esta sección, aprenderá sobre algún software que puede resultarle muy útil al comenzar su viaje de desarrollo profesional. +En esta sección, aprenderás sobre software que puede ayudarte comenzar tu viaje de desarrollo profesional. Un **entorno de desarrollo** es un conjunto único de herramientas y características que un desarrollador utilizará a menudo al escribir software. Algunas de estas herramientas se han personalizado para las necesidades específicas de un desarrollador y pueden cambiar con el tiempo si un desarrollador cambia las prioridades en el trabajo o proyectos personales, o cuando usa un lenguaje de programación diferente. Los entornos de desarrollo son tan únicos como los desarrolladores que los utilizan. ### Editores -Una de las herramientas más importantes para el desarrollo de software es el editor. Los editores son el lugar donde escribe su código y, a veces, donde ejecutará su código. +Una de las herramientas más importantes para el desarrollo de software es el editor. Los editores son el lugar donde escribes su código y, a veces, donde ejecutarás tu código. Los desarrolladores confían en los editores por algunas razones adicionales: -- *Depuración* Descubrimiento de errores y errores al recorrer el código, línea por línea. Algunos editores tienen capacidades de depuración o se pueden personalizar y agregar para lenguajes de programación específicos. -- *Resaltado de sintaxis* Agrega colores y formato de texto al código, lo hace más fácil de leer. La mayoría de los editores permiten el resaltado de sintaxis personalizado. -- *Extensiones e integraciones del navegador* Adiciones especializadas para desarrolladores, por desarrolladores, para acceder a herramientas adicionales que no están integradas en el editor base. Por ejemplo, muchos desarrolladores también necesitan una forma de documentar su código y explicar cómo funciona, e instalarán una extensión de revisión ortográfica para verificar si hay errores tipográficos. La mayoría de estas adiciones están diseñadas para su uso dentro de un editor específico, y la mayoría de los editores vienen con una forma de buscar extensiones disponibles. -- *Personalización* La mayoría de los editores son extremadamente personalizables, y cada desarrollador tendrá su propio entorno de desarrollo único que se adapta a sus necesidades. Muchos también permiten a los desarrolladores crear su propia extensión. +- *Depuración* - Descubrimiento de errores y errores al recorrer el código, línea por línea. Algunos editores tienen capacidades de depuración o se pueden personalizar y agregar para lenguajes de programación específicos. +- *Resaltado de sintaxis* - Agrega colores y formato de texto al código, lo hace más fácil de leer. La mayoría de los editores permiten el resaltado de sintaxis personalizado. +- *Extensiones e integraciones del navegador* - Adiciones especializadas para desarrolladores, por desarrolladores, para acceder a herramientas adicionales que no están integradas en el editor base. Por ejemplo, muchos desarrolladores también necesitan una forma de documentar su código y explicar cómo funciona, e instalarán una extensión de revisión ortográfica para verificar si hay errores. La mayoría de estas adiciones están diseñadas para usarse dentro de un editor específico, y la mayoría de los editores vienen con una forma de buscar extensiones disponibles. +- *Personalización* - La mayoría de los editores son extremadamente personalizables, y cada desarrollador tendrá su propio entorno de desarrollo único que se adapta a sus necesidades. Muchos también permiten a los desarrolladores crear su propia extensión. #### Editores populares y extensiones de desarrollo web @@ -114,9 +117,9 @@ Los desarrolladores confían en los editores por algunas razones adicionales: ### Navegadores -Otra herramienta fundamental es el navegador. Los desarrolladores web confían en el navegador para observar cómo se ejecuta su código en la web, también se usa para ver elementos visuales de una página web que están escritos en el editor, como HTML. +Otra herramienta fundamental es el navegador. Los desarrolladores de web confían en el navegador para observar cómo se ejecuta su código en la web. También se usa para ver elementos visuales de una página web que están escritos en el editor, como HTML. -Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que contienen un conjunto de características e información útiles para ayudar a los desarrolladores a recopilar y capturar información importante sobre su aplicación. Por ejemplo: si una página web tiene errores, a veces es útil saber cuándo ocurrieron. DevTools en un navegador se puede configurar para capturar esta información. +Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que contienen un conjunto de características e información útiles para ayudar a los desarrolladores a recopilar y capturar información importante sobre su aplicación. Por ejemplo: si una página web tiene errores, a veces es útil saber cuándo ocurrieron. Se puede configurar DevTools en un navegador para capturar esta información. #### Navegadores y herramientas de desarrollo populares @@ -124,15 +127,15 @@ Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que - [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Firefox](https://developer.mozilla.org/docs/Tools) -### Herramientas de línea de comandos +### Herramientas de línea de comandos (CLI) -Algunos desarrolladores prefieren una vista menos gráfica para sus tareas diarias y confían en la línea de comandos para lograrlo. El desarrollo de código requiere una gran cantidad de escritura, y algunos desarrolladores prefieren no interrumpir su flujo en el teclado y usarán atajos de teclado para cambiar entre ventanas de escritorio, trabajar en diferentes archivos y usar herramientas. La mayoría de las tareas se pueden completar con un mouse, pero una de las ventajas de utilizar la línea de comandos es que se pueden hacer muchas cosas con las herramientas de la línea de comandos sin necesidad de cambiar entre el mouse y el teclado. Otro beneficio de la línea de comandos es que son configurables y puede guardar su configuración personalizada, cambiarla más tarde y también importarla a nuevas máquinas de desarrollo. Debido a que los entornos de desarrollo son tan exclusivos para cada desarrollador, algunos evitarán usar la línea de comandos, algunos dependerán de ella por completo y algunos prefieren una combinación de ambos. +Algunos desarrolladores prefieren una vista menos gráfica para sus tareas diarias y confían en la línea de comandos **(CLI)** para lograrlo. El desarrollo de código requiere una gran cantidad de escritura, y algunos desarrolladores prefieren no interrumpir su flujo en el teclado y usarán atajos (shortcut) de teclado para cambiar entre ventanas de escritorio, trabajar en diferentes archivos y usar herramientas. La mayoría de las tareas se pueden completar con un mouse, pero una de las ventajas de utilizar la línea de comandos es que se pueden hacer muchas cosas con las herramientas de la línea de comandos, sin necesidad de cambiar entre el mouse y el teclado. Otro beneficio de la línea de comandos es que son configurables y puedes guardar tu configuración personalizada, cambiarla más tarde y también importarla a nuevas máquinas de desarrollo. Debido a que los entornos de desarrollo son tan exclusivos para cada desarrollador, algunos evitarán usar la línea de comandos, algunos dependerán de ella por completo y algunos prefieren una combinación de ambos. -### Opciones de línea de comandos populares +### Opciones de línea de comandos (CLI) populares -Las opciones para la línea de comando variarán según el sistema operativo que utilice. +Las opciones para la línea de comando varian según el sistema operativo que utilices. -*💻 = viene preinstalado en el sistema operativo.* +💻 = *viene preinstalado en el sistema operativo.* #### Windows @@ -153,7 +156,7 @@ Las opciones para la línea de comando variarán según el sistema operativo que - [KDE Konsole](https://docs.kde.org/trunk5/en/applications/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 +#### Línea de comandos (CLI) Populares - [Git](https://git-scm.com/) (💻 en la mayoría de los sistemas operativos) - [NPM](https://www.npmjs.com/) @@ -161,9 +164,9 @@ Las opciones para la línea de comando variarán según el sistema operativo que ### Documentación -Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recurra a la documentación para aprender a usarla. Los desarrolladores a menudo confían en la documentación para guiarlos a través de cómo usar las herramientas y los lenguajes correctamente, y también para obtener un conocimiento más profundo de cómo funciona. +Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recurras a la documentación para aprender a usarla. Los desarrolladores a menudo confían en la documentación para guiarlos a través de cómo usar las herramientas y los lenguajes correctamente, y también para obtener un conocimiento más profundo de cómo funciona. -#### Documentación popular sobre desarrollo web +#### Documentación popular sobre desarrollo de web - [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) - [Frontend Masters](https://frontendmasters.com/learn/) @@ -178,6 +181,6 @@ Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos ## Revisión y autoestudio -Estudia un poco sobre los diferentes lenguajes disponibles para el programador. Intente escribir una línea en un idioma y luego vuelva a hacerlo en otros dos. ¿Qué aprendes? +Estudia un poco sobre los diferentes lenguajes disponibles para el programador. Intenta escribir una línea en un idioma y luego vuelve a hacerlo en otros dos. ¿Qué aprendiste? -**Asignación**: [Asignación](../assignment.md) \ No newline at end of file +**Tarea**: [Tarea](../assignment.md) \ No newline at end of file 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 new file mode 100644 index 00000000..f04fed52 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md @@ -0,0 +1,191 @@ +# Introduction aux langages de programmation et aux outils du métier + +Cette leçon couvre les bases des langages de programmation. Les sujets abordés ici s'appliquent à la plupart des langages de programmation modernes d'aujourd'hui. Dans la section «Outils du métier», vous découvrirez des logiciels utiles qui vous aideront en tant que développeur. + +![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) + +## introduction + +Dans cette leçon, nous aborderons: + +- Qu'est-ce que la programmation? +- Types de langages de programmation +- Éléments de base d'un programme +- Logiciel et outillage utiles pour le développeur professionnel + +## 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. + +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. + +✅ Faites une petite recherche: qui est considéré comme le premier programmeur informatique au monde? + +## Langages de programmation + +Les langages de programmation ont un objectif principal: permettre aux développeurs de créer des instructions à envoyer à un appareil. Les appareils ne peuvent comprendre que le binaire (1 et 0), et pour *la plupart* les développeurs, ce n'est pas un moyen très efficace de communiquer. Les langages de programmation sont un vecteur de communication entre les humains et les ordinateurs. + +Les langages de programmation se présentent sous différents formats et peuvent servir à des fins différentes. Par exemple, JavaScript est principalement utilisé pour les applications Web, tandis que Bash est principalement utilisé pour les systèmes d'exploitation. + +*Les langues de bas niveau* nécessitent généralement moins d'étapes que les *langues de haut niveau* pour qu'un appareil interprète les instructions. Cependant, ce qui rend les langages de haut niveau populaires, c'est leur lisibilité et leur support. JavaScript est considéré comme un langage de haut niveau. + +Le code suivant illustre la différence entre un langage de haut niveau avec JavaScript et un langage de bas niveau avec le code d'assembly ARM. + +```javascript +let number = 10 +let n1 = 0, n2 = 1, nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Croyez-le ou non, *they're both doing the same thing*: impression 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. + +## Éléments d'un programme + +Une seule instruction dans un programme est appelée une *instruction* et aura généralement un caractère ou un interligne qui marque où l'instruction se termine, ou *se termine*. La façon dont un programme se termine varie avec chaque langue. + +La plupart des programmes reposent sur l'utilisation des données d'un utilisateur ou d'ailleurs, où les déclarations peuvent s'appuyer sur des données pour exécuter des instructions. Les données peuvent modifier le comportement d'un programme, de sorte que les langages de programmation proposent un moyen de stocker temporairement des données pouvant être utilisées ultérieurement. Ces données sont appelées *variables*. Les variables sont des instructions qui demandent à un appareil d'enregistrer des données dans sa mémoire. Les variables des programmes sont similaires à celles de l'algèbre, où elles ont un nom unique et leur valeur peut changer avec le temps. + +Il est possible que certaines instructions ne soient pas exécutées par un périphérique. C'est généralement par conception lors de l'écriture par le développeur ou par accident lorsqu'une erreur inattendue se produit. Ce type de contrôle d'une application la rend plus robuste et maintenable. Généralement, ces changements de contrôle se produisent lorsque certaines décisions sont respectées. Une instruction courante dans les langages de programmation modernes pour contrôler la manière dont un programme est exécuté est l'instruction `if..else`. + +✅ Vous en apprendrez plus sur ce type d'énoncé dans les leçons suivantes + +## Outils du métier + +[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +Dans cette section, vous découvrirez certains logiciels que vous pourriez trouver très utiles au début de votre parcours de développement professionnel. + +Un **environnement de développement** est un ensemble unique d'outils et de fonctionnalités qu'un développeur utilisera souvent lors de l'écriture d'un logiciel. Certains de ces outils ont été personnalisés pour les besoins spécifiques d'un développeur et peuvent changer au fil du temps si un développeur change de priorités dans ses projets professionnels ou personnels, ou lorsqu'il utilise un langage de programmation différent. Les environnements de développement sont aussi uniques que les développeurs qui les utilisent. + +### éditeurs + +L'éditeur est l'un des outils les plus cruciaux pour le développement logiciel. Les éditeurs sont l'endroit où vous écrivez votre code et parfois où vous exécuterez votre code. + +Les développeurs comptent sur les éditeurs pour quelques raisons supplémentaires: + +- *Débogage* Découverte des bogues et des erreurs en parcourant le code, ligne par ligne. Certains éditeurs ont des capacités de débogage ou peuvent être personnalisés et ajoutés pour des langages de programmation spécifiques. +- *Mise en évidence de la syntaxe* Ajoute des couleurs et la mise en forme du texte au code, le rend plus facile à lire. La plupart des éditeurs permettent une coloration syntaxique personnalisée. +- *Extensions et intégrations* Ajouts spécialisés pour les développeurs, par les développeurs, pour accéder à des outils supplémentaires qui ne sont pas intégrés à l'éditeur de base. Par exemple, de nombreux développeurs ont également besoin d'un moyen de documenter leur code et d'expliquer comment il fonctionne et installeront une extension de vérification orthographique pour vérifier les fautes de frappe. La plupart de ces ajouts sont destinés à être utilisés dans un éditeur spécifique, et la plupart des éditeurs proposent un moyen de rechercher les extensions disponibles. +- *Personnalisation* La plupart des éditeurs sont extrêmement personnalisables, et chaque développeur aura son propre environnement de développement unique qui répond à ses besoins. Beaucoup permettent également aux développeurs de créer leur propre extension. + +#### Éditeurs et extensions de développement Web populaires + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### Navigateurs + +Un autre outil crucial est le navigateur. Les développeurs Web comptent sur le navigateur pour observer comment leur code s'exécute sur le Web, il est également utilisé pour afficher les éléments visuels d'une page Web qui sont écrits dans l'éditeur, comme le HTML. + +De nombreux navigateurs sont livrés avec des *outils de développement* (DevTools) qui contiennent un ensemble de fonctionnalités et d'informations utiles pour aider les développeurs à collecter et capturer des informations importantes sur leur application. Par exemple: si une page Web contient des erreurs, il est parfois utile de savoir quand elles se sont produites. DevTools dans un navigateur peut être configuré pour capturer ces informations. +#### Navigateurs et outils de développement populaires + +- [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) + +### ligne de commande + +Certains développeurs préfèrent une vue moins graphique pour leurs tâches quotidiennes et comptent sur la ligne de commande pour y parvenir. Le développement de code nécessite une quantité importante de saisie, et certains développeurs préfèrent ne pas perturber leur flux sur le clavier et utiliseront des raccourcis clavier pour basculer entre les fenêtres du bureau, travailler sur différents fichiers et utiliser des outils. La plupart des tâches peuvent être effectuées avec une souris, mais un avantage de l'utilisation de la ligne de commande est que beaucoup peut être fait avec des outils de ligne de commande sans avoir besoin de permuter entre la souris et le clavier. Un autre avantage de la ligne de commande est qu'elle est configurable et que vous pouvez enregistrer votre configuration personnalisée, la modifier ultérieurement et également l'importer sur de nouvelles machines de développement. Parce que les environnements de développement sont si uniques à chaque développeur, certains éviteront d'utiliser la ligne de commande, certains s'y fieront entièrement, et certains préfèrent un mélange des deux. + +### Options de ligne de commande populaires + +Les options de la ligne de commande varient en fonction du système d'exploitation que vous utilisez. + +*💻 = est préinstallé sur le système d'exploitation.* + +#### 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/applications/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) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentation + +Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tournera très probablement vers la documentation pour apprendre à l'utiliser. Les développeurs s'appuient souvent sur la documentation pour les guider dans la manière d'utiliser correctement les outils et les langages, et également pour acquérir une connaissance plus approfondie de son fonctionnement. + +#### Documentation populaire sur le développement Web + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ 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. + +--- + +## 🚀 Défi + +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) + +## Révision et auto-étude + +É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 + +[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 82421a8f..4c924dca 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 @@ -2,7 +2,7 @@ Αυτό το μάθημα καλύπτει τα βασικά των γλωσσών προγραμματισμού. Τα θέματα που καλύπτονται εδώ ισχύουν για τις περισσότερες σύγχρονες γλώσσες προγραμματισμού σήμερα. Στην ενότητα 'Εργαλεία του Εμπορίου', θα μάθετε για χρήσιμο λογισμικό που σας βοηθά ως προγραμματιστές. -![Intro Programming](../webdev101-programming.png) +![Intro Programming](/sketchnotes/webdev101-programming.png) > Σκίτσο από [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz 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 13a99727..c84fcc25 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 @@ -2,7 +2,7 @@ Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sini berlaku untuk sebagian besar bahasa pemrograman modern saat ini. Di bagian 'Alat Keterampilan', Anda akan belajar tentang perangkat lunak yang berguna yang membantu Anda sebagai pengembang. -![Pemrograman Intro](../webdev101-programming.png) +![Pemrograman Intro](/sketchnotes/webdev101-programming.png) > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah 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 baac5411..ebceea1b 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 @@ -2,7 +2,7 @@ Questa lezione tratta delle basi dei linguaggi di programmazione. Gli argomenti trattati qui si applicano alla maggior parte dei moderni linguaggi di programmazione di oggi. Nella sezione 'Strumenti Necessari' conoscerete utili software che vi aiuteranno come programmatore. -![Introduzione alla Programmazione](../webdev101-programming.png) +![Introduzione alla Programmazione](/sketchnotes/webdev101-programming.png) > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pre-Lezione 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 b0361fba..401c664e 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 @@ -4,7 +4,7 @@ ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。 次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。 -![Intro Programming](../webdev101-programming.png) +![Intro Programming](/sketchnotes/webdev101-programming.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 事前クイズ 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 bea6837a..0abd4d60 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 @@ -2,7 +2,7 @@ 이 강의에서는 프로그래밍 언어의 기초를 다룹니다. 여기에서 다루는 주제는 오늘 날 많은 최신 프로그래밍 언어에 적용됩니다. 'Tools of the Trade' 세션에서는 개발자에게 도움이 되는 유용한 소프트웨어에 대해 알아보겠습니다. -![Intro Programming](../webdev101-programming.png) +![Intro Programming](/sketchnotes/webdev101-programming.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 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 44914eb6..1b649a80 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 @@ -2,7 +2,7 @@ Pelajaran ini merangkumi asas bahasa pengaturcaraan. Topik yang anda akan belajar di sini dapat mengaplikasikan untuk kebanyakan bahasa pengaturcaraan moden hari ini. Pada bahagian 'Alat Perdagangan', anda akan belajar bagaimana mengenai perisian berguna yang membantu anda sebagai pembangun. -![Intro Programming](../webdev101-programming.png) +![Intro Programming](/sketchnotes/webdev101-programming.png) > Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra-Kuliah 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 f34f2d4e..504a5143 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 @@ -1,8 +1,8 @@ # Introductie van Programmeertalen en Bijbehorend Vakgereedschap -Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leer je over nuttige toepassingen die je helpen als web ontwikkelaar. +Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leert u over nuttige toepassingen die u helpen als web ontwikkelaar. -![Introductie Programmeren](../webdev101-programming.png) +![Introductie Programmeren](/sketchnotes/webdev101-programming.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz @@ -22,7 +22,7 @@ In deze les hebben we het over: Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies voor een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, *script* en *executable*. -Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat je nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen. +Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat u nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen. ✅ Doe wat onderzoek: wie wordt gezien als werelds eerste computer programmeur? @@ -85,24 +85,24 @@ De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruike Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoeld op bij onverwachte fouten. Het is een vorm van controle in een applicatie, dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit voldoet aan bepaalde condities. Een veelvoorkomend statement in een moderne programmeertaal om de controle van een programma te beïnvloeden is het `if..else` statement. -✅ Je leert meer over het `if..else` statement in de volgende lessen. +✅ U leert meer over het `if..else` statement in de volgende lessen. ## Vakgereedschap [![Vakgereedschap](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Vakgereedschap") -In dit onderdeel leer je welke applicaties je wellicht handig vindt om mee te werken als je je professionele web ontwikkelaar carrière start. +In dit onderdeel leert u welke applicaties u wellicht handig vindt om mee te werken als u uw professionele web ontwikkelaar carrière start. Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als er een andere programmeertaal moet worden gebruikt. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruiken. ### Editors -Een van de meest cruciale applicaties voor software ontwikkeling is de code editor. In een editor schrijf je je code en soms run je daar ook je code. +Een van de meest cruciale applicaties voor software ontwikkeling is de code editor. In een editor schrijft u uw code en soms runt u daar ook uw code. Ontwikkelaars gebruiken editors ook om de volgende redenen: -- *Debugging* Het regel voor regel runnen van je code om bugs te ontdekken. Sommige editors hebben debugging mogelijkheden, of kunnen aangepast worden voor specifieke programmeertalen. -- *Syntax markering* Voegt kleuren en tekst opmaak toe aan code om het leesbaarder te maken. De meeste editors hebben de mogelijkheid om dit aan te passen naar je eigen smaak. +- *Debugging* Het regel voor regel runnen van uw code om bugs te ontdekken. Sommige editors hebben debugging mogelijkheden, of kunnen aangepast worden voor specifieke programmeertalen. +- *Syntax markering* Voegt kleuren en tekst opmaak toe aan code om het leesbaarder te maken. De meeste editors hebben de mogelijkheid om dit aan te passen naar uw eigen smaak. - *Extensies en Integraties* Uitbreidingen van de editor, speciaal voor ontwikkelaars en gemaakt door ontwikkelaars, om extra functionaliteiten toe te voegen die standaard niet in de editor inzitten. Bijvoorbeeld een spellingscontrole extensie wat documentatie kan controleren op spelfouten. Vaak zijn extensies ontwikkeld voor een specifieke code editor. De meeste editors bieden een zoekfunctie om relevante extensies te vinden. - *Persoonlijke instellingen* De meeste editors hebben instellingen die volledig aan te passen zijn naar de wens van de ontwikkelaar. Elke ontwikkelaar zal daarom een unieke ontwikkelomgeving hebben wat voldoet aan hun specifieke wensen. @@ -131,11 +131,11 @@ Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwik ### Command Line Applicaties -Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat je heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en je deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties. +Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat u heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en u deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties. ### Populaire Command Lines -Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat je gebruikt. +Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat u gebruikt. *💻 = is geïnstalleerd met het besturingssysteem.* @@ -173,7 +173,7 @@ Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de b - [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) - [Frontend Masters](https://frontendmasters.com/learn/) -✅ Doe wat onderzoek: Nu je 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. +✅ 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. --- @@ -186,7 +186,7 @@ Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Jav ## Review & Zelfstudie -Bestudeer wat voor verschillende programmeertalen er zijn. Zoek in 3 talen een 'Hello World' voorbeeld op. Zo krijg je een goed idee wat er voor nodig is om tekst in de browser te tonen. +Bestudeer wat voor verschillende programmeertalen er zijn. Zoek in 3 talen een 'Hello World' voorbeeld op. Zo krijgt u een goed idee wat er voor nodig is om tekst in de browser te tonen. ## Opdracht 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 new file mode 100644 index 00000000..240028e1 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md @@ -0,0 +1,192 @@ +# 编程语言概述与工具介绍 + +这节课涵盖了编程语言的基础知识，涉及到的内容适用于如今大多数现代编程语言。在“工具介绍”部分，你会了解到一些对开发者很有用的软件。 + +![Intro Programming](/sketchnotes/webdev101-programming.png) +> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) + +## 课前小测 +[课前小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=zh_cn) + +## 大纲 + +这节课我们将会介绍： + +- 什么是编程？ +- 编程语言的种类 +- 程序的基本要素 +- 对专业开发者很有用的软件和工具 + +## 什么是编程？ + +编程（programming） ，俗称写代码（coding），是向诸如计算机或移动设备之类的设备写入指令的过程。我们使用编程语言来编写这些指令，然后交由设备去解释（interpret）。这些指令的集合有许多叫法，常见的有*程序（program）*、*计算机程序（computer program）*、*应用程序（application / app）*和*可执行文件（executable）*。 + +*程序*可以是任何由代码编写的东西，比如网站、游戏和手机应用。尽管的确有办法不编写任何代码就创建一个程序，但是设备还是会去解析其底层逻辑，这个逻辑大概率是由代码编写的。所谓*正在运行*或是*执行代码*的程序所做的其实都是执行指令。你现在用来阅读这段文字的设备，也正在运行一个将文字输出到你的屏幕上的程序。 + +✅ 查一查：谁被认为是世界上第一位计算机程序员？ + +## 编程语言 + +编程语言的主要目的是：让开发者可以构建指令并将它们传递给设备。设备只能理解二进制（一堆 0 和 1），这对*大多数*开发者来说实在不算是高效的交流方式，而编程语言正是人类与计算机之间沟通的桥梁。 + +编程语言有着不同的形式，也可能用于不同的目的。比如 JavaScript 主要用于 Web 应用，而 Bash 则主要用于操作系统。 + +对于设备来说看，解释*低级语言（low level languages）*的指令一般会比解释*高级语言（high level languages）*的指令需要更少的步骤。然而，高级语言因为其可读性和兼容性会更加常用。JavaScript 就是一种高级语言。 + +下面的代码展示了高级语言（以 JavaScript 为例）和低级语言（以 ARM 汇编代码为例）的区别： + +```javascript +let number = 10 +let n1 = 0, n2 = 1, nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +不管你信不信，*它们做的事完全相同*：打印斐波那契数列的前 10 位。 + +✅ [斐波那契数列](https://zh.wikipedia.org/wiki/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97)是一个由 0 和 1 开头，每个数字都是它之前两个数字之和的数列。 + +## 程序的基本要素 + +程序中的单条指令（instruction）被称作*语句（statement）*，常用一个字符或是空行来标识指令结束的位置，这种标识可被称为*终止符（terminates）*。程序的结束方式也因语言而异。 + +多数程序都需要用到从用户或其他地方获取到的数据（data），此时语句会根据这些数据来执行指令。数据会改变程序的行为，所以编程语言提供了一种临时存储此后会被用到的数据的方法。这些数据被称作*变量（variables）*。变量也是语句，用来指示设备将数据存到它的内存中。和代数学中的变量类似，程序中的变量也有独立的命名，其值在之后也可能发生改变。 + +有的语句可能不会被设备执行，这通常是开发者有意为之，否则就是发生了意外的错误。这样的控制可以让应用程序更加稳定和可维护。一般来说这些控制的切换会在满足特定条件的情况下发生。`if..else` 语句就是一个在现代编程语言中常见的用于控制程序的语句。 + +✅ 你会在此后的课程中学到更多关于此类语句的知识 + +## 工具介绍 + +[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "工具介绍") + +在这一部分，你将会了解到一些能在你的专业开发之旅中颇有帮助的软件。 + +**开发环境（development environment）** 指的是一位开发者自己在编写软件时常会用到的工具和功能的集合。其中一些工具会按照开发者的特定需求被自定义配置，这些工具集也会随着时间发生变化，原因可能是开发者在工作或个人项目中改变了需求的优先级，抑或是切换到了另一种编程语言。开发环境往往因人而异。 + +### 编辑器 + +编辑器（Editors）是软件开发中最关键的工具之一，是你用来编写甚至运行你的代码的地方。 + +开发者选用编辑器还有这些原因： + +- *调试（Debugging）* 通过逐步或逐行地运行代码来发现漏洞和错误。一些编辑器自身带有调试功能，或者可以被自定义添加对特定编程语言的调试功能。 +- *语法高亮（Syntax highlighting）* 为代码添加颜色和文本格式以便阅读。多数编辑器都可以对语法高亮进行自定义。 +- *插件和集成（Extensions and Integrations）* 开发者可以根据自身需要为编辑器添加其原生本不包含的功能。比如，许多开发者需要为代码撰写文档来解释其工作原理，就会安装一个拼写检查插件来检查有没有拼写错误。多数插件都只支持特定的编辑器，多数编辑器也会提供搜索可用插件的方法。 +- *自定义（Customization）* 多数编辑器都是高度可自定义的，每一位开发者都能根据自身需要来自定义自己的开发环境。许多开发者还会编写自己的插件。 + +#### 主流编辑器和 Web 开发插件 + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### 浏览器 + +另一个关键工具是浏览器。Web 开发者需要用浏览器来观察它们的代码如何在网页上运行，还可以看到编辑器中编写的元素（如 HTML 元素）如何展现在网页上。 + +许多浏览器都提供了*开发者工具*（DevTools），包括一系列有用的功能和信息，用以辅助开发者收集和捕获它们应用程序的重要信息。例如当网页发生错误时，获知错误是何时发生的有助于帮助解决错误，而浏览器 DevTools 就可以被配置来捕获这个信息。 + +#### 主流浏览器和 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) + +### 命令行工具（Command Line Tools） + +一些开发者更喜欢使用较少的图形化界面来执行日常任务，因此选择使用命令行。开发代码需要大量的文字输入，一些开发者不喜欢自己在键盘上的工作流被打断，会使用键盘快捷键来切换桌面窗口、切换工作文件、使用工具等。大多数任务都可以通过鼠标完成，而使用命令行的一个好处就是无需再鼠标和键盘之间切换就能完成多数工作。命令行的另一个好处是它们是可配置的，所以你可以保存你的配置并随时修改，还可以将其导入到新的开发设备上。但开发环境毕竟因人而异，有人完全不想用命令行，有人则希望在命令行做所有事，还有一些人两种方式都乐意接受。 + +### 常用命令行选择 + +命令行选择基于你使用的操作系统会有所不同。 + +*💻 表示会预装在对应操作系统上* + +#### 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) (即 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/applications/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) + +#### 常用命令行工具 + +- [Git](https://git-scm.com/) (💻 <- 在多数操作系统上) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### 文档 + +当一位开发者想要学点新东西，他们基本都会去找文档（Documentation）来学习如何使用。开发者会依靠文档来指引他们如何合理地使用工具和语言，并且从中获取更多关于实现原理的深层知识。 + +#### Web 开发常用文档 + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ 查一查：既然你已经对 Web 开发者的环境有所了解，何不比较一下其与 Web 设计师的环境的差异？ + +--- + +## 🚀 挑战 + +比较一些编程语言。JavaScript 和 Java 相互之间有什么独特的特征？COBOL 和 Go 之间呢？ + +## 课后小测 +[课后小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=zh_cn) + +## 复习 & 自学 + +尝试接触一些不同的编程语言，用一种语言写一行代码，然后用另外两种语言重写这一行代码，你有什么感悟吗？ + +## 作业 + +[阅读文档](assignment.zh-cn.md) 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 new file mode 100644 index 00000000..29b71a3e --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md @@ -0,0 +1,193 @@ +# 程式語言概論與必備工具 + +這堂課程解釋程式語言的基礎。這項主題能應用到當代多數的程式語言。關於必備工具的部分，你會學到許多實用的開發者軟體。 + +![關於程式語言](/sketchnotes/webdev101-programming.png) +> 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製。 + +## 課前測驗 +[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=zh_tw) + +## 大綱 + +在這堂課中，包含： + +- 什麼是程式設計? +- 程式語言的種類 +- 程式的基本架構 +- 給專業開發者的實用軟體與工具 + +## 什麼是程式設計? + +程式設計，又稱作Coding，是編寫電腦或手機裝置的指令過程。我們以裝置看得懂的程式語言來編寫這些指令，這些指令集涉及到常見的*程式*、*電腦程式*、*應用程式(App)*或*執行檔*。 + +一個*程式*以程式碼任意創作出來，網頁、遊戲、手機應用都是程式的一種。雖然我們可以在不編寫程式碼的情況下建出程式，但裝置底下的邏輯概念還是以程式碼為主。一個*執行中*、*執行編碼*的程式都是仰賴著指令。你眼前正閱讀的文字就是由程式輸出到螢幕。 + +✅ 課外研究： 誰被認為是世界上第一位電腦工程師? + +## 撰寫程式語言 + +編寫程式語言的主要目的是讓開發者得以指示裝置。裝置只能讀懂二元格式 ( 1 與 0 )，對於*大多數*的開發者而言，這並不是個很好理解溝通的方式。程式語言就像人類與電腦之間溝通的橋梁。 + +程式語言有不同的格式與滿足的目的。舉例來說，JavaScript 常被用在網頁應用上，而 Bash 主要是用在作業系統上。 + +*低階語言(Low level languages)* 通常比 *高階語言(high level languages)* 要求更少的裝置指示步數。然而，高階語言的閱讀性與支援性讓它成為最普及的程式語言。JavaScript 即是一種高階語言。 + +下列程式碼說明高階語言(JavaScript)與低階語言(ARM assembly code)的差異： + +```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 +``` + +事實上，*他們都做一樣的事情* ── 印出前十項費氏數列。 + +✅ 費氏數列的[定義](https://zh.wikipedia.org/zh-tw/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97)為該數是由之前的兩數相加而得出。初始值為 0 與 1。 + +## 程式的基本架構 + +程式中的一行指令(instruction)被稱做*陳述式(statement)*，通常會由特定符號或分行來決定結尾處，或是執行*程式終止*。程式終止的方式會依不同程式語言而有所不同。 + +大多數程式需要使用用戶或其他位置的資料，陳述式依照這些資料決定指令。資料會影響程式的運作方式，編寫程式語言便是一種暫時性儲存資料的途徑。這些資料稱為*變數(Variables)*。變數會指引資料儲存到裝置上的位置，它們就像代數一樣：有自己的名稱、數值隨時間改變。 + +有些情況裝置不會執行到陳述式。通常是開發者故意的選擇或意外性地輸入錯誤，讓應用程式變得更豐富且需要被維護。常見的發生情況在決定條件的時候，如當代程式語言以 `if..else` 條件式來決定程式的執行方式。 + +✅ 往後的課程會講解各式各樣的陳述式型態。 + +## 工欲善其事，必先利其器 + +[![謀生工具 Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "謀生工具 Tools of the Trade") + +在這個章節，你會學習到一些實用的軟體來開始你的開發旅程。 + +一個**開發環境**包含許多開發者撰寫程式需要用到的工具。它們會依照開發者的需求而不同，隨著時間、專案大小、程式語言而有所調整。每個開發者都有自己獨特的開發環境。 + +### 文字編輯器 + +文字編輯器可說是最重要的軟體開發工具。開發者可以在其中撰寫並執行程式。 + +還有許多原因讓開發者選擇文字編輯器： + +- *偵錯(Debugging)* 在程式碼中一行一行地找尋錯誤。有些文字編輯器有偵錯的功能，可以依照不同的程式語言而調整。 +- *語法突顯(Syntax highlighting)* 將程式碼加上顏色並自動排版，方便開發者閱讀。文字編輯器也支援語法突顯的客製化。 +- *整合擴充插件(Extensions and Integrations)* 擴充插件不包含在預設的文字編輯器當中，開發者依照自己的需求建立並新增到文字編輯器當中。舉例來說，許多開發者需要統整程式文檔並註解這些檔案，他們就會加裝檢查拼字的插件。有些插件功能只支援特定的文字編輯器，文字編輯器也提供搜尋擴充插件的功能。 +- *客製化(Customization)* 大多數的文字編輯器都允許開發者做客製化，開發者依照自己的習慣，建立自己順手的開發環境。其中也包含建立自己的擴充插件。 + +#### 常見文字編輯器與網頁開發插件 + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### 瀏覽器 + +另一款重要的工具是瀏覽器。網頁開發人員會藉由瀏覽器觀察程式的執行情況，瀏覽器也是常見的網頁編輯與檢視器，顯示來自檔案的可見物件，如 HTML 檔。 + +許多瀏覽器都附加*開發者工具(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) + +### 常用指令 + +有些開發者偏好較少的介面，通常會使用指令來完成工作；撰寫程式碼要求大量的文字輸入，有些開發者偏好以不中斷文字輸入為首要條件，常用快捷鍵做視窗與檔案的切換。多數工作能以滑鼠操作，但為了減少鍵盤與滑鼠間的切換，指令輸入會是實踐上較合適的方式。另一項指令輸入的好處是它們彈性很高，隨時可以更新設定，甚至移植到其他機器上。每一位開發者有各自的開發習慣，開發環境也有所不同。 + +### 常用指令選項 + +指令選項(Command Line Options)會依不同的作業系統而有所不同。 + +*💻 表示預設已安裝在作業系統上。* + +#### 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) (又稱作 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/applications/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) + +#### 其他常用指令 + +- [Git](https://git-scm.com/) (💻 已支援大多數的作業系統。) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### 技術文件 + +若開發人員想學新的事物，技術文件會是很好的幫手。他們會參照文件來學習如何使用工具與新的程式語言，並瞭解如何鑽研更深入的用法。 + +#### 常用的網頁開發文件 + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ 研究項目： 現在你已經了解基本的網頁開發環境了。請比較「網頁開發環境」與「網頁設計環境」之間的差異。 + +--- + +## 🚀 挑戰 + +比較不同的程式語言： JavaScript 與 Java 間有什麼獨特的特徵? 那 COBOL 與 Go 呢? + +## 課後測驗 +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=zh_tw) + +## 複習與自學 + +學習不同的程式語言。試著在三種不同的程式語言寫幾行程式碼。你學到了什麼? + +## 作業 + +[閱讀技術文件](assignment.zh-tw.md) + diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md new file mode 100644 index 00000000..6deab32e --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md @@ -0,0 +1,11 @@ +# Lire la documentation + +## Instructions + +Un développeur Web peut avoir besoin de nombreux outils qui se trouvent sur le [Documentation MDN pour l'outillage côté client](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils non traités dans la leçon, expliquez pourquoi un développeur Web l'utiliserait, recherchez un outil qui relève de cette catégorie et partagez sa documentation. N'utilisez pas le même exemple d'outil sur les documents MDN. + +## Rubrique + +Exemplaire | Adéquat | A besoin d'amélioration +--- | --- | -- | +| Expliqué pourquoi le développeur Web utiliserait l'outil | Expliqué comment, mais pas pourquoi le développeur utiliserait l'outil | N'a pas mentionné comment ou pourquoi un développeur utiliserait l'outil | \ No newline at end of file diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.gr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.gr.md index 8e05de68..0929d7f8 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.gr.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.gr.md @@ -2,7 +2,7 @@ ## Οδηγίες -Υπάρχουν πολλά εργαλεία που μπορεί να χρειαστεί ένας web developer και τα οποία βρίσκονται στο [MDN έγγραφα για client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Επιλέξτε 3 εργαλεία που δεν αναφέρονται στο μάθημα, εξηγήστε γιατί θα τα χρησιμοποιούσε ένας web developer, αναζητήστε ένα εργαλείο που ανήκει σε αυτήν την κατηγορία και μοιραστείτε την τεκμηρίωσή σας. Μην χρησιμοποιήσετε το ίδιο παράδειγμα εργαλείου που αναφέρεται στα έγγραφα MDN. +Υπάρχουν πολλά εργαλεία που μπορεί να χρειαστεί ένας web developer και τα οποία βρίσκονται στο [MDN έγγραφα για client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Επιλέξτε 3 εργαλεία που δεν αναφέρονται στο μάθημα, εξηγήστε γιατί θα τα χρησιμοποιούσε ένας web developer, αναζητήστε ένα εργαλείο που ανήκει σε αυτήν την κατηγορία και μοιραστείτε την τεκμηρίωσή σας. Μην χρησιμοποιήσετε το ίδιο παράδειγμα εργαλείου που αναφέρεται στα έγγραφα MDN. ## diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md index ded90c34..8c73b4be 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md @@ -2,7 +2,7 @@ ## अनुदेश -ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें. +ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें. ## सरनामा diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md index a9d0ece7..870ed91d 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md @@ -2,7 +2,7 @@ ## Instruksi -Ada banyak alat yang mungkin diperlukan pengembang web yang ada di [dokumentasi MDN untuk alat sisi klien](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) . Pilih 3 alat yang tidak tercakup dalam pelajaran, jelaskan mengapa pengembang web akan menggunakannya, dan cari alat yang termasuk dalam kategori ini dan bagikan dokumentasinya. Jangan gunakan contoh alat yang sama pada dokumen MDN. +Ada banyak alat yang mungkin diperlukan pengembang web yang ada di [dokumentasi MDN untuk alat sisi klien](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) . Pilih 3 alat yang tidak tercakup dalam pelajaran, jelaskan mengapa pengembang web akan menggunakannya, dan cari alat yang termasuk dalam kategori ini dan bagikan dokumentasinya. Jangan gunakan contoh alat yang sama pada dokumen MDN. ## Rubrik diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md index 10da2236..36c8f18d 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md @@ -2,7 +2,7 @@ ## Istruzioni -Ci sono molti strumenti dei quali uno sviluppatore web potrebbe avere bisogno che non sono nella [documentazione MDN per strumenti lato client](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selezionare 3 strumenti non trattati nella lezione, spiegare perchè uno sviluppatore web dovrebbe usarli, cercare uno strumento che possa rientrare in questa categoria e condivere la sua documentazione. Non usare lo stesso strumento di esempio citato nei documenti MDN. +Ci sono molti strumenti dei quali uno sviluppatore web potrebbe avere bisogno che non sono nella [documentazione MDN per strumenti lato client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selezionare 3 strumenti non trattati nella lezione, spiegare perchè uno sviluppatore web dovrebbe usarli, cercare uno strumento che possa rientrare in questa categoria e condivere la sua documentazione. Non usare lo stesso strumento di esempio citato nei documenti MDN. ## Rubrica diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md index a5057354..9c18dc8d 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md @@ -2,7 +2,7 @@ ## 説明書 -Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。 +Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。 ## ルーブリック diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md index 2249bd03..ff32c318 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md @@ -2,7 +2,7 @@ ## 설명 -웹 개발자들이 필요할 만한 도구들이 [MDN 클라이언트 사이드 도구 문서](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)에 소개되어있습니다. 이번 수업내용에 포함되지 않은 3개의 도구를 선택하고, 왜 웹 개발자들이 사용할만한지를 설명해봅시다. 그리고 이 범주에 속하는 도구를 찾아서 문서를 공유해봅시다. MDN문서에 있는 똑같은 예시를 사용하면 안 됩니다. +웹 개발자들이 필요할 만한 도구들이 [MDN 클라이언트 사이드 도구 문서](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)에 소개되어있습니다. 이번 수업내용에 포함되지 않은 3개의 도구를 선택하고, 왜 웹 개발자들이 사용할만한지를 설명해봅시다. 그리고 이 범주에 속하는 도구를 찾아서 문서를 공유해봅시다. MDN문서에 있는 똑같은 예시를 사용하면 안 됩니다. ## 평가 기준 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md index c687eb01..13a6d9c4 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md @@ -1,7 +1,7 @@ # Membaca Docs ## Arahan -Terdapat banyak alat yang mungkin diperlukan oleh pembangun web adalah di [Dokumentasi MDN untuk perkakas sisi pelanggan](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pilih 3 alat yang tidak diliputi dalam pelajaran, terangkan mengapa pembangun web menggunakannya, dan mencari alat yang terdapat dalam kategori ini dan kongsikan dokumentasinya. Jangan menggunakan contoh alat yang sama pada MDN. +Terdapat banyak alat yang mungkin diperlukan oleh pembangun web adalah di [Dokumentasi MDN untuk perkakas sisi pelanggan](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pilih 3 alat yang tidak diliputi dalam pelajaran, terangkan mengapa pembangun web menggunakannya, dan mencari alat yang terdapat dalam kategori ini dan kongsikan dokumentasinya. Jangan menggunakan contoh alat yang sama pada MDN. ## Rubrik diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md new file mode 100644 index 00000000..157eb54d --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md @@ -0,0 +1,11 @@ +# De Documenten lezen + +## Instructies + +Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten. + +## Rubriek + +Voorbeeldig | Voldoende | Moet Worden Verbeterd +--- | --- | -- | +|Uitgelegd waarom webontwikkelaar een tool zou gebruiken| Uitgelegd hoe, maar niet waarom de ontwikkelaar de tool zou gebruiken| Niet vermeld hoe of waarom een ontwikkelaar een tool zou gebruiken | \ No newline at end of file diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-cn.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-cn.md new file mode 100644 index 00000000..cba5ab16 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-cn.md @@ -0,0 +1,11 @@ +# 阅读文档 + +## 说明 + +[MDN 客户端工具文档](https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)中介绍了需要 Web 开发者可能需要用到的工具。从中选取三种本节课中没有提到的工具，并说明为什么 Web 开发者需要用到它们，搜索其中一种工具并给出它的文档。不要直接使用 MDN 中给出的示例。 + +## 评价表 + +| 优秀 | 良好 | 尚可进步 | +| --- | --- | -- | +| 解释了 Web 开发者为什么需要这些工具 | 解释了开发者如何使用这些工具，但却没有解释为什么需要它们 | 既没有解释为什么使用这些工具，也没有给出使用它们的方法 | diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md new file mode 100644 index 00000000..ff989c4e --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md @@ -0,0 +1,11 @@ +# 閱讀技術文件 + +## 說明 + +網頁開發人員所需要使用的工具套件可以參考 [MDN Client端技術開發文件](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。 請選擇三種未被本課程提及的工具，試解釋為何網頁開發人員使用它，並搜尋其相關的工具與它的技術文件。這些資料不能出現在前述的 MDN 文件當中。 + +## 學習評量 + +| 優良 | 普通 | 待改進 | +| ------------------------------ | -------------------- | ------------------------------ | +| 解釋為何網頁開發人員會用此工具 | 只解釋工具的使用方法 | 未提及工具的使用意義與使用方法 | \ No newline at end of file diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md index 0b89459c..9f7645ac 100644 --- a/1-getting-started-lessons/2-github-basics/README.md +++ b/1-getting-started-lessons/2-github-basics/README.md @@ -2,7 +2,7 @@ This lesson covers the basics of GitHub, a platform to host and manage changes to your code. -![Intro to GitHub](images/webdev101-github.png) +![Intro to GitHub](/sketchnotes/webdev101-github.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/1-getting-started-lessons/2-github-basics/translations/README.es.md b/1-getting-started-lessons/2-github-basics/translations/README.es.md index 826f4d38..48dee394 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.es.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.es.md @@ -1,6 +1,9 @@ # Introducción a GitHub -Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y administrar cambios en su código. +Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y administrar cambios en tu código. + +![Intro to GitHub](/sketchnotes/webdev101-github.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3) @@ -8,64 +11,64 @@ Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar En esta lección, cubriremos: -- seguimiento del trabajo que realiza en su máquina +- dando seguimiento al trabajo que realizas en tu máquina - trabajar en proyectos con otros -- cómo contribuir al software de código abierto +- cómo contribuir al software de código abierto (open source) ### Prerrequisitos -Antes de comenzar, deberá verificar si Git está instalado. En el tipo de terminal: +Antes de comenzar, verifica si Git está instalado. Escribe en tu terminal: `git --version` -Si Git no está instalado, [descargar Git](https://git-scm.com/downloads). Luego, configure su perfil de Git local en la terminal: +Si Git no está instalado, [descarga Git aquí](https://git-scm.com/downloads). Luego, configura tu perfil de Git local en la terminal: `git config --global user.name "tu-nombre"` `git config --global user.email "tu-email"` -Para comprobar si Git ya está configurado, puede escribir: +Para comprobar si Git ya está configurado, escribe: `git config --list` -También necesitará una cuenta de GitHub, un editor de código (como Visual Studio Code) y deberá abrir su terminal (o: símbolo del sistema). +También necesitarás una cuenta de GitHub, un editor de código (como Visual Studio Code) y deberás abrir tu terminal. -Vaya a [github.com](https://github.com/) y cree una cuenta si aún no lo ha hecho, o inicie sesión y complete su perfil. +Ve a [github.com](https://github.com/) y crea una cuenta si aún no lo has hecho, o inicia sesión y completa tu perfil. ✅ GitHub no es el único repositorio de código del mundo; hay otros, pero GitHub es el más conocido. ### Preparación -Necesitará una carpeta con un proyecto de código en su máquina local (computadora portátil o PC) y un repositorio público en GitHub, que le servirá como ejemplo de cómo contribuir a los proyectos de otros. +Necesitarás una directorio con un proyecto de código en tu máquina local (computadora portátil o PC) y un repositorio público en GitHub, que te servirá como ejemplo de cómo contribuir a los proyectos de otros. --- ## Gestión de código -Digamos que tiene una carpeta localmente con algún proyecto de código y desea comenzar a rastrear su progreso usando git, el sistema de control de versiones. Algunas personas comparan el uso de git con escribir una carta de amor a su yo futuro. Al leer sus mensajes de confirmación días, semanas o meses después, podrá recordar por qué tomó una decisión o "revertir" un cambio, es decir, cuando escribe buenos "mensajes de confirmación". +Digamos que tienes una directorio local con algún proyecto de código y deseas rastrear tu progreso usando git, el sistema de control de versiones. Algunas personas comparan el uso de git con escribir una carta de amor a tu futuro. Al leer tus mensajes de confirmación días, semanas o meses después, podrás recordar por qué tomaste una decisión o "revertiste" un cambio, es decir, cuando escribes buenos "mensajes de confirmación". -### Tarea: hacer un repositorio y enviar código +### Tarea: hacer un repositorio git y enviar código -1. **Crear repositorio en GitHub**. En GitHub.com, en la pestaña de repositorios, o en la barra de navegación superior derecha, busque el botón **nuevo repositorio**. +1. **Crear repositorio en GitHub**. En GitHub.com, en la pestaña de repositorios, o en la barra de navegación superior derecha, busca el botón **nuevo repositorio**. - 1. Dale un nombre a tu repositorio (carpeta) - 1. Seleccione **crear repositorio**. + 1. Dale un nombre a tu repositorio (directorio) + 1. Selecciona **crear repositorio**. -1. **Navegue a su carpeta de trabajo**. En su terminal, cambie a la carpeta (también conocida como directorio) que desea comenzar a rastrear. Tipo: +1. **Navegue a su directorio de trabajo**. En tu terminal, cambia a la directorio (también conocida como directorio) que deseas comenzar a rastrear. Escribe: ```bash - cd [nombre de tu carpeta] + cd [nombre de tu directorio] ``` -1. **Inicializar un repositorio de git**. En su tipo de proyecto: +1. **Inicializar un repositorio de git**. En tu proyecto escribe: ```bash git init ``` -1. **Comprobar estado**. Para comprobar el estado de su tipo de repositorio: +1. **Comprobar estado**. Para checar el estado del proyecto escribe: ```bash git status ``` - la salida puede verse así: + La respuesta de la terminal (CLI) probablemente se verá así: ```output Changes not staged for commit: @@ -76,7 +79,7 @@ Digamos que tiene una carpeta localmente con algún proyecto de código y desea modified: file2.txt ``` - Por lo general, un comando `git status` le dice cosas como qué archivos están listos para ser guardados en el repositorio o tiene cambios que es posible que desee conservar. + Por lo general, un comando `git status` te dice cosas como qué archivos están listos para ser guardados en el repositorio o cambios en tu codigo que puedes conservar. 1. **Agregar archivos al seguimiento** @@ -84,27 +87,25 @@ Digamos que tiene una carpeta localmente con algún proyecto de código y desea git add . ``` - El argumento `git add` más `.` indica que todos sus archivos y cambios para el seguimiento. + El argumento `git add` más `.` indica que todos tus archivos y cambios están listos para darles seguimiento. -1. **Persistir en tu trabajo**. En este punto, ha agregado los archivos a lo que se denomina _área de preparación_. Un lugar donde Git rastrea sus archivos. Para que el cambio sea permanente, debe _commitir_ los archivos. Para hacerlo, crea un _commit_ con el comando `git commit`. Un _commit_ representa un punto de ahorro en el historial de su repositorio. Escriba lo siguiente para crear un _commit_: +1. **Persistir en tu trabajo**. En este punto, has agregado los archivos a lo que se denomina _área de preparación_. Un lugar donde Git rastrea tus archivos. Para que el cambio sea permanente, debes _commitir_ los archivos. Para hacerlo, creas un _commit_ con el comando `git commit`. Un _commit_ representa un punto en el historial de tu repositorio que estás guardando. Escribe lo siguiente para crear un _commit_: ```bash git commit -m "first commit" ``` - Esto confirma todos sus archivos, agregando el mensaje "primer compromiso". Para futuros mensajes de confirmación, querrá ser más descriptivo en su descripción para transmitir qué tipo de cambio ha realizado. + Esto confirma todos tus archivos, agregando el mensaje "primer compromiso". Para futuros mensajes de confirmación, querrás ser más descriptivo en tu descripción para transmitir qué tipo de cambio has realizado. -1. **Conecte su repositorio de Git local con GitHub**. Un repositorio de Git es bueno en su máquina, pero en algún momento desea tener una copia de seguridad de sus archivos en algún lugar y también invitar a otras personas a trabajar con usted en su repositorio. Un gran lugar para hacerlo es GitHub. Recuerde que ya hemos creado un repositorio en GitHub, por lo que lo único que debemos hacer es conectar nuestro repositorio de Git local con GitHub. El comando `git remote add` hará precisamente eso. Escriba el siguiente comando: - - - > Tenga en cuenta que antes de escribir el comando, vaya a la página de su repositorio de GitHub para encontrar la URL del repositorio. Lo usará en el siguiente comando. Reemplaza `repository_name` con tu URL de GitHub. +1. **Conecta tu repositorio de Git local con GitHub**. Es bueno tener un repositorio de Git en tu máquina, pero también tienes que guarder todos sus archivos en algún lugar e invitar a otras personas a trabajar contigo en tu repositorio. Un buen lugar para hacerlo es GitHub. Recuerda que ya hemos creado un repositorio en GitHub, por lo que lo único que debemos hacer es conectar nuestro repositorio de Git local con GitHub. El comando `git remote add` hará precisamente eso. Escribe el siguiente comando: + > Nota, antes de escribir el comando, ve a la página de tu repositorio de GitHub para encontrar el URL del repositorio. Lo usarás en el siguiente comando. Reemplaza `repository_name` con tu URL de GitHub. ```bash git remote add origin https://github.com/username/repository_name.git ``` - Esto crea un _remote_, o conexión, llamado "origin" que apunta al repositorio de GitHub que creó anteriormente. + Esto crea un _remote_, o conexión, llamado "origin" que apunta al repositorio de GitHub que creaste anteriormente. 1. **Envía archivos locales a GitHub**. Hasta ahora ha creado una _conexión_ entre el repositorio local y el repositorio de GitHub. Enviemos estos archivos a GitHub con el siguiente comando `git push`, así: @@ -113,9 +114,9 @@ Digamos que tiene una carpeta localmente con algún proyecto de código y desea git push -u origin main ``` - Esto envía sus confirmaciones en su rama "principal" a GitHub. + Esto envía una confirmación en tu rama "principal" a GitHub. -1. **Para agregar más cambios**. Si desea continuar haciendo cambios y enviarlos a GitHub, solo necesitará usar los siguientes tres comandos: +1. **Para agregar más cambios**. Si deseas continuar haciendo cambios y enviarlos a GitHub, solo necesitas usar los siguientes tres comandos: ```bash git add . @@ -123,83 +124,84 @@ Digamos que tiene una carpeta localmente con algún proyecto de código y desea git push ``` - > Sugerencia: es posible que también desee adoptar un archivo `.gitignore` para evitar que los archivos que no desea rastrear aparezcan en GitHub, como el archivo de notas que almacena en la misma carpeta pero no tiene lugar para escribir su mensaje de confirmación aquí repositorio público. Puede encontrar plantillas para archivos `.gitignore` en [.gitignore templates](github.com/github/gitignore). + > Sugerencia: es posible que también desees adoptar un archivo `.gitignore` para evitar que los archivos que no deseas rastrear aparezcan en GitHub. Puedes encontrar plantillas para archivos `.gitignore` en [.gitignore templates](github.com/github/gitignore). #### Confirmar mensajes -Una gran línea de asunto de confirmación de Git completa la siguiente oración: +Una buena línea de asunto (subject line) de confirmación de Git completa la siguiente oración: Si se aplica, esta confirmación será -Para el sujeto use el imperativo, tiempo presente: "cambiar" no "cambiar" ni "cambiar". +Para el sujeto use el imperativo, tiempo presente: "cambiar" no "cambió" ni "cambiara". Como en el sujeto, en el cuerpo (opcional) también use el imperativo, presente. El cuerpo debe incluir la motivación para el cambio y contrastarla con la conducta anterior. Estás explicando el "por qué", no el "cómo". ✅ Tómate unos minutos para navegar por GitHub. ¿Puedes encontrar un mensaje de compromiso realmente bueno? ¿Puedes encontrar uno realmente mínimo? ¿Qué información crees que es la más importante y útil de transmitir en un mensaje de compromiso? ### Tarea: Colaborar + La razón principal para poner cosas en GitHub fue hacer posible la colaboración con otros desarrolladores. ## Trabajando en proyectos con otros -En su repositorio, vaya a `Insights > Community` para ver cómo se compara su proyecto con los estándares comunitarios recomendados. +En tu repositorio, ve a `Insights > Community` para ver cómo se compara tu proyecto con los estándares comunitarios recomendados. - Aquí hay algunas cosas que pueden mejorar su repositorio de GitHub: + Aquí hay algunas cosas que pueden mejorar tu repositorio de GitHub: - **Descripción**. ¿Agregaste una descripción para tu proyecto? - **README**. ¿Agregaste un archivo README? GitHub proporciona una guía para escribir un [README](https://docs.github.com/articles/about-readmes/). - - **Pauta de contribución**. ¿Su proyecto tiene [pautas de contribución](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), - - **Código de Conducta**. un [Código de conducta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), - - **Licencia**. Quizás lo más importante, una [licencia](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + - **Guía de contribución**. ¿Tiene [guías de contribución](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) tu proyecto? + - **Código de Conducta**. Crea un [Código de conducta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/). + - **Licencia**. Quizás lo más importante, una [licencia](https://docs.github.com/articles/adding-a-license-to-a-repository/). -Todos estos recursos beneficiarán la incorporación de nuevos miembros del equipo. Y esos son típicamente el tipo de cosas que los nuevos colaboradores miran antes incluso de mirar su código, para descubrir si su proyecto es el lugar adecuado para que ellos pasen su tiempo. +Todos estos recursos beneficiarán la incorporación de nuevos miembros del equipo. Y esos son típicamente el tipo de cosas que los nuevos colaboradores miran antes incluso de mirar tu código, para descubrir si tu proyecto es el lugar adecuado para que ellos pasen su tiempo. -✅ Los archivos README, aunque requieren tiempo para prepararse, a menudo son descuidados por los ocupados mantenedores. ¿Puede encontrar un ejemplo de uno particularmente descriptivo? Nota: hay algunas [herramientas para ayudar a crear buenos archivos READMEs](https://www.makeareadme.com/) que le gustaría probar. +✅ Los archivos README, aunque requieren tiempo para prepararse, a menudo son descuidados por los mantenedores. ¿Puedes encontrar un ejemplo de uno particularmente descriptivo? Nota: aquí hay algunas [herramientas para ayudar a crear buenos archivos READMEs](https://www.makeareadme.com/) que te puedes probar. -### Tarea: Fusionar código +### Tarea: Fusionar (merging) código -Los documentos que contribuyen ayudan a las personas a contribuir al proyecto. Explica qué tipos de contribuciones está buscando y cómo funciona el proceso. Los colaboradores deberán seguir una serie de pasos para poder contribuir a su repositorio en GitHub: +Los documentos que contribuyes ayudan a las personas a contribuir al proyecto. Explica qué tipos de contribuciones estás buscando y cómo funciona el proceso. Los colaboradores deberán seguir una serie de pasos para poder contribuir a tu repositorio en GitHub: -1. **Bifurcando su repositorio** Probablemente querrá que la gente _bifurque_ su proyecto. Bifurcar significa crear una réplica de su repositorio en su perfil de GitHub. +1. **Bifurcando (forking) tu repositorio** Probablemente querrás que la gente _bifurque_ (fork) tu proyecto. Bifurcar significa crear una réplica de tu repositorio en su perfil de GitHub. 1. **Clonar**. Desde allí, clonarán el proyecto en su máquina local. -1. **Crea una rama**. Querrá pedirles que creen una _ rama_ para su trabajo. -1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de que pueda _fusionar_ en su trabajo son mayores. Imagine que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si lo desea o solo puede implementar 2 de 3 o 1 de 3 cambios? +1. **Crear una rama**. Querrás pedirles que creen una _ rama_ para su trabajo. +1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de _fusionar_ su trabajo son mayores. Imagínate que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si quieres todos los cambios o solo puedes implementar 2 de 3 o 1 de 3 cambios? -✅ Imagine una situación en la que las sucursales son particularmente críticas para escribir y enviar un buen código. ¿En qué casos de uso se te ocurren? +✅ Imagínate una situación en la que las ramas (branches) de git son particularmente críticas para escribir y enviar buen código. ¿Qué casos de uso se te ocurren? -> Tenga en cuenta que sea el cambio que desea ver en el mundo y cree también sucursales para su propio trabajo. Todas las confirmaciones que realice se realizarán en la sucursal en la que está actualmente "registrado". Use `git status` para ver qué rama es esa. +> Se el cambio que deseas ver en el mundo y crea también ramas para tu propio trabajo. Todas las confirmaciones que realices se realizarán en la rama en la que estás actualmente "registrado". Usa `git status` para ver qué rama es. -Repasemos el flujo de trabajo de un colaborador. Suponga que el colaborador ya ha _bifurcado_ y _clonado_ el repositorio para que tenga un repositorio de Git listo para trabajar en su máquina local: +Repasemos el flujo de trabajo de un colaborador. Supon que el colaborador ya ha _bifurcado_ y _clonado_ el repositorio para que tenga un repositorio de Git listo para trabajar en su máquina local: -1. **Crea una rama**. Use el comando `git branch` para crear una rama que contendrá los cambios que pretenden contribuir: +1. **Crea una rama**. Usa el comando `git branch` para crear una rama que tendrá los cambios que quieres contribuir: ```bash git branch [branch-name] ``` -1. **Cambiar a rama de trabajo**. Cambie a la rama especificada y actualice el directorio de trabajo con `git checkout`: +1. **Cambiar a rama de trabajo**. Cambia a la rama especificada y actualiza tu directorio de trabajo con `git checkout`: ```bash git checkout [branch-name] ``` -1. **Trabaja**. En este punto, desea agregar sus cambios. No olvide informarle a Git con los siguientes comandos: +1. **Trabaja**. En este punto, deseas agregar tus cambios. No olvides informarle a Git con los siguientes comandos: ```bash git add . git commit -m "mis cambios" ``` - Asegúrese de darle un buen nombre a su compromiso, por su bien y por el mantenedor del repositorio en el que está ayudando. + Asegúrate de darle un buen nombre a tu commit, tanto por tu bien como por el mantenedor del repositorio en el que estás ayudando. -1. **Combine su trabajo con la rama `principal`**. En algún momento ha terminado de trabajar y desea combinar su trabajo con el de la rama `principal`. La rama `main` podría haber cambiado mientras tanto, así que asegúrese de actualizarla primero a la última con los siguientes comandos: +1. **Combina tu trabajo con la rama `principal`**. En algún momento has terminado de trabajar y deseas combinar tu trabajo con el de la rama `principal`. La rama `main` podría haber cambiado mientras tanto, así que asegúrate de actualizarla con los siguientes comandos: ```bash git checkout main git pull ``` - En este punto, querrá asegurarse de que cualquier _conflicto_, situaciones en las que Git no pueda _combinarse_ fácilmente los cambios, ocurra en su rama de trabajo. Por lo tanto, ejecute los siguientes comandos: + En este punto, querrás asegurarte de que cualquier _conflicto_, situaciones en las que Git no pueda _combinarse_ fácilmente los cambios, ocurren en tu rama de trabajo. Mientras tanto, ejecuta los siguientes comandos: ```bash git checkout [branch_name] @@ -208,69 +210,69 @@ Repasemos el flujo de trabajo de un colaborador. Suponga que el colaborador ya h Esto traerá todos los cambios de `main` a su rama y es de esperar que pueda continuar. De lo contrario, VS Code le dirá dónde está _confundido_ Git y simplemente modificará los archivos afectados para decir qué contenido es el más preciso. -1. **Envíe su trabajo a GitHub**. Enviar tu trabajo a GitHub significa dos cosas. Empujar su sucursal a su repositorio y luego abrir un PR, Pull Request. +1. **Envía tu trabajo a GitHub**. Enviar tu trabajo a GitHub significa dos cosas. Empujar tu rama a tu repositorio y luego abrir un PR (Pull Request). ```bash git push --set-upstream origin [branch-name] ``` - El comando anterior crea la rama en su repositorio bifurcado. + El comando anterior crea la rama en tu repositorio bifurcado. -1. **Abra una PR**. A continuación, desea abrir un PR. Para hacerlo, navegue al repositorio bifurcado en GitHub. Verá una indicación en GitHub donde le preguntará si desea crear un nuevo PR, haga clic en eso y lo llevará a una interfaz donde puede cambiar el título del mensaje de confirmación, asígnele una descripción más adecuada. Ahora, el mantenedor del repositorio que bifurcó verá este PR y _dedos cruzados_ apreciarán y _ fusionar_ su PR. Ahora eres un colaborador, yay :) +1. **Abre un PR**. A continuación, abre un PR. Para hacerlo, navega al repositorio bifurcado en GitHub. Verás una indicación en GitHub donde te preguntarán si deseas crear un nuevo PR. Haz clic en eso y lo llevará a una interfaz donde puedes cambiar el título del mensaje de confirmación, asignarle una descripción más adecuada. Ahora, el mantenedor del repositorio que bifurcaste verá este PR y _dedos cruzados_ apreciarán y _ fusionarán_ tu PR. Ahora eres un colaborador, yay :) -1. **Limpiar**. Se considera una buena práctica _limpiar_ después de ti. Desea limpiar tanto su sucursal local como la sucursal que envió a GitHub. Primero eliminémoslo localmente con el siguiente comando: +1. **Limpiar**. Se considera una buena práctica _limpiar_ después de ti. Limpiar tanto tu rama local como la rama que enviaste a GitHub. Primero eliminémoslo localmente con el siguiente comando: ```bash git branch -d [branch-name] ``` - Asegúrese de ir a la página de GitHub para el repositorio bifurcado a continuación y elimine la rama remota que acaba de ingresar. + Asegúrate de ir a la página de GitHub del repositorio bifurcado a continuación y elimina la rama remota que acabas de ingresar. -`Solicitud de extracción` parece un término tonto porque realmente desea impulsar los cambios al proyecto. Pero el mantenedor (propietario del proyecto) o el equipo central debe considerar sus cambios antes de fusionarlo con la rama "principal" del proyecto, por lo que realmente está solicitando una decisión de cambio a un mantenedor. +`Solicitud de extracción` parece un término tonto porque realmente deseas impulsar los cambios al proyecto. Pero el mantenedor (propietario del proyecto) o el equipo central debe considerar tus cambios antes de fusionarlo con la rama "principal" del proyecto, por lo que realmente estás solicitando una decisión de cambio a un mantenedor. -Una solicitud de extracción es el lugar para comparar y discutir las diferencias introducidas en una rama con revisiones, comentarios, pruebas integradas y más. Una buena solicitud de extracción sigue aproximadamente las mismas reglas que un mensaje de confirmación. Puede agregar una referencia a un problema en el rastreador de problemas, cuando su trabajo, por ejemplo, soluciona un problema. Esto se hace usando un '#' seguido del número de su problema. Por ejemplo, `#97`. +Una solicitud de extracción es el lugar para comparar y discutir las diferencias introducidas en una rama con revisiones, comentarios, pruebas integradas y más. Una buena solicitud de extracción sigue aproximadamente las mismas reglas que un mensaje de confirmación. Puedes agregar una referencia a un problema en el rastreador de problemas, cuando tu trabajo, por ejemplo, soluciona un problema. Esto se hace usando un '#' seguido del número de tu problema. Por ejemplo, `#97`. -🤞 Cruce los dedos para que todos los controles pasen y los propietarios del proyecto combinen sus cambios en el proyecto🤞 +🤞 Cruza los dedos para que todos los controles pasen y los propietarios del proyecto combinen tus cambios en el proyecto🤞 -Actualice su rama de trabajo local actual con todas las nuevas confirmaciones de la rama remota correspondiente en GitHub: +Actualice tu rama de trabajo local actual con todas las nuevas confirmaciones de la rama remota correspondiente en GitHub: `git pull` ## Cómo contribuir al código abierto -Primero, busquemos un repositorio (o: repositorio) en GitHub que le interese y al que le gustaría contribuir con un cambio. Querrá copiar el contenido de a nuestra máquina. +Primero, busquemos un repositorio en GitHub que te interese y al que te gustaría contribuir con un cambio. Querrás copiar el contenido a nuestra máquina. ✅ Una buena forma de encontrar repositorios 'aptos para principiantes' es [buscar por la etiqueta `buena-primera-edición`](https://github.blog/2020-01-22-browse-good-first-issues-para-empezar-a-contribuir-al-código-abierto/). Hay varias formas de copiar código. Una forma es "clonar" el contenido del repositorio, usando HTTPS, SSH o usando GitHub CLI (Interfaz de línea de comandos). -Abra su terminal y clone el repositorio así: +Abre tu terminal y clona el repositorio así: `git clone https://github.com/ProjectURL` -Para trabajar en el proyecto, cambie a la carpeta correcta: +Para trabajar en el proyecto, cambia al directorio correcto: `cd ProjectURL` -También puede abrir todo el proyecto utilizando [Codespaces](https://github.com/features/codespaces), el entorno de desarrollo en la nube / editor de código integrado de GitHub o [GitHub Desktop](https://desktop.github.com/). +También puedes abrir todo el proyecto utilizando [Codespaces](https://github.com/features/codespaces), el entorno de desarrollo en la nube / editor de código integrado de GitHub o [GitHub Desktop](https://desktop.github.com/). -Por último, puede descargar el código en una carpeta comprimida. +Por último, puedes descargar el código en un directorio comprimido. ### Algunas cosas más interesantes sobre GitHub -Puede destacar, ver y / o "fork" cualquier repositorio público en GitHub. Puede encontrar sus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código. +Puede destacar, ver y / o "fork" cualquier repositorio público en GitHub. Puedes encontrar tus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código. Los proyectos tienen un rastreador de problemas, principalmente en GitHub en la pestaña "Issues" a menos que se indique lo contrario, donde las personas debaten los problemas relacionados con el proyecto. Y la pestaña Solicitudes de extracción es donde las personas debaten y revisan los cambios que están en curso. Los proyectos también pueden tener discusiones en foros, listas de correo o canales de chat como Slack, Discord o IRC. -✅ Eche un vistazo a su nuevo repositorio de GitHub y pruebe algunas cosas, como editar la configuración, agregar información a su repositorio y crear un proyecto (como un tablero Kanban). ¡Hay muchas cosas que puedes hacer! +✅ Echa un vistazo a tu nuevo repositorio de GitHub y prueba algunas cosas, como editar la configuración, agregar información a tu repositorio y crear un proyecto (como un tablero Kanban). ¡Hay muchas cosas que puedes hacer! -🚀 Desafío: empareje con un amigo para trabajar en el código del otro. Cree un proyecto de forma colaborativa, bifurque el código, cree ramas y combine los cambios. +🚀 Desafío: empareja con un amigo(a) para trabajar en el código juntos. Crea un proyecto de forma colaborativa, bifurque el código, crea ramas y combina los cambios. ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4) ## Revisión y autoestudio -Obtenga más información sobre [contribución al software de código abierto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). +Obtén más información sobre [contribución al software de código abierto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). [Hoja de referencia de Git](https://training.github.com/downloads/github-git-cheat-sheet/). @@ -278,6 +280,6 @@ Práctica práctica práctica. GitHub tiene excelentes rutas de aprendizaje disp - [Primera semana en GitHub](https://lab.github.com/githubtraining/first-week-on-github) -También encontrará laboratorios más avanzados. +También encontrarás laboratorios más avanzados. **Tarea**: Completa [la primera semana en el laboratorio de capacitación de GitHub](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.id.md b/1-getting-started-lessons/2-github-basics/translations/README.id.md index 15e4b819..d01a1b2c 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.id.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.id.md @@ -2,7 +2,7 @@ Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengelola perubahan pada kode Anda. -![Dasar-dasar GitHub](images/webdev101-github.png) +![Dasar-dasar GitHub](/sketchnotes/webdev101-github.png) > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah diff --git a/1-getting-started-lessons/2-github-basics/translations/README.it.md b/1-getting-started-lessons/2-github-basics/translations/README.it.md index 8244de43..dbc795c1 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.it.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.it.md @@ -2,7 +2,7 @@ Questa lezione tratta delle basi di GitHub, una piattaforma per ospitare e gestire modifiche al proprio codice. -![Intro to GitHub](../images/webdev101-github.png) +![Intro to GitHub](/sketchnotes/webdev101-github.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pre-lezione diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ko.md b/1-getting-started-lessons/2-github-basics/translations/README.ko.md index e91452ed..9363d5c9 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ko.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ko.md @@ -2,7 +2,7 @@ 이 강의에서는 코드 변경점을 호스팅하고 관리하는 플랫폼인 GitHub의 기본 사항을 다룹니다. -![Intro to GitHub](../images/webdev101-github.png) +![Intro to GitHub](/sketchnotes/webdev101-github.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ms.md b/1-getting-started-lessons/2-github-basics/translations/README.ms.md index 0cb56e2f..2af6937f 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ms.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ms.md @@ -2,7 +2,7 @@ Pelajaran ini merangkumi pengetahuan asas tentang GitHub, dan adalah salah satu platform untuk menjadi tuan rumah dan menguruskan perubahan pada kod anda. -![Intro to GitHub](../images/webdev101-github.png) +![Intro to GitHub](/sketchnotes/webdev101-github.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra-Kuliah diff --git a/1-getting-started-lessons/2-github-basics/translations/README.nl.md b/1-getting-started-lessons/2-github-basics/translations/README.nl.md new file mode 100644 index 00000000..92a820c6 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.nl.md @@ -0,0 +1,318 @@ +# Inleiding van GitHub + +Deze les behandelt de basisprincipes van GitHub, een platform voor het hosten en beheren van wijzigingen in uw code. + +![Intro to GitHub](/sketchnotes/webdev101-github.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz voorafgaand aan de lezing +[Quiz voorafgaand aan de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3) + +## Inleiding + +In deze les behandelen we: + +- het volgen van het werk dat u op uw machine doet +- samen met anderen aan projecten werken +- hoe u kunt bijdragen aan open source software + +### Vereisten + +Voordat u begint, moet u controleren of Git is geïnstalleerd. In het terminal typ: +`git --version` + +Als Git niet is geïnstalleerd, [download Git](https://git-scm.com/downloads). Stel vervolgens uw lokale Git-profiel in de terminal in: +* `git config --global user.name "uw-naam"` +* `git config --global user.email "uw-email"` + +Om te controleren of Git al is geconfigureerd, kunt u het volgende typen: +`git config --list` + +U heeft ook een GitHub-account nodig, een code-editor (zoals Visual Studio Code) en u moet uw terminal openen (of: command prompt). + +Navigeer naar [github.com](https://github.com/) en maak een account aan als u dat nog niet heeft gedaan, of log in en vul uw profiel in. + +✅ GitHub is niet de enige coderepository ter wereld; er zijn anderen, maar GitHub is de bekendste + +### Voorbereiding + +U heeft zowel een map met een codeproject op uw lokale computer (laptop of pc) als een openbare repository op GitHub nodig, die als voorbeeld zal dienen voor hoe u kunt bijdragen aan de projecten van anderen. + +--- + +## Code beheer + +Laten we zeggen dat u lokaal een map hebt met een of ander codeproject en u wilt beginnen met het volgen van uw voortgang met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan uw toekomstige zelf. Als u uw commitberichten dagen of weken of maanden later leest, zult u u kunnen herinneren waarom u een beslissing heeft genomen, of een wijziging "terugdraaien" - dat wil zeggen, wanneer u goede "commitberichten" schrijft. + +### Taak: maak een repository en leg code vast + +1. **Maak een repository op GitHub**. Zoek op GitHub.com, in het tabblad repositories, of in de navigatiebalk rechtsboven, de knop **new repo**. + + 1. Geef uw repository (map) een naam + 1. Selecteer **create repository**. + +1. **Navigeer naar uw werkmap**. Schakel in uw terminal naar de map (ook bekend als de directory) die u wilt beginnen met volgen. Typ: + + ```bash + cd [naam van uw map] + ``` + +1. **Initialiseer een git-repository**. In uw project, typ: + + ```bash + git init + ``` + +1. **Controleer de status**. Om de status van uw repository te controleren, typ: + + ```bash + git status + ``` + + de output kan er ongeveer zo uitzien: + + ```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 + ``` + + Typisch vertelt een `git status` commando u dingen zoals welke bestanden klaar zijn om _opgeslagen_ te worden naar de repo of bevat veranderingen die u misschien wilt behouden. + +1. **Voeg alle bestanden toe voor tracking** + Dit wordt ook wel staging-bestanden/ bestanden toevoegen aan het staging-gebied genoemd. + + ```bash + git add . + ``` + + Het `git add` plus `.` argument geeft aan dat al uw bestanden en wijzigingen voor tracking geselecteerd zijn. + +1. **Voeg geselecteerde bestanden toe voor tracking** + + ```bash + git add [bestands- of mapnaam] + ``` + + Dit helpt ons om alleen geselecteerde bestanden aan het staging-gebied toe te voegen als we niet alle bestanden tegelijk willen vastleggen. + +1. **Unstage alle bestanden** + + ```bash + git reset + ``` + + Dit commando helpt ons om alle bestanden tegelijk te unstagen. + +1. **Unstage een bepaald bestand** + + ```bash + git reset [bestands- of mapnaam] + ``` + + Dit commando helpt ons om alleen een bepaald bestand tegelijk te unstagen dat we niet willen opnemen voor de volgende commit. + +1. **Uw werk voortzetten**. Op dit punt heeft u de bestanden toegevoegd aan een zogenaamd _staging-gebied_. Een plek waar Git uw bestanden bijhoudt. Om de wijziging permanent te maken, moet u de bestanden _commiten_. Om dit te doen maakt u een _commit_ aan met het `git commit` commando. Een _commit_ vertegenwoordigt een besparingspunt in de geschiedenis van uw repo. Typ het volgende om een _commit_ te maken: + + ```bash + git commit -m "eerste commit" + ``` + + Dit commit al uw bestanden door het bericht "first commit" toe te voegen. Voor toekomstige commitberichten wilt u meer beschrijvend zijn in uw beschrijving om over te brengen wat voor soort wijziging u heeft aangebracht. + +1. **Verbind uw lokale Git-repo met GitHub**. Een Git-repo is goed op uw computer, maar op een gegeven moment wilt u ergens een back-up van uw bestanden hebben en ook andere mensen uitnodigen om met u aan uw opslagplaats te werken. Een geweldige plek om dat te doen is GitHub. Onthoud dat we al een repo op GitHub hebben gemaakt, dus het enige dat we hoeven te doen, is onze lokale Git-repo verbinden met GitHub. Het commando `git remote add` zal precies dat doen. Typ de volgende commando: + + > Let op: voordat u de opdracht typt, gaat u naar uw GitHub-repo-pagina om de repository-URL te vinden. U gebruikt het in het onderstaande commando. Vervang `repository_name` door uw GitHub-URL. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + Dit creëert een _remote_, of verbinding, genaamd "origin", wijzend naar de GitHub-repository die u eerder heeft gemaakt. + +1. **Stuur lokale bestanden naar GitHub**. Tot nu toe heeft u een _verbinding_ gemaakt tussen de lokale repo en de GitHub-repo. Laten we deze bestanden naar GitHub sturen met het volgende commando `git push`, zoals zo: + + ```bash + git push -u origin main + ``` + + Dit stuurt uw commits in uw "main" tak naar GitHub. + +1. **Om meer wijzigingen toe te voegen**. Als u door wilt gaan met het aanbrengen van wijzigingen en ze naar GitHub wilt pushen, hoeft u alleen maar de volgende drie commando's te gebruiken: + + ```bash + git add . + git commit -m "typ hier uw commitbericht" + git push + ``` + + > Tip, misschien wilt u ook een `.gitignore`-bestand adopteren om te voorkomen dat bestanden die u niet wilt volgen, verschijnen op GitHub - zoals dat notitiesbestand dat u opslaat in dezelfde map maar geen plaats heeft op een openbare repository. U kunt sjablonen voor `.gitignore` bestanden vinden op [.gitignore templates](https://github.com/github/gitignore). + +#### Commit berichten + +Een geweldige onderwerpregel voor een commitbericht van Git maakt de volgende zin compleet: +Indien toegepast, zal deze commit + +Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" niet "veranderd" noch "veranderingen". +Net als in het onderwerp, gebruik in het lichaam (optioneel) ook de imperatieve tegenwoordige tijd. Het lichaam moet de motivatie voor de verandering opnemen en dit contrasteren met eerder gedrag. U legt het `waarom` uit, niet het `hoe`. + +✅ Neem een paar minuten de tijd om rond GitHub te surfen. Kunt u een echt geweldig commitbericht vinden? Kunt u een echt minimale vinden? Welke informatie is volgens u het belangrijkst en nuttigst om over te brengen in een commitbericht? + +### Taak: Samenwerken + +De belangrijkste reden om dingen op GitHub te zetten, was om het mogelijk te maken om samen te werken met andere ontwikkelaars. + +## Samen met anderen aan projecten werken + +Navigeer in uw repository naar `Insights > Community` om te zien hoe uw project zich verhoudt tot aanbevolen communitystandaarden. + + Hier zijn enkele dingen die uw GitHub-repo kunnen verbeteren: + - **Omschrijving**. Heeft u een beschrijving voor uw project toegevoegd? + - **README**. Heeft u een README toegevoegd? GitHub biedt richtlijnen voor het schrijven van een [README](https://docs.github.com/articles/about-readmes/). + - **Richtlijn voor bijdragen**. Heeft uw project [richtlijnen voor bijdragen](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), + - **Gedragscode**. Een [Gedragscode](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **Licentie**. Misschien nog belangrijker, een [licentie](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + + +Al deze middelen zullen nieuwe teamleden helpen. En dat zijn typisch het soort dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar uw code kijken, om erachter te komen of uw project de juiste plek is om hun tijd door te brengen. + +✅ README-bestanden, hoewel ze wat tijd nodig hebben om voor te bereiden, worden vaak genegeerd door drukke beheerders. Kunt u een voorbeeld vinden van een bijzonder beschrijvende? Opmerking: er zijn enkele [tools om goede README's te maken](https://www.makeareadme.com/) die u misschien zou willen proberen. + +### Taak: voeg een code samen + +Documenten voor bijdragen helpen mensen bij te dragen aan het project. Het legt uit wat voor soort bijdragen u zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om bij te dragen aan uw repo op GitHub: + + +1. **Uw repo forken** Waarschijnlijk wilt u dat mensen uw project _forken_. Forken betekent het maken van een replica van uw repository op hun GitHub-profiel. +1. **Kloon**. Van daaruit zullen ze het project naar hun lokale computer klonen (clone). +1. **Maak een tak**. U zult ze willen vragen om een _tak_ voor hun werk te creëren (branch). +1. **Richt hun verandering op één gebied**. Vraag bijdragers om hun bijdragen op één ding tegelijk te concentreren - op die manier is de kans groter dat u hun werk kan _samenvoegen_ (merge). Stelt u voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als u slechts 2 van de 3 of 1 van de 3 wijzigingen wilt of kunt implementeren? + +✅ Stelt u een situatie voor waarin takken bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Welke use-cases kunt u bedenken? + +> Let op: wees de verandering die u in de wereld wilt zien, en maak ook takken voor uw eigen werk. Alle commits die u maakt, worden gemaakt op de tak waar u momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke tak dat is. + +Laten we een workflow voor bijdragers doorlopen. Veronderstel dat de bijdrager de repo al _geforkt_ en _gekloond_ heeft, zodat ze een Git-repo hebben klaar om aan te werken, op hun lokale computer: + +1. **Maak een tak**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen: + + ```bash + git branch [taknaam] + ``` + +1. **Overschakelen naar werkende tak**. Schakel over naar de gespecificeerde tak en update de werkdirectory met `git checkout`: + + ```bash + git checkout [taknaam] + ``` + +1. **Werken**. Op dit punt wilt u uw wijzigingen toevoegen. Vergeet niet om Git erover te vertellen met de volgende commando's: + + ```bash + git add . + git commit -m "mijn veranderingen" + ``` + + Zorg ervoor dat u uw commit een goede naam geeft, zowel voor u als voor de beheerder van de repo waarmee u helpt. + +1. **Combineer uw werk met de `main` tak**. Op een gegeven moment bent u klaar met werken en wilt u uw werk combineren met dat van de `main` tak. De `main` tak kan ondertussen veranderd zijn, dus zorg ervoor dat u deze eerst bijwerkt naar de laatste versie met de volgende commando's: + + ```bash + git checkout main + git pull + ``` + + Op dit punt wilt u er zeker van zijn dat alle _conflicten_, situaties waarin Git niet gemakkelijk de veranderingen kan _combineren_ plaatsvinden in uw werkende tak. Voer daarom de volgende opdrachten uit: + + ```bash + git checkout [taknaam] + git merge main + ``` + + Dit brengt alle wijzigingen van `main` naar uw tak en hopelijk kunt u gewoon doorgaan. Als dit niet het geval is, zal VS Code u vertellen waar Git _in de war_ is en verandert u gewoon de betrokken bestanden om te zeggen welke inhoud het meest accuraat is. + +1. **Stuur uw werk naar GitHub**. Het verzenden van uw werk naar GitHub betekent twee dingen. Uw tak naar uw repo pushen en vervolgens een PR, Pull Request openen. + + ```bash + git push --set-upstream origin [taknaam] + ``` + + Het bovenstaande commando maakt de tak op uw geforkte repo. + +1. **Open een PR**. Vervolgens wilt u een PR openen. U doet dat door naar de geforkte repo op GitHub te navigeren. U ziet een indicatie op GitHub waar het vraagt of u een nieuwe PR wilt maken, u klikt erop en u wordt naar een interface geleid waar u de titel van het commitbericht kunt wijzigen, geef het een meer geschikte beschrijving. Nu zal de beheerder van de repo die u heeft geforkt deze PR zien en, _vingers gekruist_, zullen ze uw PR waarderen en _samenvoegen_. U bent nu een bijdrager, yay :) + +1. **Opruimen**. Het wordt als een goede gewoonte beschouwd om _op te ruimen_ nadat u met succes een PR hebt samengevoegd. U wilt zowel uw lokale tak opruimen als de tak die u naar GitHub hebt gepusht. Laten we het eerst lokaal verwijderen met het volgende commando: + + ```bash + git branch -d [taknaam] + ``` + + Zorg ervoor dat u naar de GitHub-pagina gaat voor de geforkte repo en verwijder de externe tak die u er zojuist naartoe hebt gepusht. + +`Pull request` lijkt een gekke term, omdat u uw wijzigingen echt in het project wilt pushen. Maar de onderhouder (projecteigenaar) of het kernteam moet rekening houden met uw wijzigingen voordat u deze samenvoegt met de "main" tak van het project, dus u vraagt echt om een wijzigingsbesluit van een onderhouder. + +Een pull request is de plek om de verschillen die op een tak zijn geïntroduceerd te vergelijken en te bespreken met recensies, opmerkingen, geïntegreerde tests en meer. Een goed pull request volgt ongeveer dezelfde regels als een commitbericht. U kunt een verwijzing naar een probleem (issue) toevoegen in de issue tracker, bijvoorbeeld wanneer uw werk een probleem oplost. Dit doet u met een `#` gevolgd door het nummer van uw probleem. Bijvoorbeeld `# 97`. + +🤞Duimen dat alle controles slagen en de projecteigenaar(s) uw wijzigingen in het project samenvoegen🤞 + +Update uw huidige lokale werkende tak met alle nieuwe commits van de corresponderende remote tak op GitHub: + +`git pull` + +## Hoe u kunt bijdragen aan open source + +Laten we eerst een repository - of: repo - op GitHub zoeken die voor u interessant is en waaraan u een wijziging zou willen bijdragen. U zult de inhoud ervan naar uw machine kopiëren. + +✅ Een goede manier om 'beginnersvriendelijke' repos te vinden, is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Kopieer lokaal een repo](../images/clone_repo.png) + +Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "klonen" door HTTPS, SSH of de GitHub CLI (Command Line Interface) te gebruiken. + +Open uw terminal en kloon de repository op deze manier: +`git clone https://github.com/ProjectURL` + +Schakel naar de juiste map om aan het project te werken: +`cd ProjectURL` + +U kunt ook het hele project openen met [Codespaces](https://github.com/features/codespaces), GitHub's ingesloten code-editor /cloud-ontwikkelomgeving of [GitHub Desktop](https://desktop.github.com/). + +Ten slotte kunt u de code downloaden in een gecomprimeerde map. + +### Nog een paar interessante dingen over GitHub + +U kunt elke openbare repository op GitHub een ster geven, bekijken en/of "forken". U kunt uw repositories met ster vinden in het vervolgkeuzemenu rechtsboven. Het is net als bladwijzers, maar dan voor code. + +Projecten hebben een issue tracker, meestal op GitHub in de "Issues" tab, tenzij anders aangegeven, waar mensen problemen bespreken die verband houden met het project. En op het tabblad Pull Requests bespreken en beoordelen mensen lopende wijzigingen. + +Projecten kunnen ook worden besproken in forums, mailinglijsten of chatkanalen zoals Slack, Discord of IRC. + +✅ Kijk eens rond in uw nieuwe GitHub-repo en probeer een paar dingen, zoals het bewerken van instellingen, het toevoegen van informatie aan uw repo en het maken van een project (zoals een Kanban-bord). U kunt veel doen! + +--- + +## 🚀 Uitdaging + +Koppel met een vriend om aan elkaars code te werken. Creëer gezamenlijk een project, fork code, maak takken en voeg wijzigingen samen. + +## Quiz na de lezing +[Quiz na de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4) + +## Beoordeling en zelfstudie + +Lees meer over [bijdragen aan open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Git-cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/). + +Oefenen, oefenen, oefenen. GitHub heeft geweldige leertrajecten beschikbaar via [lab.github.com](https://lab.github.com/): + +- [Eerste week op GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +U zult ook meer geavanceerde labs vinden. + +## Toewijzing + +Voltooi [de eerste week op GitHub-trainingslaboratorium](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md b/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md new file mode 100644 index 00000000..5a97fc30 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md @@ -0,0 +1,318 @@ +# GitHub 介绍 + +这节课涵盖了 GitHub 的基础知识，这是一个可以用来存放代码和管理代码变更的平台。 + +![Intro to GitHub](/sketchnotes/webdev101-github.png) +> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) + +## 课前小测 +[课前小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=zh_cn) + +## 大纲 + +这节课我们将会介绍： + +- 在你的电脑上追踪你的工作 +- 与他人协同开发项目 +- 如何参与开源软件贡献 + +### 开始之前 + +开始之前，你需要确保安装了 Git，在终端（译注：即上一节课中介绍的命令行）中输入： +`git --version` + +如果没有安装 Git，请先[下载并安装 Git](https://git-scm.com/downloads)。然后用如下命令设置你的本地 Git 使用者配置文件： +* `git config --global user.name "your-name"` +* `git config --global user.email "your-email"` + +要检查 Git 使用者是否配置完成，可以输入： +`git config --list` + +你还需要一个 GitHub 账户，一个代码编辑器（比如 Visual Studio Code），并且要打开你的终端（或者其他命令行）。 + +如果你没有现成的 Github 账号，去 [github.com](https://github.com/) 创建一个。如果已经有账号，就登录进去并且完成个人资料的配置。 + +✅ GitHub 并不是世界上唯一的代码仓库，但是最知名的。 + +### 课前准备 + +你需要在本地（你的笔记本或 PC）创建一个项目文件夹，还需要在 GitHub 上创建一个公开的仓库（译注：后文会有指引），作为本节课中向其他人的项目提贡献的示例。 + +--- + +## 代码管理 + +假如你在本地有一个代码项目的文件夹，你希望开始使用 Git （版本控制系统）来追踪你的进度。有的人将使用 Git 比作给未来的你自己写一封情书，在数日、数周乃至数月后阅读你的提交信息（commit messages）时，你就可以想起你做出某个决定的原因，或者回滚（rollback）一次变更 —— 前提是你写了不错的提交信息。 + +### 任务：创建仓库并提交代码 + +1. **在 GitHub 上创建仓库**。进入 GitHub.com，在 “Repositories” 标签或者右上角导航栏找到 **New repository** 按钮。 + + 1. 给你的仓库取个名字； + 1. 点击 **Create repository**。 + +1. **前往你的工作目录**。在你的终端中，通过输入下方命令切换到你希望开始追踪的文件夹（即目录）： + + ```bash + cd [文件名称/目录路径] + ``` + +1. **初始化一个 Git 仓库**。在你的项目下输入： + + ```bash + git init + ``` + +1. **检查状态**。要检查你的仓库状态，输入： + + ```bash + git status + ``` + + 输出看起来将会像这样： + + ```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 + ``` + + 一般来说 `git status` 命令会告诉你诸如什么文件已经 _被保存到_ 仓库内或者有一些你可能想要保留的变更之类的事。 + +1. **追踪所有文件** + 这个操作也叫做暂存（stage）文件或者将文件添加到暂存区（staging area）。 + + ```bash + git add . + ``` + + `git add` 命令加上 `.` 参数将会追踪你的所有文件和变更。 + +1. **只追踪选定的文件** + + ```bash + git add [文件或文件夹名] + ``` + + 如果你不想一次性将所有文件添加到暂存区，可以用这个命令仅仅添加选定的文件。 + +1. **取消所有文件的追踪** + + ```bash + git reset + ``` + + 这条命令可以帮我们取消暂存（unstage）所有文件。 + +1. **取消特定文件的追踪** + + ```bash + git reset [文件或文件夹名] + ``` + + 如果你在下次提交中不希望提交某个已经暂存的文件，可以用这条命令取消它的暂存。 + +1. **保存你的工作**。现在你应该已经将文件添加到了所谓 _暂存区_ 中，这是 Git 追踪你的文件的地方。为了永久地保存变更，你需要 _提交（commit）_ 这些文件。你可以用 `git commit` 命令创建一次 _提交_。一次 _提交_ 代表你的仓库历史中的一个存档点。输入下方命令来创建一次 _提交_： + + ```bash + git commit -m "first commit" + ``` + + 这会提交你暂存区中的所有文件，并带上一条提交信息 —— “first commit”。在以后的提交信息中你会想要加入更加准确的描述，比如一些表示你这次变更的类型的信息。 + +1. **将你的本地仓库连接到 GitHub**。现在 Git 仓库已经能在你的本地机器上正常运作，但是有时候你会想要将你的文件备份到别处，或者希望邀请其他人来一起参与这个仓库的协作。GitHub 就是一个可以满足你要求的好地方。我们此前已经在 GitHub 上创建了一个仓库，现在只需要将本地 Git 仓库连接到 GitHub 就可以了，用 `git remote add` 命令就可以做到。输入下面的命令： + + > 注意，在你输入命令前，需要前往你的 GitHub 仓库而页面来找到仓库的地址（URL），用它来替换命令中 `username/repository_name` 这一部分。 + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + 这会创建一个被命名为 “origin” 的 _远程仓库位置（remote）_，也可以理解为一个连接，指向你早先创建的 GitHub 仓库。 + +1. **将本地文件上传至 GitHub**。现在你已经创建了一个本地仓库和 GitHub 仓库间的 _连接_。让我们通过 `git push` 命令将这些文件上传至 GitHub，就像这样： + + ```bash + git push -u origin main + ``` + + 这样就会把你的提交上传到 GitHub 上你的 “main” 分支了。 + +1. **添加更多的变更**。如果你想继续搞点变更并且将它们传到 GitHub 上，你只需要使用下面的三行命令： + + ```bash + git add . + git commit -m "在这里填写你的提交信息" + git push + ``` + + > 提示，你可能还需要建立一个 `.gitignore` 文件来防止 Git 追踪一些文件并且让它们不会被上传到 GitHub，比如一些你写在本地仓库但并不想放到公开仓库的笔记文件。你可以在 [.gitignore templates](https://github.com/github/gitignore) 找到一些现成的 `.gitignore` 文件模板。 + +#### 提交信息（Commit Messages） + +一条好的 Git 提交信息标题（subject line）可以理解为下方句子的填空： +如果生效，这次提交将会 <你的提交信息标题> + +在标题内，使用祈使语气和现在时态，即使用 “change” 而非 “changed” 或 “changes”。 +同理，在正文（body，可选）中也要用祈使语气和现在时态。正文中需要包括更改的动机，并对比与更改前后行为的变化。确保你说明的是`为什么`，而不是`怎么做`。 + +✅ 花几分钟逛逛 GitHub。你能找到感觉非常棒的提交信息吗？你可以找到非常简洁的提交信息吗？你认为在一条提交信息中，传达什么信息是最重要和有用的？ + +### 任务：协作 + +将项目放到 GitHub 的主要原因是让和其他开发者协作开发成为可能。 + +## 和其他人协作开发项目 + +在你的仓库中，前往 `Insights > Community` 来查看你的项目和推荐的社区规范的对比。 + + 这里有一些你可以改进你的项目仓库的点： + - **项目描述（Description）**。你为你的项目添加了描述吗？ + - **README**。你有添加 README 吗？GitHub 提供了撰写 [README](https://docs.github.com/articles/about-readmes/) 的指南。 + - **贡献指南（Contributing guideline）**。你的项目是否有[贡献指南](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)？ + - **行为准则（Code of Conduct）**。添加一份 [行为准则](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/) + - **开源协议（License）**。或许是最重要的，添加一个[开源协议](https://docs.github.com/articles/adding-a-license-to-a-repository/) + + +所有这些资源对于新加入的团队成员都是很有好处的，这些一般是新的贡献者在看你的代码前会更先去看的东西，以确认你的项目是否值得他们在这上面花费时间。 + +✅ 尽管很多人都准备了 README 文件，但常常会因为太忙而疏于维护。你能找到一个这样的例子吗？注：这里有一些可以[用于创建优秀的 README 的工具](https://www.makeareadme.com/)，你或许愿意试试。 + +### 任务：合并（Merge）一些代码 + +贡献文档帮助人们对项目做贡献，其中说明了你正需要什么样的贡献以及贡献的过程该是怎样的。贡献者需要完成一系列步骤才能在 GitHub 上参与你项目的贡献： + + +1. **复刻（Fork）你的仓库**。你可能希望人们 _复刻_ 你的项目。复刻意味着在他们自己的 GitHub 账户下创建你的项目的一份副本。 +1. **克隆（Clone）**。在这里他们将会将项目克隆到他们的本地机器上。 +1. **创建一个分支（Branch）**。你可能希望他们能创建一个 _分支_ 来进行他们的工作。 +1. **集中进行一个区域的修改**。要求贡献者每次贡献只专注做一件事，这样你才更可能 _合并_ 他们的工作。想象一下如果他们修了一个 BUG，添加了一个新特性，然后更新了几个测试，而你其实只想要其中的一个或两个更改时该怎么办？ + +✅ 想一想分支在什么情况下对于编写和发布优质的代码非常重要？你能想到哪些使用实例？ + +> 注意，要以身作则，对你自己的工作也要创建分支。任何提交都需要在当前“检出（checked out）”的分支上进行。使用 `git status` 来查看是哪一个分支。 + +让我们走一遍贡献者的工作流程。假设贡献者已经 _复刻_ 并 _克隆_ 了仓库，他们在本地机器已经有了一个可以工作的仓库： + +1. **创建一个分支**。使用命令 `git branch` 来创建一个他们希望用来包含计划进行的变更的分支： + + ```bash + git branch [分支名] + ``` + +1. **切换到工作分支**。使用 `git checkout` 来切换到指定分支并且更新工作目录中的文件： + + ```bash + git checkout [分支名] + ``` + +1. **干活**。现在你可以添加你的变更了，别忘了用下面的命令告诉 Git 你所做的工作： + + ```bash + git add . + git commit -m "变更内容" + ``` + + 确保你的提交有一个好名字，不论是对你自己还是你正在帮助的仓库维护者来说都有好处。 + +1. **将你的工作合入 `main` 分支**。在完成工作后，你打算将你的工作和 `main` 分支上的合并。`main` 分支可能同时有了一些新的变更，所以要先用以下命令确保将其更新至最新版本： + + ```bash + git checkout main + git pull + ``` + + 这时你想确认是否存在 _冲突（conflicts）_，即 Git 没法简单地将这些变化 _合入_ 你的分支的情况。为此运行下面的命令： + + ```bash + git checkout [分支名] + git merge main + ``` + + 这将会把所有 `main` 分支上的变更带入到你的分支上。运气好的话一切都会自动搞定，否则 VS Code 会告诉你哪些文件 Git _不确定_ 该如何合并，你只需要手动修改对应文件来解决冲突即可。 + +1. **将你的工作上传至 GitHub**。将你的工作上传至 GitHub 意味着两件事：把你的分支上传到你自己的仓库，然后开启一个 PR（Pull Request）： + + ```bash + git push --set-upstream origin [分支名] + ``` + + 上述命令在你复刻的仓库中创建了一个分支。 + +1. **开启一个 PR**。接下来，你打算开启一个 PR。前往 GitHub 上你打算贡献的仓库，你将会看到一个消息条询问你是否想要创建一个新的 PR，点击后即可进入创建 PR 的界面。在这里你可以更改提交标题，给出更准确的描述。创建 PR 后，仓库维护者将会看到这个，如果 _一切顺利_ 的话他们会表示感谢并且 _合并_ 你的 PR。你现在就是一位贡献者啦！ :) + +1. **清理**。成功合入一个 PR 后，做做 _清理_ 是一个好习惯。你会想要清理本地和你上传到 GitHub 的分支。首先让我们通过下面的命令来删除本地的分支： + + ```bash + git branch -d [分支名] + ``` + + 接下来请确保前往 GitHub 中对应仓库的页面并删除你刚才上传的分支。 + +`Pull request` 这个术语看起来有些憨，因为你确实打算把你的变更提交到这个项目中。但是在将你的变更合入到项目的 `main` 分支前，维护者（项目拥有者）或者核心团队需要考虑和检查你的变更，这意味着你实际上是在请求（request）维护者的变更决定。 + +Pull Request 是一个可以用来比较和讨论一个分支引入的改动的地方，并有代码审查、评论、集成测试等功能。优质的 Pull Request 严格遵照与提交信息相同的规则。如果你的工作是为了修复一个 Issues 面板中的事项，你可以在 PR 中提及这个事项。具体做法是写一个 `#` 加上事项的编号，比如 `#97`。 + +🤞如果一切顺利，所有的检查都通过后项目拥有者就会将你的变更合入项目🤞 + +使用这个命令即可将 GitHub 上对应远程分支的所有新提交更新到当前本地的工作分支上： + +`git pull` + +## 如何参与开源贡献 + +首先，让我们在 GitHub 上找到一个你感兴趣且愿意参与贡献的仓库（**repo**），你会复制一份它的内容到你的机器上。 + +✅ 一个寻找对入门者友好的仓库的好办法是[搜索 “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) + +有很多种复制代码的方法，其中一种就是“克隆”仓库的内容，可以用 HTTPS、SSH 或者 GitHub CLI（Command Line Interface）来做到。 + +打开你的终端并且用类似下方的命令来克隆仓库： +`git clone https://github.com/ProjectURL` + +切换到正确的工作目录： +`cd ProjectURL` + +你也可以用 [Codespaces](https://github.com/features/codespaces) 来打开整个项目，这是 GitHub 内置的代码编辑器和云开发环境，或者用 [GitHub Desktop](https://desktop.github.com/)。 + +当然，你也可以直接下载代码的压缩包。 + +### 更多 GitHub 的有趣小知识 + +你可以收藏（star）、关注（watch）和/或复刻（fork）GitHub 上的任何公开仓库。可以在右上角的下拉菜单找到你收藏的仓库，这就像书签一样，但收藏的是代码。 + +项目都有一个事项面板（issue tracker），用于让人们讨论和这个项目相关的事项，事项面板基本都在 GitHub 的 “Issues” 标签页中，偶尔也会指明在其他地方。而 “Pull Requests” 标签页则是人们讨论和检查正在进行的变更的地方。 + +项目也可能会在论坛、邮件列表或者如 Slack、Discord、IRC 这样的聊天频道进行讨论。 + +✅ 看看你新建立的 GitHub 仓库，尝试做一些其他事，比如编辑设置、为仓库增加信息、创建一个 Project（类似看板），有很多可以尝试的东西！ + +--- + +## 🚀 挑战 + +找朋友一起编辑彼此的代码。协作创建一个项目、复刻代码、创建分支，然后合并变更。 + +## 课后小测 +[课后小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=zh_cn) + +## 复习 & 自学 + +了解更多 [如何提交贡献](https://opensource.guide/zh-hans/how-to-contribute/#%E5%A6%82%E4%BD%95%E6%8F%90%E4%BA%A4%E8%B4%A1%E7%8C%AE)。 + +[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/)。 + +练习，练习，再练习。GitHub 在 [lab.github.com](https://lab.github.com/) 提供了很棒的学习路径： + +- [在 GitHub 的第一周](https://lab.github.com/githubtraining/first-week-on-github) + +你还可以在上面找到更多高阶的实验内容。 + +## 作业 + +完成 [在 GitHub 的第一周](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md b/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md new file mode 100644 index 00000000..bcf3bf2a --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md @@ -0,0 +1,319 @@ +# GitHub 簡介 + +這堂課程講述一個提供加設與管理程式碼的平台 ── Github的基本功能。 + +![GitHub 簡介](/sketchnotes/webdev101-github.png) +> 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製 + +## 課前測驗 +[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=zh_tw) + +## 大綱 + +在這堂課中，包含： + +- 追蹤裝置上的工作專案 +- 與其他人共同開發專案 +- 如何貢獻網路上的開源軟體 + +### 開始之前 + +在你開始課程之前，你需要安裝 Git 這套套件。在你的終端機上輸入： +`git --version` + +若你的裝置上沒有安裝 Git，[請下載並安裝 Git](https://git-scm.com/downloads)。 安裝完之後，請設定裝置本地 Git 的使用者設定。 +* `git config --global user.name "your-name"` +* `git config --global user.email "your-email"` + +要確認 Git 使用者設定是否完成，你可以輸入： +`git config --list` + +此外，你需要一組 GitHub 的帳戶、一款文字編輯器 (如：Visual Studio Code) 與你的終端機 (或 command prompt)。 + +若你缺少 GitHub 帳戶，請前往 [github.com](https://github.com/)建立並登入一組帳戶，遵循指示完成資料的填寫。 + +✅ GitHub 不是唯一的程式碼數據庫，但 GitHub 是家喻戶曉的。 + +### 課前準備 + +你需要在裝置(筆電或電腦)上建立程式專案的資料夾，與 GitHub 公共的數據庫(Public Repository)。之後的例子會使用到此公共數據庫來與他人分享程式碼。 + +--- + +## 程式碼管理 + +假設你的本地端資料夾存放著一些程式專案，你想利用 Git 來作專案追蹤與版本控制，甚至是對未來的你寫一封情書。在一天、一週甚至是一個月後閱讀你的提交紀錄，了解當初你的決定，回想之前的更動。前提是當初你有寫一條完整的提交紀錄。 + +### 課題：建立數據庫並提交程式碼 + +1. **在 GitHub 上建立數據庫** 在 GitHub.com 上，在 "Repositories" 的標籤或導航欄的右上方，找到 **new repo** 的按鈕。 + + 1. 為你的數據庫資料夾取個名字。 + 1. 選擇 **建立數據庫(create repository)**. + +1. **調查本地的專案資料夾** 在終端機中開啟儲存程式碼的資料夾，在你想追蹤的目錄下輸入： + + ```bash + cd [資料夾名稱] + ``` + +1. **初始化 git 數據庫(repo)** 在目錄下輸入： + + ```bash + git init + ``` + +1. **檢查狀態** 若想檢查目前數據庫的狀態，輸入： + + ```bash + git status + ``` + + 它會輸出類似以下的訊息： + + ```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 + ``` + + 指令 `git status` 會回報那些檔案已經準備 _被存到_ 數據庫或是被更動過但不想更新上去。 + +1. **開始追蹤所有檔案** + 新增檔案到暫存區(staging area)。 + + ```bash + git add . + ``` + + `git add` 加上路徑 `.` 表示追蹤該路徑下所有的檔案。 + +1. **只追蹤選擇的檔案** + + ```bash + git add [檔案或資料夾路徑] + ``` + + 上述指令幫助你只追蹤被選取的檔案，允許使用者分批提交。 + +1. **取消追蹤所有檔案** + + ```bash + git reset + ``` + + 上述指令能取消追蹤(unstage)暫存區的檔案。 + +1. **取消追蹤特定的檔案** + + ```bash + git reset [檔案或資料夾路徑] + ``` + + 上述指令只取消追蹤單一檔案，在下一次提交時不被圈選在裡面。 + +1. **保存工作狀態** 現在，已經有一些檔案被標記在 _暫存區(staging area)_。 Git 會追蹤區域內的檔案。若要保存這些檔案的狀態，你需要 _提交(commit)_ 這些檔案。 _提交_ 會記錄當下數據庫中檔案的狀態到歷史紀錄中。 你需要指令`git commit` 完成這項工作。 + + ```bash + git commit -m "first commit" + ``` + + 這會提交暫存區內的檔案，"first commit"即提交紀錄。提交紀錄最好能識別出這次的提交主要做了那些更動。 + +1. **連接本地數據庫到 GitHub 遠端數據庫** 現在 Git 數據庫已經成功運行在你的本地裝置上，但有時候你希望能將檔案備份到其他地方，或是邀請他人參與這項程式專案。 GitHub 便是一個好地方。先前我們已經建立遠端數據庫在 GitHub 上，現在我們只要連接本地數據庫到 GitHub上。指令 `git remote add` 能完成這項課題： + + > 注意，在輸入指令前，你需要取得 GitHub 遠端數據庫的 URL 位置。請將下列的 `repository_name` 替換為你的遠端數據庫路徑。 + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + 這會在 GitHub 遠端數據庫上建立一個名叫 "origin" 的 _遠端位置(remote)_ ，或稱 _連接(connection)_。 + +1. **上傳本地檔案到 GitHub** 現在已經建好了遠端與本地的 _連接_。 利用指令 `git push` 可以將本地檔案上傳到遠端數據庫當中： + + ```bash + git push -u origin main + ``` + + 所有的提交都會加到 GitHub 上 "main" 的分支當中。 + +1. **增加更多的更動** 若之後再對程式碼有所更動、提交並上傳到 GitHub 上，只要輸入： + + ```bash + git add . + git commit -m "type your commit message here" + git push + ``` + + > 提示：建立 `.gitignore` 檔案可以讓你自動排除的特定檔案項目不被 GitHub 追蹤。好比是有一個在同一個目錄下的筆記檔不想被上傳到遠端數據庫。以下是 `.gitignore` 的參考版型： [.gitignore 參考版型](https://github.com/github/gitignore)。 + +#### 提交紀錄(Commit Messages) + +一條好的 Git 提交標題行最好滿足下列條件： +提交完後，提交紀錄會顯示 <你的標題> + +標題使用祈使語句，如使用 "change" 而非 "changed" 或 "changes"。 +同理地，內文(選擇性)也使用祈使語句。內文須包含改動的動機與改動前後的差異。你需要解釋「為什麼改」而非「怎麼改」。 + +✅ 花點時間在 GitHub 上閒晃。你能找到很棒的提交紀錄嗎? 你能找到簡潔的提交紀錄嗎? 哪些資訊是你認為一個提交紀錄要有的重要資訊? + +### 課題：多人合作 + +另一個將專案上傳到 GitHub 的主要原因是讓其他開發者能參與其中。 + +## 與其他人共同開發專案 + +在你的遠端資料庫中，前往 `Insights > Community` 來對比你的專案與其他推薦社群專案。 + + 以下是一些你的 GitHub 數據庫需要精進的地方： + - **專案描述(Description)** 你有為你的專案新增描述嗎? + - **README** 你有新增 README 嗎? GitHub 提供編寫 README 的指引與參考： [README](https://docs.github.com/articles/about-readmes/) + - **開發指引(Contributing guideline)** 你的專案內有[開發指引](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)嗎? + - **行為準則(Code of Conduct)** [行為準則](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/) + - **授權條款License** 這或許是最重要的：[授權條款](https://docs.github.com/articles/adding-a-license-to-a-repository/) + + +這些資源對剛加入到專案的新成員有所幫助。這些是新的合作夥伴比看程式碼還優先查詢的地方。完善它們能有效縮減他人消化的時間。 + +✅ README 檔，雖然多數人都會配置，但忙碌的開發者都會疏於管理。 你能在社群中找到相關的例子嗎? 這邊有[關於建立 READMEs 的有利工具](https://www.makeareadme.com/)可以嘗試。 + +### 課題：合併程式碼 + +開發指引文件幫助他人了解如何共同開發專案。它提供專案需要被貢獻的部分與該如何運作。共同開發者需要經過下列步驟來與他人在 GitHub 共同開發專案： + +1. **分叉(Fork)專案** 你或許希望別人能 _分叉(fork)_ 你的專案。 分叉代表別人建立一份你的專案副本到他人的 GitHub 數據庫中。 +1. **複製(Clone)** 複製專案到他人的本地裝置中。 +1. **建立分支(branch)** 依照工作需求建立 _分支(branch)_。 +1. **專注在他人投入的工作範圍** 要求他人只專注在單一課題上，這樣能提升他們工作 _合併(merge)_ 的機會。想像他們在修正錯誤，同時又新增新功能、更新測試機制......這時如果你只想合併其中的一個、或者是兩個功能呢? + +✅ 想像一個情況：一個重要的分支是編輯與分享的主軸，它能被如何應用? + +> 注意，在做更動前，記得建立新的分支。任何提交都會在你所在的分支上，指令 `git status` 可以檢查你現在所在的分支。 + +現在，我們以共同開發者的角度來看。假設開發者已經 _分支_ 且 _複製_ 了他人的數據庫到自己的 Git 數據庫上，準備開始編輯檔案： + +1. **建立新的分支** 利用指令 `git branch` 來建立新的分支，只做相關的工作改動。 + + ```bash + git branch [分支名稱] + ``` + +1. **切換到該工作分支** 使用指令 `git checkout` 來切換到特定分支，更新分支的檔案狀態： + + ```bash + git checkout [分支名稱] + ``` + +1. **程式設計** 記得追蹤你所更改的地方，利用下列的指令來告訴 Git： + + ```bash + git add . + git commit -m "my changes" + ``` + + 請確保提交都有適當的名稱，對管理者與你自己都有好處。 + +1. **將工作分支與 `main` 分支進行合併** 當工作完成時，你會需要將工作分支與 `main` 分支進行合併。 `main` 分支可能會被他人更新，在合併之前記得更新主分支： + + ```bash + git checkout main + git pull + ``` + + 這項步驟可能會面臨到 _衝突(conflicts)_，代表 Git 無法將本地的更動作 _合併(combine)_ 。此時你需要執行下列的指令： + + ```bash + git checkout [分支名稱] + git merge main + ``` + + 這會將所有 `main` 分支的改動加入到你的本地目錄中。若出現狀況，VS Code會告訴你 Git 會對衝突的檔案感到 _困惑(confused)_， 你需要判斷哪一項檔案或程式碼才是最適當的選擇。 + +1. **將你的成果上傳到 GitHub** 這代表著兩件事：將分支推到你的遠端數據庫以及準備建立 Pull Request(PR)。 + + ```bash + git push --set-upstream origin [分支名稱] + ``` + + 上述的指令會在分叉的數據庫中新增分支。 + +1. **建立 PR** 藉由造訪分叉的數據庫中建立 PR，GitHub 會指示你是否要建立 PR，之後要填寫提交紀錄以及編寫詳細的說明。讓管理者了解你做了哪些更動並進行 _交叉比對(fingers crossed)_。 他們會感激你的貢獻並 _合併(merge)_ 你的 PR。完成這步後，你就成為了專案貢獻者，恭喜！ + +1. **清理專案** 在 PR 被成功合併後， _清除專案(clean up)_ 會是一個好習慣。 你需要清除你的本地分支以及你的遠端數據庫分支。首先，你可以利用下列的指令清除本地分支： + + ```bash + git branch -d [分支名稱] + ``` + + 之後，請確保在 GitHub 頁面上刪除遠端分支。 + +`Pull request` 要求更新更動到「自己」的專案數據庫，這看起來很蠢。但管理者與核心組員必須謹慎地考量你的更動才能合併到專案的主分支中。這便是向管理者請求上傳許可。 + +一個 PR 提供比對以及討論的地方，解釋分支的意義、確認程式的合理性、留言與測試……等等。一個好的 PR 必須參照前述所說的提交紀錄準則。若你的 PR 有解決特定的 issue，記得標記在 PR 當中。使用 `#` 接在數字前面來標記 issue 編號，如 `#97`。 + +🤞 交叉比對每個程式環節都正確無誤後，專案管理者才合併你所作的更動 🤞 + +若要從 GitHub 遠端數據庫更新到目前的本地工作分支，使用： + +`git pull` + +## 如何貢獻網路上的開源軟體 + +首先，尋找一個你感興趣的數據庫，你會複製一份副本到自己的裝置上。 + +✅ 對新手而言，尋找「適合新手」的數據庫可以[搜尋 'good-first-issue' 標籤](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。 + +![複製數據庫到本地](../images/clone_repo.png) + +有許多方式來複製數據庫。 一種是利用 "clone" 整個數據庫的內容。可以使用 HTTPS、SSH 或是 GitHub CLI (Command Line Interface)。 + +打開終端機並輸入下列指令來複製數據庫： +`git clone https://github.com/ProjectURL` + +複製完後記得切換到正確的資料夾當中： +`cd ProjectURL` + +你也可以利用[Codespaces](https://github.com/features/codespaces)來打開專案，一款嵌入在 GitHub 中的雲端開發環境，或是使用[GitHub Desktop](https://desktop.github.com/)。 + +最後，你也可以下載數據庫的壓縮檔。 + +### 有關 GitHub 的小知識 + +你可以為別人打星星(star)、追蹤(watch)或分叉(fork)任何一個 GitHub 上的共享數據庫。打上星星的數據庫會出現在右上方的導航欄中。就像是書籤，但是是給程式碼用的。 + +專案內會有 issue 追蹤器。大多數的 issue 會在 GitHub "Issue" 的標籤內(有些Issue會由作者另外說明)，供大家進行討論。 Pull Requests 標籤內會有正在討論與審核的程式更動。 + +專案也會有討論區、寄信功能以及聊天室如 Slack、Discord 或 IRC。 + +✅ 花點時間觀察你的新專案，試著更新設定、新增描述、或架構成一個大型專案(像個大看板一樣！)。你可以創造出任何東西！ + +--- + +## 🚀 挑戰 + +找朋友一起編輯彼此的程式。共同建立一項專案、分叉程式、建立分支、合併更動。 + +## 課後測驗 +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=zh_tw) + +## 複習與自學 + +了解更多： + +[貢獻開源軟體](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) + +[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) + +練習，練習，再練習！ GitHub 有提供很好的學習管道：[lab.github.com](https://lab.github.com/) + +- [第一週在 GitHub 上](https://lab.github.com/githubtraining/first-week-on-github) + +你能找到更資深的實驗內容。 + +## 作業 + +完成[第一週在 GitHub 上](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index 99afa170..089302e9 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -1,6 +1,6 @@ # Creating Accessible Webpages -![All About Accessibility](webdev101-a11y.png) +![All About Accessibility](/sketchnotes/webdev101-a11y.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz @@ -24,15 +24,15 @@ At its most basic, a screen reader will read a page from top to bottom audibly. Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately, screen readers are built into most operating systems. -Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools. +Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools. -✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default. +✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default. ### Zoom -Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels. +Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels. -Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/). +Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/). ### Contrast checkers @@ -133,7 +133,7 @@ You can use `aria-label` to describe the link when the format of the page doesn' description ``` -✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Tree. There's no HTML equivalent for a tree, so you identify the generic `
` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contains more useful information. +✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Tree. There's no HTML equivalent for a tree, so you identify the generic `
` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contains more useful information. ```html

File Viewer

diff --git a/1-getting-started-lessons/3-accessibility/translations/README.es.md b/1-getting-started-lessons/3-accessibility/translations/README.es.md index 02e91081..3b3d8705 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.es.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.es.md @@ -1,6 +1,6 @@ # Creación de páginas web accesibles -![Todo sobre accesibilidad](../webdev101-a11y.png) +![Todo sobre accesibilidad](/sketchnotes/webdev101-a11y.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5) @@ -9,7 +9,7 @@ > > \- Sir Timothy Berners-Lee, director del W3C e inventor de la World Wide Web -Esta cita destaca perfectamente la importancia de crear sitios web accesibles. Una aplicación a la que no pueden acceder todos es, por definición, excluyente. Como desarrolladores web, siempre debemos tener en cuenta la accesibilidad. Al tener este enfoque desde el principio, estará bien encaminado para garantizar que todos puedan acceder a las páginas que crea. En esta lección, aprenderá sobre las herramientas que pueden ayudarlo a asegurarse de que sus activos web sean accesibles y cómo construir teniendo en cuenta la accesibilidad. +Esta cita destaca perfectamente la importancia de crear sitios web accesibles. Una aplicación a la que no pueden acceder todos es, por definición, excluyente. Como desarrolladores web, siempre debemos tener en cuenta la accesibilidad. Al tener este enfoque desde el principio, estará bien encaminado para garantizar que todos puedan acceder a las páginas que crea. En esta lección, aprenderás sobre las herramientas que pueden ayudarlo a asegurarse de que sus activos web sean accesibles y cómo construir teniendo en cuenta la accesibilidad. ## Herramientas para usar @@ -19,56 +19,56 @@ Una de las herramientas de accesibilidad más conocidas son los lectores de pant [Lectores de pantalla](https://en.wikipedia.org/wiki/Screen_reader) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo. -En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si su página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Se debe tener cuidado para garantizar que un lector de pantalla lea correctamente esta información. +En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si la página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Se debe tener cuidado para garantizar que un lector de pantalla lea correctamente esta información. -Todo desarrollador web debería familiarizarse con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que está familiarizado con el funcionamiento de un navegador, debe aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla. +Todo desarrollador web debería familiarizarse con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que estás familiarizado con el funcionamiento de un navegador, debes aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla. -✅ Prueba una extensión o herramienta de navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulte estas [herramientas de navegador Edge centradas en la accesibilidad](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). +✅ Prueba una extensión o herramienta de navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). -### Damas de contraste +### Checar contrastes Los colores en los sitios web deben elegirse cuidadosamente para responder a las necesidades de los usuarios daltónicos o de las personas que tienen dificultades para ver colores de bajo contraste. -✅ Pruebe un sitio web que le guste usar para el uso del color con una extensión de navegador como - [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). ¿Qué aprendes? +✅ Prueba un sitio web que te guste usar para el uso del color con una extensión de navegador como + [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). ¿Qué aprendiste? ### Lighthouse -En el área de herramientas para desarrolladores de su navegador, encontrará la herramienta Lighthouse. Esta herramienta es importante para obtener una primera visión de la accesibilidad (así como otros análisis) de un sitio web. Si bien es importante no depender exclusivamente de Lighthouse, una puntuación del 100% es muy útil como referencia. +En el área de herramientas para desarrolladores en tu navegador, encontrarás la herramienta Lighthouse. Esta herramienta es importante para obtener una primera visión de la accesibilidad (así como otros análisis) de un sitio web. Si bien es importante no depender exclusivamente de Lighthouse, una puntuación del 100% es muy útil como referencia. -✅ Busque Lighthouse en el panel de herramientas de desarrollo de su navegador y ejecute un análisis en cualquier sitio. ¿Qué descubres? +✅ Busca Lighthouse en el panel de herramientas de desarrollo de su navegador y ejecuta un análisis en cualquier sitio. ¿Qué descubres? ## Diseñar para la accesibilidad -La accesibilidad es un tema relativamente extenso. Para ayudarlo, existen numerosos recursos disponibles. +La accesibilidad es un tema relativamente extenso. Para ayudarte, existen numerosos recursos disponibles. - [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) -Si bien no podremos cubrir todos los aspectos de la creación de sitios accesibles, a continuación se muestran algunos de los principios básicos que querrá implementar. Diseñar una página accesible desde el principio es ** siempre ** más fácil que volver a una página existente para hacerla accesible. +Si bien no podremos cubrir todos los aspectos de la creación de sitios accesibles, a continuación se muestran algunos de los principios básicos que querrá implementar. Diseñar una página accesible desde el principio es **siempre** más fácil que volver a una página existente para hacerla accesible. ## Buenos principios de visualización ### Paletas de colores seguros -La gente ve el mundo de diferentes formas, y esto incluye los colores. Al seleccionar un esquema de color para su sitio, debe asegurarse de que sea accesible para todos. Uno genial [herramienta para generar paletas de colores es Color Safe](http://colorsafe.co/). +La gente ve el mundo de diferentes formas, y esto incluye los colores. Al seleccionar un esquema de color para tu sitio, debes asegurarte de que sea accesible para todos. Una [herramiento genial para generar paletas de colores es Color Safe](http://colorsafe.co/). -✅ Identifique un sitio web que sea muy problemático en el uso del color. ¿Por qué? +✅ Identifica un sitio web que sea muy problemático en el uso del color. ¿Por qué? ### Resaltar correctamente el texto -Resaltar texto por color, [peso de fuente](https://developer.mozilla.org/docs/Web/CSS/font-weight) u otra [decoración de texto](https://developer.mozilla.org/docs/Web/CSS/text-decoration) no informa inherentemente a un lector de pantalla de su importancia. Una palabra puede ser en negrita porque es una palabra clave o porque es la primera palabra y el diseñador decidió que debería ser en negrita. +Resaltar texto por color, [peso de fuente](https://developer.mozilla.org/docs/Web/CSS/font-weight) u otra [decoración de texto](https://developer.mozilla.org/docs/Web/CSS/text-decoration) no informa inherentemente a un lector de pantalla de su importancia. Una palabra puede estar en negrita porque es una palabra clave o porque es la primera palabra, y el diseñador decidió que debería estar en negrita. -Cuando sea necesario resaltar una frase en particular, utilice los elementos `` o ``. Estos le indicarán a un lector de pantalla que esos elementos son importantes. +Cuando sea necesario resaltar una frase en particular, utilice los elementos `` o ``. Estos te indicarán a un lector de pantalla que esos elementos son importantes. ### Usa el HTML correcto -Con CSS y JavaScript es posible que muchos elementos se parezcan a cualquier tipo de control. `` podría usarse para crear un `