diff --git a/translations/README.es.md b/translations/README.es.md new file mode 100644 index 0000000000..442a6534a1 --- /dev/null +++ b/translations/README.es.md @@ -0,0 +1,170 @@ +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) + +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) + +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + +# Desarrollo Web para Principiantes - Plan de estudios + +Aprende los fundamentos del desarrollo web con nuestro curso detallado de 12 semanas hecho por Microsoft Cloud Advocates. Cada una de las 24 lecciones profundiza en Javascript, CSS y HTML por medio de ejercicios practicos como terrarios, extensiones de navegador y juegos espaciales. Participe en cuestionarios debates y tareas prácticas. Mejore sus habilidades y mejore la retención de conocimiento con nuestra pedagogía basada en proyectos prácticos. ¡Comienza tu aventura de codificación hoy! + +#### 🧑‍🎓 _¿Eres estudiante?_ + +Visita [**Pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ahí encontraras recursos para principiantes, paquetes para estudiantes y también maneras de certificarse gratuitamente. Esta página guardala en favoritos y consúltala porque mensualmente cambiamos el contenido. + +### 📣 Anuncio - ¡_Nuevo plan de estudios_ sobre la IA Generativa! + +¡No te pierdas nuestro nuevo plan de estudio de 12 lecciones acerca de la IA Generativa! + +Each lesson includes an assignment to complete, knowledge check and challenge to guide you on learning topics like: +Cada leccion incluye una tarea por completar, una comprobación de conocimientos para guiarlo en temas de apredizaje como: +- Estimulación e ingeniería rápida +- Generación de aplicaciones de texto e imagen +- Aplicaciones de busqueda + +¡Visita [https://aka.ms/genai-beginners](https://aka.ms/genai-beginners) para empezar! + + +## 🌱 Primeros pasos + +> **Profesores**, hemos [incluido algunas sugerencias](for-teachers.md) sobre cómo utilizar este plan de estudios. Nos gustaría recibir sus comentarios [en nuestro foro de debate](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! + +**[Estudiantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lección, comience con una prueba antes de la lectura y continúe leyendo el material de la clase. Completando las diversas actividades y comprobando su conocimiento con una prueba después de la lectura. + +Para mejorar su experiencia de apredizaje, conecta con tus compañeros para trabajar juntos en proyectos. Fomentamos los debates en nuestro [foro de debate](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) donde nuestros moderadores están a disposición para responder sus preguntas. + +Para ampliar su formación, le recomendamos que visite [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para más materiales de estudio. + +### 📋 Configura tu entorno de desarrollo + +En este plan de estudios tiene un entorno listo para funcionar. Para empezar puedes elegir ejecutar el plan de estudios en [Codespace](https://github.com/features/codespaces/) (_a browser-based, no installs needed environment_), o localmente en tu computador utilizando un editor de codigo como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). + +#### Crea tu repositorio +Para guardar fácilmente tu trabajo, recomendamos que crees tu propia copia de este repositorio. Puedes cliquear en el botón **Use this template o Usar esta plantilla** de la parte superior de la pagina. Esto creará un nuevo repositorio en tu cuenta de GitHub con la copia del plan de estudios. + + +#### Corriendo el plan de estudios en un Codespace + +En su copia de este repositorio que ha creado, clic en el botón **Code** y selecciona **Open with Codespaces**. Esto creará un Codespace para que trabajes + +Create codespace + +#### Corriendo el plan de estudios localmente en tu computador + +Para correr localmente este plan de estudios en tu computador, necesitarás un editor de texto, navegador y una herramienta de linea de comandos. Nuestra primera lección, [Introdución a lenguajes de programación y herramientas de oficio](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), le guiará atraves de las distintas opciones de cada una de estas opciones para que pueda elegir la que más cómoda para ti. + +Nuestra recomendación es que uses [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como tu editor de texto, que también tiene incorporado una [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Puedes descargar VSCode [aquí](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). + + +1. Clona tu repositio en tu computador. Puedes hacer esto cliqueando en el botón **Code** y copiando el URL: + + Copy your repository URL + + Luego, abre [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) en [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) y corre el siguiente programa, reemplazando `` con el URL que copiaste: + + ```bash + git clone + ``` + +2. Abre la carpeta con Visual Studio Code. Puedes hacerlo cliqueando **File** > **Open Folder** y selecciona la carpeta que clonaste. + + +> Extensiones de Visual Studio Code recomendadas: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Previsualiza tus páginas HTML en Visual Studio Code +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - Ayuda a escribir código más rápido + +## 📂 Cada lección incluye: + +- Notas (opcional) +- Videos complementarios (opcional) +- Una prueba pre-lección +- Lección escrita +- Clases basadas en proyectos, guías paso a paso de cómo constriur el proyecto +- Comprobar conocimiento +- Retos +- Lectura complementaria +- Tareas +- Una prueba post-lección + +> **Una nota acerca de las pruebas**: todas las pruebas están incluidas [en esta app](https://ashy-river-0debb7803.1.azurestaticapps.net/), Para un total de 48 pruebas cada una. Están enlazadas en las lecciones pero puedes ejecutarlas localmente; suguiendo las instrucciones en la carpeta `quiz-app`. Se irán localizando gradualmente. + +## 🗃️ Lecciones + +| | Nombre del proyecto | Concepts Taught | Objetivos de aprendizaje | Enlaces de la lección | Autor | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Primeros pasos | Introducción a la programación y herramientas del area | Aprende los fundamentos básicos de la mayoría de lenguajes de programación y el software que ayuda a los programadores en su trabajo | [Introducción a la programación y herramientas del area](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Primeros pasos | GitHub básico, incluyendo el trabajo en equipo | Como usar GitHub en tu proyecto, como colaborar con los demás en un código base | [Introducción a GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Primeros | Accesibilidad | Aprende los fundamentos de la accesibilidad web | [Fundamentos de accesibilidad](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Básico | Tipo de datos en JavaScript | Tipos de datos básicos de JS | [Tipos de datos](/2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Básico | Funciones y metodos | Aprender funciones y métodos para gestionar el flujo lógico de una aplicación | [Funciones y metodos](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS Básico | Tomando decisiones con JS | Aprenda a crear condiciones en su código usando métodos de toma de decisiones | [Tomando decisiones](/2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Básico | Arreglos y ciclos | Trabaja con datos usando matrices y ciclos en JS | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML en la práctica | construye el HTML para crear un terrarium, enfocandose en la construcción de un diseño | [Introducción a HTML](/3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS en la práctica | Construye el CSS para darle estilo al terrarium, centrandose en los fundamentos de CSS incluyendo reponsividad | [Introducción a CSS](/3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Clausura, manipulación del DOM | Construir el JavaScript para que el terrario funcione como una interfaz de arrastrar y soltar, centrándose en los cierres y el DOM. | [JavaScript Clausura, manipulación del DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Juego de mecanografía](/4-typing-game/solution/README.md) | Build a Crear un juego de mecanografía | Aprenda a utilizar los eventos de teclado para controlar la lógica de su aplicación JavaScript. | [Programación basada en eventos](/4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Extensión ecológica para navegadores](/5-browser-extension/solution/README.md) | Trabajando con navegadores | Aprenda cómo funcionan los navegadores, su historia y cómo armar los primeros elementos de una extensión de navegador | [Acerca de los navegadores](/5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Extensión ecológica para navegadores](/5-browser-extension/solution/README.md) | Creando un formulario, llamado de APIs y almacenamiento de variables en variable local | Construye elementos JavaScript de su extensión del navegador para llamar a una API utilizando variables almacenadas en el almacenamiento local | [APIs, formularios y almacenamiento local](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Extensión ecológica para navegadores](/5-browser-extension/solution/README.md) | Procesos de segundo plano en el navegador, rendimiento web | Utilizar los procesos de segundo plano del navegador para gestionar el icono de la extensión; aprenda sobre el rendimiento de la web y algunas optimizaciones para realizar | [Tareas de segundo plano y rendimiento](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](/6-space-game/solution/README.md) | Desarrollo avanzado de juegos con JavaScript | Aprender sobre Herencia utilizando tanto las clases como la composición y el patrón Pub/Sub, en preparación para la construcción de un juego. | [Introducción al desarrollo avanzado de juegos](/6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](/6-space-game/solution/README.md) | Dibujando en canvas | Conozca la API Canvas, utilizada para dibujar elementos en una pantalla | [Dibujando en canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](/6-space-game/solution/README.md) | Mover elementos por la pantalla | Descubra cómo los elementos pueden moverse utilizando las coordenadas cartesianas y la API Canvas. | [Desplazamiento de elementos](/6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](/6-space-game/solution/README.md) | Detección de colisiones | Hacer que los elementos colisionen y reaccionen entre sí mediante pulsaciones de teclas y proporcionar una función de enfriamiento para garantizar el rendimiento del juego. | [Detección de colisiones](/6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](/6-space-game/solution/README.md) | Puntuación | Realiza cálculos matemáticos basados en el estado y el rendimiento del juego | [Puntuación ](/6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](/6-space-game/solution/README.md) | Finalizar y reiniciar el juego | Aprende a terminar y reiniciar el juego, incluida la eliminación de activos y el restablecimiento de los valores de las variables | [La condición final](/6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](/7-bank-project/solution/README.md) | Plantillas HTML y Rutas en una Aplicación Web | Aprenda a crear el esqueleto de la constitución de un sitio web multipágina mediante el uso de rutas y plantillas HTML. | [Plantillas y rutas HTML](/7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](/7-bank-project/solution/README.md) | Crear un formulario de registro e inicio de sesión | Aprenda a crear formularios y a manejar rutinas de validación | [Formularios](/7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](/7-bank-project/solution/README.md) | Métodos de obtención y utilización de datos | Cómo fluyen los datos dentro y fuera de su aplicación, cómo obtenerlos, almacenarlos y eliminarlos. | [Datos](/7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](/7-bank-project/solution/README.md) | Conceptos de gestión de estado | Aprenda a conservar el estado de su aplicación y a gestionarlo mediante programación. | [Gestión del estado](/7-bank-project/4-state-management/README.md) | Yohan | + + +## 🏫 Pedagogía + +Nuestro plan de estudios se ha diseñado teniendo en cuenta dos principios pedagógicos fundamentales: +* Aprendizaje basado en proyectos +* Pruebas constantes + +El programa enseña los fundamentos de JavaScript, HTML y CSS, así como las últimas herramientas y técnicas utilizadas por los desarrolladores web actuales. Los estudiantes tendrán la oportunidad de adquirir experiencia práctica construyendo un juego de mecanografía, un terrario virtual, una extensión de navegador ecológica, un juego del estilo de los invasores del espacio y una aplicación bancaria para empresas. Al final de la serie, los estudiantes habrán adquirido una sólida comprensión del desarrollo web. + +> 🎓 Puedes tomar las primeras lecciones de este plan de estudios como una [ruta de aprendizaje](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) en Microsoft Learn! + +Al garantizar que el contenido se ajusta a los proyectos, el proceso resulta más atractivo para los alumnos y se incrementa la capacidad de retención de conceptos. También hemos escrito varias lecciones de iniciación a los conceptos básicos de JavaScript, combinadas con un vídeo de la colección de tutoriales en vídeo "[Serie para principiantes: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", algunos de cuyos autores han contribuido a este plan de estudios. + +Además, un cuestionario de poca exigencia antes de la clase fija la intención del alumno hacia el aprendizaje de un tema, mientras que un segundo cuestionario después de la clase garantiza una mayor retención. Este plan de estudios se diseñó para que fuera flexible y divertido, y puede cursarse en su totalidad o en parte. Los proyectos empiezan siendo pequeños y se hacen cada vez más complejos al final del ciclo de 12 semanas. + +Aunque hemos evitado a propósito introducir frameworks JavaScript para concentrarnos en las habilidades básicas necesarias como desarrollador web antes de adoptar un framework, un buen siguiente paso para completar este plan de estudios sería aprender sobre Node.js a través de otra colección de vídeos: "[Serie para principiantes a: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". + +> Visita nuestro [código de conducta](CODE_OF_CONDUCT.md) guía de [Contributing](CONTRIBUTING.md). Agradecemos sus comentarios constructivos. + + +## 🧭 Acceso sin conexión + +Puedes correr esta documentación sin conexión a internet, usando [Docsify](https://docsify.js.org/#/). Haz un fork a este repositorio, [instala Docsify](https://docsify.js.org/#/quickstart) en tu computadora, luego en la carpeta raíz de este repositorio, type `docsify serve`. El sitio web estará alojado en el puerto 3000 en tu localhost: `localhost:3000`. + +## 📘 PDF + +Un PDF con todas las lecciones puedes encontrarlo [aquí](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). + + +## 🎒 Otros planes de estudio + +¡Nuestro equipo elabora otros planes de estudios! Miralos: + +- [IA para principantes](https://aka.ms/ai-beginners) +- [Cienca de datos para ](https://aka.ms/datascience-beginners) +- [IA generativa para principiantes](https://aka.ms/genai-beginners) +- [IoT para principiantes](https://aka.ms/iot-beginners) +- [Machine Learning para principiantes](https://aka.ms/ml-beginners) +- [Desarrollo XR para principiantes](https://aka.ms/xr-dev-for-beginners) +- [Mastería en GitHub Copilot para la programación conjunta](https://aka.ms/GitHubCopilotAI) + +## License + +This repository is licensed under the MIT license. See the [LICENSE](LICENSE) file for more information.