Un par de ejemplos de diseño responsive

"Responsive web design" es un nuevo término que, aunque ya se lleva más de dos años hablando de él en el mundo del desarrollo web, en los últimos meses ha cobrado mucha más fuerza.

Al español se podría traducir como diseño web sensible, pero como con cualquier neologismo, es mejor esperar un poco y ver qué termino emplea el público español. En pocas palabras (próximamente quiero publicar una entrada sobre este tema), el diseño web sensible consiste en ofrecer sitios web con diferentes diseños según el dispositivo que utilice el usuario.

Un par de ejemplos:

• El sitio web Fluid Squares v2. A responsive grid experiment, emplea esta técnica: además de cambiar el número de columnas (esto es algo normal en cualquier diseño líquido y se lleva empleando muchos años), donde se aprecia realmente que es un diseño sensible es en el cambio del tamaño del texto y el cambio en la imagen. Por cierto, son muy interesantes todos los enlaces que contiene esta página.
• En mi página de promoción del curso Introducción a la accesibilidad web, he aplicado un diseño sensible al tamaño de la ventana del navegador y ofrezco tres visualizaciones distintas:

Hasta 1024 píxeles de ancho:

 


Entre 1025 y 1600 píxeles de ancho:



Más de 1600 píxeles de ancho:

[Actualización 17/04/2012]

Un artículo muy interesante en el que se propone el término diseño web adaptable: Diseño web sensible. ¿¿¿Sensible???

¿Qué navegadores usa la gente? (2011)

En la página web W3Counter - Global Stats, W3Schools Browser Statistics  y StatCounter se ofrecen estadísticas de uso de los navegadores, resoluciones de pantalla, sistemas operativos y otras categorías.

Respecto a los navegadores, los datos que ofrecen estos tres sitios sobre su uso son (datos de octubre de 2011):

W3Counter

• Internet Explorer 34.3%
• Firefox 26.2%
• Google Chrome 22.2%
• Safari 6.4%
• Opera 2.4%

W3Schools

• Internet Explorer 21.7%
• Firefox 38.7%
• Google Chrome 32.3%
• Safari 4.2%
• Opera 2.4%

StatCounter

• Internet Explorer 40.2%
• Firefox 26.4%
• Google Chrome 25%
• Safari 5.9%
• Opera 1.8%
  

Como se puede ver, afortunadamente ya están muy lejos aquellos años en los que Internet Explorer llegó a casi tener un 90% de la cuota de mercado.

En W3Counter y en StatCounter, el primer navegador es Internet Explorer, mientras que en W3Schools el primer navegador es Firefox e Internet Explorer pasa a la tercera posición. ¿A qué se debe esta discrepancia tan acusada? Hay una explicación bien sencilla: W3Counter y StatCounter son estadísticas calculadas a partir de cualquier tipo de sitio web (son contadores que cualquiera puede poner en cualquier sitio web), mientras que las estadísticas de W3Schools están basadas en sus propios registros de acceso y W3Schools es un sitio web con un público muy concreto, usuarios interesados en el desarrollo web que normalmente utilizan "buenos navegadores" en vez del navegador que viene preinstalado con el sistema operativo.

Es muy interesante la gráfica que nos ofrece el sitio web StatCounter, en la que se muestra la evolución del "share" (la cuota) de los cinco navegadores más populares desde octubre de 2010 hasta octubre de 2011:

Como se puede ver en el gráfico, la cuota de Internet Explorer ha descendido de un 50% a un 40%, la cuota de Firefox ha descendido de un 31% a un 26%, y estos dos descensos han sido cubiertos de forma asombrosa por Google Chrome, el útlimo navegador en llegar, que ha duplicado su cuota en un año, pasando de un 12% a un 25%. De seguir así, en breve superará a Firefox. Respecto a Safari y Opera, su comportamiento es el mismo que en años anteriores: su porcentaje de usuarios varía poco.

Estadísticas de años anteriores:

• ¿Qué navegadores usa la gente? (2010)
• ¿Qué navegadores usa la gente? (2009)
• ¿Qué navegadores usa la gente? (2008)
• ¿Qué navegadores usa la gente? (2007)

Las diferencias entre el diseño inclusivo y la accesibilidad

Hace unos días publiqué la entrada Los 10 principios del diseño web inclusivo en la que me hacía eco del artículo The 10 principles of inclusive web design. Parece que el arículo original causó mucha discusión y la autora ha publicado un nuevo artículo, The difference between Inclusive Design and Accessibility.

La verdad es que después de leerlo un par de veces no me ha quedado del todo claro. El último párrafo del artículo dice:

Accessibility requires access to be provided, but access alone is not always enough to make a website useful. Inclusive means that as many people as possible and importantly as many as are reasonably practicable are included. Included, considered, respected and with equal rights from the get go.

Traducido al español:

La accesibilidad conlleva garantizar el acceso, pero el acceso por sí solo no siempre es suficiente para lograr que un sitio web sea útil. Inclusivo significa que tantas personas como sea posible y más importante, tantas como sea razonablemente factible son incluidas. Incluidas, tenidas en consideración, respetadas y con igualdad de derechos desde el principio.

El futuro de los interfaces de usuario

Me acaba de llegar el artículo The Future of Human Computer Interfaces que muestra 10 prototipos o ideas  que están desarrollando en el MIT Media Lab. Desgraciadamente, todos ellos me parecen muy visuales, muy gestuales, y con problemas de accesibilidad para diferentes grupos de usuarios. No he visto ningún dispositivo que ayude claramente a mejorar la accesibilidad.

El vídeo musical de las WCAG

Bueno, el vídeo WCAG 2.0 Theme Song Web Content Accessibility Guidelines - Disability es un poco "inclasificable", aunque si se ve con una mente abierta puede llegar a ser gracioso.

Lo más interesante del vídeo es que se pueden ver algunos usuarios con sus tecnologías de apoyo (ayudas técnicas).

El Gremio de los Diseñadores Web Accesibles

El sitio web Guild of Accessible Web Designers es una asociación internacional de organizaciones, diseñadores y desarrolladores que tienen como objetivo principal promover el uso de los estándares de diseño accesible.

Parece que este sitio web no ha tenido mucha actividad durante el último año. Lo más interesante de este sitio web es que se pueden revisar diseños accesibles realizados por sus miembros. Además, existe un pequeño curso gratuito sobre accesibilidad web llamado Introduction to WCAG AA self-study training course.

Día Mundial de la Usabilidad

El próximo martes 8 de noviembre de 2011 se celebrará el Día de la Usabilidad.
En Buenos Aires, el Movimiento Diseño Inclusivo celebra este día organizando unas conferencias sobre usabilidad y accesibilidad.
Las conferencias sobre accesibilidad web son:

• Web abierta y accesible con Mozilla Firefox
• Incorporando Accesibilidad en el proceso de desarrollo de software y sitios web
• Accesibilidad web: Estado de los estándares y regulaciones alrededor del mundo
• Web Móvil ¿Inclusiva y accesible?

A continuación, el anuncio oficial:

¿Es posible diseñar una Web más inclusiva? Que gobiernos, empresas, instituciones e individuos diseñen y construyan sus sitios web asegurando que cualquier persona pueda acceder a ellos.

Estamos seguros de que es posible. Por eso, el Movimiento de Diseño Inclusivo invita a todos este martes 8 de noviembre a celebrar el Día Mundial de la Usabilidad en Buenos Aires.

El objetivo es que cada vez más personas puedan acceder a la información, los productos, los servicios y los entornos, independientemente de las limitaciones propias del individuo o de las derivadas del contexto de uso.

Exponen profesionales expertos de las áreas de las tecnologías de la información, el diseño y la comunicación.

La inscripción cuesta $ 35 e incluye un certificado de asistencia.

Control mental en la Universidad de Minnesota

En el periódico El Mundo han publicado la noticia Piensa a dónde quieres que vaya y allí ira. Según la noticia:

Científicos de la Universidad de Minnesota (EEUU) han diseñado un interfaz cerebro-ordenador que permite controlar el vuelo de un helicóptero con la mente.

[...]

El sistema no es invasivo -se trata de un 'gorro' que recoge las ondas cerebrales- y que el control de la nave se realizó en tres dimensiones.

"Un interfaz ordenador-cerebro es un sistema que interpreta los pensamientos del usuario para producir comandos que controlen un ordenador o un dispositivo", explican los responsables del estudio.

[...]

La teoría dice que gracias a estos sistemas se podrían mover objetos con la mente, como una prótesis, una silla de ruedas o un helicóptero.
De momento, las cosas no están tan avanzadas como para hacer que nuestra vida funcione mientras estamos sentados en el sofá, pero ya ha habido pequeñas conquistas en este ámbito del control mental. Por ejemplo, DARPA -una división del Pentágono que se dedica a la ciencia más cercana a la ficción- tiene un programa bastante avanzado de control de prótesis.

Lo más reseñable, según los investigadores, son los esfuerzos para hacer que los sistemas no invasivos se aproximen lo más posible a los invasivos, que "presentan varios grados de riesgo asociados con su implantación [en el cerebro]" y que hacen que sean "practicables sólo en casos en los que la habilidad motora está muy limitada y otros métodos de comunicación son inviables".

[...]

El interfaz diseñado por su equipo consta de un sistema montado en una especie de gorro que lee el ritmo sensoriomotor del cerebro, que después es interpretado y calibrado para controlar los movimientos del helicóptero en una pantalla. Gracias a él, las participantes 'pilotaron' el aparato de forma ininterrumpida a través de los aros virtuales con un éxito del 85%.

Más información: Continuous Three-Dimensional Control of a Virtual Helicopter Using a Motor Imagery Based Brain-Computer Interface.

Conferencia de la W3C

El W3C organiza la W3 Conference 2011: Practical Standards for Web Professionals. Tendrá lugar los días 15 y 16 de noviembre de 2011 en Redmond, Washington (EE.UU.). Para el que no lo sepa, en Redmond se encuentra el cuartel general de Microsoft. ¿Coincidencia?

Las presentaciones de la conferencia se transmitirán en vivo (live streaming) a través de Internet y estarán subtituladas en inglés. Además, luego serán archivadas para poder ser accedidas en cualquier momento.

El miércoles 16 a las 10:05 habrá una sesión sobre accesibilidad web (el que lo quiera ver, que calcule la hora que será en España, ya que Redmond está en la costa oeste de Estados Unidos):

Universal Access: A Practical Guide to Accessibility, ARIA, and Script
Becky Gibson (IBM)
10:05am - 10:50am

Por último, al final de la página aparece una explicación de las características novedosas de HTML5, CSS y otras tecnologías que han empleado en la creación de la web.

El antes y después de un sitio web accesible

El W3C ha publicado el sitio web Before and After Demostration que muestra cómo un sitio web no accesible se puede convertir en accesible. El sitio web está compuesto por cinco páginas, y para cada una se incluye la versión no accesible y la versión accesible, junto con comentarios que explican los cambios realizados.

Inclusite

Inclusite es un sistema desarrollado por una empresa española radicada en Valencia que permite dotar a un sitio web de interfaces accesibles que se adaptan a las necesidades de diferentes usuarios. La principal ventaja de este sistema es que se puede emplear desde cualquier ordenador sin tener que instalar ningún tipo de software adicional.

El sistema funciona modificando de forma transparente el etiquetado de una página web al incorporar una serie de etiquetas y atributos propios que luego son interpretados en el navegador para ofrecer un interfaz mejorado.

Hoy se ha anunciado que la web de Radiotelevisión Valenciana se ha hecho completamente accesible gracias a este sistema: La web de Radiotelevisión Valenciana logra hacerse completamente accesible. Habrá que ver si es verdad, porque, por ejemplo, me pregunto si todos los vídeos que contiene esta web han sido subtitulados y se ha incluido su transcripción a texto. Porque, si no es así, entonces no se puede decir que la web sea completamente accesible.

El siguiente vídeo explica con más detalle qué y cómo se utiliza Inclusite:

Legislación sobre accesibilidad web en España

He publicado el vídeo Accesibilidad web: Legislación en España en el que resumo las principales leyes, decretos y normas que existen en España en materia de accesibilidad web:

Otro centro en el que investigan el control mental del ordenador

Cada vez aparecen en los medios de comunicación más noticias sobre avances para lograr un sistema que permita controlar el ordenador con la mente o el pensamiento. Es un tema del que he escrito muchas veces, como por ejemplo Situación actual del control mental del ordenador, Otros que se apuntan al control mental del ordenador. Para las personas con algunos tipos de discapacidad, un sistema así les podrá cambiar completamente la vida.

Ahora acabo de leer el artículo Mind Reading Computer System May Help People With Locked-in Syndrome. Según la noticia, en el Center of Excellence for Learning in Education, Science and Technology (CELEST), están desarrollando un prototipo que permite a personas sin movilidad controlar un cursor en la pantalla de un ordenador.

Además, la noticia también está acompañada de un vídeo (en inglés):

Tech Ease - Web Accessibility

El sitio web Tech Ease, de la University of South Florida, ofece la sección Web Accessibility con un conjunto impresionante de articulos dedicados a la accesibilidad web.

Muchos de los artículos están dedicados a cómo implementar la accesibilidad con Dreamweaver (por ejemplo, Dreamweaver Accessibility Preferences for Images o Making Text Easier to Read with Dreamweaver), pero otros artículos son genereales (por ejemplo, Benefits of Web Accessibility o Web Accessibility Myths).

La mayoría de los artículos tienen vídeos explicativos en formato QuickTime.

Los 10 principios del diseño web inclusivo

El artículo The 10 principles of inclusive web design proporciona 10 consejos que nos pueden ayudar a lograr un diseño web inclusivo. ¿Qué es un diseño web inclusivo? El diseño web inclusivo considera las necesidades de la más amplia variedad posible de personas en todo el proceso de diseño, desde la conceptualización hasta la planificación, la construcción y la terminación del sitio web.

Los consejos son:

1. Se equitativo (Be equitable).
2. Se ​​flexible (Be flexible).
3. Se simple e intuitivo (Be simple and intuitive).
4. Se perceptible (Be perceptible).
5. Se informativo (Be informative).
6. Se preventivo (Be preventative).
7. Se tolerante (Be tolerant).
8. Sin esfuerzo (Be effortless).
9. Se complaciente (Be accommodating).
10. Se consistente (Be consistent).

Además, en el artículo el autor explica cómo ha aplicado estos principios en el desarrollo de dos sitios web que tenían que tener en cuenta especialmente a los usuarios con algún tipo de discapacidad.

Diccionario informático en lengua de signos española

La Universidad Politécnica de Madrid ha creado el primer Diccionario informático en lengua de signos española.

En agosto de 2011 ya se presentó este diccionario en la Universidad Internacional Menéndez Pelayo (El primer diccionario de informática para sordos), pero parece que aquello fue un adelanto y ahora sí que ha sido presentado definitivamente: Primer diccionario español de informática para sordos signantes.

Por último, la misma noticia contada en Diario Signo, La informática es más accesible para las personas sordas, que incluye vídeo con explicación en lengua de signos.

Mejora de la accesibilidad del nuevo iPhone 4S

El año pasado escribí la entrada El iPhone 4 mejora su accesibilidad en la que comentaba las mejoras que incorporaba el nuevo iPhone 4 que mejoraban su accesibilidad. Para muchas personas, puede parecer bastante sorprendente que un teléfono con pantalla táctil pueda ser accesible para las personas ciegas, pero es así.

Hace poco ha salido a la luz el nuevo iPhone 4S y, al igual que el año pasado, las características accesibles han vuelto a mejorar. En el artículo New iPhone a breakthrough for blind people nos cuentan algunas de sus mejoras.

Según la noticia, el iPhone es el único teléfono que puede ser usado por los usuarios ciegos directamente, tal como viene de fábrica, sin tener que instalar ningún software adicional. El iPhone 3GS, que salió a la venta en el año 2009, incorporaba por primera vez el lector de pantallas VoiceOver.

El nuevo iPhone 4S incorpora el asistente Siri que permite al usuario emplear comando de voz para controlar el teléfono.

Además, existen numerosas aplicaciones (apps) que ofrecen funciones ingeniosas que pueden ayudar a las personas con discapacidad. Por ejemplo, la aplicación LookTel Money Reader es capaz de identificar el tipo y el valor de casi cualquier billete de banco: sencillamente, el billete se pone delante de la cámara de vídeo y este software de reconocimiento visual identifica el tipo y el valor del billete.

En el siguiente vídeo lo podemos ver en funcionamiento, realmente asombroso:

Curso Introducción a la accesibilidad web

En noviembre de 2011 voy a impartir (si se apuntan alumnos) un curso introductorio a la accesibilidad web.

El curso son 30 horas presenciales más 90 horas de trabajo personal guiado. El curso cuesta 300€ y el importe de la matricula se destinará íntegro a una donación para Médicos Sin Fronteras.

Si el curso tiene éxito, tengo preparado otro, una segunda parte, sobre evaluación de la accesibilidad de sitios web.

He preparado un vídeo para promocionar el curso:

Recuperar la visión después de muchos años no siempre es bueno

Interesante artículo publicado en el periódico El País (sí, el periódico que ni contesta a mis correos ni cambia los colores de su página): La controvertida experiencia de recuperar la visión.

Resulta que hay personas que han podido recuperar la visión (por ejemplo, gracias a un trasplante de córnea o a una retina artificial), y los resultados no han sido muy satisfactorios, sino todo lo contrario:

Para una persona que ha sido ciega desde su nacimiento o en sus primeros años y no ha visto durante décadas la experiencia de volver a ver podría resultar incómoda e, incluso, realmente dramática.
[...]
Debido a todo lo anterior, la recuperación de la visión puede ser algo que provoque una gran confusión a personas que han sido ciegas desde sus primeros años, como si ante ellos se abriera un mundo nuevo que rompe con todos sus "esquemas" cerebrales. Un mundo para el que no se habían adaptado ni habituado. No es de extrañar, por tanto, que entre los casos descritos en la literatura científica sobre ciegos tempranos que recuperaron la visión, tras mucho tiempo, encontremos frecuentes casos de depresión e, incluso, de suicidio.

Seguimiento de este blog mediante correo electrónico

Varios lectores de este blog me han pedido recibir mediante correo electrónico las actualizaciones que se produzcan. Por ello he añadido en el panel de la derecha la opción "Recibe en tu correo electrónico las actualizaciones".

Según indica el sistema (feedburner, que ahora es de Google), se enviará como máximo un correo electrónico al día con las actualizaciones de contenido.