Bienvenid@s a Desarrollo de Interfaces

La asignatura Desarrollo de Interfaces está diseñada para proporcionar a los estudiantes los conocimientos y habilidades necesarios para crear interfaces web funcionales, atractivas y usables. A lo largo del curso, se explorarán los fundamentos de HTML, CSS y JavaScript, así como el uso de frameworks modernos como Vue.js, permitiendo a los alumnos construir aplicaciones web dinámicas e interactivas.

El aprendizaje se basará en una combinación de teoría, práctica y evaluación continua, fomentando la capacidad de planificar, diseñar y desarrollar proyectos completos que integren buenas prácticas de diseño, accesibilidad y experiencia de usuario. Además, se pondrá especial énfasis en el consumo de APIs, la manipulación del DOM y la creación de interfaces adaptables a diferentes dispositivos.

Esta asignatura busca no solo enseñar la técnica de desarrollo de interfaces, sino también cultivar la creatividad, la resolución de problemas y el pensamiento crítico, habilidades esenciales para cualquier profesional del desarrollo web moderno.

📊 Evaluación de la asignatura

La calificación final se calculará con los siguientes porcentajes:

30% Actividades y prácticas

• Participación en debates, ejercicios de clasificación, comparativas de servicios.
• Prácticas de uso de cuentas gratuitas en proveedores cloud.
• Proyecto final (incluido dentro de actividades).

10% Actitud del alumno

• Asistencia y puntualidad.
• Colaboración en el trabajo en grupo.
• Respeto de normas y actitud proactiva en clase.

60% Exámenes

• Pruebas escritas teórico-prácticas sobre los contenidos de los temas.
• Preguntas de desarrollo, tipo test, resolución de casos y análisis comparativos.
• Al menos un examen parcial y un examen final.

Bloque 1: Fundamentos de Interfaces Web

🔺 RA1: Introducción a HTML5 y CSS3

Lectura sobre la estructura básica de una página web, etiquetas principales de HTML y uso de CSS para estilos.

🔺 RA2: Explicación tutorial de estructura web

Explicación que explica la construcción de una página web simple y la correcta organización de archivos HTML y CSS.

🔺 RA3: Actividad práctica de página personal

Crear una página web personal con HTML y CSS aplicando estilos básicos y buenas prácticas.

🔺 RA4: Buenas prácticas de accesibilidad y usabilidad

Lectura sobre cómo mejorar la accesibilidad de la página web y los principios de usabilidad.

Bloque 2: JavaScript y Manipulación del DOM

🔺 RA5: Introducción a JavaScript

Lectura sobre los fundamentos de JavaScript, variables, operadores y estructuras de control.

🔺 RA6: Tutorial interactivo de DOM

Ejercicios prácticos para manipular elementos HTML desde JavaScript, incluyendo cambios de contenido y estilos.

🔺 RA7: Actividad práctica lista de tareas

Crear una lista de tareas interactiva que permita añadir, eliminar y marcar tareas como completadas usando DOM.

🔺 RA8: Eventos y manejo de formularios

Explicación que explica cómo capturar eventos y validar formularios con JavaScript.

Bloque 3: Frameworks de Interfaces (Vue.js)

🔺 RA9: Introducción a Vue.js y script setup

Tutorial sobre cómo configurar un proyecto en Vue.js usando la sintaxis <script setup> y conceptos básicos de componentes.

🔺 RA10: Componentes, props y eventos

Lectura sobre cómo crear componentes reutilizables, pasar información entre ellos y manejar eventos personalizados.

🔺 RA11: Actividad práctica con componentes

Construir un proyecto pequeño usando componentes Vue.js reutilizables.

🔺 RA12: Comunicación entre componentes y ciclo de vida

Explicación explicativo sobre cómo los componentes interactúan y su ciclo de vida dentro de Vue.js.

Bloque 4: Consumo de APIs

🔺 RA13: Conceptos de APIs y fetch

Lectura sobre qué es una API, cómo funciona y cómo obtener datos mediante fetch en JavaScript.

🔺 RA14: Tutorial de consumo de API pública

Ejercicio práctico consumiendo la API de Chuck Norris Jokes y mostrando resultados dinámicamente.

🔺 RA15: Actividad práctica de app dinámica

Crear una pequeña aplicación que muestre datos obtenidos de una API y permita interacción con el usuario.

🔺 RA16: Manejo de errores y promesas

Explicación que enseña a manejar errores y promesas al consumir APIs para asegurar la estabilidad de la app.

Bloque 5: Diseño Responsivo y Buenas Prácticas

🔺 RA17: Diseño adaptable y responsive

Lectura sobre cómo hacer interfaces que se adapten a diferentes tamaños de pantalla y dispositivos.

🔺 RA18: Media queries y frameworks CSS

Tutorial práctico usando media queries y frameworks CSS como Bootstrap o Tailwind.

🔺 RA19: Actividad práctica de adaptación de proyecto

Modificar un proyecto previo para que sea responsive y se vea correctamente en distintos dispositivos.

🔺 RA20: Buenas prácticas de UX/UI

Explicación sobre principios de diseño centrado en el usuario, consistencia y legibilidad.

Bloque 6: Proyecto Final Integrador

🔺 RA21: Planificación y diseño del proyecto

Lectura sobre cómo planificar, diseñar y organizar un proyecto completo integrando HTML, CSS, JavaScript y Vue.js.

🔺 RA22: Tutorial de integración de conocimientos

Explicación que guía la integración de todos los conceptos aprendidos en un proyecto funcional.

🔺 RA23: Actividad práctica: proyecto final

Desarrollo de un proyecto completo, por ejemplo, una Pokedex filtrable por tipo o una mini-app interactiva.

🔺 RA24: Evaluación del proyecto final

Revisión del proyecto final evaluando funcionalidad, diseño y calidad del código.

---

Usaremos Discord como método de comunicación de información sobre la asignatura y este curso. Podéis hablar por el chat cuando queráis y usar los canales de estudio con audio por si queréis estudiar en un mismo sitio.

La invitación al canal es la siguiente ➡️ https://discord.gg/tPwAgaZFk