Recursos de mi curso de "Diseño de Interfaces #RWD #Usables y #Accesibles con #LESS y #Bootstrap" por @asanzdiego

Usabilidad, tan de moda hoy en día

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:

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:

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:

Veremos primero una breve introducción, contando qué es 'LESS' y cuales son sus principales ventajas.
Siguiendo con una explicación de las distintas formas con las que podemos trabajar con 'LESS'.
Después se hace un breve resumen de las principales características, entrando seguidamente a explicar con más detalle cada una de ellas: variables, extends, mixins, mixins paramétricos, mixins condicionales, merges, ...
Para terminar, se enumeran las distintas funciones que posee LESS, ya sean de numéricas, de texto o relacionadas con el color.

Recursos:

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: