DIW - Diseño de Interfaces Web

Estos son los apuntes de DIW MP0615 - Deseño de Interfaces Web (DIW) que se imparte en el segundo curso del ciclo DAW - Técnico Superior en Desarrollo de Aplicaciones Web

El currículum MP0615 - Deseño de Interfaces Web (DIW) define una duración de 157h y 9 ECTS (270 h máx). Trato de organizar los contenidos como si fueran 8 cursos independientes, de entre 20 y 30 horas de esfuerzo (sí, salen más de 157h).

¿Qué voy a aprender?

Se trabajan los elementos y conceptos de la interfaz en la interacción entre el usuario (generalmente una persona) y la aplicación web. En concreto estos tres objetivos:

1. Entender los elementos de una interfaz, gráfica o no en su relación con el usuario

2. Desarrollar interfaces pensando en el usuario final usando una estructura de documento coherente y con estilos

3. Comenzar a usar los conceptos de usabilidad y accesibilidad en el diseño de interfaces

Unidades Didácticas y Sesiones de Clase

En el curso 2022/2023 trabajamos los siguientes temas (el último opcional):

• 1. Diseño para personas
  • 1.1. Piensa en el usuario
  • 1.2. Usabilidad
  • 1.3. Accesibilidad
  • 1.4. Guías de usabilidad
  • 1.5. Test de Usuarios
  • 1.6. Diseñar una Web
  • 1.7. Verificación de Sitios Web
  • 1.8. Posicionamiento en Buscadores (Técnicas SEO)
• 2. Crear un sitio web (básico)
  • 2.1. Escribiendo en la Web
  • 2.2. Organizando un sitio web
  • 2.3. Planifica tu sitio web
  • 2.4. Desarrolla tu sitio web
  • 2.5. Calidad de tu sitio web
  • 2.6. Mejora tu sitio Web
  • 2.7. Publica tu sitio Web
  • 2.8. Uso de GitHub Pages (por ejemplo)
• 3. Añadir estilo a un sitio web
  • 3.1. El Lenguaje CSS
  • 3.2. Conceptos Importantes
  • 3.3. Texto y Enlaces
  • 3.4. Listas y Tablas
  • 3.5. Modelo de Caja
  • 3.6. Posicionamiento Básico
  • 3.7. Layout Básico (Presentación)
  • 3.8. Prueba tu diseño
• 4. Maquetación Web
  • 4.1. Profundizando en CSS
  • 4.2. Reglas @ (At-rule)
  • 4.3. Estilos de Texto
  • 4.4. Estilos de listas
  • 4.5. Maquetación CSS
  • 4.6. Tres estrategias de maquetación
  • 4.7. Responsive Design Web (RDW)
  • 4.8. ¿Cómo se maqueta una página Web?
• 5. Generación estática de sitios web
  • 5.1. Static Site Generators
  • 5.2. Uso de Sphinx para generar un sitio web
  • 5.3. Escribir web con reStructured Text
  • 5.4. Directivas y Roles
  • 5.5. Organizar un sitio web con Sphinx
  • 5.6. Uso de Temas y Estilos con Sphinx
  • 5.7. Hosting web estático con control de versiones
  • 5.8. Hosting web y código fuente SSG
• 6. Creación de Contenido Multimedia
  • 6.1. Formatos de Imagen
  • 6.2. Edición de Imágenes
  • 6.3. Formatos de Audio
  • 6.4. Formatos de Video
  • 6.5. Contenedores Multimedia
  • 6.6. Clientes Multimedia
  • 6.7. Edición de audio y video
  • 6.8. Patentes, Derechos de Autor y Licencias
• 7. Integración de Contenido Multimedia
  • 7.1. Imágenes en HTML
  • 7.2. Uso de SVG
  • 7.3. Iconos
  • 7.4. Uso de Canvas API
  • 7.5. Interacción usando Eventos
  • 7.6. Video y Audio en HTML
  • 7.7. Usando APIs para Audio y Video
  • 7.8. Incrustando Contenido
• 8. Frameworks CSS
  • 8.1. Introducción
  • 8.2. El Framework Bootstrap
  • 8.3. Añadiendo Contenido
  • 8.4. Maquetando la web
  • 8.5. Formularios
  • 8.6. Utilidades
  • 8.7. Componentes (5 ejemplos)
  • 8.8. Componentes (y otros 5)

Evaluación

Siguiendo mi Estrategia de evaluación la ponderación será:

1. 45%. Sobre al menos 8 exámenes tipo test de contenido tanto teórico como práctico

2. 45%. Sobre al menos 8 exámenes con ejercicios prácticos

3. 10%. Sobre el trabajo general en el módulo