Sílabo del curso
Sílabo — Desarrollo de Aplicaciones Front-End con Framework Vue.js
Section titled “Sílabo — Desarrollo de Aplicaciones Front-End con Framework Vue.js”1. Identificación del curso
Section titled “1. Identificación del curso”| Campo | Detalle |
|---|---|
| Nombre del curso | Desarrollo de Aplicaciones Front-End con Framework Vue.js |
| Código interno | FRONT-END-UNAB-2025 |
| Duración | 9 módulos – 320 horas pedagógicas |
| Requisitos | Conocimientos básicos de HTML, CSS y JavaScript |
| Modalidad | Virtual / Presencial sincrónica |
| Docente responsable | Fabián A. Torres Peña |
| Versión del programa | Cohorte 2025-1 |
2. Descripción general
Section titled “2. Descripción general”El curso tiene por objetivo que las y los estudiantes desarrollen competencias para diseñar, construir y desplegar aplicaciones web modernas utilizando el ecosistema Vue 3 y herramientas asociadas (Pinia, Vue Router, Firebase, Testing UI y CI/CD).
Al finalizar, serán capaces de crear un proyecto e-commerce o SPA completa, aplicando principios de arquitectura frontend, accesibilidad y buenas prácticas de código.
3. Objetivo general de aprendizaje
Section titled “3. Objetivo general de aprendizaje”Desarrollar aplicaciones web modulares, escalables y accesibles, utilizando tecnologías modernas de Front-End con enfoque en Vue 3 y su ecosistema.
4. Competencias específicas
Section titled “4. Competencias específicas”- Aplicar principios de maquetación, responsividad y diseño accesible.
- Implementar componentes reutilizables mediante el patrón Composition API.
- Gestionar estado global y comunicación entre componentes con Pinia.
- Integrar servicios externos y bases de datos en tiempo real (Firebase).
- Aplicar pruebas unitarias y de integración con Vitest y Vue Test Utils.
- Desplegar aplicaciones en entornos cloud (Firebase Hosting, Vercel, Cloudflare).
5. Aprendizajes esperados (AE)
Section titled “5. Aprendizajes esperados (AE)”| AE | Descripción | Evidencia de logro |
|---|---|---|
| AE1 | Aplica estructura semántica y estilos responsivos con HTML 5 + CSS 3. | Landing page responsive. |
| AE2 | Implementa componentes y eventos en Vue 3 Composition API. | App modular en Vue. |
| AE3 | Consume APIs REST y gestiona datos dinámicos. | Módulo con Axios/Fetch. |
| AE4 | Implementa autenticación, almacenamiento y despliegue con Firebase. | Proyecto final e-commerce. |
6. Contenidos y módulos
Section titled “6. Contenidos y módulos”| Módulo | Título | Principales temas | Horas | AE vinculados |
|---|---|---|---|---|
| M00 | Setup y entorno | Node + NPM, Git, VS Code, linters | 4 h | AE1 |
| M01 | HTML & CSS Avanzado | Flexbox, Grid, Responsive Design | 16 h | AE1 |
| M02 | Fundamentos JS & DOM | Sintaxis, funciones, eventos DOM | 20 h | AE1, AE2 |
| M03 | Control de versiones y CI | GitFlow, PR, Actions básicas | 8 h | AE1 |
| M04 | Vue 3 Fundamentos | Componentes, props, emits, reactividad | 28 h | AE2 |
| M05 | Vue Router & Pinia | Rutas, estado global, composables | 24 h | AE2, AE3 |
| M06 | Consumo de APIs | Axios, servicios, errores, loading | 20 h | AE3 |
| M07 | Firebase y deploy | Auth, Firestore, reglas, Hosting | 20 h | AE4 |
| M08 | Testing y Calidad | Vitest, Coverage, Accesibilidad | 20 h | AE4 |
| M09 | Proyecto Final ABPRO | E-commerce integral | 20 h | AE2–AE4 |
7. Metodología de enseñanza
Section titled “7. Metodología de enseñanza”- Clases teórico-prácticas con demostraciones en vivo.
- Aprendizaje basado en proyectos (ABP) y desafíos semanales (ABPRO).
- Uso de repositorios Git individuales y revisión por pares (PR).
- Evaluaciones continuas y retroalimentación formativa.
- Documentación viva en el sitio docs del curso.
8. Evaluaciones y ponderaciones
Section titled “8. Evaluaciones y ponderaciones”| Tipo de evaluación | Instrumento | Peso |
|---|---|---|
| Actividades formativas | Desafíos modulares (ABP/ABPRO) | 40 % |
| Pruebas prácticas | Entregas parciales con revisión docente | 30 % |
| Proyecto final | App Vue + Firebase + Testing | 25 % |
| Participación / Bitácora | Asistencia, commits, feedback de pares | 5 % |
9. Recursos de aprendizaje
Section titled “9. Recursos de aprendizaje”- Documentación oficial: vuejs.org, pinia.vuejs.org, firebase.google.com/docs
- Herramientas: VS Code, Node 20+, GitHub, Firebase CLI, Vite, Vitest.
- Material complementario: lecturas PDF, repos de ejemplo, videos de clase.
10. Bibliografía y referencias
Section titled “10. Bibliografía y referencias”Básica
- Vue Team (2024). Vue 3 Guide. vuejs.org
- Firebase Docs (2024). Getting Started with Firebase. Google.
- Pinia (2024). State Management for Vue 3.
Complementaria
- Freeman, E. (2022). Head First JavaScript Programming. O’Reilly.
- Ruiz, A. (2023). Testing Vue Applications with Vitest.
11. Política de evaluación y asistencia
Section titled “11. Política de evaluación y asistencia”- Asistencia mínima: 75 % de las sesiones sincrónicas.
- Entregas fuera de plazo: penalización del 10 % por día.
- Toda evidencia debe estar documentada en GitHub con commits propios.
- Uso responsable de IA: permitido para investigación y aprendizaje, no para sustituir entregables.
12. Cronograma general
Section titled “12. Cronograma general”| Semana | Módulo | Actividad principal | Entrega |
|---|---|---|---|
| 1–2 | M00–M01 | Setup + Landing HTML/CSS | Desafío Landing |
| 3–4 | M02–M03 | JS + GitHub CI | Desafío JS DOM |
| 5–6 | M04 | Componentes Vue | Desafío Componente Dinámico |
| 7–8 | M05–M06 | Router + API REST | Desafío Consumo API |
| 9–10 | M07–M08 | Firebase + Testing | Prueba Final |
| 11–12 | M09 | Proyecto Final ABPRO | Presentación final |
13. Observaciones y actualizaciones
Section titled “13. Observaciones y actualizaciones”Este programa puede ajustarse según los tiempos académicos o las actualizaciones del framework Vue.
La versión vigente del sílabo se publica en docs-frontend.velto.digital.