En el apartado de usabilidad:
- Primero se definen varios términos importantes: usabilidad, accesibilidad, arquitectura de la información, experiencia de usuario y diseño centrado en el usuario.
- Luego se intenta conocer al usuario de aplicaciones web, saber como ve, como piensa y como actúa.
- Después se intenta explicar como evitando que el usuario cometa errores, y simplificando el diseño, podemos mejorar la usabilidad.
- También se muestra la metodología del diseño centrado en el usuario, que se compone de varias fases: planificación, diseño, prototipado, evaluación, implementación y lanzamiento, y mantenimiento y seguimiento.
- Seguidamente comento los principios de usabilidad y las técnicas de evaluación: card-sorting, evaluación heurística, test de usuarios, eye-tracking, feedback, analítica web, tests A/B.
Recursos:
En el apartado de accesibilidad:
- Primero veremos una breve introducción sobre accesibilidad web: objetivos, WAI, WCAG, etc.
- Después se enumeran las directrices POUR: Perceptible, Operable, Comprensible, Robusto
- Luego se habla de los mitos de la accesibilidad web y de los beneficios que obtenemos siguiendo las pautas de accesibilidad web.
- Seguidamente, se enumeran los problemas de discapacidad, y se intenta mostrar cómo navegan los usuarios con dichas discapacidades.
- También se listan los dispositivos hardware y software que los usuarios con discapacidad suelen utilizar.
- Después se explican de una forma general los desafíos de las personas con discapacidad y las posibles soluciones, enumerando justo después los principios claves a tener en cuenta cuando desarrollamos una aplicación web.
- Acto seguido, se muestran trucos y códigos de ejemplo de los elementos más importantes a tener en cuenta: imágenes y animaciones, mapas de imagen, elementos multimedia, enlaces, organización de las páginas, figuras y diagramas, scripts, frames, tablas, formularios y elementos repetitivos.
- Para terminar se enumeran ciertas herramientas que nos pueden ser útiles para validar la accesibilidad web.
Recursos:
En el apartado de Responsive Web Design:
- Veremos en primer lugar una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cual es la diferencia entre 'Graceful degradation' y 'Progessive enhancement'.
- Seguidamente, se exponen varios ejemplos de sitios web realizados con esa filosofía.
- Luego se entra más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries.
- Para terminar se enumeran las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'
Recursos:
En este apartado:
- Veremos primero una breve introducción, contando qué es 'SASS' y cuales son sus principales ventajas.
- Siguiendo como instalar y ejecutar 'SASS'.
- Después se hace un breve resumen de las principales características: variables, extends, mixins, imports, ....
Recursos:
En el apartado de Bootstrap:
- Veremos primero qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
- Luego veremos las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
- Después se muestran las facilidades que tiene para realizar diseños adaptables.
- Seguidamente se enumeran los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
- Y para terminar, se comenta como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros LESS del core.
Recursos: