From 5000dacf63e02cf8e1e0100d89816cd0f1f2d3d4 Mon Sep 17 00:00:00 2001 From: hexatester Date: Tue, 17 Nov 2020 20:14:19 +0700 Subject: [PATCH 01/25] update broken translations links --- .../translations/README.es.md | 6 +++--- .../2-github-basics/translations/README.es.md | 4 ++-- .../3-accessibility/translations/README.es.md | 6 +++--- .../1-data-types/translations/README.de.md | 6 +++--- .../1-data-types/translations/README.es.md | 8 ++++---- .../translations/README.de.md | 6 +++--- .../translations/README.es.md | 6 +++--- .../translations/README.de.md | 6 +++--- .../translations/README.es.md | 6 +++--- .../4-arrays-loops/translations/README.de.md | 6 +++--- .../4-arrays-loops/translations/README.es.md | 6 +++--- .../1-intro-to-html/translations/README.es.md | 10 +++++----- .../2-intro-to-css/translations/README.es.md | 17 ++++++++--------- .../translations/README.es.md | 10 +++++----- .../1-about-browsers/translations/README.es.md | 2 +- .../translations/README.es.md | 2 +- .../translations/README.es.md | 2 +- .../start/translations/README.es.md | 6 +++--- .../1-introduction/translations/README.es.md | 6 +++--- .../translations/README.es.md | 14 +++++++------- .../translations/README.es.md | 10 +++++----- .../translations/README.es.md | 8 ++++---- .../5-keeping-score/translations/README.es.md | 6 +++--- .../translations/assignment.es.md | 2 +- .../6-end-condition/translations/README.es.md | 8 ++++---- .../1-template-route/translations/README.es.md | 11 +++++------ .../{translation => translations}/README.es.md | 8 ++++---- .../assignment.es.md | 0 7-bank-project/3-data/translations/README.es.md | 6 +++--- .../translations/README.es.md | 10 +++++----- .../translations/assignment.es.md | 4 ++-- 7-bank-project/translations/README.es.md | 8 ++++---- 32 files changed, 107 insertions(+), 109 deletions(-) rename 7-bank-project/2-forms/{translation => translations}/README.es.md (98%) rename 7-bank-project/2-forms/{translation => translations}/assignment.es.md (100%) 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 ea7f6ab2..30ab9eff 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 @@ -2,7 +2,7 @@ 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. -## [Pre-lecture quiz](.github/pre-lecture-quiz.md) +## [Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### Introducción @@ -175,10 +175,10 @@ Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recu Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos únicos de JavaScript frente a Java? ¿Qué hay de COBOL vs. Go? -## [Prueba Post-lectura](.github/post-lecture-quiz.md) +## [Prueba Post-lectura](../.github/post-lecture-quiz.md) ## 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? -**Asignación**: [Asignación](assignment.md) \ No newline at end of file +**Asignación**: [Asignación](../assignment.md) \ No newline at end of file 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 c7e9775d..9f5b420f 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 @@ -2,7 +2,7 @@ Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y administrar cambios en su código. -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ### Introducción @@ -266,7 +266,7 @@ Los proyectos también pueden tener discusiones en foros, listas de correo o can 🚀 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. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio 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 3bd60bc7..c2d3c785 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.es.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.es.md @@ -3,7 +3,7 @@ ![Todo sobre accesibilidad](webdev101-a11y.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) > El poder de la Web está en su universalidad. El acceso de todas las personas independientemente de su discapacidad es un aspecto fundamental. > @@ -202,13 +202,13 @@ Una web accesible para algunos no es una verdadera "red mundial". La mejor maner ``` -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lea sobre las leyes de accesibilidad de su país de origen. ¿Qué está cubierto y qué no? Un ejemplo es [este sitio web del gobierno](https://accessibility.blog.gov.uk/). -** Tarea **: [Analizar un sitio web no accesible](assignment.md) +** Tarea **: [Analizar un sitio web no accesible](assignment.es.md) Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument diff --git a/2-js-basics/1-data-types/translations/README.de.md b/2-js-basics/1-data-types/translations/README.de.md index 207e0352..809caa40 100644 --- a/2-js-basics/1-data-types/translations/README.de.md +++ b/2-js-basics/1-data-types/translations/README.de.md @@ -2,7 +2,7 @@ [![Datentypen in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Datentypen in JavaScript") -## [Pre-Lecture Quiz](.github/pre-lecture-quiz.md) +## [Pre-Lecture Quiz](../.github/pre-lecture-quiz.md) Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet. @@ -186,7 +186,7 @@ Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Wert JavaScript ist bekannt für seine überraschende Art, gelegentlich mit Datentypen umzugehen. Recherchiere ein bisschen über diese 'Fallstricke'. Zum Beispiel: Groß- und Kleinschreibung kann beißen! Versuchen Sie dies in Ihrer Konsole: `let age = 1; let Age = 2; age == Age` (löst `false` auf - warum?). Welche anderen Fallstricke können Sie finden? -## [Quiz nach der Vorlesung](.github/post-lecture-quiz.md) +## [Quiz nach der Vorlesung](../.github/post-lecture-quiz.md) ## Review & Selbststudium @@ -194,4 +194,4 @@ Schauen Sie sich [diese Liste der JavaScript-Übungen](https://css-tricks.com/sn ## Zuordnung -[Praxis für Datentypen](assignment.md) \ No newline at end of file +[Praxis für Datentypen](assignment.de.md) \ No newline at end of file diff --git a/2-js-basics/1-data-types/translations/README.es.md b/2-js-basics/1-data-types/translations/README.es.md index 3c6fbce1..413ff928 100644 --- a/2-js-basics/1-data-types/translations/README.es.md +++ b/2-js-basics/1-data-types/translations/README.es.md @@ -2,7 +2,7 @@ [![Tipos de datos en JavaScript](https://img.youtube.com/vi/rEHV3fFMfn0/0.jpg)](https://youtube.com/watch?v=rEHV3fFMfn0 "Tipos de datos en JavaScript") -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. @@ -108,7 +108,7 @@ En la sección anterior, el valor de "myVariable" era un tipo de datos numérico `let myVariable = 123;` -Las variables pueden almacenar todo tipo de números, incluidos decimales o números negativos. Los números también se pueden usar con operadores aritméticos, que se tratan en la [siguiente sección] (# operadores). +Las variables pueden almacenar todo tipo de números, incluidos decimales o números negativos. Los números también se pueden usar con operadores aritméticos, que se tratan en la [siguiente sección](#operadores). ### Operadores aritméticos @@ -178,10 +178,10 @@ Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores boole 🚀 Desafío: JavaScript es conocido por sus sorprendentes formas de manejar tipos de datos en ocasiones. Investiga un poco sobre estos "errores". Por ejemplo: ¡la sensibilidad a mayúsculas y minúsculas puede morder! Pruebe esto en su consola: `let age = 1; let Age = 2; age == Age` (resuelve `false` - ¿por qué?). ¿Qué otras trampas puedes encontrar? -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Eche un vistazo a [esta lista de ejercicios de JavaScript](https://css-tricks.com/snippets/javascript/) y pruebe uno. ¿Qué aprendiste? -**Tarea**: [Práctica de tipos de datos](assignment.md) \ No newline at end of file +**Tarea**: [Práctica de tipos de datos](assignment.es.md) \ No newline at end of file diff --git a/2-js-basics/2-functions-methods/translations/README.de.md b/2-js-basics/2-functions-methods/translations/README.de.md index 6b74a25d..fa15c2f1 100644 --- a/2-js-basics/2-functions-methods/translations/README.de.md +++ b/2-js-basics/2-functions-methods/translations/README.de.md @@ -2,7 +2,7 @@ [![Methoden und Funktionen](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden und Funktionen") -## [Pre-Lecture Quiz](.github/pre-lecture-quiz.md) +## [Pre-Lecture Quiz](../.github/pre-lecture-quiz.md) Wenn wir darüber nachdenken, Code zu schreiben, möchten wir immer sicherstellen, dass unser Code lesbar ist. Während dies nicht intuitiv klingt, wird Code viel öfter gelesen als geschrieben. Ein Kernwerkzeug in der Toolbox eines Entwicklers, um wartbaren Code sicherzustellen, ist die **Funktion**. @@ -184,7 +184,7 @@ Sie haben jetzt gesehen, dass wir drei Möglichkeiten haben, eine Funktion als P Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artikulieren? Versuche es! -## [Quiz nach der Vorlesung](.github/post-lecture-quiz.md) +## [Quiz nach der Vorlesung](../.github/post-lecture-quiz.md) ## Review & Selbststudium @@ -192,4 +192,4 @@ Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.moz ## Zuordnung -[Spaß mit Funktionen](assignment.md) \ No newline at end of file +[Spaß mit Funktionen](assignment.de.md) \ No newline at end of file diff --git a/2-js-basics/2-functions-methods/translations/README.es.md b/2-js-basics/2-functions-methods/translations/README.es.md index 460b624e..c05c8777 100644 --- a/2-js-basics/2-functions-methods/translations/README.es.md +++ b/2-js-basics/2-functions-methods/translations/README.es.md @@ -2,7 +2,7 @@ [![Métodos y funciones](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos y funciones") -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) Cuando necesite su código para realizar una tarea, utilizará un método o una función. Analicemos las diferencias. @@ -89,11 +89,11 @@ Cualquier parámetro con valores predeterminados debe estar al final de la lista 🚀 Desafío: -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio TODO -**Tarea**: [Práctica de tipos de datos](assignment.md) +**Tarea**: [Práctica de tipos de datos](assignment.es.md) diff --git a/2-js-basics/3-making-decisions/translations/README.de.md b/2-js-basics/3-making-decisions/translations/README.de.md index f2fe21f9..6dcb96ad 100644 --- a/2-js-basics/3-making-decisions/translations/README.de.md +++ b/2-js-basics/3-making-decisions/translations/README.de.md @@ -2,7 +2,7 @@ [![Entscheidungen treffen](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Entscheidungen treffen") -## [Pre-Lecture Quiz](.github/pre-lecture-quiz.md) +## [Pre-Lecture Quiz](../.github/pre-lecture-quiz.md) Wenn Sie Entscheidungen treffen und die Reihenfolge steuern, in der Ihr Code ausgeführt wird, ist Ihr Code wiederverwendbar und robust. Dieser Abschnitt behandelt die Syntax zur Steuerung des Datenflusses in JavaScript und ihre Bedeutung bei Verwendung mit booleschen Datentypen. @@ -158,7 +158,7 @@ if (firstNumber > secondNumber) { Erstellen Sie ein Programm, das zuerst mit logischen Operatoren geschrieben wird, und schreiben Sie es dann mit einem ternären Ausdruck neu. Was ist Ihre bevorzugte Syntax? -## [Quiz nach der Vorlesung] (.github/post-lecture-quiz.md) +## [Quiz nach der Vorlesung](../.github/post-lecture-quiz.md) ## Review & Selbststudium @@ -166,4 +166,4 @@ Lesen Sie mehr über die vielen Operatoren, die dem Benutzer [auf MDN](https://d ## Zuordnung -[Operators](assignment.md) +[Operators](assignment.de.md) diff --git a/2-js-basics/3-making-decisions/translations/README.es.md b/2-js-basics/3-making-decisions/translations/README.es.md index 890c8f1b..de8404ce 100644 --- a/2-js-basics/3-making-decisions/translations/README.es.md +++ b/2-js-basics/3-making-decisions/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) Tomar decisiones y controlar el orden en que se ejecuta su código hace que su código sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia cuando se usa con tipos de datos booleanos. @@ -154,11 +154,11 @@ if (firstNumber > secondNumber) { 🚀 Desafío: cree un programa que se escriba primero con operadores lógicos y luego vuelva a escribirlo utilizando una expresión ternaria. ¿Cuál es tu sintaxis preferida? -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Más información sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). -**Asignación**: [Operadores](assignment.md) +**Asignación**: [Operadores](assignment.es.md) diff --git a/2-js-basics/4-arrays-loops/translations/README.de.md b/2-js-basics/4-arrays-loops/translations/README.de.md index 5442a4ba..a3f238c0 100644 --- a/2-js-basics/4-arrays-loops/translations/README.de.md +++ b/2-js-basics/4-arrays-loops/translations/README.de.md @@ -2,7 +2,7 @@ [![Arrays und Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops") -## [Pre-Lecture Quiz](.github/pre-lecture-quiz.md) +## [Pre-Lecture Quiz](../.github/pre-lecture-quiz.md) Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet. In dieser Lektion lernen Sie Arrays und Loops kennen, mit denen Daten bearbeitet werden. @@ -111,7 +111,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu. -## [Quiz nach der Vorlesung](.github/post-lecture-quiz.md) +## [Quiz nach der Vorlesung](../.github/post-lecture-quiz.md) ## Review & Selbststudium @@ -119,4 +119,4 @@ An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipu ## Zuordnung -[Array schleifen](assignment.md) +[Array schleifen](assignment.de.md) diff --git a/2-js-basics/4-arrays-loops/translations/README.es.md b/2-js-basics/4-arrays-loops/translations/README.es.md index a8167c56..3d2522ff 100644 --- a/2-js-basics/4-arrays-loops/translations/README.es.md +++ b/2-js-basics/4-arrays-loops/translations/README.es.md @@ -3,7 +3,7 @@ [![Matrices y bucles](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Matrices y bucles") -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. En esta lección, aprenderá sobre matrices y bucles, que se utilizan para manipular datos. @@ -105,10 +105,10 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { 🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), y [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación. -**Asignación**: [Bucle de una matriz](assignment.md) +**Asignación**: [Bucle de una matriz](assignment.es.md) diff --git a/3-terrarium/1-intro-to-html/translations/README.es.md b/3-terrarium/1-intro-to-html/translations/README.es.md index 038377db..cfea9ea2 100644 --- a/3-terrarium/1-intro-to-html/translations/README.es.md +++ b/3-terrarium/1-intro-to-html/translations/README.es.md @@ -3,7 +3,7 @@ ![Introducción a HTML](images/webdev101-html.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ### Introducción: @@ -15,7 +15,7 @@ En esta lección, usaremos HTML para diseñar el 'esqueleto' de la interfaz de n En su computadora, cree una carpeta llamada 'terrario' y dentro de ella, un archivo llamado 'index.html'. Puede hacer esto en Visual Studio Code después de crear su carpeta de terrario abriendo una nueva ventana de VS Code, haciendo clic en 'abrir carpeta' y navegando a su nueva carpeta. Haga clic en el botón pequeño 'archivo' en el panel del Explorador y cree el nuevo archivo: -! [explorador en VS Code] (images / vs-code-index.png) +! [explorador en VS Code](images / vs-code-index.png) > Los archivos index.html indican a un navegador que es el archivo predeterminado en una carpeta; Las URL como `https://anysite.com/test` se pueden construir usando una estructura de carpetas que incluya una carpeta llamada `test` con `index.html` dentro; `Index.html` no tiene que aparecer en una URL. @@ -97,7 +97,7 @@ Ahora, puede comenzar a construir su página. Normalmente, usa etiquetas `
` Una etiqueta html que no necesita una etiqueta de cierre es la etiqueta ``, porque tiene un elemento `src` que contiene toda la información que la página necesita para representar el elemento. -Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente] (../ images); (hay 14 imágenes de plantas). +Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente](../images); (hay 14 imágenes de plantas). ### Tarea: @@ -205,10 +205,10 @@ Agregue este marcado encima de la última etiqueta `
`: 🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después) -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio HTML es el sistema de bloques de construcción 'probado y verdadero' que ha ayudado a convertir la web en lo que es hoy. Aprenda un poco sobre su historia estudiando algunas etiquetas antiguas y nuevas. ¿Puedes averiguar por qué algunas etiquetas quedaron obsoletas y otras se agregaron? ¿Qué etiquetas podrían introducirse en el futuro? -** Tarea: [Practica tu HTML: crea una maqueta de blog](assignment.md) \ No newline at end of file +** Tarea: [Practica tu HTML: crea una maqueta de blog](assignment.es.md) \ No newline at end of file diff --git a/3-terrarium/2-intro-to-css/translations/README.es.md b/3-terrarium/2-intro-to-css/translations/README.es.md index 54233ea2..a5d3efc7 100644 --- a/3-terrarium/2-intro-to-css/translations/README.es.md +++ b/3-terrarium/2-intro-to-css/translations/README.es.md @@ -1,9 +1,9 @@ # Terrarium Project Parte 2: Introducción a CSS -![Introducción a CSS](images/webdev101-css.png) +![Introducción a CSS](../images/webdev101-css.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ### Introducción: @@ -67,7 +67,7 @@ body { Abra la consola de su navegador en la pestaña 'Elementos' y observe la fuente H1. Hereda su fuente del cuerpo, como se indica en el navegador: -![fuente heredada](images/1.png) +![fuente heredada](../images/1.png) ✅ ¿Puede hacer que un estilo anidado herede una propiedad diferente? @@ -240,19 +240,18 @@ Tenga en cuenta el uso de porcentajes aquí, incluso para el `border-radius`. Si --- -🚀 Desafío: agregue un brillo de 'burbuja' al área inferior izquierda del frasco para que se vea más parecido al vidrio. Estarás diseñando el `.jar-glossy-long` y el` .jar-glossy-short` para que parezca un brillo reflejado. Así es como se vería: +🚀 Desafío: agregue un brillo de 'burbuja' al área inferior izquierda del frasco para que se vea más parecido al vidrio. Estarás diseñando el `.jar-glossy-long` y el `.jar-glossy-short` para que parezca un brillo reflejado. Así es como se vería: -! [terrario terminado](./images/terrarium-final.png) +![terrario terminado](../images/terrarium-final.png) -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio CSS parece engañosamente sencillo, pero existen muchos desafíos cuando se trata de diseñar una aplicación perfectamente para todos los navegadores y todos los tamaños de pantalla. CSS-Grid y Flexbox son herramientas que se han desarrollado para hacer el trabajo un poco más estructurado y más confiable. Aprende sobre estas herramientas jugando a [Flexbox Froggy](https://flexboxfroggy.com/) y [Grid Garden](https://codepip.com/games/grid-garden/). -**Asignación**: [Refactorización CSS] (asignación.md) +**Asignación**: [Refactorización CSS](assignment.es.md) -Complete los siguientes módulos de aprendizaje para completar el [cuestionario posterior a la conferencia](. Github / post-lecture-quiz.md): +Complete los siguientes módulos de aprendizaje para completar el [cuestionario posterior a la conferencia](../.github/post-lecture-quiz.md): [Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics) - diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md index 56798506..b1636ccd 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md @@ -1,9 +1,9 @@ # Terrarium Project Part 3: DOM Manipulación y cierre -! [DOM y un cierre](images/webdev101-js.png) +! [DOM y un cierre](../images/webdev101-js.png) > Boceto de [Tomomi Imura](https://twitter.com/girlie_mac) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ### Introducción: @@ -16,7 +16,7 @@ Usaremos un cierre para manipular el DOM. > Piense en el DOM como un árbol, que representa todas las formas en que se puede manipular un documento de página web. Se han escrito varias API (interfaces de programas de aplicación) para que los programadores, utilizando el lenguaje de programación de su elección, puedan acceder al DOM y editarlo, cambiarlo, reorganizarlo y administrarlo de otro modo. -![DOM tree representation](./images/dom-tree.png) +![DOM tree representation](../images/dom-tree.png) > Una representación del DOM y el marcado HTML que lo hace referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -193,7 +193,7 @@ Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` pa --- -🥇¡Felicitaciones! Has terminado tu hermoso terrario. ![terrario terminado](./images/terrarium-final.png) +🥇¡Felicitaciones! Has terminado tu hermoso terrario. ![terrario terminado](../images/terrarium-final.png) 🚀Challenge: agregue un nuevo controlador de eventos a su cierre para hacer algo más en las plantas; por ejemplo, haga doble clic en una planta para traerla al frente. ¡Se creativo! @@ -203,5 +203,5 @@ Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` pa Si bien arrastrar elementos por la pantalla parece trivial, hay muchas formas de hacerlo y muchas trampas, según el efecto que busque. De hecho, hay una [API de arrastrar y soltar](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) completa que puedes probar. No lo usamos en este módulo porque el efecto que queríamos era algo diferente, pero pruebe esta API en su propio proyecto y vea lo que puede lograr. -** Tarea: [Trabajar un poco más con el DOM](assignment.md) +** Tarea: [Trabajar un poco más con el DOM](assignment.es.md) diff --git a/5-browser-extension/1-about-browsers/translations/README.es.md b/5-browser-extension/1-about-browsers/translations/README.es.md index a0293a6d..8c3cc09f 100644 --- a/5-browser-extension/1-about-browsers/translations/README.es.md +++ b/5-browser-extension/1-about-browsers/translations/README.es.md @@ -65,7 +65,7 @@ API de CO2 Signal. - [una clave API](https://www.co2signal.com/); ingrese su correo electrónico en el cuadro de esta página y se le enviará uno - el [código de su región](http://api.electricitymap.org/v3/zones) correspondiente al [Mapa de electricidad](https://www.electricitymap.org/map) (en Boston, por ejemplo, Yo uso 'US-NEISO'). -- el [código de inicio](../ inicio). Descargue la carpeta `start`; completará el código en esta carpeta. +- el [código de inicio](../inicio). Descargue la carpeta `start`; completará el código en esta carpeta. - [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web ✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/) diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md index 1c2073fe..d2402bc7 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md @@ -199,7 +199,7 @@ Esta es una gran función. ¿Que está pasando aqui? --- -🚀 Desafío: hemos discutido varios tipos de API hasta ahora en estas lecciones. Elija una API web e investigue en profundidad lo que ofrece. Por ejemplo, eche un vistazo a las API disponibles en los navegadores, como la [API HTML de arrastrar y soltar] (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). En tu opinión, ¿qué hace que una API sea excelente? +🚀 Desafío: hemos discutido varios tipos de API hasta ahora en estas lecciones. Elija una API web e investigue en profundidad lo que ofrece. Por ejemplo, eche un vistazo a las API disponibles en los navegadores, como la [API HTML de arrastrar y soltar](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). En tu opinión, ¿qué hace que una API sea excelente? ## [Post-lecture prueba](.github/post-lecture-quiz.md) diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md index 82f27ae0..fbe440a8 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md @@ -141,7 +141,7 @@ Felicitaciones, ha creado una extensión de navegador útil y ha aprendido más 🚀 Desafío: Investigue algunos sitios web de código abierto que han existido hace mucho tiempo y, según su historial de GitHub, vea si puede determinar cómo se optimizaron a lo largo de los años para el rendimiento, si es que lo hicieron. ¿Cuál es el punto de dolor más común? -## [Post-lecture prueba] (.github/post-lecture-quiz.md) +## [Post-lecture prueba](.github/post-lecture-quiz.md) ## Revisión y autoestudio diff --git a/5-browser-extension/start/translations/README.es.md b/5-browser-extension/start/translations/README.es.md index 6c93c6cc..068bf076 100644 --- a/5-browser-extension/start/translations/README.es.md +++ b/5-browser-extension/start/translations/README.es.md @@ -2,7 +2,7 @@ Usando la API de señal C02 de tmrow para rastrear el uso de electricidad, cree una extensión de navegador para que pueda tener un recordatorio directamente en su navegador sobre el consumo de electricidad de su región. El uso de esta extensión ad hoc le ayudará a tomar decisiones sobre sus actividades basándose en esta información. -![extension screenshot](extension-screenshot.png) +![extension screenshot](../extension-screenshot.png) ## Empezando @@ -20,9 +20,9 @@ Construye la extensión desde webpack: npm run build ``` -Para instalar en Edge, use el menú de 'tres puntos' en la esquina superior derecha del navegador para encontrar el panel Extensiones. Desde allí, seleccione 'Cargar sin empaquetar' para cargar una nueva extensión. Abra la carpeta 'dist' cuando se le solicite y se cargará la extensión. Para usarlo, necesitará una clave API para la API de CO2 Signal ([obtenga una aquí por correo electrónico](https://www.co2signal.com/) - ingrese su correo electrónico en el cuadro de esta página) y el [código para su región] (http://api.electricitymap.org/v3/zones) correspondiente al [Mapa de electricidad](https://www.electricitymap.org/map) (en Boston, por ejemplo, utilizo 'US- NEISO'). +Para instalar en Edge, use el menú de 'tres puntos' en la esquina superior derecha del navegador para encontrar el panel Extensiones. Desde allí, seleccione 'Cargar sin empaquetar' para cargar una nueva extensión. Abra la carpeta 'dist' cuando se le solicite y se cargará la extensión. Para usarlo, necesitará una clave API para la API de CO2 Signal ([obtenga una aquí por correo electrónico](https://www.co2signal.com/) - ingrese su correo electrónico en el cuadro de esta página) y el [código para su región](http://api.electricitymap.org/v3/zones) correspondiente al [Mapa de electricidad](https://www.electricitymap.org/map) (en Boston, por ejemplo, utilizo 'US- NEISO'). -![instalación](install-on-edge.png) +![instalación](../install-on-edge.png) Una vez que se ingresa la clave API y la región en la interfaz de extensión, el punto de color en la barra de extensión del navegador debe cambiar para reflejar el uso de energía de su región y darle un indicador sobre las actividades de alto consumo de energía que serían apropiadas para usted. El concepto detrás de este sistema de "puntos" me lo dio la [extensión Energy Lollipop](https://energylollipop.com/) para las emisiones de California. diff --git a/6-space-game/1-introduction/translations/README.es.md b/6-space-game/1-introduction/translations/README.es.md index 47be623a..32a701e5 100644 --- a/6-space-game/1-introduction/translations/README.es.md +++ b/6-space-game/1-introduction/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ### Herencia y composición en el desarrollo de juegos @@ -207,10 +207,10 @@ A medida que las cosas se complican cuando tu juego crece, este patrón permanec 🚀Desafío: Piense en cómo el patrón pub-sub puede mejorar un juego. ¿Qué partes deberían emitir eventos y cómo debería reaccionar el juego ante ellos? Ahora tienes la oportunidad de ser creativo, pensar en un nuevo juego y en cómo podrían comportarse sus partes. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber). -**Tarea**: [Mock up a game](assignment.md) \ No newline at end of file +**Tarea**: [Mock up a game](assignment.es.md) \ No newline at end of file diff --git a/6-space-game/2-drawing-to-canvas/translations/README.es.md b/6-space-game/2-drawing-to-canvas/translations/README.es.md index 02243e21..66d57d1a 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.es.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ## El lienzo @@ -60,7 +60,7 @@ Puede dibujar todo tipo de cosas con la API de Canvas como: - **Texto**, puede dibujar un texto con cualquier fuente y color que desee. - **Imágenes**, puede dibujar una imagen basada en un activo de imagen como .jpg o .png, por ejemplo. -✅ ¡Pruébalo! Sabes cómo dibujar un rectángulo, ¿puedes dibujar un círculo en una página? Eche un vistazo a algunos dibujos de Canvas interesantes en CodePen. Aquí hay un [ejemplo particularmente impresionante] (https://codepen.io/dissimulate/pen/KrAwx). +✅ ¡Pruébalo! Sabes cómo dibujar un rectángulo, ¿puedes dibujar un círculo en una página? Eche un vistazo a algunos dibujos de Canvas interesantes en CodePen. Aquí hay un [ejemplo particularmente impresionante](https://codepen.io/dissimulate/pen/KrAwx). ## Cargar y dibujar un recurso de imagen @@ -122,11 +122,11 @@ Construirá una página web con un elemento Canvas. Debería representar una pan - Barco héroe - ![Barco héroe](solution/assets/player.png) + ![Barco héroe](../solution/assets/player.png) - Monstruo 5*5 - ![Monster ship](solution/assets/enemyShip.png) + ![Monster ship](../solution/assets/enemyShip.png) ### Pasos recomendados para iniciar el desarrollo @@ -194,7 +194,7 @@ Agregue el código necesario a `your-work/app.js` para resolver lo siguiente El resultado final debería verse así: -![Pantalla negra con un héroe y monstruos 5*5](partI-solution.png) +![Pantalla negra con un héroe y monstruos 5*5](../partI-solution.png) ## Solución @@ -203,10 +203,10 @@ Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una 🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). -**Tarea**: [Jugar con la API de Canvas](assignment.md) \ No newline at end of file +**Tarea**: [Jugar con la API de Canvas](assignment.es.md) \ No newline at end of file diff --git a/6-space-game/3-moving-elements-around/translations/README.es.md b/6-space-game/3-moving-elements-around/translations/README.es.md index 59a86814..2f337b62 100644 --- a/6-space-game/3-moving-elements-around/translations/README.es.md +++ b/6-space-game/3-moving-elements-around/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ¡Los juegos no son muy divertidos hasta que tienes extraterrestres corriendo por la pantalla! En este juego haremos uso de dos tipos de movimientos: @@ -145,7 +145,7 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. ### Agregar código -1. **Agrega objetos dedicados** para `hero` y `enemy` y `game object`, deben tener propiedades `x` e` y`. (Recuerde la parte sobre [Herencia o composición](../README.md)). +1. **Agrega objetos dedicados** para `hero` y `enemy` y `game object`, deben tener propiedades `x` e `y`. (Recuerde la parte sobre [Herencia o composición](../README.md)). * SUGERENCIA* `game object` debe ser el que tenga `x` e `y` y la capacidad de dibujarse a sí mismo en un lienzo. @@ -217,7 +217,7 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. Compruebe la consola de su navegador en este punto y observe cómo se registran las pulsaciones de teclas. -3. **Implemente** el [subpatrón Pub] (../ README.md), esto mantendrá su código limpio mientras sigue las partes restantes. +3. **Implemente** el [subpatrón Pub](../README.md), esto mantendrá su código limpio mientras sigue las partes restantes. Para hacer esta última parte, puede: @@ -376,10 +376,10 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. 🚀 Desafío: como puede ver, su código puede convertirse en 'código espagueti' cuando comienza a agregar funciones, variables y clases. ¿Cómo puede organizar mejor su código para que sea más legible? Esboce un sistema para organizar su código, incluso si todavía reside en un archivo. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Mientras escribimos nuestro juego sin usar marcos, existen muchos marcos de lienzo basados en JavaScript para el desarrollo de juegos. Tómate un tiempo para hacer algo [leer sobre estos](https://github.com/collections/javascript-game-engines). -**Tarea**: [Comenta tu código](assignment.md) +**Tarea**: [Comenta tu código](assignment.es.md) diff --git a/6-space-game/4-collision-detection/translations/README.es.md b/6-space-game/4-collision-detection/translations/README.es.md index 9d39465c..fc65fc72 100644 --- a/6-space-game/4-collision-detection/translations/README.es.md +++ b/6-space-game/4-collision-detection/translations/README.es.md @@ -2,12 +2,12 @@ ![video](video-url) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ¡En esta lección aprenderá a disparar láseres con JavaScript! Agregaremos dos cosas a nuestro juego: - **Un láser**: este láser se dispara desde la nave de tu héroe y verticalmente hacia arriba -- **Detección de colisiones**, como parte de la implementación de la capacidad de * disparar *, también agregaremos algunas reglas de juego interesantes: +- **Detección de colisiones**, como parte de la implementación de la capacidad de *disparar*, también agregaremos algunas reglas de juego interesantes: - **El láser golpea al enemigo**: El enemigo muere si es golpeado por un láser - **El láser golpea la pantalla superior**: un láser se destruye si golpea la parte superior de la pantalla - **Colisión de héroe y enemigo**: Un enemigo y el héroe son destruidos si se golpean entre sí. @@ -284,10 +284,10 @@ En este punto, ¡tu juego tiene algunas funciones! Puedes navegar con tus flecha 🚀 Desafío: ¡Agrega una explosión! Echa un vistazo a los recursos del juego en [el repositorio de Space Art](../solution/spaceArt/readme.txt) e intenta agregar una explosión cuando el láser golpea a un extraterrestre. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Experimente con los intervalos de su juego hasta ahora. ¿Qué pasa cuando los cambias? Más información sobre [eventos de tiempo de JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/). -**Asignación**: [Explorar colisiones](assignment.md) +**Asignación**: [Explorar colisiones](assignment.es.md) diff --git a/6-space-game/5-keeping-score/translations/README.es.md b/6-space-game/5-keeping-score/translations/README.es.md index 5e3e8f15..77be1aab 100644 --- a/6-space-game/5-keeping-score/translations/README.es.md +++ b/6-space-game/5-keeping-score/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) En esta lección, aprenderá cómo agregar puntos a un juego y calcular vidas. @@ -173,10 +173,10 @@ Al final de este trabajo, deberías ver las pequeñas naves de 'vida' en la part 🚀Challenge: Tu código está casi completo. ¿Puedes imaginar tus próximos pasos? -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Investigue algunas formas en las que puede incrementar y disminuir las puntuaciones y vidas del juego. Hay algunos motores de juegos interesantes como [PlayFab](https://playfab.com). ¿Cómo podría mejorar tu juego el uso de uno de estos? -**Tarea**: [Crear un juego de puntuación](assignment.md) +**Tarea**: [Crear un juego de puntuación](assignment.es.md) diff --git a/6-space-game/5-keeping-score/translations/assignment.es.md b/6-space-game/5-keeping-score/translations/assignment.es.md index f30644b8..1109c965 100644 --- a/6-space-game/5-keeping-score/translations/assignment.es.md +++ b/6-space-game/5-keeping-score/translations/assignment.es.md @@ -2,7 +2,7 @@ ## Instrucciones -Crea un juego en el que muestres la vida y los puntos de forma creativa. Una sugerencia es mostrar la vida como corazones y los puntos como un gran número en la parte inferior central de la pantalla. Eche un vistazo aquí para ver [Recursos de juegos gratuitos] (https://www.kenney.nl/) +Crea un juego en el que muestres la vida y los puntos de forma creativa. Una sugerencia es mostrar la vida como corazones y los puntos como un gran número en la parte inferior central de la pantalla. Eche un vistazo aquí para ver [Recursos de juegos gratuitos](https://www.kenney.nl/) # Rúbrica diff --git a/6-space-game/6-end-condition/translations/README.es.md b/6-space-game/6-end-condition/translations/README.es.md index 885d0dc0..36810f1e 100644 --- a/6-space-game/6-end-condition/translations/README.es.md +++ b/6-space-game/6-end-condition/translations/README.es.md @@ -2,11 +2,11 @@ ![video](video-url) -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) Hay diferentes formas de expresar y *condición final* en un juego. Depende de usted, como creador del juego, decir por qué ha terminado. Aquí hay algunas razones, si asumimos que estamos hablando del juego espacial que has estado construyendo hasta ahora: -- **Las naves `N` enemigas han sido destruidas**: Es bastante común si divides un juego en diferentes niveles que necesites destruir las naves` N` Enemy para completar un nivel +- **Las naves `N` enemigas han sido destruidas**: Es bastante común si divides un juego en diferentes niveles que necesites destruir las naves `N` Enemy para completar un nivel - **Tu nave ha sido destruida**: Definitivamente hay juegos en los que pierdes el juego si tu nave es destruida. Otro enfoque común es que tienes el concepto de vidas. Cada vez que un barco es destruido, se descuenta una vida. Una vez que se hayan perdido todas las vidas, perderá el juego. - **Has acumulado `N` puntos**: Otra condición final común es que acumules puntos. La forma de obtener puntos depende de usted, pero es bastante común asignar puntos a diversas actividades, como destruir una nave enemiga o tal vez recolectar elementos que los elementos *sueltan* cuando son destruidos. - **Completa un nivel**: Esto puede implicar varias condiciones como "X" barcos enemigos destruidos, puntos "Y" acumulados o tal vez que se haya recogido un objeto específico. @@ -205,10 +205,10 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. 🚀 Desafío: ¡Agrega un sonido! ¿Puedes agregar un sonido para mejorar tu juego, tal vez cuando hay un golpe de láser, o el héroe muere o gana? Eche un vistazo a este [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) para aprender a reproducir sonido con JavaScript. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio Tu tarea es crear un juego de muestra nuevo, así que explora algunos de los juegos interesantes que existen para ver qué tipo de juego podrías construir. -**Tarea**: [Crear un juego de muestra](assignment.md) +**Tarea**: [Crear un juego de muestra](assignment.es.md) diff --git a/7-bank-project/1-template-route/translations/README.es.md b/7-bank-project/1-template-route/translations/README.es.md index 71f1e14a..3e307b6b 100644 --- a/7-bank-project/1-template-route/translations/README.es.md +++ b/7-bank-project/1-template-route/translations/README.es.md @@ -2,7 +2,7 @@ -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ### Introducción @@ -165,7 +165,7 @@ Sin embargo, para nuestra aplicación web estamos usando un solo archivo HTML qu ### Tarea -Usaremos un objeto simple para implementar un [mapa] (https://en.wikipedia.org/wiki/Associative_array) entre las rutas de URL y nuestras plantillas. Agregue este objeto en la parte superior de su archivo `app.js`. +Usaremos un objeto simple para implementar un [mapa](https://en.wikipedia.org/wiki/Associative_array) entre las rutas de URL y nuestras plantillas. Agregue este objeto en la parte superior de su archivo `app.js`. ```js const routes = { @@ -243,7 +243,7 @@ Completemos el sistema de navegación agregando enlaces a nuestros botones *logi ``` -Usando el atributo [`onclick`] (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) enlaza el evento `click` al código JavaScript, aquí la llamada al` navigate()`función. +Usando el atributo [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) enlaza el evento `click` al código JavaScript, aquí la llamada al` navigate()`función. Intente hacer clic en estos botones, ahora debería poder navegar entre las diferentes pantallas de su aplicación. @@ -273,15 +273,14 @@ updateRoute(); Ahora intente utilizar los botones de avance y retroceso de sus navegadores y compruebe que esta vez lo que se muestra está actualizado correctamente. - --- ## 🚀 Desafío Agregue una nueva plantilla y ruta para una tercera página que muestre los créditos de esta aplicación. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Revisión y autoestudio -**Tarea**: [Mejorar el enrutamiento](assignment.md) +**Tarea**: [Mejorar el enrutamiento](assignment.es.md) diff --git a/7-bank-project/2-forms/translation/README.es.md b/7-bank-project/2-forms/translations/README.es.md similarity index 98% rename from 7-bank-project/2-forms/translation/README.es.md rename to 7-bank-project/2-forms/translations/README.es.md index fe23074e..8d0386d4 100644 --- a/7-bank-project/2-forms/translation/README.es.md +++ b/7-bank-project/2-forms/translations/README.es.md @@ -1,6 +1,6 @@ # Cree un formulario de inicio de sesión y registro -## [Prueba previa a la conferencia](.github/prelecture-quiz.md) +## [Prueba previa a la conferencia](../.github/prelecture-quiz.md) ### Introducción @@ -181,7 +181,7 @@ async function createAccount(account) { Aquí hay un video rápido sobre el uso de `async/await`: -[![Async y Await para administrar promesas](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)] (https://youtube.com/watch?v=YwmlRkrxvkk "Async y Await para administrar promesas") +[![Async y Await para administrar promesas](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async y Await para administrar promesas") Usamos la API `fetch()` para enviar datos JSON al servidor. Este método toma 2 parámetros: @@ -280,7 +280,7 @@ Aquí hay un ejemplo de cómo puede verse la página de inicio de sesión final ![Captura de pantalla de la página de inicio de sesión después de agregar estilos CSS](./images/result.png) -## [Prueba posterior a la conferencia](.github/post-lecture-quiz.md) +## [Prueba posterior a la conferencia](../.github/post-lecture-quiz.md) ## Revisión y autoestudio @@ -288,4 +288,4 @@ Los desarrolladores se han vuelto muy creativos en sus esfuerzos de creación de ## Asignación -[Diseña tu aplicación bancaria](assignment.md) +[Diseña tu aplicación bancaria](assignment.es.md) diff --git a/7-bank-project/2-forms/translation/assignment.es.md b/7-bank-project/2-forms/translations/assignment.es.md similarity index 100% rename from 7-bank-project/2-forms/translation/assignment.es.md rename to 7-bank-project/2-forms/translations/assignment.es.md diff --git a/7-bank-project/3-data/translations/README.es.md b/7-bank-project/3-data/translations/README.es.md index be6c928a..4df66ffb 100644 --- a/7-bank-project/3-data/translations/README.es.md +++ b/7-bank-project/3-data/translations/README.es.md @@ -2,7 +2,7 @@ ! [Insertar un video aquí](video-url) -## [Prueba previa a la conferencia](.github/prelecture-quiz.md) +## [Prueba previa a la conferencia](../.github/prelecture-quiz.md) [Describe lo que aprenderemos] @@ -52,8 +52,8 @@ bloques de código Opcional: agregue una captura de pantalla de la interfaz de usuario de la lección completa si corresponde -## [Prueba posterior a la conferencia](.github/post-lecture-quiz.md) +## [Prueba posterior a la conferencia](../.github/post-lecture-quiz.md) ## Revisión y autoestudio -**Vencimiento de la asignación [MM/AA]**: [Nombre de la asignación](assignment.md) +**Vencimiento de la asignación [MM/AA]**: [Nombre de la asignación](assignment.es.md) diff --git a/7-bank-project/4-state-management/translations/README.es.md b/7-bank-project/4-state-management/translations/README.es.md index 4ce109f5..ef2c1b39 100644 --- a/7-bank-project/4-state-management/translations/README.es.md +++ b/7-bank-project/4-state-management/translations/README.es.md @@ -1,6 +1,6 @@ # Conceptos de gestión del estado -## [Pre-lecture prueba](.github/pre-lecture-quiz.md) +## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ### Introducción @@ -24,7 +24,7 @@ curl http://localhost:5000/api ## Repensar la gestión del estado -En la [lección anterior] (../3-data/README.md), introdujimos un concepto básico de estado en nuestra aplicación con la variable global `account` que contiene los datos bancarios del usuario actualmente conectado. Sin embargo, nuestra implementación actual tiene algunas fallas. Intente actualizar la página cuando esté en el panel. ¿Lo que pasa? +En la [lección anterior](../3-data/README.md), introdujimos un concepto básico de estado en nuestra aplicación con la variable global `account` que contiene los datos bancarios del usuario actualmente conectado. Sin embargo, nuestra implementación actual tiene algunas fallas. Intente actualizar la página cuando esté en el panel. ¿Lo que pasa? Hay 3 problemas con el código actual: @@ -267,12 +267,12 @@ Ahora que recargamos los datos de la cuenta cada vez que se carga el panel, ¿cr Intente trabajar juntos para cambiar lo que se guarda y carga desde `localStorage` para incluir solo lo que es absolutamente necesario para que la aplicación funcione. -## [Post-lecture prueba](.github/post-lecture-quiz.md) +## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## Asignación -[Implementar el cuadro de diálogo "Agregar transacción"](assignment.md) +[Implementar el cuadro de diálogo "Agregar transacción"](assignment.es.md) Aquí hay un ejemplo de resultado después de completar la tarea: -![Captura de pantalla que muestra un ejemplo de diálogo "Agregar transacción"](./images/dialog.png) \ No newline at end of file +![Captura de pantalla que muestra un ejemplo de diálogo "Agregar transacción"](../images/dialog.png) \ No newline at end of file diff --git a/7-bank-project/4-state-management/translations/assignment.es.md b/7-bank-project/4-state-management/translations/assignment.es.md index 959db9b0..71672511 100644 --- a/7-bank-project/4-state-management/translations/assignment.es.md +++ b/7-bank-project/4-state-management/translations/assignment.es.md @@ -11,11 +11,11 @@ Utilizando todo lo que ha aprendido en las cuatro lecciones anteriores, implemen - Cree datos JSON a partir de los datos del formulario y envíelos a la API - Actualiza la página del tablero con los nuevos datos. -Mire las [especificaciones de la API del servidor](./images/dialog.png) para ver a qué API debe llamar y cuál es el formato JSON esperado. +Mire las [especificaciones de la API del servidor](../images/dialog.png) para ver a qué API debe llamar y cuál es el formato JSON esperado. Aquí hay un ejemplo de resultado después de completar la tarea: -! [Captura de pantalla que muestra un ejemplo de diálogo "Agregar transacción"] (./ images / dialog.png) +! [Captura de pantalla que muestra un ejemplo de diálogo "Agregar transacción"](../images/dialog.png) ## Rúbrica diff --git a/7-bank-project/translations/README.es.md b/7-bank-project/translations/README.es.md index 29b95c70..9fb563ce 100644 --- a/7-bank-project/translations/README.es.md +++ b/7-bank-project/translations/README.es.md @@ -6,10 +6,10 @@ En este proyecto, aprenderá a construir un banco ficticio. Estas lecciones incl ## Lecciones -1. [Rutas y plantillas HTML en una aplicación web](template-route/README.md) -2. [Cree un formulario de inicio de sesión y registro](forms/README.md) -3. [Conceptos de gestión de estado](state-management/README.md) -4. [Métodos de obtención y uso de datos](data/README.md) +1. [Rutas y plantillas HTML en una aplicación web](../1-template-route/translations/README.es.md) +2. [Cree un formulario de inicio de sesión y registro](../2-forms/translations/README.es.md) +3. [Métodos de obtención y uso de datos](../3-data/translations/README.es.md) +4. [Conceptos de gestión de estado](../4-state-management/translations/README.es.md) ### Credits From efd1b42558b77934e99c4a3a9bf0c41d3e4df016 Mon Sep 17 00:00:00 2001 From: hexatester Date: Tue, 17 Nov 2020 21:50:57 +0700 Subject: [PATCH 02/25] update numbering for quiz.id --- .../translations/.github/post-lecture-quiz.id.md | 4 ++-- .../translations/.github/pre-lecture-quiz.id.md | 4 ++-- .../translations/.github/post-lecture-quiz.id.md | 4 ++-- .../translations/.github/pre-lecture-quiz.id.md | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md index e0c2f7ec..40a002b9 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md @@ -6,12 +6,12 @@ - [ ] JavaScript - [ ] Bash -1. Lingkungan pengembangan unik untuk setiap pengembang +2. Lingkungan pengembangan unik untuk setiap pengembang - [ ] Benar - [ ] Salah -1. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)? +3. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)? - [ ] Syntax highlighting (Penyorotan sintaks) - [ ] Debugging diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md index 8b57863f..6846d246 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md @@ -5,13 +5,13 @@ - [ ] Benar - [ ] Salah -1. Bahasa tingkat rendah adalah pilihan populer untuk: +2. Bahasa tingkat rendah adalah pilihan populer untuk: - [ ] Website - [ ] Hardware - [ ] Perangkat lunak permainan video -1. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web? +3. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web? - [ ] Hardware, like a Raspberry Pi - [ ] Browser DevTools diff --git a/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md index ab6b5389..d76b1db5 100644 --- a/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md +++ b/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md @@ -6,13 +6,13 @@ - [ ] Pull Request (Tarik Permintaan) - [ ] Feature branch (Cabang fitur) -1. Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)? +2. Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)? - [ ] `git fetch` - [ ] `git pull` - [ ] `git commits -r` -1. Bagaimana Anda beralih ke sebuah cabang (branch)? +3. Bagaimana Anda beralih ke sebuah cabang (branch)? - [ ] `git switch [branch-name]` - [ ] `git checkout [branch-name]` diff --git a/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md index ff425937..920d8332 100644 --- a/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md +++ b/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md @@ -6,7 +6,7 @@ - [ ] git start - [ ] git init -1. Apa fungsi `git add`? +2. Apa fungsi `git add`? - [ ] Commit (menyerahkan) kode Anda - [ ] Menambahkan file Anda ke area pementasan (staging area) untuk dilacak From 093fcc23914d88382f25e5cdc20b0298789cc6e5 Mon Sep 17 00:00:00 2001 From: hexatester Date: Tue, 17 Nov 2020 21:52:16 +0700 Subject: [PATCH 03/25] add indonesian translations --- .../.github/post-lecture-quiz.id.md | 17 ++ .../.github/pre-lecture-quiz.id.md | 17 ++ .../3-accessibility/translations/README.id.md | 221 ++++++++++++++++++ .../translations/assignment.id.md | 11 + .../translations/README.id.md | 17 ++ 5 files changed, 283 insertions(+) create mode 100644 1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md create mode 100644 1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md create mode 100644 1-getting-started-lessons/3-accessibility/translations/README.id.md create mode 100644 1-getting-started-lessons/3-accessibility/translations/assignment.id.md create mode 100644 1-getting-started-lessons/translations/README.id.md diff --git a/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md new file mode 100644 index 00000000..07bd77ec --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md @@ -0,0 +1,17 @@ +*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* + +1. Lighthouse hanya memeriksa masalah aksesibilitas + +- [ ] benar +- [ ] salah + +2. Palet warna aman membantu orang dengan + +- [ ] buta warna +- [ ] gangguan penglihatan +- [ ] keduanya di atas + +3. Tautan deskriptif sangat penting untuk situs web yang dapat diakses + +- [ ] benar +- [ ] salah diff --git a/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md new file mode 100644 index 00000000..4043378c --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md @@ -0,0 +1,17 @@ +*Selesaikan kuis ini di kelas* + +1. Situs web yang dapat diakses dapat diperiksa di alat browser mana + +- [ ] Lighthouse +- [ ] Deckhouse +- [ ] Cleanhouse + +2. Anda memerlukan pembaca layar fisik untuk menguji aksesibilitas bagi pengguna dengan gangguan penglihatan + +- [ ] benar +- [ ] salah + +3. Aksesibilitas hanya penting di situs web pemerintah + +- [ ] benar +- [ ] salah diff --git a/1-getting-started-lessons/3-accessibility/translations/README.id.md b/1-getting-started-lessons/3-accessibility/translations/README.id.md new file mode 100644 index 00000000..f93231e0 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.id.md @@ -0,0 +1,221 @@ +# Membuat Halaman Web yang Dapat Diakses + +![Semua Tentang Aksesibilitas](../webdev101-a11y.png) +> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) + +## Kuis Pra-Kuliah +[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md) + +> Kekuatan Web ada dalam universalitasnya. Akses oleh semua orang tanpa memandang disabilitas merupakan aspek penting. +> +> \- Sir Timothy Berners-Lee, Direktur W3C dan penemu World Wide Web + +Kutipan ini dengan sempurna menyoroti pentingnya membuat situs web yang dapat diakses. Sebuah aplikasi yang tidak dapat diakses oleh semua adalah menurut definisi pengecualian. Sebagai pengembang web, kami harus selalu memikirkan aksesibilitas. Dengan memiliki fokus ini sejak awal Anda akan berada di jalur yang benar untuk memastikan semua orang dapat mengakses halaman yang Anda buat. Dalam pelajaran ini, Anda akan mempelajari tentang alat yang dapat membantu Anda memastikan bahwa aset web Anda dapat diakses dan cara membangun dengan mempertimbangkan aksesibilitas. + +## Alat yang digunakan + +### Pembaca layar (Screen readers) + +Salah satu alat aksesibilitas paling terkenal adalah pembaca layar. + +[Pembaca layar](https://en.wikipedia.org/wiki/Screen_reader) adalah klien yang biasa digunakan untuk mereka yang memiliki gangguan penglihatan. Saat kami menghabiskan waktu untuk memastikan browser menyampaikan informasi yang ingin kami bagikan dengan benar, kami juga harus memastikan pembaca layar melakukan hal yang sama. + +Pada dasarnya, pembaca layar akan membaca halaman dari atas ke bawah dengan suara. Jika halaman Anda semuanya teks, pembaca akan menyampaikan informasi dengan cara yang mirip dengan browser. Tentu saja, halaman web jarang hanya berupa teks; mereka akan berisi tautan, grafik, warna, dan komponen visual lainnya. Perhatian harus diberikan untuk memastikan bahwa informasi ini dibaca dengan benar oleh pembaca layar. + +Setiap pengembang web harus membiasakan diri dengan pembaca layar. Seperti yang disorot di atas, itu adalah klien yang akan digunakan pengguna Anda. Sama seperti saat Anda memahami cara kerja browser, Anda juga harus mempelajari cara kerja pembaca layar. Untungnya, pembaca layar sudah terpasang di sebagian besar sistem operasi, dan banyak browser berisi ekstensi untuk meniru pembaca layar. + +✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). + +### Pemeriksa kontras + +Warna di situs web perlu dipilih dengan cermat untuk menjawab kebutuhan pengguna buta warna atau orang yang kesulitan melihat warna kontras rendah. + +✅ Uji situs web yang Anda sukai untuk penggunaan warna dengan ekstensi browser seperti [pemeriksa warna WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Apa yang Anda pelajari? + +### Lighthouse + +Di area alat pengembang di browser Anda, Anda akan menemukan alat Lighthouse. Alat ini penting untuk mendapatkan tampilan pertama aksesibilitas (serta analisis lain) dari situs web. Meskipun penting untuk tidak mengandalkan Lighthouse secara eksklusif, skor 100% sangat membantu sebagai dasar. + +✅ Temukan Lighthouse di panel alat pengembang browser Anda dan jalankan analisis di situs mana pun. apa yang kamu temukan? + +## Mendesain untuk aksesibilitas + +Aksesibilitas adalah topik yang relatif besar. Untuk membantu Anda, ada banyak sumber daya yang tersedia. + +- [Accessible U - Universitas Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +Meskipun kami tidak dapat mencakup setiap aspek dalam membuat situs yang dapat diakses, berikut adalah beberapa prinsip inti yang ingin Anda terapkan. Mendesain halaman yang dapat diakses dari awal **selalu** lebih mudah daripada kembali ke halaman yang ada untuk membuatnya dapat diakses. + +## Prinsip tampilan yang bagus + +### Palet warna yang aman + +Orang melihat dunia dengan cara yang berbeda, dan ini termasuk warna. Saat memilih skema warna untuk situs Anda, Anda harus memastikannya dapat diakses oleh semua orang. Salah satu [alat hebat untuk menghasilkan palet warna adalah Color Safe](http://colorsafe.co/). + +✅ Identifikasi situs web yang sangat bermasalah dalam penggunaan warna. Mengapa? +Properly highlight text + +### Sorot teks dengan benar + +Highlighting text by color, [font weight (berat font)](https://developer.mozilla.org/docs/Web/CSS/font-weight), atau [dekorasi teks lainnya](https://developer.mozilla.org/docs/Web/CSS/text-decoration) tidak secara langsung memberi tahu pembaca layar tentang kepentingannya. Sebuah kata dapat dicetak tebal karena merupakan kata kunci, atau karena kata pertama dan perancang memutuskan kata tersebut harus dicetak tebal. + +Saat frasa tertentu perlu disorot, gunakan elemen `` atau ``. Ini akan menunjukkan kepada pembaca layar bahwa item tersebut penting. + +### Gunakan HTML yang benar + +Dengan CSS dan JavaScript, memungkinkan banyak elemen terlihat seperti jenis kontrol apa pun. `` bisa digunakan untuk membuat sebuah ` + ``` From b158e0b8416f471855cbe5cea4655c39d0690fb3 Mon Sep 17 00:00:00 2001 From: Vedant Jajoo <45591748+coderjojo@users.noreply.github.com> Date: Tue, 17 Nov 2020 22:05:00 +0530 Subject: [PATCH 06/25] Fix div tag --- 4-typing-game/typing-game/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md index dabada8a..cee754bf 100644 --- a/4-typing-game/typing-game/README.md +++ b/4-typing-game/typing-game/README.md @@ -90,8 +90,8 @@ Create a new file named **index.html**. Add the following HTML:
-
+ ``` From 1e09a51e260795a6cd8fe8724e5be42c3a1e22da Mon Sep 17 00:00:00 2001 From: coderjojo Date: Tue, 17 Nov 2020 23:17:48 +0530 Subject: [PATCH 07/25] Fix broken links --- 4-typing-game/README.md | 2 +- 4-typing-game/typing-game/README.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/4-typing-game/README.md b/4-typing-game/README.md index f7abad56..482bf666 100644 --- a/4-typing-game/README.md +++ b/4-typing-game/README.md @@ -23,7 +23,7 @@ This lesson assumes you're familiar with the following concepts: ## Lesson -[Creating a typing game by using event driven programming](./project/README.md) +[Creating a typing game by using event driven programming](./typing-game/README.md) ## Credits diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md index cee754bf..d8fa01e9 100644 --- a/4-typing-game/typing-game/README.md +++ b/4-typing-game/typing-game/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ## Event driven programming @@ -326,7 +326,7 @@ Add more functionality ## Post-Lecture Quiz -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## Review & Self Study From d8aeec505ba19d06a499148108d9242dda396e17 Mon Sep 17 00:00:00 2001 From: Rahul RK <47377566+DevTMK@users.noreply.github.com> Date: Wed, 18 Nov 2020 00:58:16 +0530 Subject: [PATCH 08/25] typing-game: Fix broken link to lesson --- 4-typing-game/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/4-typing-game/README.md b/4-typing-game/README.md index f7abad56..482bf666 100644 --- a/4-typing-game/README.md +++ b/4-typing-game/README.md @@ -23,7 +23,7 @@ This lesson assumes you're familiar with the following concepts: ## Lesson -[Creating a typing game by using event driven programming](./project/README.md) +[Creating a typing game by using event driven programming](./typing-game/README.md) ## Credits From ea39a8ea93f0eb41d7dfbb147eab5e1314f3059a Mon Sep 17 00:00:00 2001 From: Vedant Jajoo <45591748+coderjojo@users.noreply.github.com> Date: Wed, 18 Nov 2020 13:08:52 +0530 Subject: [PATCH 09/25] Replace link to image folder --- 3-terrarium/1-intro-to-html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index 1710bb68..9099bd01 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -106,7 +106,7 @@ Now, you can start building out your page. Normally, you use `
` tags to cre One html tag that doesn't need a closing tag is the `` tag, because it has a `src` element that contains all the information the page needs to render the item. -Create a folder in your app called `images` and in that, add all the images in the [source code folder](../images); (there are 14 images of plants). +Create a folder in your app called `images` and in that, add all the images in the [source code folder](../solution/images); (there are 14 images of plants). ### Task From b089e5888c7720aeb5c374534054cd5ccb9c86c8 Mon Sep 17 00:00:00 2001 From: Mithesh Date: Wed, 18 Nov 2020 13:30:07 +0530 Subject: [PATCH 10/25] Update pre-lecture-quiz.md Remove duplicate 'most' --- .../.github/pre-lecture-quiz.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md index 2032a9d3..3d829977 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md @@ -11,7 +11,7 @@ - [ ] Hardware - [ ] Video game software -1. Which one of these tools would most most likely be in a web developer's environment? +1. Which one of these tools would most likely be in a web developer's environment? - [ ] Hardware, like a Raspberry Pi - [ ] Browser DevTools From 6bbcc84d4e65df5a29407a0b1d8c345cf4074bd1 Mon Sep 17 00:00:00 2001 From: Mithesh Date: Wed, 18 Nov 2020 13:37:18 +0530 Subject: [PATCH 11/25] Update pre-lecture-quiz.md Update question numbers for the quiz --- .../.github/pre-lecture-quiz.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md index 2032a9d3..2ccbd1c7 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md @@ -5,13 +5,13 @@ - [ ] True - [ ] False -1. Low level languages are a popular choice for: +2. Low level languages are a popular choice for: - [ ] Websites - [ ] Hardware - [ ] Video game software -1. Which one of these tools would most most likely be in a web developer's environment? +3. Which one of these tools would most most likely be in a web developer's environment? - [ ] Hardware, like a Raspberry Pi - [ ] Browser DevTools From d93cb827e4bc5d8793841856ffd84f00a610e921 Mon Sep 17 00:00:00 2001 From: Mithesh Date: Wed, 18 Nov 2020 13:39:06 +0530 Subject: [PATCH 12/25] Update post-lecture-quiz.md Update question numbers for the quiz --- .../.github/post-lecture-quiz.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md index 54b7b50f..1fbc51d8 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md @@ -6,12 +6,12 @@ - [ ] JavaScript - [ ] Bash -1. Development environments are unique to each developer +2. Development environments are unique to each developer - [ ] True - [ ] False -1. What will a developer do to fix buggy code? +3. What will a developer do to fix buggy code? - [ ] Syntax highlighting - [ ] Debugging From 24767bc5941ed082c0509dcd09888fcba726e43c Mon Sep 17 00:00:00 2001 From: AmlanSaikia Date: Wed, 18 Nov 2020 16:23:28 +0530 Subject: [PATCH 13/25] Corrected the numbering in the pre/post quiz --- .../.github/post-lecture-quiz.md | 4 ++-- .../.github/pre-lecture-quiz.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md index 54b7b50f..1fbc51d8 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md @@ -6,12 +6,12 @@ - [ ] JavaScript - [ ] Bash -1. Development environments are unique to each developer +2. Development environments are unique to each developer - [ ] True - [ ] False -1. What will a developer do to fix buggy code? +3. What will a developer do to fix buggy code? - [ ] Syntax highlighting - [ ] Debugging diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md index 2032a9d3..2ccbd1c7 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md @@ -5,13 +5,13 @@ - [ ] True - [ ] False -1. Low level languages are a popular choice for: +2. Low level languages are a popular choice for: - [ ] Websites - [ ] Hardware - [ ] Video game software -1. Which one of these tools would most most likely be in a web developer's environment? +3. Which one of these tools would most most likely be in a web developer's environment? - [ ] Hardware, like a Raspberry Pi - [ ] Browser DevTools From cc62f70f2fefa64b8d6458aa020dc73299b683e9 Mon Sep 17 00:00:00 2001 From: Rahul RK <47377566+DevTMK@users.noreply.github.com> Date: Wed, 18 Nov 2020 20:36:26 +0530 Subject: [PATCH 14/25] js-basics: Fix setTimeout syntax --- 2-js-basics/2-functions-methods/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index ac498ddc..4c75ca35 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -139,7 +139,7 @@ function displayDone() { console.log('3 seconds has elapsed'); } // timer value is in milliseconds -setTimeout(3000, displayDone); +setTimeout(displayDone, 3000); ``` ### Anonymous functions @@ -151,9 +151,9 @@ When we are passing a function as a parameter we can bypass creating one in adva Let's rewrite the code above to use an anonymous function: ```javascript -setTimeout(3000, function() { +setTimeout(function() { console.log('3 seconds has elapsed'); -}); +}, 3000); ``` If you run our new code you'll notice we get the same results. We've created a function, but didn't have to give it a name! @@ -165,9 +165,9 @@ One shortcut common in a lot of programming languages (including JavaScript) is Let's rewrite our code one more time to use a fat arrow function: ```javascript -setTimeout(3000, () => { +setTimeout(() => { console.log('3 seconds has elapsed'); -}); +}, 3000); ``` ### When to use each strategy From e51d1574f3f0829f669df4688b88a1bc1410f605 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Wed, 18 Nov 2020 11:38:01 -0500 Subject: [PATCH 15/25] update README for students --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 94ab7119..a1dcf325 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'. -> Teachers, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md) +> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md) + +> **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-4621-cxa) and by watching the videos mentioned below. [![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video") @@ -64,4 +66,4 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co ## Offline access -You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`. \ No newline at end of file +You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`. From e8ebf6ae50aed9572b175da60a7821b4cb399b1c Mon Sep 17 00:00:00 2001 From: Pranav Date: Thu, 19 Nov 2020 13:32:03 +0530 Subject: [PATCH 16/25] Added commands for staging a particular file and unstaging a file or multiple files --- .../2-github-basics/README.md | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md index 24415aa9..2f1a4b6b 100644 --- a/1-getting-started-lessons/2-github-basics/README.md +++ b/1-getting-started-lessons/2-github-basics/README.md @@ -82,13 +82,38 @@ Let's say you have a folder locally with some code project and you want to start Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist. -1. **Add files to tracking** +1. **Add all files for tracking** + This also called as staging files/ adding files to the staging area. ```bash git add . ``` - The `git add` plus `.` argument indicates that all your files & changes for tracking. + The `git add` plus `.` argument indicates that all your files & changes for tracking. + +1. **Add selected files for tracking** + + ```bash + git add [file or folder name] + ``` + + This helps us to add only selected files to the staging area when we don't want to commit all files at once. + +1. **Unstage all files** + + ```bash + git reset + ``` + + This command helps us to unstage all files at once. + +1. **Unstage a particular file** + + ```bash + git reset [file or folder name] + ``` + + This command helps us to unstage only a particular file at once that we don't want to include for the next commit. 1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_: From b8bb27fbf919af61c5bd8205c5a00849a46177fb Mon Sep 17 00:00:00 2001 From: antanta28 Date: Thu, 19 Nov 2020 17:16:10 +0300 Subject: [PATCH 17/25] Update README.md Typing game readme example code doesn't work. --- 4-typing-game/typing-game/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md index d8fa01e9..83ed6bc9 100644 --- a/4-typing-game/typing-game/README.md +++ b/4-typing-game/typing-game/README.md @@ -173,10 +173,10 @@ const quotes = [ 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', ]; // store the list of words and the index of the word the player is currently typing -const words = []; +let words = []; let wordIndex = 0; // the starting time -let startTime = DateTime.getTime(); +let startTime = Date.now(); // page elements const quoteElement = document.getElementById('quote'); const messageElement = document.getElementById('message'); From f539770ec334437c4bc7b91179c2a747e7b66545 Mon Sep 17 00:00:00 2001 From: Jasmine Greenaway Date: Thu, 19 Nov 2020 11:46:58 -0500 Subject: [PATCH 18/25] update comparison operators should be read left to right, fixes #69 --- 2-js-basics/3-making-decisions/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index bc4b9207..b1cd49a0 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -28,9 +28,9 @@ Operators are used to evaluate conditions by making comparisons that will create | Symbol | Description | Example | | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `<` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than the left | `5 < 6 // true` | -| `<=` | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than or equal to the left | `5 <= 6 // true` | -| `>` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` | +| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 < 6 // true` | +| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 <= 6 // true` | +| `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` | | `>=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` | | `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` | | `!==` | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return | `5 !== 6 // true` | From ffbd3e252d5f8105ef875fc49b2d9112e4d63359 Mon Sep 17 00:00:00 2001 From: Jasmine Greenaway Date: Thu, 19 Nov 2020 11:49:43 -0500 Subject: [PATCH 19/25] comparison operator edit --- 2-js-basics/3-making-decisions/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index b1cd49a0..97ff7e2a 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -28,8 +28,8 @@ Operators are used to evaluate conditions by making comparisons that will create | Symbol | Description | Example | | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 < 6 // true` | -| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 <= 6 // true` | +| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right | `5 < 6 // true` | +| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true` | | `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` | | `>=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` | | `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` | From a400f104320b3a0f00a27e48d4ffca78971284ce Mon Sep 17 00:00:00 2001 From: NurseAngel Date: Fri, 20 Nov 2020 20:39:52 +0900 Subject: [PATCH 20/25] Add Japanese translation Lesson 01. --- .../.github/post-lecture-quiz.ja.md | 18 ++ .../.github/pre-lecture-quiz.ja.md | 18 ++ .../translations/README.ja.md | 251 ++++++++++++++++++ 3 files changed, 287 insertions(+) create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md new file mode 100644 index 00000000..aaa8555e --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md @@ -0,0 +1,18 @@ +*択一です。このクイズを解いてみましょう。* + +1. Webサイトを作るときに最もよく使われるプログラミング言語はどれでしょう？ + +- [ ] 機械語 +- [ ] JavaScript +- [ ] Bash + +2. 開発環境は開発者ごとに異なる？ + +- [ ] はい +- [ ] いいえ + +3. バグだらけのコードを修正するため、開発者は何をしますか？ + +- [ ] シンタックスハイライト +- [ ] デバッグ +- [ ] コードフォーマット diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md new file mode 100644 index 00000000..0007a17c --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md @@ -0,0 +1,18 @@ +*この問題を解いてみよう。* + +1. コードを書かなくてもプログラムを作ることはできる？ + +- [ ] はい +- [ ] いいえ + +2. 低レベル言語がポピュラーな分野はどこですか？ + +- [ ] Webサイト +- [ ] ハードウェア +- [ ] ゲームソフト + +3. Web開発者と最も関連性の高いツールはどれでしょう？ + +- [ ] Raspberry Piのようなハードウェア +- [ ] ブラウザ開発者ツール +- [ ] OSドキュメント 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 new file mode 100644 index 00000000..919508da --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -0,0 +1,251 @@ +# プログラミング言語と開発ツール入門 + +このレッスンでは、まずプログラミング言語の基礎を学びます。 +ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。 +次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。 + +![Intro Programming](../webdev101-programming.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## 事前クイズ +[事前クイズ](.github/pre-lecture-quiz.ja.md) + +## Introduction + +この講座には以下が含まれています。 + +- プログラミングとは何か？ +- プログラミング言語の種類 +- プログラムの基本要素 +- 開発ツール + +## プログラミングとは何か？ + +プログラミング(コーディングとも表されます)とは、コンピュータやモバイル機器などのデバイスに対して、命令を出すことです。 +命令はプログラミング言語で書かれており、そしてデバイスはその命令を解釈して実行します。 +この命令は色々な名称で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション(アプリ)*、*実行可能ファイル*、などが一般的に使われています。 + +*プログラム*とは、コードで書かれている何かです。 +Webサイトも、ゲームも、スマホアプリも、全てがプログラムです。 +コードを書かずにプログラムを作ることも可能ですが、作り上げたロジックは実際にはコードで書かれていて、実際にデバイスが解釈するのはコードです。 +プログラムはコードを実行し、デバイスに命令を出します。 +あなたが今このレッスンを読んでいるということは、文字を画面に表示するというプログラムをデバイスが実行しているということです。 + +✅ ちょっと調べてみましょう：世界初のコンピュータプログラマは誰でしょうか？ + +## プログラミング言語 + +プログラミング言語の主な目的は、開発者がデバイスに対して命令を送信する手助けをすることです。 +デバイスはバイナリ(要するに0と1)しか理解することができず、そして*ほとんどの*開発者にとってバイナリはあまり効率的な命令手段ではありません。 +プログラミング言語は、人間とコンピュータがコミュニケーションを取るための手段なのです。 + +世の中には様々な目的のために様々なプログラミング言語が存在しています。 +たとえばJavaScriptは主にWebアプリケーションのために、Bashは主にOSとの対話のために使われます。 + +*低レベル言語*とは、デバイスが命令を解釈するために必要なステップ数が、*高レベル言語*より少ない言語のことです。 +高レベル言語が人気であるのは、その読みやすさとサポート能力によるものです。 +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://en.wikipedia.org/wiki/Fibonacci_number)とは、各数がその手前の二つの値の和である値の集合です。 + +## プログラムの基本要素 + +プログラムにおいてひとつの命令は*文*と呼ばれ、文は通常は改行などの*区切り文字*で分かたれます。 +プログラムの区切り文字は言語によって異なります。 + +多くのプログラムは、ユーザや他から来た入力データによって出力が変わります。 +データによってプログラムの動作を変えるため、プログラミング言語にはデータを一時的に保存しておく方法が用意されています。 +そのデータは*変数*と呼ばれています。 +変数とは、デバイス内のメモリにデータを保存する文のことです。 +プログラムにおける変数は数学における変数と似ていて、変数には固有の名称があり、その値は処理の経過に伴って変化することがあります。 + +プログラムには、実行されない文が現れることがあります。 +これは、そうなるように開発者が設計して制御されたものであるか、予期せぬエラーが発生したかのいずれかです。 +アプリケーションの制御は、堅牢で信頼性の高いプログラムを書くために必要なことです。 +制御は、何らかの条件が満たされたことによって発生することが一般的です。 +最近のプログラミング言語には、実行される文を制御するために`if...else`のような文が存在します。 + +✅ これら文については次のレッスンで詳しく学びます。 + +## 開発ツール + +[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +このセクションでは、プロの開発者としての道を歩き始めるときに役立つであろうソフトウェアについて紹介します。 + +**開発環境**とは、開発者がソフトウェアを作成する際に頻繁に使用するツールや機能のセットのことです。 +開発環境は、開発者が特定のニーズに合わせてカスタマイズしたり、優先順位を変更したり、異なるプログラミング言語を使用したりといった理由で次々と変わっていくこともあります。 +開発環境は、それを使用する開発者の数と同じくらい千差万別です。 + +### エディタ + +ソフトウェア開発において最も重要なツールのひとつが、エディタです。 +エディタはコードを書く場所であり、時にはコードを実行する場所であることもあります。 + +開発者がエディタを使う理由は、それ以外にも多々あります。 + +- *デバッグ* +コードを1行1行ステップ実行することで、バグやエラーを発見しやすくします。 +デバッグ機能を備えたエディタや、特定のプログラミング言語用にカスタマイズすることができるエディタも存在します。 + +- *シンタックスハイライト* +コードに色や書式を設定することで、コードを読みやすくします。 +多くのエディタはシンタックスハイライトをカスタマイズすることもできます。 + +- *拡張機能* +デフォルトでは含まれない、一部の開発者向けに特化された拡張機能を追加することができます。 +例えば、コードをドキュメント化してどのように動作するかを確認したいユーザがいて、タイプミスのチェックのためにスペルチェックを行いたいユーザがいて、各自が自分のほしい拡張機能をインストールすることができます。 +ほとんどの拡張機能は特定のエディタでのみ動作するもので、そしてほとんどのエディタは拡張機能を検索する方法を用意しています。 + +- *カスタマイズ* +ほとんどのエディタは幅広いカスタマイズが可能で、開発者は自分のニーズに合わせた開発環境を作ることができます。 +さらに多くのエディタでは、開発者が自分で拡張機能を作ることも可能です。 + +#### 有名なエディタと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開発者は、自分のコードがWeb上でどのように実行されるかを確認するため、そしてHTML要素を視覚的に確認するためにブラウザを必要とします。 + +多くのブラウザには*開発者ツール*が付属しており、アプリケーションの動作を収集・分析するために便利な機能や情報があります。 +たとえば開発者ツールを使って、Webページにエラーがあった場合に、いつどこでエラーが発生したかを把握することができます。 + + +#### 有名なブラウザ + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### コマンドラインツール + +開発者の中には、日常の作業をGUIで行うことを好まず、コマンドラインに多くを頼る人もいます。 +コードの開発には多量のタイピングが必要となるため、マウスを使うためにキーボードから手を外すことで作業の流れを中断されることを避け、キーボードショートカットを駆使して複数のファイルを操作したり複数のツールを併用したりします。 + +多くのタスクはマウスだけでも実行可能です。 +しかし、コマンドラインの利点のひとつが、マウスとキーボードで行ったり来たりせずにキーボードだけで作業を完結できるというものです。 +またコマンドラインのもうひとつの利点が、カスタム設定を登録しておくことが可能ということです。 +さらにマシンを新調したときに設定を移動することもできます。 + +開発環境は個人個人によって非常に異なるため、コマンドラインの使用を避ける人もいれば、完全にコマンドラインだけしか使わない人もいます。 +両方とも使う人も多いでしょう。 + +### 有名なコマンドラインオプション + +コマンドラインオプションは、OSによって異なります。 + +💻はOSにプリインストールされているものです。 + +#### Windows + +- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 +- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) +- [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) + +#### 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) + +#### 有名なコマンドラインツール + +- [Git](https://git-scm.com/) (多くのOSで 💻) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### ドキュメント + +何か新しいことを学びたいと思ったとき、その使い方を学ぶためには大抵ドキュメントに頼ることになるでしょう。 +開発者は、ツールや言語を適切に使用する方法を学んだり、その仕組みについて深く調べる場合、まずはドキュメントを参照します。 + +#### Web開発者向けの有名なドキュメント + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ Web開発者の開発環境の基礎を理解したところで、Webデザイナーの開発環境との違いを見てみましょう。 + +--- + +## 🚀 チャレンジ + +いくつかのプログラミング言語について比較してみましょう。 +JavaScriptとJavaの特徴は？ +COBOLとGoについては？ + +Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? + +## 事後テスト +[事後テスト](.github/post-lecture-quiz.ja.md) + +## レビュー & 自習 + +プログラマーが利用できる様々な言語について、少しだけかじってみましょう。 +ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。 +なにかわかりましたか？ + +Study a bit on the different languages available to the programmer. Try to write a line in one language, and then redo it in two others. What do you learn? + +## アサイン + +[assignment.md](../assignment.md) From 07f94a2d2ece1dcf9f478bc105ed511d95c3f4b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomomi=20=E2=9D=A4=20Imura?= Date: Fri, 20 Nov 2020 10:19:20 -0800 Subject: [PATCH 21/25] Remove the left-out original content --- .../translations/README.ja.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) 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 919508da..00569fd1 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 @@ -233,8 +233,6 @@ Web開発者は、自分のコードがWeb上でどのように実行される JavaScriptとJavaの特徴は？ COBOLとGoについては？ -Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? - ## 事後テスト [事後テスト](.github/post-lecture-quiz.ja.md) @@ -244,8 +242,6 @@ Compare some programming languages. What are some of the unique traits of JavaSc ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。 なにかわかりましたか？ -Study a bit on the different languages available to the programmer. Try to write a line in one language, and then redo it in two others. What do you learn? - -## アサイン +## 課題 [assignment.md](../assignment.md) From 310b9130d1d1142e1919ea8047ce5a030316e879 Mon Sep 17 00:00:00 2001 From: Rahul RK <47377566+DevTMK@users.noreply.github.com> Date: Sat, 21 Nov 2020 00:41:12 +0530 Subject: [PATCH 22/25] Update making decisions README.md --- 2-js-basics/3-making-decisions/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index 97ff7e2a..18a28f1f 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -31,7 +31,7 @@ Operators are used to evaluate conditions by making comparisons that will create | `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right | `5 < 6 // true` | | `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true` | | `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` | -| `>=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` | +| `>=` | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` | | `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` | | `!==` | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return | `5 !== 6 // true` | @@ -86,7 +86,7 @@ Decisions might require more than one comparison, and can be strung together wit | Symbol | Description | Example | | ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | `&&` | **Logical AND**: Compares two Boolean expressions. Returns true **only** if both sides are true | `(5 > 6) && (5 < 6 ) //One side is false, other is true. Returns false` | -| `||` | **Logical OR**: Compares two Boolean expressions. Returns true if at least one side is true | `(5 > 6) || (5 < 6) //One side is false, other is true. Returns true` | +| `\|\|` | **Logical OR**: Compares two Boolean expressions. Returns true if at least one side is true | `(5 > 6) \|\| (5 < 6) //One side is false, other is true. Returns true` | | `!` | **Logical NOT**: Returns the opposite value of a Boolean expression | `!(5 > 6) // 5 is not greater than 6, but "!" will return true` | ## Conditions and Decisions with Logical Operators From d2337b7b0e9fb85f31559592bc1373c33fa35bcf Mon Sep 17 00:00:00 2001 From: domi877 <45101945+domi877@users.noreply.github.com> Date: Fri, 20 Nov 2020 22:14:11 +0100 Subject: [PATCH 23/25] Update README.md --- 1-getting-started-lessons/3-accessibility/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index 601b0de1..99723168 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -62,7 +62,7 @@ When a particular phrase needs to be highlighted, use the `` or `` e ### Use the correct HTML -With CSS and JavaScript it's possible to many any element look like any type of control. `` could be used to create a `