Transparencias sobre #Bootstrap, un framework CSS

Hoy os voy a enlazar las transparencias sobre 'Bootstrap' (un framework CSS) que he realizado para un Curso de Diseño de Interfaces Responsive Web Design Usables y Accesibles con Less y Bootstrap que he impartido en septiembre:

1. Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
2. Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
3. Continúo explicando las facilidades que tiene para realizar diseños adaptables.
4. Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
5. Para terminar, comento 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.

Transparencias sobre #LESS, un preprocesador CSS

Hoy os voy a enlazar las transparencias sobre 'Less' (un preprocesador CSS) que he realizado para un Curso de Diseño de Interfaces Responsive Web Design Usables y Accesibles con Less y Bootstrap que he impartido en septiembre:

1. Empiezo con una breve introducción, contando qué es 'Less' y cuales son sus principales ventajas.
2. Sigo explicando las distintas formas con las que podemos trabajar con 'Less'.
3. En tercer lugar, hago 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, ...
4. Para terminar, enumero las distintas funciones que posee, ya sean de numéricas, de texto o relacionadas con el color.

Transparencias sobre #RWD 'Responsive Web Design' (Diseño Web Adaptable)

Hoy os voy a enlazar las transparencias sobre 'Responsive Web Design' (Diseño Web Adaptable) que he realizado para un  Curso de Diseño de Interfaces Responsive Web Design Usables y Accesibles con Less y Bootstrap que he impartido en septiembre:

1. En primer lugar hago una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cuento la diferencia entre 'Graceful degradation' y 'Progessive enhancement'.
2. Seguidamente, expongo varios ejemplos de sitios web realizados con esa filosofía.
3. Luego entro más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries.
4. Para terminar enumero las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'.

Transparencias sobre #accesibilidad #web (esa gran olvidada)

Hoy voy a enlazaros las últimas transparencias sobre accesibilidad web que estoy realizando para un  Curso de Diseño de Interfaces Responsive Web Design Usables y Accesibles con Less y Bootstrap que voy a impartir ahora en septiembre:

1. Primero empiezo con una breve introducción sobre accesibilidad web: objetivos, WAI, WCAG, etc.
    
2. Después enumero las directrices POUR: Perceptible, Operable, Comprensible, Robusto
    
3. Luego cuento los mitos de la accesibilidad web y los beneficios que obtenemos siguiendo las pautas de accesibilidad web.
    
4. Seguidamente, enumero los problemas de discapacidad, e intento mostrar cómo navegan los usuarios con dichas discapacidades.
    
5. También enumero los dispositivos hardware y software que los usuarios con discapacidad suelen utilizar.
    
6. Continúo contando 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.
    
7. Acto seguido, muestro 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.
    
8. Para terminar enumero ciertas herramientas que nos pueden ser útiles para validar la accesibilidad web.

Transparencias sobre #usabilidad #web (tan de moda hoy en día)

Hoy voy a enlazaros las últimas transparencias sobre usabilidad web que estoy realizando para un  Curso de Diseño de Interfaces Responsive Web Design Usables y Accesibles con Less y Bootstrap que voy a impartir en septiembre:

1. Primero defino varios términos importantes: usabilidad, accesibilidad, arquitectura de la información, experiencia de usuario y diseño centrado en el usuario.
    
2. Luego intento que el lector conozca al usuario, saber como ve, como piensa y como actúa.
    
3. Después intento explicar como evitando que el usuario cometa errores, y simplificando el diseño, podemos mejorar la usabilidad.
    
4. También muestro 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.
    
5. 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.
    
6. Para terminar propongo varios ejercicios para realizar en clase en grupos de 3/4 personas.