📌 UF2216 - Desarrollo de Aplicaciones en el Entorno Cliente (50h)

📍 Contenidos Finales

1️⃣ Fundamentos avanzados de JavaScript

📌 Objetivo: Profundizar en características clave del lenguaje JavaScript.

1.1 Diferencias entre var, let y const
Ámbito y uso correcto de cada uno.
Hoisting y problemas comunes.
Ejercicios:
1. Declara una variable con var, let y const y prueba a reasignarlas. ¿Qué sucede?
2. Crea un for con var y otro con let. Accede a las variables fuera del bucle y analiza el resultado.
1.2 Funciones de flecha (=>) y Desestructuración de objetos y arrays
Uso de => para simplificación de código.
Operador spread (...).
Destructuración de objetos y arrays.
Ejercicios:
1. Convierte una función tradicional a una función de flecha.
2. Usa el operador spread para combinar dos arrays.
3. Desestructura un objeto y un array y accede a sus valores de forma directa.
1.3 Modularización con import/export
Estructura de módulos en JavaScript.
Uso de import y export en ES6.
Ejercicios:
1. Crea dos archivos JavaScript, uno con una función exportada y otro que la importe y la use.
2. Usa export default en un módulo y import en otro archivo para usarlo.

2️⃣ Manipulación avanzada del DOM

📌 Objetivo: Ampliar el conocimiento sobre la manipulación de la estructura de una página web.

2.1 Delegación de eventos
Concepto y utilidad para optimización del código.
Implementación con addEventListener.
2.2 MutationObserver: Detección de cambios en el DOM
Introducción al API MutationObserver.
Casos prácticos de uso.
2.3 Uso de plantillas HTML dinámicas
Uso de template y innerHTML.
Introducción a DocumentFragment.

3️⃣ Trabajo con APIs y datos externos

📌 Objetivo: Aprender a consumir APIs externas y manejar datos en el frontend.

3.1 Introducción a fetch() y consumo de APIs REST
Peticiones GET y POST con fetch.
Uso de async/await en llamadas a APIs.
3.2 Uso de JSON y promesas en el frontend
Conversión entre JSON y objetos JavaScript.
Promesas (.then(), .catch()) y su importancia en operaciones asíncronas.
3.3 Manejo de errores y respuestas de APIs
Uso de try...catch.
Manejo de errores HTTP (.ok, status).

4️⃣ Manejo de formularios y validaciones en el cliente

📌 Objetivo: Implementar validaciones en formularios de entrada de datos.

4.1 Validaciones con JavaScript y RegExp
Métodos test() y match().
Expresiones regulares para validar correos electrónicos y contraseñas.
4.2 Manejo de eventos en formularios (change, blur, submit)
Diferencias entre eventos y cuándo utilizarlos.
Validación en tiempo real vs validación en el envío (onsubmit).

5️⃣ Gestión de estado en el cliente

📌 Objetivo: Introducir patrones para la gestión de datos en aplicaciones dinámicas.

5.1 Uso de event-driven programming en el frontend
Creación y escucha de eventos personalizados con EventEmitter.
5.2 Flujo de datos entre distintos componentes
Paso de datos entre componentes con eventos.
Introducción a Pub/Sub en JavaScript.

📌 Proyecto Final

📌 Objetivo: Integrar todos los conocimientos adquiridos en una aplicación web completa.

💡 Descripción del Proyecto:
Desarrollar una aplicación web dinámica que permita gestionar tareas.
📌 Requisitos:
✅ Manejo avanzado del DOM.
✅ Consumo de una API REST para almacenar tareas.
✅ Validaciones en formularios.
✅ Almacenamiento local de tareas con localStorage.

Esquema VUE

¡Me parece un enfoque perfecto! Así los alumnos podrán ver el código funcionando con To-Do List y luego aplicarlo por su cuenta en el Blog, pero con una guía clara en cada unidad.

Voy a desarrollar la estructura de cada unidad en detalle, asegurando que: ✅ To-Do List se explique y solucione paso a paso.
✅ El Blog tenga instrucciones claras sobre lo que deben hacer en cada tema.
✅ Las soluciones del Blog estén separadas, para que los alumnos intenten hacerlo por su cuenta antes de verlas.

Aquí tienes la estructura detallada con las secciones que incluiré en cada unidad:

📌 Estructura de cada Unidad de Vue.js

Cada unidad seguirá este esquema:

Explicación teórica del tema (con ejemplos).
Implementación en To-Do List (con código listo para copiar y pegar).
Tareas a realizar en el Blog (explicadas en detalle).
Solución del Blog (oculta inicialmente).

6️⃣ Introducción a Vue.js

📌 Objetivo: Entender qué es Vue.js y crear la primera aplicación.

Teoría:
¿Qué es Vue.js? Diferencias con JavaScript puro.
Configuración inicial (CDN y Vue CLI).
Creación de una aplicación mínima con Vue.
📝 Implementación en To-Do List:
Creación de un div con id="app".
Uso de Vue.createApp() y {{ message }} para mostrar texto dinámico.
Código listo para copiar y probar.
📌 Proyecto Blog: Lo que deben hacer los alumnos
Crear la estructura básica del Blog.
Configurar Vue.js en la página.
Mostrar un mensaje dinámico en la página.
🔒 Solución del Blog (oculta inicialmente).

7️⃣ Manejo de Datos y Eventos en Vue.js

📌 Objetivo: Aprender a manejar eventos y actualizar la interfaz en tiempo real.

Teoría:
Uso de v-model, v-bind, v-if, v-for, v-on.
Manejo de eventos (@click, @input).
📝 Implementación en To-Do List:
Creación de un formulario con v-model para añadir tareas.
Uso de v-for para listar tareas.
Código listo para copiar y probar.
📌 Proyecto Blog: Lo que deben hacer los alumnos
Crear un formulario para añadir nuevas entradas.
Utilizar v-model para capturar el contenido del formulario.
Mostrar dinámicamente las entradas del blog con v-for.
🔒 Solución del Blog (oculta inicialmente).

8️⃣ Componentes y Comunicación en Vue.js

📌 Objetivo: Crear componentes reutilizables y comunicar datos entre ellos.

Teoría:
Creación de componentes (Vue.component).
Uso de props y emit para la comunicación entre componentes.
📝 Implementación en To-Do List:
Crear un componente TareaItem.vue.
Pasar datos mediante props.
Emitir eventos al hacer clic en "Eliminar".
Código listo para copiar y probar.
📌 Proyecto Blog: Lo que deben hacer los alumnos
Convertir las entradas del blog en un componente reutilizable.
Usar props para pasar los datos de cada entrada.
Emitir eventos para eliminar una entrada.
🔒 Solución del Blog (oculta inicialmente).

9️⃣ Enrutamiento y Gestión de Estado

📌 Objetivo: Implementar Vue Router y gestionar datos con Vuex o Pinia.

Teoría:
Configuración de Vue Router (router-link, router-view).
Uso de Vuex o Pinia para manejar el estado global.
📝 Implementación en To-Do List:
Creación de rutas para ver tareas completadas.
Almacenar tareas en Vuex o Pinia.
Código listo para copiar y probar.
📌 Proyecto Blog: Lo que deben hacer los alumnos
Agregar navegación entre la lista de entradas y la vista de detalles.
Almacenar las entradas del blog en Vuex o Pinia.
Sincronizar los cambios en toda la aplicación.
🔒 Solución del Blog (oculta inicialmente).

🔹 ¿Cómo avanzarán los alumnos?

1️⃣ Copiarán y probarán el código del To-Do List en cada unidad.
2️⃣ Seguirán las instrucciones para aplicar los mismos conceptos al Blog.
3️⃣ Intentarán resolverlo solos antes de ver la solución.

💡 ¿Te gusta este esquema? ¿Hacemos algún ajuste antes de comenzar a desarrollar las unidades? 🚀😊