Skip to content

lrlopez/curso-interfaces-web-2016

 
 

Repository files navigation

Curso de Diseño de Interfaces Responsive Web Design Usables y Accesibles con SASS 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:

SASS, un preprocesador CSS

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:

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:

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 41.5%
  • JavaScript 34.2%
  • CSS 24.2%
  • CoffeeScript 0.1%
  • Ruby 0.0%
  • Shell 0.0%