Sandra Laguna
3 years ago
parent
b07e06e1a4
commit
b9bcb55e59
@ -0,0 +1,111 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Desarrollo web para principiantes: Un plan de estudios
|
||||
|
||||
El grupo Azure Cloud Advocates de Microsoft se complace en ofrecer un plan de estudios de 24 lecciones de 12 semanas de duración sobre conceptos básicos de JavaScript, CSS y HTML. Cada lección incluye cuestionarios previos y posteriores a la lección, instrucciones escritas para completar la lección, una solución, una tarea y mucho más. Nuestra pedagogía basada en proyectos te permite aprender mientras construyes, una forma eficaz para adquirir nuevas habilidades.
|
||||
|
||||
**¡Muchas gracias a nuestros autores Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees y Tomomi Imura!**
|
||||
|
||||
# ¿Eres estudiante?
|
||||
|
||||
Empieza con los siguientes recursos:
|
||||
|
||||
- [Centro de estudiantes](https://docs.microsoft.com/es-es/learn/student-hub?WT.mc_id=academic-13441-cxa): En esta página, encontrarás recursos para principiantes, paquetes para estudiantes e incluso formas de obtener un certificado de manera gratuita. Es una página que deberías marcar y revisar de vez en cuando, ya que cambiamos el contenido al menos una vez al mes.
|
||||
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa): Únete a una comunidad global de estudiantes embajadores, este podría ser tu camino hacia Microsoft.
|
||||
|
||||
# Empezando
|
||||
|
||||
> **Profesores**, hemos [incluído algunas sugerencias](for-teachers.md) sobre cómo realizar este curso. Nos encantaría saber tu opinión [en nuestro foro de discusión](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **[Estudiantes](https://aka.ms/student-page)**, para hacer este curso por tu cuenta, haz un fork del repositorio y completa los ejercicios por tu cuenta, empezando con un cuestionario previo a la lección, luego leyendo la lección y completando el resto de las actividades. Intenta crear los proyectos comprendiendo las lecciones en lugar de copiar el código de la solución; sin embargo, ese código está disponible en las carpetas /solutions de cada lección. Otra idea sería formar un grupo de estudio con amigos y repasar el contenido juntos. Para un estudio más profundo, te recomendamos [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) y ver los videos mencionados a continuación.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII)
|
||||
|
||||
Gif de [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 ¡Clica en la imagen de arriba para ver un video sobre el proyecto y las personas que lo crearon!
|
||||
|
||||
## Pedagogía
|
||||
|
||||
Hemos elegido dos principios pedagógicos al construir este curso: asegurarnos de que esté basado en proyectos y que incluya cuestionarios. Al final de estas series, los estudiantes habrán creado un juego de mecanografía, un terrario virtual, una extensión de navegador 'verde', un juego tipo 'space invaders' y una aplicación bancaria de tipo comercial. Además, habrán aprendido los conceptos básicos de JavaScript, HTML y CSS junto con las herramientas más modernar del desarrollador web actual.
|
||||
|
||||
> 🎓 ¡Puedes realizar las primeras lecciones de este curso como [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) en Microsoft Learn!
|
||||
|
||||
Al garantizar que el contenido se alinea con los proyectos, el proceso se vuelve más atractivo para los estudiantes y se aumentará la retención de conceptos. También escribimos varias lecciones iniciales sobre conceptos básicos de JavaScript para presentar conceptos, junto con una colección de videos de "[Serie sobre JavaScript para principiantes](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)". Algunos de cuyos autores contribuyeron a este plan de estudios.
|
||||
|
||||
Además, una simple prueba previa a la clase establece la intención del estudiante de aprender un tema, mientras que una segunda prueba posterior a la clase garantiza una mayor retención. Este plan de estudios está diseñado para ser flexible y divertido y se puede completar en su totalidad o en partes. Los proyectos empiezan siendo pequeños y se vuelven cada vez más complejos hacia el final del ciclo de 12 semanas.
|
||||
|
||||
Hemos evitado deliberadamente la introducción de frameworks de JavaScript para concentrarnos en las habilidades básicas necesarias como desarrollador web antes de aprender un frameworks. Un buen próximo paso para completar este curso sería aprender sobre Node.js a través de otra colección de videos: "[Serie sobre Node.js para principiantes](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||
|
||||
> Encuentra nuestras guías sobre [Código de conducta](CODE_OF_CONDUCT.md), [Contribuciones](CONTRIBUTING.md), y [Traducciones](TRANSLATIONS.md). ¡Agradecemos tus comentarios constructivos!
|
||||
|
||||
## Cada lección incluye:
|
||||
|
||||
- Una hoja de borrador opcional
|
||||
- Un vídeo complementario opcional
|
||||
- Cuestionario de calentamiento previo a la lección
|
||||
- Lección escrita
|
||||
- Para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto
|
||||
- Controles de conocimiento
|
||||
- Un reto
|
||||
- Lectura complementaria
|
||||
- Asignación
|
||||
- Cuestionario posterior a la lección
|
||||
|
||||
> **Nota sobre los cuestionarios**: Todos los cuestionarios están [en esta app](https://ashy-river-0debb7803.1.azurestaticapps.net/). En total son 48 cuestionarios de tres preguntas cada uno. También se puede acceder a ellos localmente a través de la carpeta `quiz-app`.
|
||||
|
||||
## Lecciones
|
||||
|
||||
| | Nombre del proyecto | Conceptos enseñados | Objetivos de aprendizaje | Lección vinculada | Autor |
|
||||
| :-: | :---------------------------------------------------------------------: | :------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Empezando | Introducción a la programación y herramientas | Aprende los fundamentos básicos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores a hacer su trabajo. | [Introducción a la programación y herramientas](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Empezando | Conceptos básicos de GitHub, incluye trabajar con un equipo | Cómo usar GitHub en su proyecto, cómo colaborar con otros en una base de código | [Introducción a GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Empezando | Accesibilidad | Aprende los conceptos básicos de la accesibilidad web. | [Fundamentos de accesibilidad](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Básico | Tipos de datos de JavaScript | Los conceptos básicos de los tipos de datos de JavaScript | [Tipos de datos](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Básico | Funciones y Métodos | Aprenda sobre funciones y métodos para administrar el flujo lógico de una aplicación | [Funciones y Métodos](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | JS Básico | Tomar decisiones con JS | Aprende a crear condiciones en tu código usando métodos de toma de decisiones | [Tomando decisiones](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Básico | Arrays y bucles | Trabaja con datos utilizando arrays y bucles en JavaScript | [Arrays y bucles](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML en práctica | Crea el HTML para crear un terrario online, centrándote en crear un layout | [Introducción a HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS en práctica | Crea el CSS para diseñar el terrario online, centrándote en los conceptos básicos de CSS, incluida la respuesta de la página. | [Introducción a CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Cierres de JavaScript, manipulación DOM | Crea el JavaScript para hacer que el terrario funcione como una interfaz de arrastrar y soltar, centrándote en los cierres y la manipulación DOM | [Cierres de JavaScript, manipulación DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Juego de mecanografía](/4-typing-game/solution/README.md) | Construyendo un juego de mecanografía | Aprende a usar eventos de teclado para impulsar la lógica de tu aplicación de JavaScript | [Programación impulsada por eventos](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Extensión de navegador verde](/5-browser-extension/solution/README.md) | Trabajar con navegadores | Aprende cómo funcionan los navegadores, su historial y cómo estructurar 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 de navegador verde](/5-browser-extension/solution/README.md) | Crear un formulario, llamar a una API y almacenar variables en el almacenamiento local | Cree los elementos de JavaScript de la extensión de su navegador para llamar a una API usando 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 de navegador verde](/5-browser-extension/solution/README.md) | Procesos en segundo plano en el navegador, rendimiento web | Usa los procesos en segundo plano del navegador para administrar el ícono de la extensión; aprender sobre el rendimiento web y algunas optimizaciones | [Tareas en segundo plano y rendimiento](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Juego espacial](/6-space-game/solution/README.md) | Desarrollo de juegos más avanzado con JavaScript | Aprende sobre la herencia usando clases y composición y el patrón Pub/Sub, como preparación para crear un juego. | [Introducción al desarrollo avanzado de juegos](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Juego espacial](/6-space-game/solution/README.md) | Dibujo a canvas | Aprende sobre la API de Canvas, que se utiliza para dibujar elementos en una pantalla | [Dibujo a canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Juego espacial](/6-space-game/solution/README.md) | Mover elementos por la pantalla | Descubre cómo los elementos pueden ganar movimiento usando las coordenadas cartesianas y la API de Canvas | [Mover elementos alrededor](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Juego espacial](/6-space-game/solution/README.md) | Detección de colisiones | Haz que los elementos colisionen y reaccionen entre sí presionando las teclas y proporciona 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 | [Juego espacial](/6-space-game/solution/README.md) | Manteniendo el marcador | Realice cálculos matemáticos basados en el estado y el rendimiento del juego. | [Manteniendo el marcador](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Juego espacial](/6-space-game/solution/README.md) | Terminar y reiniciar el juego | Aprende sobre cómo finalizar y reiniciar el juego, incluida la limpieza de assets y el restablecimiento de valores de variables | [La condición final](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Aplicación bancaria](/7-bank-project/solution/README.md) | Plantillas HTML y rutas en una aplicación web | Aprende a crear el andamio de la arquitectura de un sitio web de varias páginas utilizando plantillas HTML y de enrutamiento | [Plantillas y rutas HTML](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Aplicación bancaria](/7-bank-project/solution/README.md) | Cree un formulario de inicio de sesión y registro | Más información sobre la creación de formularios y la entrega de rutinas de validación | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Aplicación bancaria](/7-bank-project/solution/README.md) | Métodos de obtención y uso de datos | Cómo entran y salen los datos de su aplicación, cómo recuperarlos, almacenarlos y deshacerse de ellos | [Datos](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Aplicación bancaria](/7-bank-project/solution/README.md) | Conceptos de Gestión del Estado | Aprende cómo tu aplicación retiene el estado y cómo administrarlo mediante programación | [Administración del estado](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## Acceso sin conexión
|
||||
|
||||
Puede ejecutar esta documentación sin conexión mediante [Docsify](https://docsify.js.org/#/). Haz un fork de este repositorio, [instala Docsify](https://docsify.js.org/#/quickstart) en tu ordenador, y luego en la carpeta raíz de este repositorio, escribe `docsify serve`. El sitio web se servirá en el puerto 3000 en localhost: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Se puede encontrar un PDF con todas las lecciones [aquí](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## Otros cursos
|
||||
|
||||
¡Nuestro equipo produce otros cursos! Descúbrelos:
|
||||
|
||||
- [Machine Learning para principiantes](https://aka.ms/ml-beginners)
|
||||
- [IoT para principiantes](https://aka.ms/iot-beginners)
|
||||
- [Data Science para principiantes](https://aka.ms/datascience-beginners)
|
||||
- [AI para principiantes](https://aka.ms/ai-beginners)
|
||||
Loading…
Reference in new issue