Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Rotación de imágenes al azar

Uno de los retos a los que se enfrenta el diseñador de webs es el de crear sitios que se muestren frescos y nuevos cada vez que el visitante aparezca.

Una cosa es un sitio de noticias, en el cual los titulares o artículos se actualizan de forma regular, proporcionando contenido fresco cada hora, o incluso con mayor frecuencia. Pero ¿qué pasa con los que diseñamos sitios para clientes con páginas relativamente estáticas, cuyo contenido cambia infrecuentemente? ¿Cómo podemos proporcionar contenido fresco y cambiado a nuestros visitantes en cada visita sucesiva, sin depender de que alguien genere ese contenido de forma diaria o incluso horaria?

Cambiar la páginá sólo ligeramente y de forma sutil puede hacer milagros en un sitio que por lo demás es ‘estático’. Por ejemplo, imagina un gráfico de cabecera que es diferente cada vez que alguien recarga la página. O ¿que tal una imagen que enlaza a un producto que parece cambiar mágicamente con cada vista de la página?

Muchos sitios utilizan esta técnica para variar al azar las imágenes que muestran, incluyendo Hivelogic, SimpleBits o Cooper.

Trabaja eficientemente

Existen varios scripts que pueden rotar imágenes. Muchos de ellos están escritos en JavaScript, pero subren de una importante limitación: para añadir o eliminar elementos de la lista de imágenes que se utiliza, necesitas editar el código tú mismo. Cada vez que quieres hacer un cambio. En cada página que rota las imágenes. Pero no eres un programador, eres un desarrollador de web. Y añadir o eliminar imágenes de la lista de rotación debería ser algo fáil. Tan fácil como añadir o eliminar imágenes de una carpeta en el servidor.

¿De acuerdo?

¡Sí! Con un poquito de magia de PHP, añadir esta opción a los sitios que desarrollas es posible — fácil, incluso. ¿Que no sabes programar en PHP? Sigue leyendo. Todo el código ya está escrito para tí, y no hace falta que lo entiendas todo (o ni siquiera que entiendas nada) para hacerlo funcionar.

Incluso he escrito este script de manera que si encuentra un error, si no encuentra imágenes en la carpeta especificada, generará una "imagen de error" al momento y la mostrará, en lugar de enviar una imagen inválida al navegador, que a su vez mostará el icono roto de image no encontrada, que es tan feo.

Requisitos

Por supuesto,para que esto funcione, necesitas tener tu sitio en un sistema que soporta PHP (lo ideal es PHP version 4.2 or posterior, pero eso no es tan importante). Muchos hostings de hoy en día soportan PHP — incluso aquellos que funcionan con Windows. Esto se debe a que PHP no sólo es un potente lenguaje de programación web, sino que es además de Código Abierto. Se ha traducido a prácticamente cualquier plataforma de hospedaje de web existente, de manera que es bastante probable que tu sistema de hosting lo soporte.

¿Ya estamos?

Lo más seguro es que no necesites modificar el script para nada si quieres utilizarlo en el sitio que estás diseñando. Crea una carpeta en el servidor, sube las imágenes que quieres rotar en esa carpeta t después, sube el script — sin modificar — a la misma carpeta. Podrás ver tus imágenes en acción definiendo el script como fuente de la imagen, de este modo:

<img src="/ruta/a/imagenes/rotate.php" />

Eso es todo. Siéntate y disfruta con tus imágenes rotando aleatoriamente.

Forzándolo

Una capacidad extra de este script de rotación al azar es la de especificar una imagen en concreto. Esto puede ser útil,por ejemplo, cuando quieres llamar la atención a un cierto producto en tu sitio cuando es nuevo, o "congelar" la rotación durante un tiempo. Para activar esta opción, sólo necesitas especificar un valor para "img" value al llamar el script, de este modo:

<img src="/ruta/a/imagenes/
rotate.php?img=my_static_image.jpg" />

Esto forzará al script a cargar una imagen llamada en este caso "my_static_image.jpg" situada en la carpeta con las imágenes de rotación.

Configuración a medida

Puede que quieras cofigurar un poco el script a tu medida,por ejemplo, pluede que prefieras no tener el script de PHP en la carpeta de imágenes, o bien hacerlo reconocer más tipos de imagen.

Lo primero que hace falta hacer es identificar la carpeta en la que irán las imágenes que se mostrarán aleatoriamente. Esto se hace con un simple cambio de variable:

$folder = '.';

La forma más fácil de hacerlo funcionar es colocar el script en la misma carpeta que las imágenes. Puesto que es el método preferido, haremos que el valor por defecto de esta carpeta sea "." que es la forma de indicar en PHP "esta misma carpeta". Los usuarios más avanzados pueden cambiar este valor para apuntar a otra carpeta cambiando el "." con la ruta a sus imágenes, como aquí:

$folder = '/www/example.com/images/rotate_me/';

Ahora debemos decidir qué tipos de imágenes nos gustaría soportar en la rotacion. En el momento en que se ha escrito este artículo, los formatos más comunes para la web son los GIF, JPEG, y PNG. Por este motivo, empezaremos con éstos como nuestro juego por defecto de imágenes, asignados a una lista de extensiones:

$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';

Si alguna vez necesitaras algún tipo nuevo de imagen en, copia una de esas líneas y adáptala añadiendo tu propia extensión.

¡Eso es todo! Ya estás listo con el script. Súbelo a la carpeta de las imágenes que has creado, y enlázalo como hemos explicado antes.

Vamos, ¿Dónde está la mercancía?

Puedes descargar el código fuente PHP aquí (4k fichero de texto simple – después de descargarlo o copiarlo, guárdalo como rotate.php).

Este script, Image Rotator, tiene incluso su propio sitio web en Automatic Labs. Allí podrás descargar la última versión del script y leer algo más sobre la forma en que se puede implementar en tu propio sitio.

¡A divertirse!

Dan Benjamin es el fundador de Automatic Labs, una agencia especializada en aplicaciones a medida para el web, herramientas de publicación electrónica, y diseño basado en estándares. Dan es uno de los principales responsables de ALA, y autor de Hivelogic.

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]