Cumulus: Haciendo girar las etiquetas

Existe un plugin para WordPress llamado WP-Cumulus que nos permite generar un archivo de Flash donde mostraremos una nube con las etiquetas del blog. Por suerte, los creadores han pensado en nosotros, los pobres mortales y también nos explican como poder crear lo mismo en cualquier página web.

Será tal vez un poco más engorroso porque habrá que hacer ciertas cosas manualmente pero en realidad es bastante sencillo y flexible ya que podremos colocarlo en cualquier parte, ya sea en un post, en la sidebar o en la plantilla y personalizarlo para que se adapte a nuestras necesidades.

Para empezar, descargamos el archivo ZIP que contiene los archivos necesarios y los ejemplos.

De todo eso, lo mínimo que necesitamos tener son dos archivos:

swfobject.js es una librería que nos permite utilizar Flash de manera sencilla y sin necesidad de reproductores externos (más información)
tagcloud.swf es el archivo de Flash que se mostrará

Para usarlo, lo que vamos a hacer es transferirle a ese archivo, una serie de datos mediante un atributo llamado flashvars. Esos datos, los podemos "escribir" uno por uno o bien utilizar un archivo XML externo que deberá llamarse tagcloud.xml y tiene que estar alojado en el mismo lugar que el SWF.

Como en Blogger esto no es tan sencillo, lo mejor es hacerlo "a mano", escribiendo el código que, en realidad, no es otra cosa que enlaces. Veamos un ejemplo concreto:

<script type="text/javascript" src="URL_swfobject.js"></script>

<div id="flashcontent">Es el DIV donde se mostrará el FLASH</div>

<script type="text/javascript">
  var so = new SWFObject("URL_tagcloud.swf", "tagcloud", "ancho", "alto", "7", "#FFFFFF");
  so.addParam("allowScriptAccess", "always"); 
  so.addParam("wmode", "transparent"); // si no se quiere un fondo transparente, eliminarlo
  so.addVariable("tcolor", "0x333333"); // el color de los textos en formato hexadecimal
  so.addVariable("tspeed", "100"); // la velocidad
  so.addVariable("tagcloud", "<tags>
      // la lista de enlaces que se mostrará en la nube
      <a href='URL_enlace1' style='tamaño'>TEXTO-1</a>
      <a href='URL_enlace2' style='tamaño'>TEXTO-2</a>
      .......
    </tags>");
  so.write("flashcontent");
</script>

ancho y alto definen el tamaño del Flash que vamos a mostrar
#FFFFFF es el color de fondo si no queremos que sea transparente

Cada texto es un enlace donde tamaño es un número que indica la dimensión de la fuente; por ejemplo, una etiqueta para Blogger se escribiría así:

<a href='http://vagabundia.blogspot.com/search/label/JavaScript' style='10'>JavaScript</a>

El punto clave aquí es la forma en que transferimos los datos, es decir, los enlaces y los textos. Si es un post, todo deberá ser escrito en una sola línea y deberán reemplazarse los caracteres < y > por &lt; y &gt; así que pude ser un poco confuso y hay que hacerlo con cuidado:

so.addVariable("tagcloud", "<;tags><a href='URL_enlace1' style='10'>TEXTO-1</a><a href='URL_enlace2' style='14'>TEXTO-2</a><a href='URL_enlace3' style='12'>TEXTO-3</a></tags>");

Este TXT tiene el código del ejemplo del post usando un SWF alojado en ImageShack.

También es posible colocarlo en la sidebar. Hay un ejemplo de esto en mi blog de pruebas usando una técnica diferente, colocando el código en un archivo de texto y cargándolo como un script en un elemento HTML:

<div id="flashcontent">Es el DIV donde se mostrará el FLASH</div>
<script src="URL_cumulusDEMO_sidebar.txt" type="text/javascript"></script>

Este TXT tiene el código del ejemplo.

Sea cual sea el modelo, debemos cargar swfobject.js, ya sea en el header de la plantilla o antes de usar el script.

ACTUALIZACIÓN:

En La Bloguería nos muestran la forma de implementar la misma nube sin necesidad de "escribir" los enlaces uno por uno. Es una forma sencilla de hacerlo si lo que queremos es aplicarlo a las etiquetas de nuestro blog.

Es el DIV donde se mostrará el FLASH