26 de septiembre de 2014

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

Usabilidad, tan de moda hoy en día


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:

Accesibilidad, esa gran olvidada

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:

Responsive Web Design (Diseño Web Adaptable)

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:

LESS, un preprocesador CSS

En el apartado de LESS:
  • 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:

Bootstrap, un framework CSS

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:

0 comentarios:

Publicar un comentario