Nubes de etiquetas en PHP

Script PHP sencillo para crear nubes de etiquetas o tag clouds. La nube de etiquetas tendrá los estilos definidos por CSS para que cualquiera los pueda alterar según el diseño de su página web.

Si has llegado aquí es casi seguro que sabes de sobra lo que son las nubes de etiquetas, o tag clouds en inglés. No obstante, por expresarlo de alguna manera, cabe decir que las nubes de etiquetas son como un espacio donde se muestran una serie de enlaces a etiquetas o temas que se tratan en una página web. Dichos temas, cada uno con un nombre, aparecen escritos con un tamaño de letra diferente, donde a más apariciones del tema en la página, más grande es el tamaño de la fuente.

Con las Nubes de etiquetas, se pueden crear herramientas para orientación de los usuarios, que pueden conocer rápidamente qué temas se están tratando actualmente en un sitio web y a cuáles están apareciendo con más asiduidad. Es una herramienta muy visual, porque muestran los temas más importantes aparecen resaltados, porque se muestran con un tipo de letra mayor.

Seguro que habrás visto en muchas páginas web estas nubes de etiquetas, sobretodo presentes en proyectos de web 2.0. Si alguna vez has tenido ganas de colocar una nube de etiquetas en tu página, este manual te mostrará como hacerlo con PHP de una manera extremadamente simple, pero con una presencia atractiva.

Luego complicaremos un poco el script, para obtener nubes de etiquetas más complejas y lo pondremos en producción en diversos ejemplos.

Vamos a intentar ir paso a paso, creando primero una nube de etiquetas simple, que sea fácil de hacer. Luego lo complicaremos un poco más.

Veamos los códigos tanto CSS como PHP para crear estas nubes de etiquetas:

CSS de las etiquetas

Utilizaremos CSS para definir los estilos de la nube y de las etiquetas que vamos a colocar dentro. Hemos realizado esta declaración de estilos intentando que sea lo más versátil posible, adaptable a todos los sitios y de modo que se puedan colocar varias nubes en la página con el mismo estilo.

La declaración de estilos se compone por dos capas. Primero la capa donde vamos a colocar la nube, con estilos generales a la nube. Segundo la capa donde van las etiquetas y por último los distintos estilos de para cada uno de los tamaños posibles de las etiquetas.

<style type="text/css">
.nube{
   border: solid 1px #aaaacc;
   background-color: #ddddff;
   color: #666666;
   width: 335px;
   text-align: center;
}
.nube div.etiquetas{
   font-family: verdana,arial,helvetica;
   font-size:8pt;
   padding:5px;
}
.nube div.etiquetas span{
   float: left;
   margin: 0 3px 0 3px;
   height: 20pt;
   white-space: nowrap;
}
.nube div.etiquetas span.etiquetatam1{
   font-size: 110%;   
}
.nube div.etiquetas span.etiquetatam2{
   font-size: 120%;   
}
.nube div.etiquetas span.etiquetatam3{
   font-size: 130%;   
}
div.etiquetas span.etiquetatam4{
   font-size: 140%;   
}
.nube div.etiquetas span.etiquetatam5{
   font-size: 150%;   
}
.nube div.etiquetas span.etiquetatam6{
   font-size: 160%;   
}
.nube div.etiquetas span.etiquetatam7{
   font-size: 170%;   
}
.nube div.etiquetas span.etiquetatam8{
   font-size: 180%;   
}
.nube div.etiquetas span.etiquetatam9{
   font-size: 190%;   
}
.nube div.etiquetas span.etiquetatam10{
   font-size: 200%;   
}
</style>

Usuarios que han visto este tema también han visto...

- De url extensas a url amigables con Apache y PHP
- Pasar saltos de línea de BD a HTML
- Incluir en PHP un archivo programado en otro lenguaje
- Evitar la inyección SQL
- Recoger datos del formulario POST en PHP

- Versión imprimible de este documento
- Enviar por e-mail este documento