Como hacer nubes de palabras – Algoritmo de Cloud Tags

Hoy vamos a ver como hacer una nube de palabras para nuestra página así como WordPress tiene el suyo.

Las nubes de palabras, En el desarrollo web se utiliza el termino de etiquetas y no palabras como sería el original (Cloud Words).cloud tags en inglés, son una representación visual de las palabras que más se repiten en un ámbito determinado.

Aquellas palabras que más se repiten se representan con un tamaño mayor y, en ocasiones, con un color diferente que las destaca.

La siguiente imagen es un ejemplo de una nube de palabras basada en los ingredientes que contienen ciertas recetas.

ejemplo de nubes de palabras

Es un diseño bastante sencillo, algo típico en mi, pero funcional, que es lo que necesitamos.

En la imagen se diferencia rápidamente que Flour, Cinnamon, Butter y Milk son los productos que más se repiten en las recetas especificadas.

Cual es el algoritmo para hacer una nube de palabras?

Hay muchas formas de hacer el proceso necesario. En esta caso vamos a centrarnos en el tamaño de la fuente y en dar un color especial a aquellas palabras que superen los 20px de fuente.

Vamos a simplificar al máximo el algoritmo, en otra ocasión les traeré el que estoy desarrollando.

Este es el algoritmo:

tamaño_texto = coincidencias * 5 + 10

De lo que se trata es de asignar un tamaño mínimo, en este caso 10px, y a dicho tamaño sumarle las coincidencias.
Esta nube de palabras la usé para generar el cloud que se ve al principio del artículo.
Como las coincidencias no eran demasiadas tuve que multiplicar el resultado por 5 para que hubiese un cambio notorio.

Nube de palabras con PHP

Vamos a aplicar el algoritmo a un caso práctico.
Hay que seguir unos pasos muy sencillos.

1. Obtener información: Tanto el texto a mostrar como el número de veces que lo mostraremos.

$datos = mysql_query("SELECT item, count(*) as hits FROM tabla GROUP BY item")

Con esta query obtendremos de la tabla los campos item y hits. El primero contiene el texto a mostrar y el segundo la cantidad de apariciones en la tabla.

2. Aplicar el algoritmo.

El siguiente paso es aplicar el algoritmo. Es un paso bastante simple y nada nuevo para los desarrolladores experimentados

while ($dato = mysql_fetch_array($datos)) {
  $size = $datos['hits'] * 5 + 10;
}

3. Mostrar los datos

El último paso, obviamente, es mostrar el resultado de nuestra nube.

while ($dato = mysql_fetch_array($datos)) {
  $size = $dato['hits'] * 5 + 10;
  echo '<div style="display:inline; font-size:'.$size.'px; ';
  echo ($size > 20) ? 'color: red"' : '"';
  echo '>'.$dato['item'].'</div>';
}

De esta forma hemos cumplido todos los objetivos.

El tercer echo, hace un if corto para comprobar que el tamaño sea mayor de 20, si es así agrega el color rojo al texto.

Conclusión

Siempre me gusta acabar con una conclusión, pero en este caso, acabo con un ‘a tener en cuenta’.
Normalmente nuestras base de datos son bastante predecibles, pero si queremos desarrollar un plugin de nubes (por ejemplo) para un CMS, nunca sabremos que cantidad de datos reales se van a almacenar, así que necesitamos hacer un pequeño filtrado y establecer un tamaño de texto máximo y un mínimo para que nuestra nube de etiquetas no se descuadre.

Dejo el reto planteado y a ver si alguien saca el algoritmo.
Sino tendrán que esperar hasta que haga un nuevo post sobre el tema ;)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">