Una nube de etiquetas es una representación visual de una lista de elementos. A menudo verás nubes de etiquetas en los blogs. Fue popularizado por sitios como Flickr.
Las nubes de etiquetas son una lista de enlaces que cambian de tamaño y peso (a veces también de color) dependiendo de algún atributo medible. La mayoría de las nubes de etiquetas se construyen en base a la popularidad o al número de páginas que se etiquetan con esa etiqueta en particular. Pero puede crear una nube de etiquetas a partir de cualquier lista de elementos de su sitio que tengan al menos dos formas de mostrarlos. Por ejemplo:
- Una lista de s en orden alfabético con los estilos que indican la popularidad de la s.
- Una lista de sitios Web en orden alfabético con los estilos indicando cuáles te gustan más.
- Una lista de editores Web listados en orden de precio con los estilos que indican la cercanía de cada uno de ellos a un conjunto predefinido de criterios.
- Una lista de amigos con los estilos que indican la distancia de su casa a la de ellos.
¿Qué necesita para construir una nube de etiquetas?
Es fácil construir una nube de etiquetas, sólo se necesitan dos cosas:
- Una lista de elementos (como sitios web, sitios web o sus amigos)
- Una medida para cada uno de los elementos (como las páginas vistas por día, su clasificación 1-10, o la distancia a su casa).
La mayoría de las nubes de etiquetas son listas de enlaces, por lo que ayuda si cada elemento tiene una URL asociada. Pero eso no es necesario para crear una jerarquía visual.
Pasos para construir una nube de etiquetas de enlaces populares
Nuestro sitio tiene s que recibe visitas de página todos los días, y esta es una métrica fácil de usar para crear una nube de etiquetas. Así que para este ejemplo, crearemos una nube de etiquetas a partir de una lista de s, los 25 mejores de mi sitio para la semana del 1 de enero de 2007.
-
Determine cuántos niveles desea en su jerarquía.
Aunque es posible tener tantos niveles en tu nube como elementos en tu lista, esto se vuelve tedioso para codificar, y las diferencias pueden ser mínimas. Recomiendo no tener más de 10 niveles en su jerarquía.
-
Decida los puntos de corte para cada nivel.
Puede ser tan simple como cortar las páginas vistas por día en 1/10 rebanadas – es decir, si la página más grande de su sitio obtiene 100 páginas vistas por día, puede cortarla en 100+, 90-100, 80-90, 70-80, etc. He cortado las páginas vistas de mi página de esa manera.
-
Enumere sus artículos en el orden de vista de página, y déles un rango basado en el paso 2
No te preocupes si no tienes ningún elemento en algunas de las ranuras, eso sólo hace que la nube sea más interesante.
-
Resuelve tu lista en orden alfabético (o el segundo orden que quieras usar).
Esto es lo que hace que la nube sea interesante. Si lo deja ordenado por rango, entonces sólo será una lista con los elementos más grandes en la parte superior hasta los más pequeños en la parte inferior.
-
Escribe tu HTML para que el rango sea un número de clase.
>Adding Streaming Audio Files
-
¡Eso es todo!
Una vez que tenga el HTML para cada elemento de la lista individual y el orden en que desea visualizarlo, deberá tomar una decisión. Puedes colocar los enlaces en un párrafo y ya está. Pero esto no estaría semánticamente marcado, y cualquiera sin CSS que venga a su nube de etiquetas vería un gran párrafo de enlaces. El HTML para este tipo de lista se vería así:
En su lugar, le recomendamos que cree su nube de etiquetas utilizando una lista desordenada. Son unas cuantas líneas más de código HTML y CSS pero asegura que el contenido sea legible sin importar quién lo vea. El HTML se vería así:
Pero ¿dónde están los estilos para la nube de etiquetas?
Ahora llegamos a la parte divertida, los estilos CSS. Cuando se estiliza una nube de etiquetas, normalmente se cambia el tamaño y el peso de la fuente. También puede cambiar el color de la fuente o el fondo o cualquier otro atributo de estilo, pero el tamaño y el peso son tradicionales.
Necesitas 10 clases de estilo, una para cada rango de etiqueta:
Nos gusta incluir algunos estilos alrededor de la nube en sí: centrar el texto de la nube, establecer una altura de línea para que la nube sea legible, y asegurarse de que las etiquetas de anclaje no tengan relleno en ellas:
Finalmente, si estás usando el método de estilo semántico (es decir, la lista desordenada), necesitarás añadir dos líneas más de CSS para que la lista no tenga viñetas y no esté sangrada:
