Webmaster Libre

Eclipse, bien con algún plugin bien con alguna versión como Aptana, se ha convertido en una de las herramientas más utilizadas por los desarrolladores web.
Como ya sabéis, gran parte de la gracia está en esa cantidad de plugins que lo convierten en una herramienta versátil y potente.

Revisando un poco mis favoritos del mes pasado (o anterior, perdonadme pero todavía no me he organizado con tanto evento y tanta historia) he recordado que os queria hablar de un plugin para Eclipse que promete ser más que práctico.

Webelo es un conjunto de herramientas para testear la accesibilidad de nuestros sitios desde el mismo entorno de desarrollo. Viene con un juego de reglas que comprobará nuestros desarrollos contra las Lista de Control de Accesibilidad de IBM.

Aún es un componente joven, en su versión 0.1.0, pero promete así que si usáis eclipse o derivados ya estáis tardando en instalarlo.

Webelo: http://www.eclipse.org/actf/downloads/components/webelo/index.php

Vía Estándares y Accesibilidad

Me entero, vía Menéame, de un nuevo avance en el campo de la experiencia de usuario. Esta vez expertos en informática y marketing del Insituto Tecnológico de Massachusetts (MIT) se han unido para desarrollar una herramienta que permita personalizar los sitios, por ahora de e-commerce, de acuerdo a los patrones cognitivos del usuario.

Dicho de modo simple, el software detectará si eres de los que prefiere imágenes o sólo texto, si necesitas ser acompañado durante todo el proceso o te gusta más ir por libre, si eres o no impulsivo o si prefieres escuchar a leer. Con esta información, derivada de la actividad que hayas desarrollado durante tus primeros minutos en el sitio, se te ofrecería la información de la forma más cómoda para tí.

El concepto de personalizar un sitio web no es nuevo, por supuesto, pero con este software podría ser automático, ahorrándonos tiempo y facilitándoles las cosas a los usuarios menos tecnológicos.

Para desarrollar el software se han llevado a cabo diferentes tests con usuarios reales, 835 usuarios de BT en el Reino Unido, demostrándose un ligero incremento en las ventas. Pero, como hasta que no esté generalizado su uso en internet no sabremos realmente su funcionalidad, espero ansiosa tener noticias de como se desenvuelve el banco japonés Suruga.

Desde el MIT nos indican que además de por sus patrones cognitivos, plantean estudiar las diferencias culturales de los usuarios.

Por supuesto, como en todo lo que atañe a marketing y conducta humana, me produce cierto sentimiento encontrado; no sé si me parece correcto que se catalogue a las personas como base para atacar a sus puntos débiles y hacerles comprar. No obstante puede suponer un gran avance en lo que a penetración del comercio electrónico entre la población menos tecnológica se refiere, al ofrecerles un entorno menos hostil en el que realizar sus compras.

Más información:

Tendencias 21: Una herramienta permite que una web cambie en función del usuario

Web Morphing (pdf, en inglés): http://web.mit.edu/hauser/www/Papers/Hauser_Urban_Liberali_Braun_Website_Morphing_May_2008.pdf

Seguramente debido a que muchos de nosotros, los que trabajamos en la web, somos autodidactas o a que es un medio en constante movimiento, donde quedarse desfasado es cuestión de meses, la principal fuente de aprendizaje e inspiración a la que todos recurrimos es la observación. Esto hace que, en ocasiones, nos pasemos de unos a otros ciertas malas costumbres. Algunas incluso consideradas comúnmente como buenas soluciones cuando no lo son.

Andy Rutledge desmonta un par de layouts muy comunes (el de tres columnas con el contenido en el centro y el típico de los periódicos online) demostrándonos por qué son erróneos y ofreciéndonos algunas soluciones. No os lo perdáis, seguro que os sorprendéis mucho.

Killing Some Bad Layout Conventions

A veces, cuando vemos esos sitios y aplicaciones web que amasan millones pensamos ¿por qué ellos y no yo?.
En la mayoría de ocasiones no valoramos cuanto trabajo lleva conseguir un sitio de éxito, pensamos que es todo sencillo y que la mayoría viene dado.

Pero, claro, un desarrollo exitoso depende de tantos factores que no se ven, que se asemeja a un iceberg.

La parte visible la forman el contenido y su imagen, por debajo viene lo importante: buena programación, una planificación consciente, usabilidad, accesibilidad, optimización…

Todo ello conforma un sitio de éxito, un buen diseño con grandes contenidos a los que nadie puede acceder, que son difíciles de comprender o que no funcionan correctamente, no sirve de nada.

Via iGeek

Hace ya mucho tiempo traduje un artículo que hablaba de las ventajas de utilizar “texto oculto” específico para usuarios de lectores de pantalla. Sin duda, cuando traducía aquello podía verle uso para ocultar los labels de los formularios, sustituir texto por imágenes y poco más. Pero hoy, gracias a la pequeña selección de enlaces de CSS Tricks he descubierto una forma inteligente de añadir una capa más de atención para los usuarios discapacitados.

David Walsh comparte con nosotros una gran idea. Incluye un párrafo de texto oculto con css al principio de la página, que contiene un mensaje para usuarios de lectores de pantalla, algo así (obviamente, traducción libre libre):

<p class="oculto">Bienvenido a mi sitio.
Este sitio ha sido creado para todo tipo de usuarios.
Por favor contacta conmigo en xx@xx.xx si encuentras alguna
dificultad al navegar por él.</p>

Por supuesto no sirve de nada si nuestra página es un infierno de tablas y código inaccesible pero es un pequeño detalle agradable y práctico al llamar la atención de todos aquellos usuarios que hayan encontrado dificultades para navegar el sitio, con lo que podremos mejorarlo.

Eso si, no abuséis del texto oculto. Puede llegar a ser molesto, en los comentarios del artículo de David alguien apunta a colocarlo tras un enlace de “saltar al contenido” para no forzar a nuestros usuarios a escuchar una y otra vez el “utilísimo aviso accesible” y me parece la solución ideal.
Ademas, aún albergo dudas sobre si Google podría penalizarte al ofrecer una versión “distinta” de la página para usuarios y arañas. Mi opinión es que no debería si no lo usamos para meter con calzador oncemil palabras clave pero visto lo puntilloso que se nos está volviendo…

Lo que lamento es que no cuento con el testimonio de ningún usuario de lectores de pantalla para saber de primera mano lo útil o molesto de un aviso de este tipo. Si conocéis alguien que pueda probar, por favor, compartid la experiencia.

Hace un mes aproximadamente conocíamos el nuevo API de Google para insertar gráficos en nuestros sitios web de forma sencilla. Con la euforia de la novedad creo que pocos reparamos en lo completamente “inaccesible” que era.

Chris Heilman miembro del grupo de Accesibilidad de Yahoo!, dio a conocer una técnica con la que generar gráficos de tarta a partir de una tabla y de esta forma permitir que los usuarios de navegadores convencionales vean la imagen y el resto accedan a una tabla de datos. Para ello simplemente tendremos que añadir un javascript al final del cuerpo de la página con lo que, de un tiro, mejoramos la accesibilidad de nuestros datos y conseguimos gráficos rápidos sin todo el lío del API.

Sin duda es un gran ejemplo de como todo puede ser más accesible con sólo proponérnoslo y sin implicar páginas especiales o molestias para los usuarios convencionales.

Supongo que jugando con los parámetros del API, las celdas de la tabla y el javascript podríamos basarnos en este ejemplo para crear otro tipo de gráficos. Si os animáis a hacer pruebas ¡no os olvidéis de contárnoslo!

Via Ajaxian

Sin duda, un aspecto fundamental para que nuestros sitios sean verdaderamente accesibles es el color. A pesar de que, salvo en aquel anuncio del Golf, las personas con ceguera al color han pasado bastante desapercidas, se trata de un trastorno bastante común.
A pesar de que estoy segura de que todos sabemos lo que es el daltonismo y procuramos no hacer juegos con el rojo y el verde, existen muchos otros tipos de ceguera al color, tanto parciales como totales.

Por eso esta herramienta que descubro a través de Xyberneticos puede resultarnos tremendamente útil. GrayBit nos propone una forma diferente de ver nuestro sitio web, en escala de grises, para que podamos comprobar si los contrastes de nuestros colores son suficientes aún para personas que no son capaces de verlos.

Aquí os dejo una captura de este sitio, sale bastante bien parado aun que, como en todo, siempre se puede mejorar.

Webmaster Libre en escala de grises

GrayBit: http://graybit.com/

La ceguera al color, en sus múltiples formas, es una enfermedad relativamente común (afecta a un 8% de los hombres)

Color Oracle te permitirá comprobar los esquemas de color de tus diseños, filtrando la pantalla para simular ceguera al color.

Color Oracle es freeware y existen versiones para Windows, Linux y Mac OS

Color Oracle: http://colororacle.cartography.ch

Seguro que si habéis creado alguna aplicación o sitio web sabréis la cantidad de horas que se pueden echar planificando y pensando cómo hacerlo más sencillo, usable y cómodo para nuestros usuarios.

A pesar de todo, los usuarios no son previsibles y no hay nada como observar su comportamiento ante el sitio para descubrir sus flaquezas y fortalezas. Con RobotReplay podrás grabar las sesiones de tus usuarios y visualizar su interacción con tus webs. Podrás registrar los movimientos de su ratón, cómo rellenan los formularios…

De momento es un servicio gratuito, a ver si dura…

RobotReplay: http://www.robotreplay.com/

Existen múltiples test y validadores para tu código que puedes emplear online, no obstante, si necesitas ir validando múltiples sitios puede ser laborioso ir acudiendo al sitio de cada herramienta.

Si hay una ventaja que hace destacar a Firefox sobre los demás navegadores (sin ánimo de polemizar, otros navegadores también tienen sus herramientas pero se salen de la perspectiva de este blog al no ser software libre) son sus extensiones.

Para todos los desarrolladores web, existen numerosas extensiones que nos ayudarán a validar y verificar nuestro código:

Validar nuestro HTML y CSS

HTML Validator:

HTML Validator te indicará si hay errores o advertencias de validación en tu código mediante un icono en la barra de estado.

Podrás acceder a los detalles de los errores mirando al código fuente de la página.

Esta extensión está basada en Tidy y OpenSP (SGML Parser).

Offline Page Validation:

Con Offline Page Validation podrás enviar cualquier página que estés visitando al servicio de validación del W3C incluso si son páginas locales, que requieran registro, etc.

CSS Validator

Valida tus hojas de estilo mediante el servicio del W3C

Comprobar la Accesibilidad

HERA

La “HERA-Extension” es una extensión para los navegadores de la familia Mozilla (Netscape, Firefox, Flock, Safari, etc.), que permite revisar online, en un solo clic, la página web que estemos visitando e incluso un marco de esa página (si los tiene), facilitando el uso y acceso a HERA.

TAW3 en un click

TAW3 en un click te permite comprobar la accesibilidad de las páginas que visites, utilizando el servicio TAW3 Online y las reglas WCAG 1.0

Colour Contrast Analyser

Con ella podrás comprobar que el contraste de los colores que has escogido para tu sitio web es adecuado para todos tus posibles visitantes

Fangs Screenreader Emulator

Te mostrará tus páginas de forma similar a como las interpreta un lector de pantalla

Firefox Accesibility Extension

Esta extensión está pensada para ser una ayuda en la navegación de personas discapacitadas pero los desarrolladors podemos utilizarla para comprobar si su desempeño es correcto

Herramientas “todo en uno”

Webdeveloper Toolbar

Entre sus múltiples posibilidades (de las que hablaremos en unos días en profundidad) está la de validar tus sitios locales y los sitios que visites, tanto su html y css, como su accesibilidad…

Total Validator

La extensión Total Validator, de la que ya hablamos por aquí, te permite realizar múltiples validaciones en un solo click

Checky

Valida HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hypervínculos, Metadata y más