Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que se tratan aquí se aplican a la mayoría de los lenguajes de programación modernos en la actualidad. En la sección 'Herramientas del oficio', aprenderá sobre software útil que lo ayuda como desarrollador.
Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que 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.
Estudia un poco sobre los diferentes lenguajes disponibles para el programador. Intente escribir una línea en un idioma y luego vuelva a hacerlo en otros dos. ¿Qué aprendes?
Estudia un poco sobre los diferentes lenguajes disponibles para el programador. Intente escribir una línea en un idioma y luego vuelva a hacerlo en otros dos. ¿Qué aprendes?
@ -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.
🚀 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.
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/).
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
Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet.
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?
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
## Review & Selbststudium
@ -194,4 +194,4 @@ Schauen Sie sich [diese Liste der JavaScript-Übungen](https://css-tricks.com/sn
[](https://youtube.com/watch?v=rEHV3fFMfn0 "Tipos de datos en JavaScript")
[](https://youtube.com/watch?v=rEHV3fFMfn0 "Tipos de datos en JavaScript")
Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web.
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;`
`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
### 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?
🚀 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?
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**.
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!
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
## Review & Selbststudium
@ -192,4 +192,4 @@ Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.moz
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.
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?
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
## Review & Selbststudium
@ -166,4 +166,4 @@ Lesen Sie mehr über die vielen Operatoren, die dem Benutzer [auf MDN](https://d
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.
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?
🚀 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?
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).
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).
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.
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.
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
## Review & Selbststudium
@ -119,4 +119,4 @@ An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipu
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.
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.
🚀 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.
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.
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)
@ -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:
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.
> 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 `<div>`
Una etiqueta html que no necesita una etiqueta de cierre es la etiqueta `<img>`, porque tiene un elemento `src` que contiene toda la información que la página necesita para representar el elemento.
Una etiqueta html que no necesita una etiqueta de cierre es la etiqueta `<img>`, 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:
### Tarea:
@ -205,10 +205,10 @@ Agregue este marcado encima de la última etiqueta `</div>`:
🚀 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 `<marquee>` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después)
🚀 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 `<marquee>` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después)
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?
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)
** Tarea: [Practica tu HTML: crea una maqueta de blog](assignment.es.md)
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:
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:
✅ ¿Puede hacer que un estilo anidado herede una propiedad diferente?
✅ ¿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:
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/).
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/).
@ -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.
> 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.
> 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)
> 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. 
🥇¡Felicitaciones! Has terminado tu hermoso terrario. 
🚀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!
🚀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.
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)
- [una clave API](https://www.co2signal.com/); ingrese su correo electrónico en el cuadro de esta página y se le enviará uno
- [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 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
- [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/)
✅ 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/)
@ -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?
@ -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?
🚀 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?
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.
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.
@ -20,9 +20,9 @@ Construye la extensión desde webpack:
npm run build
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').
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.
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.
### Herencia y composición en el desarrollo de juegos
### 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.
🚀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.
@ -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.
- **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.
- **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
## 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
- Monstruo 5*5
- Monstruo 5*5
### Pasos recomendados para iniciar el desarrollo
### 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í:
El resultado final debería verse así:
## Solución
## 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.
🚀 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.
¡Los juegos no son muy divertidos hasta que tienes extraterrestres corriendo por la pantalla! En este juego haremos uso de dos tipos de movimientos:
¡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
### 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.
* 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.
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:
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.
🚀 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.
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).
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).
¡En esta lección aprenderá a disparar láseres con JavaScript! Agregaremos dos cosas a nuestro juego:
¡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
- **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 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
- **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í.
- **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.
🚀 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.
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/).
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/).
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?
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)
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/)
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:
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.
- **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.
- **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.
- **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.
🚀 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.
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.
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)
@ -165,7 +165,7 @@ Sin embargo, para nuestra aplicación web estamos usando un solo archivo HTML qu
### Tarea
### 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
```js
const routes = {
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.
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.
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
## 🚀 Desafío
Agregue una nueva plantilla y ruta para una tercera página que muestre los créditos de esta aplicación.
Agregue una nueva plantilla y ruta para una tercera página que muestre los créditos de esta aplicación.
# Cree un formulario de inicio de sesión y registro
# 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
### Introducción
@ -181,7 +181,7 @@ async function createAccount(account) {
Aquí hay un video rápido sobre el uso de `async/await`:
Aquí hay un video rápido sobre el uso de `async/await`:
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async y Await para administrar promesas")
[](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:
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
## [Prueba posterior a la conferencia](.github/post-lecture-quiz.md)
## [Prueba posterior a la conferencia](../.github/post-lecture-quiz.md)
## Revisión y autoestudio
## Revisión y autoestudio
@ -288,4 +288,4 @@ Los desarrolladores se han vuelto muy creativos en sus esfuerzos de creación de
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:
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.
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.
Jen Looper
4 years ago
committed by
GitHub