Armonía | En definitiva...

Muchas veces, principalmente por motivos de diseño, necesitamos sustituir un pequeño párrafo, o un título, o cualquier pieza de texto por una imagen. Como ya sabemos, si la imagen no añade información al documento, lo ideal es colocarla mediante CSS, ya que dicha imagen formará parte del aspecto visual de la página y no de su contenido.

Para conseguir esto hay muchas técnicas, la primera en hacerse "popular" fue la ya conocidísima FIR, (Fahrner Image Replacement), que consiste en ocultar mediante CSS con un display:none; un elemento span contenido dentro de un elemento en bloque, normalmente un div, y posteriormente colocarle a dicho div la imagen que queramos a modo de background.

Esta técnica tiene algunos problemas, algunos más importantes que otros, pero en cuestión de accesibilidad los dos más importantes son dos. El primero es que los lectores de pantalla no leerán el texto, ya que lo hemos ocultado mediante display:none;, y la mayoría de lectores obvian los elementos ocultados de esta manera. El segundo, y no menos importante, es que en escenarios donde el navegador tenga activado el soporte CSS, pero desactivado el soporte para las imágenes, (o que por cualquier motivo la imagen no se haya podido cargar), no se mostrará nada, ya que el texto está oculto totalmente mediante CSS.

Aparte de esta técnica existen otras muchas, (Dave Shea hizo un gran resumen de ellas), cada cual con sus ventajas y sus beneficios, aunque la mayoría de ellas fallan en lo mismo que lo último que hemos comentado sobre FIR, cuando la imagen no se carga, el texto no puede verse.

Es por esto que, según mi modesta opinión, la mejor forma de conseguir un reemplazo de textos por imágenes de manera accesible es jugando con el posicionamiento de los elementos, y luego colocar un orden de aparición correcto mediante z-index. Esto que puede sonar un tanto confuso en realidad no lo es tanto. Veamos cómo conseguirlo.

Comenzaremos por el marcado XHTML. Para poder usar esta técnica vamos a necesitar tres elementos, (esto nos obligará muchas veces a tener que usar un span "extra" muy poco elegante, pero es el precio que hay que pagar). En nuestro caso vamos a usar un párrafo, un enlace, y el feo span:

<p class="reemplazado">
	<a href="#" title="Enlace de ejemplo"><span>¡Voy a ser sustituido!</span></a>
</p>

Para conseguir el reemplazo vamos a tener que jugar con el posicionamiento, tanto relativo como absoluto, de alguno de nuestros elementos. Lo primero que vamos a hacer es precisamente eso, posicionar y colocar nuestra imagen. Para ello vamos a colocar lo siguiente a nuestros elementos:

p.reemplazado {
	position: relative;
}

p.reemplazado a {
	background: url(imagen.png) no-repeat 0 0;
	display: block;
	height: 200px;
	width: 200px;
}

p.reemplazado a span {
	position: absolute;
}

Lo que hemos hecho ha sido lo siguiente. Primero hemos posicionado nuestro párrafo de manera relativa, lo que significa que vamos a poder posicionar sus elementos hijos, (en este caso el enlace), de forma absoluta pero desde la posición del párrafo y no de la ventana. Suena un poco complicado, ¿verdad? Para entender mejor las propiedades de posicionamiento de CSS recomiendo leer este tutorial de BarelyFitz Design.

Lo siguiente que hemos hecho ha sido colocar la imagen en nuestro enlace. Nuestra imagen tiene 200 pixels de alto y 200 de ancho, por lo que le hemos especificado esas medidas al enlace, y para que tengan efecto lo hemos transformado en un elemento en bloque, ya que por defecto los enlaces son elementos en línea. Una vez hecho esto solo nos queda colocar la imagen de fondo en nuestro enlace con la propiedad background.

Ahora le toca el turno a nuestro feo span. A este lo que le hemos hecho es simplemente posicionarlo de forma absoluta con position:absolute;. La posición top y left vamos a dejarla intacta, aunque podríamos modificarla al gusto siempre que no hagamos que se salga de las medidas de nuestra imagen.

Si probamos esto veremos como la imagen esta colocada perfectamente, y nuestro texto esta situado por encima de la imagen... Mmmm, un momento, ¡esto no es lo que queríamos! ¡Me han timado! A ver, veamos, ¿qué puede estar ocurriendo? ¡Ah, ya veo, falta el "toque mágico"!

p.reemplazado {
	position: relative;
	z-index: 1;
}

p.reemplazado a {
	background: url(imagen.png) no-repeat 0 0;
	display: block;
	height: 200px;
	width: 200px;
}

p.reemplazado a span {
	position: absolute;
	z-index: -1;
}

Ahí está lo importante del asunto, usar los z-index para determinar el orden de visualización de los elementos posicionados. Con esto lo que hemos hecho es decir que nuestro feo span con el texto quede por detrás del párrafo, y consecuentemente de la imagen que hemos usado.

Por último cabría recordar que podemos, (o debemos, según se mire), estilizar el texto del enlace, para que, dado el caso, se muestre de una manera agradable a aquellos usuarios que no puedan ver la imagen.

A mi modo de ver esta es la mejor forma de conseguir un reemplazo de textos por imágenes, aunque usemos un span tan poco elegante. Es una manera sencilla y accesible de conseguirlo, aunque bien es cierto que no es válida para todas las circunstancias, pero bueno, hay muchas técnicas estupendas por ahí, y si no para eso están los expertos, para conseguir técnicas nuevas.

Hace ya algún tiempo descubrí una pequeña librería de efectos Javascript de tan sólo 3Kb, lo cual era de agradecer teniendo en cuenta las mastodónticas librerías Javascript a las que estamos acostumbrados, (Dojo, Prototype, etc.). Pero como no soy muy aficionado a las animaciones no le hice a moo.fx el caso que merece.

Pues hace algunos días resulta que Mad4milk, los creadores de moo.fx, sacaron a la luz moo.dom, una de nuevo pequeñísima librería para acceder a los elementos del DOM mediante Javascript usando selectores CSS. Esto, que puede parecer un poco confuso explicado así, es una auténtica maravilla para los interesados en jugar con nuestros documentos.

Imaginad que podemos acceder a los elementos del DOM, por ejemplo los <li> de una lista ordenada que sirve de menú principal de una Web, de la siguiente manera: var elementos = $S("#menuPrincipal li");. Así tendremos en la variable elementos un array de elementos del DOM, donde cada uno de ellos es un <li> del menú principal, para poder jugar con ellos como queramos.

Esto es una maravilla, y en una librería de muy poco tamaño. Pero esto no es todo, además de seleccionar los elementos del DOM con Javascript mediante selectores CSS, también podemos usar las denominadas "acciones". Esto no es más que la posibilidad de añadirles eventos a los elementos seleccionados con la función $S();, (la función base de moo.dom). Con lo cual, si quisieramos añadir un evento onclick a los <li> del menú superior del ejemplo anterior, no tendríamos más que hacer lo siguiente:

$S("#menuPrincipal li").action ({
  onclick: function() {
    this.style.color = "blue";
  }
});

Maravilloso, ¿verdad? Pues dadles las gracias a los chicos de Mad4milk, unos auténticos genios.

Los chicos de 37signals han sacado hace poco un libro en formato PDF que yo, como comprador compulsivo que soy, he adquirido en el instante en que he sabido sobre su existencia.

Aún no lo he terminado, tengo otras cosas entre manos, pero lo que llevo hojeado pinta muy bien. Mucho contenido "inspirador", muchas pautas para desarrollar rápido y concentrado, en definitiva, una guía con una finalidad expresada claramente en su título: Getting Real

Para mi está siendo un libro más complicado que otros que he leido, ya que este no enseña formas de codificar, trucos para mejorar la estructura de tus desarrollos, etc. Este libro es algo más "insustancial" que todo eso. Este libro enseña una filosofía de trabajo, lo cual no siempre es fácil de digerir. Sea como sea, si os gusta esto del desarrollo Web, habeis disfrutado con alguna de las herramientas creada por estos chicos, y teneis 19$ para gastar, no lo dudeis, es una buena compra. Además, a mi personalmente me encanta ver ficheros PDF con esto en el pie:

This book was prepared exclusively for Juan G. Hurtado.

Hace unos días que he empezado a tocar Ruby on Rails, y para ello estoy utilizando el editor TextMate, para MacOS X.

Es un genial editor, que da la posibilidad de usar de forma cómoda y sencilla macros, snippets, triggers, etc. Además tiene un montón de sintáxis de diferentes lenguajes para colorear el código. Pero todo lo que yo cuente aquí es poco, tenéis que probarlo. Eso sí, si quereis una versión sin tiempo de expiración, (la demo es válida durante 30 días), tendréis que comprar el programa, que cuesta 39 euros.

Al hilo del post anterior, hoy también toca hablar de Ruby on Rails.

Gracias a este artículo en el blog de edevil he encontrado Locomotive, una aplicación que te permite tener, de la forma más rapida y sencilla que te puedas imaginar, todo lo necesario para empezar a desarrollar con Ruby on Rails en tu Mac, (excepto el editor para el código, que eso ya es cosa tuya).

Locomotive instala:

• El framework: Ruby on Rails
• El servidor web: lighttpd con FastCGI
• Una base de datos: SQLite

Y lo mejor es que instala todo eso de forma limpia, en un único paquete, sin lios de configuración, etc. Yo ya lo estoy usando, y si os interesa Ruby on Rails y teneis un Mac, esto os va a venir genial.