Nubes de tags (tag clouds) con Drupal

¿Qué es una nube de tags o tag-cloud?

Una nube de tags es una representación gráfica de los términos utilizados en los vocabularios o taxonomías de una web donde el tamaño de la fuente de cada palabra que forma la nube es mayor cuantas más veces se repita ese término del vocabuario en la página.

Mostrando nubes de tags con Tagadelic

El principal módulo en Drupal para mostrar nubes de tags es Tagadelic, un módulo de pequeño tamaño que sin necesidad de generar datos en la base de datos, permite incluir una nube de tags a nivel de taxonomía o una nube de tags por cada nodo dentro de un bloque configurable a través del interfaz. Para hacerlo funcionar, primero debemos descargarnos el módulo, copiarlo descomprimido en sites/all/modules (o el directorio de nuestro sitio si usamos multisite) e instalarlo desde el interfaz de adminstración de Drupal, en Administer › Site Building › Modules.

nube-de-tags-tagadelic.png

A partir de aquí, se puede configurar a dos niveles

  • A nivel general, desde Administer › Site Construction › Tagadelic Configuration podemos definir el órden de los tags mostrados (por ejemplo orden alfabético, o aleatorio), el número de tags que se van a mostrar como máximo y el número de niveles, esto último define la diferencia de tamaños entre los tags, a más pequeño, la diferencia será más abrupta.
  • Tagadelic-config.png

  • A nivel de bloque, desde Administer › Site Building › Blocks podremos ver que Tagadelic pone a nuestra disposición un bloque por cada taxonomía disponible, llamado "Tags in nombre_categoria" y además un bloque de "Tags for the current post", que muestra los tags del nodo actual. Tagadelic-block-list.png
  • La configuración de estos bloques, además de las opciones habituales de visibilidad, nos permite modificar el número de tags que cada bloque mostrará. Tagadelic-block-settings.png

Nubes de tags en flash

Si necesitamos mostrar nuestra nube de tags en un formato más aparente, podemos hacerlo de dos maneras, utilizando Cumulus, que requiere el Tagadelic y tansforma la nube de tags generada por Tagadelic en flash, o Taxonomy Cloud, que no utiliza Tagadelic. Cumulus El módulo Cumulus utiliza Tagadelic para mostrar la misma nube de tags pero en un formato Flash con movimiento, cuando lo instalamos, nos genera un bloque que debemos situar en la región que queramos a través del administrador de bloques Administer › Site Building › Blocks Bloque_de_Cumulus.png

Las opciones principales de configuración de este módulo las encontraremos cuando le demos a configure en la propia administración del bloque. Configuracion_de_Cumulus.png

Podemos configurar gran cantidad de parámetros, tanto de apariencia (ancho y alto en píxeles, colores de fondo, de fuentes, etc), así como el vocabulario o vocabularios de los que el Cumulus obtiene los elementos para mostrarlos.

Nube_de_tags_de_Cumulus.png

Hay una última configuración de Cumulus en Administer › Site configuration › Cumulus donde podremos limpiar la caché propia que provee el módulo Cumulus_Cache.pngTaxonomy Cloud El módulo Taxonomy Cloud no depende de Tagadelic y también permite mostrar una nube de tags en formato Flash. Este módulo aparece como Taggly, tanto para instalarlo como para configurarlo. Crea un bloque que se puede situar en la región que más nos convenga, en Administer › Site Building › Blocks. Bloque_de_Taggly.png La configuración del módulo se encuentra en Administer › Site configuration › Taggly y se puede modificar el aspecto a través de la interfaz, colores de fondo y de texto, alto y ancho, pero también se puede elegir un vocabulario del que se muestran los tags, pero al contrario que en el Cumulus, se pueden mostrar solamente términos de una sola categoría. Configuracion_de_Taggly.png

El aspecto final del bloque es parecido a este:

Nube_de_tags_Taggly.png

Integración con Views: Nubes de usuarios o nodos

Además de mostrar los términos de un determinado vocabulario o taxonomía, con el módulo Views Cloud podemos generar, a través de Views, una vista de usuarios, de títulos de nodos, o de cualquier otra información en formato nube de tags, pero en este caso deberemos especificar explícitamente el peso de los elementos que definen el tamaño de la fuente de la palabra. Por ejemplo, la edad de los usuarios o el número de veces que se ha leido un nodo. No es una solución recomendable para mostrar nubes de tags de taxonomías, ya que solamente podemos ordenar los términos por orden alfabético o aleatorio, y no por peso, para mostrar nubes personalizadas de tags pertenecientes a vocabularios o categorías, podemos usar Tagadelic Views (descrito más abajo). Para conseguir un bloque con una nube de usuarios, por ejemplo, debemos crear una nueva vista, en Administer › Site building › Views haciendo click en Add y seleccionando Node como tipo de vista.

Views_Cloud.png

Los pasos básicos para mostrar la vista de tipo Cloud son:

  1. Cambiar el Row style de Fields a Node
  2. Node_Row_Style.png

  3. Se debe crear un argumento por el campo que vayamos a mostrar en la nube de tags, añadimos un argumento por User: Name.
  4. Argumento_User_Name.png

  5. Elegimos la acción "Summary, sorted descending" si no hay argumento presente.
  6. Argumento_Default.png

  7. Cambiamos el estilo del Summary a Cloud:
  8. Argumento_Cloud.png

  9. Y elegimos las opciones del cloud, si el orden es aleatorio o no, si se muestra el número de ocurrencias, modificación de los tamaños de los elementos de la nube, etc. Argumento_Cloud_Config.png
  10. Para exponer la nube como un bloque hay que añadir un display de tipo block.
  11. Block_Cloud.png

  12. A partir de entonces estará disponible en la página de administración de bloques.
  13. También será necesario crear un display de tipo página puesto que los links del bloque apuntarán a esta página.
  14.  
  15. Page_Cloud.png

  16. En este display de tipo hay que configurar el Path.
  17. Path_Cloud.png

El css del Views Cloud no se carga en el Preview que nos ofrece la vista, por lo que no sale el resultado final en éste. Ahora tenemos disponible en la página de administración de bloques Administer › Site Building › Blocks un bloque con el mismo nombre de la vista que podemos situar en la región que prefiramos.

Block_Cloud_Config.png

Al generarse desde una vista, tenemos mucho más poder sobre lo que se muestra, podemos filtrar usando Filters, o mostrar los campos que queramos en el display de tipo página que se enlaza desde el bloque, podemos en lugar de Row Style: Node, elegir otros campos, que se mostrarán en la página de destino.

Cloud_en_el_bloque.png

Este módulo puede usarse de forma más avanzada con el Style plugin que provee para views, si tenemos un campo para cuantificar las veces que se repite el elemento que queremos mostrar en la nube, podemos elegir este campo para marcar el tamaño de los elementos del cloud. Por ejemplo, activando el módulo Statistics, podemos mostrar una nube de los títulos de los nodos más leidos. Creamos una nueva vista de tipo Node y añadimos dos Fields, el título del nodo, y las veces que ha sido leído:

Cloud_Field.png

Después configuramos el Style en Basic settings a Cloud. Cloud_Style.png

Y seleccionamos el campo que marcará el tamaño de los elementos de la nube, además de otras opciones básicas como el tamaño, etc.

Cloud_Style_Config.png

Y ya tenemos una nube de nodos, ahora podemos filtrar aquellos que no nos interesen en la sección Filters, el orden en Sort criteria, etc.

Cloud_de_nodos.png

Nubes de tags avanzadas, Tagadelic Views

Es un concepto muy parecido a Views Cloud, pero utiliza Tagadelic para calcular los pesos de los términos, Tagadelic Views, nos permite filtrar los tags de una nube de tags, además de por vocabulario, por tipo de contenido, usuario, etc. Este módulo requiere Tagadelic y Views 2. Pasos a seguir:

  • Crear una vista de tipo Node (NO de tipo Term) Tagadelic_View.png
  • En Basic Settings, escogemos el Style Tagadelic
  • Tagadelic_Style.png

  • Configuramos el Style, con el número de términos a mostrar, y el nombre del vocabulario. Tagadelic_Style_Config.png
  • No tenemos que elegir Fields porque ya selecciona automáticamente el nombre de los términos.

Podemos crear el bloque como display en la vista.

Tagadelic_Block_View.png

Y lo podremos añadir en la página de administración de bloques. Tagadelick_Block_config.png Con este resultado:

Tagadelic_Block_0.png

Al ser una View, podemos establecer los filtros que nos parezcan más adecuados y otras opciones adicionales.

En resumen

Podemos generar nubes de tags en Drupal de muchas maneras con muchos resultados diferentes, Tagadelic es una muy buena opción si queremos una solución rápida sin complicaciones, para un blog es ideal. Si además lo queremos con movimientos, Cumulus es bastante bonito y Taxonomy Cloud es una opción para diseños alargados. Pero si vamos a necesitar una personalización alta sobre el contenido o el formato de la nube de tags, Views Cloud es una buena elección para nubes de elementos que no sean taxonomías y Taxonomy Views es la opción para nubes de tags de vocabularios, al basarse en Views, nos permiten personalizar filtrando, y también el HTML que se muestra gracias al sistema de personalización de plantillas que provee Views 2. Además nos permite usar opciones avanzadas como el caching, o la restricción de acceso por roles o permisos, etc.

Comentarios

Faaaaaa, que manera de recortar capturas de pantalla :)

La verdad las nubes de tags siempre me parecieron un poco desordenadas, pero me apunto el tutorial por si tengo que armar alguna en un futuro.

Por cierto, views 3 agrega soporte para Group By, por lo que supongo que se podrá ordenar la vista de Views Cloud por COUNT(tid) aunque habrá que ver los niveles de performance del asunto.

Muy buen artículo.
Saludos!

Genial artículo pedro, muy interesante, pero yo estoy con Mariano, las nubes de tags a pesar de ser uno de los elementos de reseña de la web 2.0 no han demostrado su utilidad,y de hecho a nivel de usabilidad se ha demostrado que son menos útiles que los menús.

Podríamos hablar de la problemática de las nubes de tags, pero creo que eso no entraría aquí.

Un saludo

Oskar

@Mariano ¿No te gusta la forma de poner capturas? ¿prefieres pantallas completas?

Yo no se si han demostrado su utilidad o no, en neurotic vamos a sacar un proyecto en el que la nube de tags ha sido muy cuidada y es parte importante de la portada.
Además, en todos los proyectos que tienen un blog o similar, nos piden poner nubes de tags, es algo que es muy demandado, y tampoco recomendamos que no se añadan, no veo que hagan ningún mal :).

No Pedro, me refería al trabajo, jajaja, mucho tiempo recortando.

Bah yo también lo hago, no se de que me sorprendo :(

Con Mac no es tanto trabajo :) http://www.viddler.com/explore/djmckee/videos/8/

un post muy interesante, pero efectivamente con mac es diferente la question!

Excelente articulo!

Gracias por incluir todas las formas de hacerlo, que lleva tiempo, y nos ahorra a todos tener que trastear con cada una de las posibilidades =)

Por cierto, en Ubuntu, vas al menu de accesorios-> screenshot, y puedes seleccionar una parte de la pantalla, y luego o salvarlo directamente, abrirlo con el programa que mas te guste, o copiarlo al clipboard. Con GIMP tambien seleccionar una parte de la pantalla al hacer el screenshot si lo prefieres.

Un saludo y Feliz Año Nuevo!

<p>
Gracias Manuel!</p>
<p>
Feliz a&ntilde;o nuevo, nos vemos en la Drupalcamp!</p>

buen tuto, estoy pensando crear una nube para mi web, pero hasta ahora me a resultado algo complejo, seguiré las indicaciones para ver si llego a algo,
gracias.

Muchas gracias Pedro, me ha venido muuuuy bien este post. He ahorrado mucho tiempo.
Saludos!

<p>Gracias a vosotros por pasaros a comentar!</p>

Muy buen post Pedro, Gracias por el esfuerzo.

Se agradece, buen trabajo.

<p>Gracias a vosotros por comentar!</p>

La verdad se fue al carajo... alto articulo man!! te felicito, ademas me re salvaste ;) te debo una..

muy buen articulo, muchas gracias por la información!

PREGUNTA:
Yo utilzo nube de tags, taxonomy manager y tagadelic.
El primero del core de drupal, el taxonomy manager para administrar visualmente los volcabularios y terminos, y tagadelic, para poner los terminos de un vocabulario asociados a un nodo/contenido.

Mi pregunta es, como poder mostrar en la web, una nive de tags, PERO CON SUBTERMINOS.
O sea, si alguien utiliza taxonomy manager, sabrá que se ve un vocabulario, dentro un termino que puede contener OTRO termino (subtermino) de este modo, se realiza un arbol.
ESTO MISMO, me gustaria que lo haga tagadelic, segun creo, este no muestra la herencia de terminos.

Ej:
Vocabulario:
Tecnologia

Terminos:
Informatica
- apple
- - snow leopard
- - lion
- microsoft
- - windows
- - sql server
- linux
- - juegos
- - distribuciones
- - etc. :)

Si yo genero contenido para estos tags, tagadelic me va a pintar algo parecido a ordenado por peso, o alfabeticamente, o como sea, pero PIERDO la relacion de que es cada cosa!

apple
snow leopard
lion
microsoft
windows
sql server
linux
juegos
distribuciones

O sea, no quiero que aparezca (sql server ahi suelto, sino DEBAJO DE MICROSOFT! :)
Existe algo? Me explique? Se me entendio? ayuda? :D jejeje

Gracias por todo. Muy bueno el articulo.

Gracias por el tutorial ojalá todos fueran así la verdad que se ahorra mucho tiempo y esta muy bien explicado todo es la primera vez que entro a este sitio y creo que si todos son así de nuevos me voy a volcer un fan
gracias por el trabajo

Gracias Pedro por el tutorial, de seguro que me servirá de mucho.

tengo el mismo problema que gabriel y no le saco punta haber si podeis decir alguien como crear un bloque de tags de los terminos por diccionario por que me lleva negro. Gracias a todos los que aportais vuestro granito en estos temas.

Añadir nuevo comentario