elclerigo!

Hoy voy a poner banda sonora también al día. Pongo dos clásicos cantando a la ciudad del viento , porque hoy ha sido un día que merece al menos dos canciones de semejante calibre.

Para calentar motores, La Voz nos deleita con My Kind of Town.

Y de poste a los míticos Blues Brothers y su, un poco largo, Sweet Home Chicago

Siento el tono melancólico de ambas canciones, pero la banda sonora tiene que acompañar al día. Si no la película pierde fuerza. 

Etiquetas: banda, sonora, frank, sinatra, my, kind, of, town, blues, brothers, sweet, home, chicago

Cuando queremos ocultar enlaces en nuestra página web para que las personas con dispacidad, que usan un lector de pantalla, puedan saltarse parte del contenido de nuestro sitio web como por ejemplo el menú es habitual pensar en lo más rápido y sensato: Recurrir a la CSS.

Más concretamente a la propiedad display, la cual nos permite modificar el comportamiento de nuestros elementos pudiendo convertirlos en elementos en linea, de bloque, en linea de tabla y por supuesto ocultarlos. Perfecto, colocamos a nuestro enlace una clase como la siguiente:

.screen-readers {display:none}

O en su defecto usar la propiedad visibility para ocultar sin perder su espacio físico en la pantalla. Quedaría de la siguiente manera:

.screen-readers {visibility:hidden}

O si queremos simular el efecto del display

.screen-readers {position:absolute; visibility:hidden}

Pero tal y como algunas investigaciones han mostrado la gran mayoría de los lectores de pantalla tiene muchos problemas con ambas propiedades, así pues nos encontramos con un pequeño reto. Una de las soluciones que más he visto es la de usar la propiedad text-indent (que sirve para dar sangría a la primera frase de cada párrafo) y ponerla en negativo. De la siguiente manera:

.screen-readers {
position:absolute //para que no ocupe espacio físico
text-indent:-1000em //para que la primera línea del párrafo salga fuera de la pantalla
}

Pero existe un problema con el text-indent en Internet Explorer 7 (¿quién si no?), no "saca" el texto de la pantalla y nos termina poniendo scroll horizontal en nuestra preciosa página web.

Es por ello que se plantea la siguiente solución al problema:

.screen-readers {
position:absolute; //para que no ocupe espacio físico
display:block; //para poder modificar las propiedades de caja del elemento
width:0; //para que no ocupe espacio
overflow:hidden; //para que todo el texto que salga fuera del tamaño del contenedor esté oculto
}

Con esto logramos todo, por una parte que los lectores de pantalla lo lea, por otra que Internet Explorer no haga cosas raras y por último que no ocupe espacio ni se vea en nuestro sitio web.

Espero que a la gente que se pelea con la accesibilidad le haya servido de algo.

Etiquetas: accesibilidad, screen, readers, display:none

Basándonos en el post anterior , y aprovechando el uso de la propiedad overflow, vamos a hacer un pequeño juego con las imágenes.

A menudo nos encontramos con páginas de ancho porcentual, o cuya anchura varía entre dos resoluciones. En este tipo de páginas nos podemos encontrar con que las imágenes permanecen con un tamaño fijo descuadrando toda la página cuando reducimos su tamaño.

Propongo incluir las imágenes dentro de un div con una clase específica, algo como:

(<)div class="img-resize"(>)(<)img src="/imagen.jpg" border="0" (/>)(</)div(>)
Los paréntesis son para que no lo interprete como codigo.

Y en la CSS utilizar la propiedad overflow para "adaptar" el tamaño de la imagen:

.img-resize {
min-width:410px;
max-width:542px;
overflow:hidden;
}

Al no redimensionar la imagen tenemos un inconveniente muy grave: a resolución baja nos oculta parte de la imagen. Esto puede ser problemático si la imagen contiene información esencial. Si no es así, es una cuestión de apariencia en la que deberemos valorar a que resolución nos interesa mostrar la imagen correctamente.

Por si os sirve podéis ver un ejemplo básico , y otro más complejo. Lo dicho, espero que le sirva a alguien.

Etiquetas: estándares, web, redimensionar, imagenes

Ando estos días en pleno proceso de creación de wireframes del sitio web de una nueva red inmobiliaria, y estoy teniendo un serio problema: no consigo quitarme a Idealista de la cabeza. Idealista es en estos momentos el mayor portal inmobiliario de España, con más de 230.000 anuncios (a 25 de Febrero) y más de 300.000 usuarios subscritos a su boletín de noticias. No tengo datos de sus visitas (1 millón mensuales según un artículo de ElPais.com 18/11/2007), pero viendo el número de anuncios, nos podemos hacer una idea aproximada de su tamaño. Por si esto no fuera suficiente, durante hace mucho tiempo sigo las andanzas de este portal a través del blog de su CEO, Jesús Encinar, en donde además de hablar del sector inmobiliario tiene la buena y sana costumbre de comentar los rediseños y mejoras del portal.

Supongo que todo ese material ha influido enormemente en mi subconsciente hasta el punto de considerar el buscador de inmuebles de Idealista como el mejor de su sector, ya que con únicamente dos clics (o tres) estaremos buscando un piso. Sin necesidad de rellenar ni un solo dato. A parte, las tres cajas seguidas, hacen muy pequeña la distancia entre los clics, mostrando todos los textos que el usuario desconoce, aumentando el área de clickado, y haciéndolo navegable mediante teclado; es un claro ejemplo de muy buen Diseño Centrado en el Usuario.

Durante estos días, me he centrado en crear un buscador, cuya interacción sea lo más intuitiva y simple posible. Que no requiera de casi ningún esfuerzo por parte del usuario para poder buscar el piso de sus sueños, y lo malo es que a pesar de luchar con todas mis fuerzas siempre termino en el mismo diseño. El diseño de Idealista. Intuyo que lo más fácil en este caso sería copiar el buscador. No reinventar la rueda. Ya lo dijo alguien: "Aplaudo que se rescate lo que funciona y comparto la idea de que no hay que reinventar la rueda; pero siento que tenemos la responsabilidad no de copiar lo bueno, sino de mejorarlo.".

Veo realmente complicado el poder mejorarlo, pero voy a seguir intentándolo, aunque tengo la extraña sensación de que terminaré usando el "copy&paste method" y escribiendo un mail de disculpa y agradecimiento al equipo de Idealista.

Etiquetas: inmobiliarias, idealista, diseño, interaccion, wireframes

El viernes estuve en el Parque Tecnológico de Walqa, en el laboratorio Aragonés de Usabilidad, en el Taller de Eye Tracking.  El taller consistió en un breve resumen introductorio al Eye Tracking y sus características, además de otro resumen a cargo de Torres Burriel de un post suyo, para luego analizar cómo varias personas veían unos anuncios y unas páginas web. Luego se hicieron dos test, uno en el que yo fui el conejillo de indias analizando la web de Apple.

Os dejo el vídeo de mi "Compra un Macbook Pro y una funda de colores". Y cómo compro una funda que no le vale al MacBook Pro (que te miren 25 personas pone un poco nervioso).

Más info: post del laboratorio aragonés de usabilidad  

Etiquetas: taller, eye, tracking, laboratorio, aragones, usabilidad, walqa

Quiero creer que esto es cosa de un programador despistado. ¿Veis algo raro en el título de la sección?

Etiquetas: error, programacion

Es viernes, estoy contento y me voy a echar una siesta terrible. Y en mi alegría me acompañan hoy Status Quo con Whatever You Want en directo. :D

¡Feliz fin de semana a todos! ¡Ser malos! ;)

Etiquetas: status, quo, wathever, you, want