Proyectos Web I introduce el desarrollo front-end moderno desde los fundamentos de la Web hasta la construcción de interfaces interactivas que consumen datos. El estudiante trabaja con HTML semántico, CSS, JavaScript y las Web APIs del navegador, y aprende a aplicar accesibilidad, diseño responsive, organización modular del código, gestión del estado, comunicación asíncrona, persistencia local y tratamiento de errores. La asignatura combina explicaciones, demostraciones, ejercicios Hands-On y el desarrollo incremental de un proyecto integrador que permite aplicar los contenidos y justificar las decisiones técnicas adoptadas. También se trabajan las herramientas de desarrollo del navegador, la validación y las prácticas propias de un entorno front-end profesional.
Profesores Titulares
Profesores Docentes
No es necesario haber cursado previamente HTML, CSS o JavaScript, ya que la asignatura presenta sus fundamentos. Se recomienda dominar conceptos básicos de programación —variables, condicionales, bucles, funciones, arrays y objetos—, saber organizar archivos y carpetas y tener autonomía para trabajar con un navegador, un editor de código y documentación técnica, principalmente en inglés.
Al finalizar la asignatura, el estudiante deberá ser capaz de:
• Explicar la relación entre Internet, la Web, el navegador, HTTP y una arquitectura cliente/servidor.
• Estructurar documentos con HTML semántico, formularios y contenido multimedia accesibles.
• Aplicar la cascada, los selectores, el modelo de caja, Flexbox y Grid para crear interfaces mantenibles y responsive.
• Valorar de forma razonada el uso de CSS propio, Bootstrap o Tailwind, sin sustituir la comprensión de los fundamentos.
• Programar con JavaScript moderno, módulos, funciones y estructuras de datos, evitando conversiones o dependencias implícitas.
• Manipular el DOM, gestionar eventos y estado de interfaz y preservar la accesibilidad en las interacciones.
• Consumir APIs de forma asíncrona, representar estados de carga y error y utilizar persistencia local cuando sea adecuada.
• Probar, depurar, documentar y defender técnicamente una aplicación web desarrollada en equipo.
El programa se organiza en diez unidades troncales y una unidad de ampliación opcional:
1. Fundamentos de la Web y de HTML: Internet y Web, URL, HTTP básico, navegador, DOM, estructura del documento, enlaces, imágenes, listas, atributos, validación y DevTools.
2. HTML semántico, formularios, multimedia y accesibilidad: landmarks, jerarquía de encabezados, controles nativos, validación, imágenes responsive, audio, vídeo y pruebas con teclado.
3. Cascada, selectores y diseño visual con CSS: especificidad, herencia, capas, pseudoclases, unidades, tipografía y mantenibilidad.
4. Modelo de caja, flujo y posicionamiento: box-sizing, overflow, dimensiones intrínsecas, propiedades lógicas, posicionamiento y stacking contexts.
5. Flexbox y layouts unidimensionales: ejes, alineación, wrapping, gap, basis, grow, shrink y tamaños mínimos.
6. CSS Grid y diseño responsive: tracks, fr, minmax, auto-fit, áreas, subgrid, media queries, container queries y clamp().
7. Patrones de interfaz y frameworks visuales: hero, CTA, cards, componentes, transiciones, Bootstrap, Tailwind y criterios de selección.
8. Fundamentos de JavaScript y módulos: tipos, variables, control de flujo, arrays, objetos, transformaciones, destructuring, módulos y depuración.
9. Funciones, DOM, eventos y estado: funciones puras, selección y creación de nodos, seguridad de la salida, delegación, formularios y renderizado a partir del estado.
10. JavaScript asíncrono, APIs y persistencia: Promises, fetch, async/await, JSON, errores, cancelación, estados de interfaz, HTTP, localStorage y estrategias MPA/SPA/híbridas.
11. Ampliación opcional: HTTP, TLS, orígenes y CORS, XSS, CSRF, CSP, WebSockets y fronteras de confianza del front-end. Esta unidad es complementaria y solo formará parte de la evaluación si el profesorado lo comunica expresamente por escrito.
La asignatura sigue una metodología de Aprendizaje Basado en Proyectos. Cada semana combina tres sesiones lectivas: una primera sesión de aproximadamente una hora para introducir conceptos, analizar casos y realizar demostraciones, y dos sesiones prácticas —dos horas en total— dedicadas a ejercicios Hands-On, resolución de problemas, pruebas y desarrollo del proyecto.
Los materiales organizan el aprendizaje en iteraciones sucesivas de un mismo proyecto guía. Cada unidad incorpora un entregable o una definición de “hecho” que obliga a aplicar el contenido en una situación real: primero la estructura semántica, después el diseño y la respuesta a diferentes anchuras y, finalmente, la lógica, el estado, las APIs y la persistencia. Los Hands-On son individuales salvo que el enunciado indique lo contrario; el proyecto de la convocatoria ordinaria se desarrolla en grupos de tres personas.
El profesorado proporciona orientación y retroalimentación durante las sesiones. También se plantean actividades de Self-Paced Learning para que el estudiante consulte documentación, pruebe alternativas y justifique las decisiones tomadas. Las pruebas con validadores, DevTools, teclado, zoom, contenido extremo, errores de red y otros casos límite forman parte del proceso habitual de trabajo, no solo de la comprobación final.
Convocatoria ordinaria
MFinal = 0,7 × Mproject + 0,3 × Mknowledge. Para aplicar la fórmula, Mproject y Mknowledge deben ser iguales o superiores a 5.
Mknowledge es la media de los Hands-On obligatorios. Cada ejercicio debe entregarse dentro del plazo, cumplir los requisitos del enunciado y obtener una nota mínima de 5. Un solo ejercicio no entregado, no aceptado, entregado fuera de plazo sin una ampliación autorizada o calificado por debajo de 5 implica no superar Mknowledge en la convocatoria ordinaria.
Mproject = ((0,9 × Mpm + 0,1 × Mdoc) × Mdoc_delivered) × Minterview. Mpm es la nota de la implementación; Mdoc, la documentación; y Mdoc_delivered y Minterview son variables booleanas (0/1). Mpm y Mdoc deben ser como mínimo 5. La memoria y la entrevista son obligatorias.
Convocatoria extraordinaria
Solo se recuperan los componentes no superados. Mknowledge se recupera mediante un único examen final común sobre las unidades obligatorias, con una nota mínima de 5 y máxima de 7. Mproject se recupera con una práctica individual, memoria y entrevista, con una nota máxima de 7. Si ambos componentes están suspendidos, deben realizarse las dos recuperaciones y después se vuelve a aplicar la fórmula de MFinal.
Uso de inteligencia artificial (escala AIAS)
- Ejercicios prácticos semanales y actividades de evaluación continua realizados y evaluados íntegramente en el aula o laboratorio (30%): Nivel 1 (sin IA). Deberán completarse sin ayuda de herramientas de inteligencia artificial generativa.
- Proyecto final y proyecto de recuperación (70%): Nivel 2 (planificación con IA). La IA solo podrá utilizarse durante la ideación, exploración inicial, organización y planificación del trabajo. No podrá utilizarse para generar, completar, corregir o reescribir el código, la documentación ni ninguna otra parte del producto entregado.
- Entrevista y defensa individual del proyecto: Nivel 1 (sin IA).
Todo uso permitido de IA deberá declararse en la entrega, indicando la herramienta utilizada, su finalidad y los prompts o instrucciones introducidos. El uso de IA que exceda el nivel indicado, o su utilización sin declararla, se considerará un incumplimiento de las normas de honestidad académica. El alumnado será responsable de la autoría, exactitud y funcionamiento de todo el material entregado.
La evaluación comprueba tanto el funcionamiento como la calidad y la comprensión del trabajo. Los enunciados y las rúbricas concretan el peso de cada criterio e identifican expresamente cualquier requisito esencial o bloqueante. Con carácter general se valoran:
• Cumplimiento funcional del enunciado y tratamiento correcto de los casos normales, vacíos, inválidos y de error.
• HTML válido y semántico, jerarquía coherente, formularios, multimedia y navegación accesibles con teclado y zoom.
• CSS mantenible: cascada explicable, baja especificidad, modelo de caja correcto, layouts con Flexbox/Grid y respuesta robusta a diferentes anchuras y contenidos.
• JavaScript moderno y modular: datos coherentes, funciones con responsabilidades claras, manipulación segura del DOM, eventos, estado, asincronía, APIs, persistencia y estados de carga o error.
• Calidad del código, organización del proyecto, uso razonado de dependencias, validación, pruebas, depuración con DevTools y ausencia de overflow o contenido inaccesible.
• Memoria técnica, justificación de decisiones, trazabilidad del trabajo del equipo, participación y capacidad de defender individualmente todo el proyecto.
Para superar la asignatura es necesario obtener al menos un 5 tanto en Mknowledge como en Mproject, entregar y superar todos los Hands-On obligatorios y superar la memoria y la entrevista en los términos descritos en el apartado de evaluación.
WHATWG. HTML Living Standard. https://html.spec.whatwg.org/
Mozilla. MDN Web Docs: Learn web development y Web APIs. https://developer.mozilla.org/en-US/docs/Learn_web_development · https://developer.mozilla.org/en-US/docs/Web/API
ECMA International / TC39. ECMAScript Language Specification (ECMA-262). https://tc39.es/ecma262/
W3C Web Accessibility Initiative. Web Accessibility Tutorials. https://www.w3.org/WAI/tutorials/
Haverbeke, M. (2024). Eloquent JavaScript, 4.ª edición. https://eloquentjavascript.net/
Google Chrome Developers. Learn web development: HTML, CSS, JavaScript, accesibilidad, diseño responsive, formularios y pruebas. https://web.dev/learn/
Google Chrome Developers. Chrome DevTools documentation. https://developer.chrome.com/docs/devtools/
Bootstrap Team. Bootstrap documentation. https://getbootstrap.com/docs/
Tailwind Labs. Tailwind CSS documentation. https://tailwindcss.com/docs/