Pero no todos los enlaces que ejecutan alguna función Javascript tienen que tener una url en su atributo href. Algunos sirven para realizar acciones dentro de la propia página, como puede ser mostrar / ocultar una capa, pasar a la imagen siguiente en un carrusel, etc.

En estos casos, lo correcto es crear esos enlaces con Javascript, ya que sólo con Javascript habilitado tienen sentido (no deben estar previamente en el código HTML), y asignarles como atributo href una almohadilla (#) o dejarlo vacío.

En algún blog que no consigo encontrar proponían usar para este tipo de enlaces el pseudoprotocolo javascript: u otro que consideremos más apropiado (inventado), como podría ser imagen:.

De esta forma, estos enlaces proporcionan información acerca de su función al hacer rollover sobre ellos o cuando tienen el foco. Esta información suele aparecer en la barra de estado del navegador. También es útil para usuarios de lectores de pantalla que puedan tenerlos configurados para no leer el atributo title.

Atributo href del enlace mostrado en la barra de estado de Firefox

Habrá quien se preguntará si es correcto asignar este tipo de funciones a enlaces en lugar de a otros elementos HTML. La respuesta es que sí, ya que los enlaces pueden tener de forma natural el foco y ser activados cuando se utiliza el teclado para navegar y moverse por la página.

Este script es especialmente útil para utilizar fuentes embebidas mediante @font-face, ya que la calidad del resultado depende muchísimo de si el suavizado de fuentes está o no habilitado en el SO del usuario. También es útil a la hora de decantarse por unas u otras fuentes de sistema, como por ejemplo, la Lucida Sans Unicode, que sin suavizado resulta de mala legibilidad en Windows.

Información relacionada (@font-face)

Bulletproof @font-face syntax

La mejor forma de utilizar @font-face.
Existe una traducción al español en CSSBlog

Font Squirrel

Kits de fuentes para usar mediante @font-face

@font-face generator

Nos permite subir una fuente y descargar el paquete completo para usar mediante @font-face

TTF to EOT Font Converter

Para convertir fuentes TrueType a OpenType (EOT), el formato usado por Internet Explorer

Imágenes redimensionadas en Explorer 7

En el blog de ZURB, que por cierto, me encanta, nos muestran un pequeño truco para suavizar las imágenes en Internet Explorer entre otras técnicas para mejorar la presentación visual en varios navegadores

img{-ms-interpolation-mode: bicubic;}

Este método no funciona en Internet Explorer 6, para el que proponen usar algo un poco más sucio que lo anterior:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/path/to/image.jpg', sizingMethod='scale');

Afortunadamente, Internet Explorer 8 no tiene este problema.

Demo suavizado de imágenes (sólo para IE 7)

Actualización: script para aplicar el filtro a las imágenes redimensionadas

En este comentario proponen el uso de un pequeño script en jQuery para detectar si una imagen está redimensionada y en ese caso aplicarle el estilo correspondiente para IE 7 y el filtro para IE 6. De esta forma evitamos tener código no válido en la CSS y aplicamos estos estilos sólo a las imágenes que lo requieran. Ya que el código no aparece muy bien formateado en los comentarios, lo pego aquí.

Gracias por la aportación!

jQuery.each($('img'), function() {
   ancho_forzado = $(this).width();

   img = new Image();
   img.src = $(this).attr('src');
   ancho_real = img.width;

   if (ancho_forzado != ancho_real) {
      if ($.browser.version.substr(0,1) == '7') {
         this.style.msInterpolationMode = "bicubic";
      } else if ($.browser.version.substr(0,1) == '6') {
         $(this).attr('width', ancho_forzado);
         this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale')",
         this.runtimeStyle.paddingTop = this.height,
         this.runtimeStyle.height = 0;
      }
   }
});

Esta propiedad es útil para fijar un ancho máximo de página (bloque contenedor) en diseños fluidos, evitando que los bloques de texto sean demasiado largos y dificulten su lectura.

La solución quizá llega un poco tarde ahora que, ¡por fin!, el porcentaje de uso de IE 6 es menor que el de sus hermanos mayores, IE 7 y 8, y poco a poco vamos dejando de dar soporte (teniendo siempre en cuenta aquello de la degradación elegante) a este navegador.

La técnica varía según la alineación de página que se use. Para un contenedor centrado de 960 pixeles de ancho máximo, el código HTML y CSS a usar sería similar a este:

HTML

<div class="leftpad"></div>
<div class="rightpad"></div>
<div id="contenedor">
... bla bla bla ...
</div>

CSS

.leftpad{
width: 50%; float: left;
margin-right: -480px; height: 1px;
}
.rightpad{
width: 50%; float: right;
margin-left: -480px; height: 1px;
}
#contenedor{overflow: hidden;}
* html #contenedor{float: left;}

• El alto de los bloques con el margen negativo debe ser una unidad. No funciona un porcentaje o el valor auto.
• El margen negativo es igual a la mitad del ancho máximo del bloque contenedor, que no se declara en ningún otro sitio.

Existen otras soluciones para conseguir un ancho máximo en IE 6, basadas en Javascript o en el uso de expresiones propietarias de Microsoft.

Me tengo que decir eso de “bueno, un día es un día” para tener la conciencia más tranquila, ya que aunque todo permanece perfectamente utilizable y comprensible sin estilos, la verdad sea dicha… resulta bastante incómodo de leer.

Una buena forma de superarlo, sobretodo cuando tenemos verdadero interés en leer algo, cosa que debe de ocurrir sólo durante un 5% del tiempo en que navegamos, es utilizar un bookmarket que aplica los estilos necesarios para mejorar la legibilidad a la parte de la página que contiene el contenido relevante, ocultando todos los demás elementos que pueden distraer la lectura, como banners, menús de navegación, etc. Se trata de Readability. En su web podemos elegir el estilo que más nos gusta entre varias opciones y una vez configurado, añadir el marcador al navegador.

Es un bookmarklet bastante útil y cómodo, no sólo para superar el día de hoy, sino para cuando nos encontramos con un tamaño de texto diminuto o longitud excesiva de líneas, dos cosas que dificultan y hacen poco apetecible la lectura.

No ocurre lo mismo en Internet Explorer, en el que sí podemos entrar y salir del Flash mediante teclado. Podemos imitar el comportamiento de Flash en Internet Explorer mediante Javascript y Actionscript. En el siguiente ejemplo tenemos un flash al que podemos acceder mediante teclado en Firefox, navegar por sus elementos y salir de él.

Para conseguir esto se han seguido los siguientes pasos:

1. Dar un tabindex con valor 0 al object que contiene el flash.De esta manera conseguimos que pueda tener el foco en Firefox. El valor 0 permite que el objeto permanezca en el orden de tabulación en que aparece en la página, es decir, no se altera el orden de navegación de otros elementos. Debemos hacerlo mediante Javascript, porque sin él, podríamos entrar mediante teclado al flash pero no podríamos salir.
2. Permitir la comunicación del Flash con Javascript.Para esto usamos el parámetro allowscriptaccess de Flash

   
   <param name="allowScriptAccess" value="always" />
   

3. Desde Flash llamamos a la función Javascript encargada de establecer el tabindex, de esta manera, sólo si hay flash se establecerá un tabindex para el object.
4. Añadimos para el primer y último elemento navegables del flash una función para el evento onblur (en actionscript llamado onKillFocus) encargada de llamar a la función Javascript que desenfoca el object.

   
   // primer elemento navegable
   bot_1.onKillFocus = function(newFocus){
      if(newFocus == bot_3){
         ExternalInterface.call('AccesibleFlash.desenfocaObject', 'test');
      }
   }
   // último elemento navegable
   bot_3.onKillFocus = function(newFocus){
      if(newFocus != bot_2){
         ExternalInterface.call('AccesibleFlash.desenfocaObject', 'test');
      }
   }
   

5. Por último, para evitar el “click para activar” en Explorer, se ha usado el método de publicación dinámica del SWFObject.

Descargar todos los archivos del ejemplo, incluido el .fla, en formato .zip

Una buena parte del “cómo conseguirlo” surgió de una cabeza inquieta de mi antiguo curro y creo, que hasta aquí puedo y debo leer.

Para ello se pueden utilizar varias técnicas como ocultar estos elementos mediante Javascript añadiendo el estilo display: none, (sí, en la mayoría de casos no será incorrecto que el elemento oculto también lo esté para lectores de pantalla), o bien añadiendo una clase “oculto”, “hidden” o similar definida en la CSS que se encargue de ocultar elementos.

El problema de esta técnica es que cuando no podemos usar alguno de los métodos que nos ofrecen las librerías Javascript para ejecutar funciones cuando el DOM está disponible (ready de jQuery, domready de Mootools o dom:loaded de Prototype), nos encontramos con el feo efecto de que nuestros elementos ocultos aparecen un instante visibles hasta que toda la página está cargada (onload).

Para evitar esto se suelen utilizar otras técnicas no muy limpias de la vieja escuela, como colocar el código Javascript en el HTML, o lo que es peor, usar estilos en línea en la capa o elemento que se ha de ocultar.

Pues bien, gracias a Scriptia, descubro este otro método para ocultar elementos que se basa en añadir una clase al elemento HTML mediante la propiedad documentElement del objeto document. Y cito lo que nos comenta Choan sobre document.documentElement:

1. Para modificar ‘document.documentElement’ no es necesario esperar a que se complete la carga del documento.
2. La especificación HTML 4.01 no permite el uso del atributo ‘class’ en el elemento ‘html’. En mi opinión, como la jugada la hacemos por scripting, esto no invalida el documento.

Para utilizarlo nos propone usar una variable en la que detectamos el soporte del DOM por el navegador:

var isSupported = document.getElementById && document.getElementsByTagName;

Y una sencilla instrucción:

if (isSupported) {
    document.documentElement.className = "js";
}

Por último, para evitar tener rondando por ahí una variable global, podemos colocarlo todo dentro de una función anónima autoejecutable, o lo que también se conoce como closure, si no estoy equivocada:

(function(){
    var isSupported = document.getElementById && document.getElementsByTagName;
    if(isSupported){
        document.documentElement.className = "js";
    }
})();

En la CSS aplicaríamos el display none sólo a los elementos hijos de los que tienen la clase “js”:

.js .oculto{ display: none; }

He probado esta técnica en una página en la que he usado 4 imágenes pesadas, para comprobar que la capa que se oculta mediante Javascript, efectivamente lo hace sin necesidad de que la página esté cargada y ¡funciona!

Demo ocultación de elementos mediante javascript.

Por si alguien se pregunta quién va por el mundo con Javascript deshabilitado, no hace falta irse a buscar al usuario de Lynx o a ese otro que por alguna extraña razón decide rebuscar la opción de deshabilitar Javascript en su navegador aunque no sepa lo que es ni le importe. El individuo que va por ahí sin Javascript existe y puede ser perfectamente un usuario avanzado que usa un lector de feeds, un móvil con soporte limitado de Javascript, o ve una web desde su cliente de correo.

Los códigos QR pueden contener un máximo de 256 caracteres alfanuméricos. Esta información puede ser leída y decodificada por un teléfono móvil con cámara y un programa para leer estos códigos mediante una fotografía. Esto permite acceder directamente a una URL o copiar los datos de un contacto en la agenda sin tener que introducirlos manualmente.

Puedes descargar un programa para leer códigos QR compatible con tu terminal en Kaywa Reader. La web de Kaywa también ofrece un generador de códigos QR.

Código QR de Uninstallme.

En Japón, el uso de estos códigos ya está muy extendido, y no sólo es frecuente encontrarlos en cualquier cartel publicitario por la calle, sino que llegan al extremo de usarlos en lápidas para proporcionar la URL de una web con datos sobre el difunto, fotos, etc.

Aunque, como comentaba anteriormente, en España su uso no está tan extendido, ya hay quien ha visto las posibilidades de esta tecnología para ofrecer mejoras de accesibilidad a personas invidentes o con visión reducida.

Accesibilidad en edificios

Me ha llamado la atención la iniciativa del CRE de San Andrés del Rabanedo (León), de colocar estos códigos QR en las puertas del edificio con la información que normalmente suele aparecer en un cartel expresada mediante texto o símbolos. (Ejemplo: aseos de señoras.)

En este vídeo se explica cómo una persona invidente puede escuchar la información de estos códigos usando un teléfono móvil equipado con un lector de pantalla.

Tarjetas de visita accesibles

Estas tarjetas incluyen el código QR con los detalles del contacto, de manera que con hacer una foto a la tarjeta, ya tenemos registrados todos los detalles de contacto en la agenda del móvil sin escribir una sola letra y, de paso, evitando posibles errores tipográficos. Más cómodo imposible.

Otros usos

Idealista.com ofrece un servicio de generación de fichas para imprimir y pegar en farolas, cristales, etc. Estas fichas llevan un código QR con una URL en la que se proporcionan fotos y otros datos sobre el inmueble en alquiler o venta.

En la tienda on line de QR-Code, se pueden encontrar camisetas, bolsos o tazas con todo tipo de mensajes graciosos para descifrar.

A mí se me ocurren ahora mismo usos relacionados con la geolocalización (ZXing ya está incorporando esta característica en su generador de códigos.) Por ejemplo, aprovechando que muchos móviles de última generación suelen incorporar GPS, estos códigos podrían conducirnos directamente hasta un determinado restaurante o, colocados en los típicos carteles de información (“Usted está aquí”), conectarnos con un servicio que nos diga qué tenemos a nuestro alrededor en una ciudad desconocida.

Fuentes y más información

• Código QR en la Wikipedia
• Generador de códigos QR para uso personal (detalles de contacto, links, mensajes)
• Blog sobre QR en español Su generador de códigos permite generarlos en color o en formato PDF.
• Extensión para Firefox para generar códigos QR a partir de URL’s o selecciones de texto
• Los códigos QR conectan a todas las cosas

Para ello necesitamos, además de un servidor Apache, un compresor de archivos capaz de comprimir en formato Gzip, como 7zip, y añadir unas líneas en el .htaccess mediante las que indicamos que los archivos con la extensión indicada, utilizan este tipo de compresión.

Simplemente comprimimos el archivo que deseemos en formato .gzip y le damos como nombre de extensión de archivo .jgz en el caso de Javascript o .cgz en el caso de CSS.

Enlazamos al nuevo archivo en el HTML y añadimos estas líneas en el .htaccess

# Compressed javascript files
AddEncoding x-gzip .jgz
AddType application/x-javascript .jgz

# Compressed css files
AddEncoding x-gzip .cgz
AddType text/css .cgz

He hecho la prueba con esta web comprimiendo Mootools y estos son los resultados.

Antes de comprimir (63 Kb)

Y después de comprimir (19 Kb)

Una técnica que merece la pena tener en cuenta si estás usando librerías Javascript pesadas.

El único requisito para que el rollover funcione en Internet Explorer 6, es que la imagen esté contenida en un enlace. En el caso de que la imagen sea un botón de tipo image, necesitaremos añadir una clase por Javascript, ya que Explorer 6 ignora el :hover sobre cualquier elemento que no sea un enlace.

El principal inconveniente de los rollovers con Javascript es que necesitamos dos imágenes para cada estado. Con esta técnica, usamos una sola imagen con sus dos estados, como lo haríamos con un rollover “normal” con CSS.

Imagen usada para el rollover:

La técnica se basa en conseguir un efecto “clip” mediante el uso de overflow: hidden. Para ello metemos la imagen en un elemento <span> al que damos el ancho y alto del área visible de cada estado de la imagen. En el ejemplo 22 píxeles. Damos display block y posición relativa para que Internet Explorer sea feliz (en otros navegadores no es necesaria la posición relativa)

Por último, damos al enlace en estado hover, posición relativa y una posición negativa igual a la altura de la imagen.  En este caso no es necesario dejar un margen en blanco entre ambos estados de la imagen para prevenir que al aumentar el tamaño de texto de la página se vea parte de la imagen para el estado hover, como ocurre con los navegadores que no hacen zoom (Firefox 2, Google Chrome, Internet Explorer 6) y los rollovers con CSS mediante imágenes de fondo, ya que que podremos aplicar dimensiones mediante CSS diréctamente a la imagen, permitiendo que se dimensione al aumentar el tamaño de texto.

El código HTML utilizado sería el siguiente:

<span class="img-rollover">
<a href="#"><img alt="A" src="boton-a.png" /></a>
</span>

Y el código CSS:

span.img-rollover{ width: 22px; height: 22px; overflow: hidden; display: block; position: relative; }
span.img-rollover a:hover{ top: -22px; position: relative;}

El resultado:

Técnica inspirada en el botón de buscar de The Man in Blue