Nube de Tags: tips de diseño y optimización

Mientras continúa la dicotomía pro-nube de tags y anti-nube de tags, la realidad es que más allá de gustos o preferencias, categorizar ítems utilizando etiquetas se ha vuelto una tendencia muy popular que hoy en día ya no se puede evitar en el mundo de Internet.

Las nubes de tags se han ganado un espacio en muchas webs, sin embargo para muchos siguen siendo sólo un objeto bonito, aunque haya sido la practicidad lo que masificó este widget. Aquí les dejamos algunos tips para optimizar la nube y mejorarla.

HTML & CSS

La nube de etiquetas no es más que un listado de enlaces. Los  únicos elementos aceptables para organizar etiquetas en una nube de etiquetas son listas ordenadas o desordenadas.

Es aconsejable utilizar listas desordenadas debido a la naturaleza “desprolija” de la nube. Si posees necesidades específicas de estilo puedes envolver la lista dentro de un div. Obteniendo algo así:

<div class="tags">
	<ul>
		<li class="tag1"><a href="#">Lorem ipsum</a></li>
	</ul>
</div>

La idea es basarnos en ciertos parámetros (más populares, más vistos, etc.), para darles a los ítems de la nube un tratamiento visual diferente. La idea es enfatizar aquellos ítems con más “valor” (de acuerdo a cierto parámetro) y eso se logra mayormente cambiando el tamaño y peso de la imagen, como en la nube de tags de Flickr:

Pero también existe otra opción que incluso se puede combinar con el cambio de tamaño: usar color y contraste. En estos ejemplo, aquellos ítems con menos valor tendrán menos contraste y viceversa:

Aunque la mayor parte de las nubes de etiquetas son generadas con código back-end y desde esa perspectiva no importa si añades nombre de clase o estilo interior de línea; es recomendable usar nombres de clase. Al final, es mucho más fácil cambiar una línea del CSS para modificar la apariencia que escarbar en el código back-end.

Y…¡Acción!

Muchos visitantes identifican a las nubes de etiquetas como algo muy confuso de utilizar. Justamente por cuestiones de usabilidad es que sería bueno contar con una alternativa. Con simples líneas de JavaScript puedes añadir ciertas opciones que harán que tu nube de etiquetas sea más utilizable, como por ejemplo la opción de poder ordenar los tags alfabéticamente, ya sea visualmente como una nube de tags o convirtiendo la nube en un listado. En el siguiente ejemplo, la nube de tags de delicious.com se puede ordenar alfabéticamente:

Nosotros te mostraremos cómo generar una nube que pueda ser ordenada alfabéticamente en un listado. Lo que hacemos aquí es básicamente añadir un nombre de clase al UL que hará que cambie la apariencia de la nube.

Agregando un botón de cambio utilizando simples líneas de jQuery podemos cambiar fácilmente estos estilos.

$(document).ready(function(){	

	// create a style switch button
	var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
		function(){
			$("#tags ul").hide().addClass("alt").fadeIn("fast");
		},
		function(){
			$("#tags ul").hide().removeClass("alt").fadeIn("fast");
		}
	);
 	$('#tags').append(switcher);	

});

Nota: En este ejemplo se está utilizando id como container de la nube de etiquetas en lugar de nombre de clase como en el primero.

Luego, permitiremos la clasificación por orden alfabético o por valor de etiqueta. Para esto se puede usar un plugin de Sjeiti llamado TinySort que se puede encontrar aquí.

$(document).ready(function(){	

	// create a style switch button
	var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
		function(){
			$("#tags ul").hide().addClass("alt").fadeIn("fast");
		},
		function(){
			$("#tags ul").hide().removeClass("alt").fadeIn("fast");
		}
	);
 	$('#tags').append(switcher);

	// create a sort by alphabet button
	var sortabc = $('<a href="javascript:void(0)" class="btn">Sort alphabetically</a>').toggle(
		function(){
			$("#tags ul li").tsort({order:"asc"});
		},
		function(){
			$("#tags ul li").tsort({order:"desc"});
		}
		);
 	$('#tags').append(sortabc);		

	// create a sort by alphabet button
	var sortstrength = $('<a href="javascript:void(0)" class="btn">Sort by strength</a>').toggle(
		function(){
			$("#tags ul li").tsort({order:"desc",attr:"class"});
		},
		function(){
			$("#tags ul li").tsort({order:"asc",attr:"class"});
		}
		);
 	$('#tags').append(sortstrength);			

});

Fuente: CSS Globe