Hay algunas sutiles diferencias en los sitios web que los hacen más o menos usables. Una de ellas es, sin lugar a dudas, el resaltado de los enlaces cuando hacemos foco sobre ellos. Con esta pequeña pista visual ofrecemos a nuestros usuarios una forma simple de diferenciar un hipervínculo de cualquier otro tipo de texto formateado.
Por lo que se vé, Opera Mini hace un esfuerzo extra y resalta no uno si no todos los enlaces que apuntan al mismo lugar cuando hacemos foco sobre uno de ellos. Una pequeña pista que puede añadir un poco más de usabilidad a nuestros sitios. Todo esto lo digo gracias al artículo de Kilian Valkhov, que al comprobar lo práctico de esa interesante característica de Opera Mini, decidió emularla con jQuery y CSS.
La técnica consiste en crear un class .hover que emule completamente el aspecto de nuestra pseudo-clase :hover
a:hover,
a.hover { … }
Y luego, con la ayuda de jQuery detectamos los enlaces que comparten URL de destino y al hacer foco sobre uno de ellos aplicamos la clase .hover a los demás. Eso si, nos apoyamos en eventos de ratón y por tanto sólo es funcional con usuarios que usan uno y los que navegamos principalmente con el teclado nos quedamos sin usabilidad extra.
$("a").hover(
function() {$("[href="+$(this).attr("href")+"]").addClass("hover");},
function() {$("[href="+$(this).attr("href")+"]").removeClass("hover");}
);
Kilian además de explicarnos la técnica, muy sencillita, nos ha dejado una demo para que le echemos un vistazo.
Es una idea que me gusta pero me gustaría más si usase eventos como focus y blur para no depender de la disponibilidad del ratón. He hecho una prueba rapidita y me ha quedado un javascript algo más largo pero que funciona para navegación con teclado y con ratón. Estoy segura de que se puede mejorar pero aquí os lo dejo para que sirva de “inspiración”:
$(document).ready(function(){
$("a").focus(
function() {$("a[href="+$(this).attr("href")+"]").addClass("hover");});
$("a").blur(
function() {$("a[href="+$(this).attr("href")+"]").removeClass("hover");});
$("a").hover(
function() {$("a[href="+$(this).attr("href")+"]").addClass("hover");},
function() {$("a[href="+$(this).attr("href")+"]").removeClass("hover");});
});
Se aceptan sugerencias en los comentarios.
Mostrar gráficos accesibles es una tarea ardua, o cuanto menos pesada, por eso me ha encantado este plugin para jQuery.
Mediante fgCharting podremos convertir una tabla de datos convenientemente maquetada en un bonito gráfico.
Como ya sabéis, Internet Explorer y canvas no hacen buenas migas por lo que tendréis que utilizar algo como ExplorerCanvas para poderlo emplear en sitios en producción.
fgCharting: http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/
La mayoría de nosotros permitimos html en nuestros comentarios, no demasiadas etiquetas pero si las necesarias para dar estilo a un mensaje correctamente. Para los usuarios acostumbrados a trabajar con HTML es lo más normal del mundo pero, para el resto del mundo, no significa nada y se tienen que conformar con enviar los post así, tal cual.
Como muchos incorporamos en nuestros sitios la librería jQuery he pensado que os vendría bien MarkItUp, un script con el que convertir cualquier textarea en un completo editor.
MarkItUp es muy ligero y personalizable, no es otro de esos editores llenos de características inútiles.
Y, por supuesto, lo de los comentarios sólo es una sugerencia de uso, obviamente sirve para cualquier otro formulario.
MarkItUp: http://markitup.jaysalvat.com
Si queréis añadir un toque extra de estilo a vuestros sitios y mostrar una transición de color cuando el usuario pinche o pase sobre algún elemento de la página ahora podréis fácilmente con este script: Javascript color fading script
Se trata de un script muy ligero con el que podréis añadir transiciones de color que afecten al fondo, borde o color de texto de los elementos de vuestro sitio.
Podéis ver una demo en el sitio del autor
No sé vosotros pero yo odio a muerte los selectores de fecha de algunos sitios, especialmente los de las reservas de hoteles o aviones. Un desplegable para la ida, otro para la vuelta…
Como parece que no soy yo sola la que los odia, nace Timeframe, en palabras de su creador, Stephen Celis porque:
I’m just sick of multiple date pickers on the same page
El script, que trabaja sobre Prototype, nos permite seleccionar rangos de fechas de múltiples meses con un simple movimiento de arrastrar y soltar.
Como no podía ser menos, en ie6 se ve que da asco, en los navegadores decentes va de lujo, pero parece que pronto habrá mejoras en los estilos y la experiencia será agradable para todos.
Timeframe: http://stephencelis.com/projects/timeframe
Via Ajaxian
Los que estamos acostumbrados a operar con banca online hemos visto miles de veces estos teclados virtuales, presentados en pantalla, mediante los que introducir nuestros datos sólo con la ayuda del ratón. Este tipo de medidas pretenden asegurar aún más esas entradas de datos sensibles, evitando que queden registrados mediante un keylogger o facilitando al usuario un teclado en el idioma adecuado (ya que puede encontrarse en otro país con un teclado que no admite caracteres especiales o que el usuario desconoce como usar).
Si vuestras aplicaciones precisan este extra de seguridad no olvidéis probar Virtual Keyboard Interface, un script javascript con el que añadir facilmente un teclado virtual a nuestros campos de texto y textareas. Su uso es sencillísimo, llamamos al script y la hoja de estilos en el head y le damos class="keyboardInput" al input o textarea a la que queramos acoplar el teclado.
Virtual Keyboard Interface está disponible para múltiples idiomas, entre los que se incluye la distribución de teclado del Español de España (que desconozco si es muy diferente de las empleadas en Latinoamérica).
Virtual Keyboard Interface: http://www.greywyvern.com/code/js/keyboard.html
No hace mucho, mientras hablaba de un parón de feedburner, os dejé saber de mis recelos hacia el modelo de negocio del “mash-up”, esa total dependencia de proveedores, ese tener que aprender un API nuevo para cada uno…
Uno de mis principales argumentos siempre ha sido el coste de migrar un servicio de un proveedor a otro, pongamos por ejemplo una aplicación que emplee Google Maps para hacerla compatible con Yahoo Maps. Pero, al menos en lo que respecta a los mapas, parece que mi problema toca a su fin.
Mapstraction nos provee de un API común con el que acceder a diversos servicios de mapas, así si mañana añaden una característica que nos interesa en otro proveedor – por ejemplo – podremos hacer el cambio sin problemas.
Actualmente, con Mapstraction accederemos a los datos proveidos por:
En el futuro tienen planes de integrar otros sistemas como Open Street Maps.
Una de las cosas más interesantes, para mi al menos, de Mapstraction es su uso de los microformatos adr y geo (empleados para indicar direcciones y coordenadas geográficas respectivamente).
Además, entre los trabajos basados en Mapstraction, encontramos GeoPress un plugin para WordPress y Movable Type que nos facilitará la tarea de insertar localizaciones (direcciones, coordenadas) y mapas en nuestros posts.
Mapstraction: http://www.mapstraction.com/
Es cierto, hay demasiadas alternativas a Lightbox como para que siga mereciendo la pena pararse a comentarlas. No obstante, Fancybox es especialmente atractivo.
Fancybox funciona con la librería jQuery y es un pequeño script con el que mostrar nuestras imágenes o grupos de imágenes con estilo. Fancybox viene con algunos efectos interesantes, como las animaciones al cerrar las imágenes o el indicador de carga que se sitúa sobre la minuatura de la imagen en lugar de ocupar toda la pantalla.
Sin duda, su aspecto es cuidado y su implementación sencilla. Además, el CSS está completamente separado del javascript, lo que facilita su personalización
Fancybox: http://fancy.klade.lv/
Via WebAppers
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
Hace algún tiempo os comentaba una pequeña librería Javascript con la que hacer que IE6 se comportase como su hermano mayor y mejor educado IE7.
Como Internet Explorer 7 ya está en la calle, listo y disponible para cualquier usuario de Windows, Dean ha decidido actualizar la librería e incluir algunos cambios interesantes:
Sin duda es algo que todos los que nos pasamos el día peleando con Internet Explorer vamos a agradecer, sobre todo con la mejora en la velocidad ya que antes con algunos fixes se relentizaba toda la página un montón.
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
