Webmaster Libre

Christian Effenberger es, sin duda, una referencia para todos los que estamos interesados en las transformaciones de imágenes en el navegador mediante Canvas.

Gracias a él, hasta los más torpes podemos disfrutar de efectos impresionantes con sólo incluir un archivo javascript en nuestros sitios y aplicar una clase (o varias para adaptar el efecto totalmente a nuestro estilo) a nuestras imágenes. Simple y realmente espectacular.

Esferas:

Con sphere.js

Fotogramas:

Con filmed.js

Diapositivas:

Con slided.js

En los navegadores antiguos degrada sin problemas.

Los efectos son gratuitos para sitios personales y no comerciales. Para otro tipo de sitios, incluidas las webs con banners, existen licencias comerciales que tendrás que hablar directamente con el creador.

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.