Una nube de etiquetas es una representación visual de una lista de elementos. A menudo verás nubes de etiquetas en los blogs. Se hizo popular 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 crean según la popularidad o el número de páginas que están etiquetadas con esa etiqueta en particular. Pero puede crear una nube de etiquetas a partir de cualquier lista de elementos en su sitio que tenga al menos dos formas de mostrarlos. Por ejemplo:
- Una lista de artículos en orden alfabético con los estilos que indican la popularidad de los artículos.
- Una lista de sitios web en orden alfabético con los estilos que indican cuáles le gustan más.
- Una lista de los editores web listados en orden de precios con los estilos que indican qué tan cerca llega cada uno de un conjunto de criterios predefinidos.
- Una lista de amigos con los estilos que indican la distancia desde su casa a la de ellos.
¿Qué necesitas para construir una nube de etiquetas?
Es fácil crear una nube de etiquetas, solo necesitas dos cosas:
- Una lista de elementos (como artículos web, sitios web o tus amigos)
- Una medida para cada uno de los elementos (como vistas de página por día, su clasificación de 1 a 10 o la distancia a su casa).
La mayoría de las nubes de etiquetas son listas de enlaces, por lo que es útil que cada elemento tenga 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 artículos que obtienen visitas cada día, y esta es una métrica fácil de usar para crear una nube de etiquetas. Entonces, para este ejemplo, crearemos una nube de etiquetas a partir de una lista de artículos, los 25 artículos principales de mi sitio para la semana del 1 de enero de 2007.
-
Determine cuántos niveles desea en su jerarquía.
Si bien es posible tener tantos niveles en su nube como elementos en su lista, el código se vuelve tedioso y las diferencias pueden ser mínimas. Recomiendo no tener más de 10 niveles en su jerarquía.
-
Decidir sobre los puntos de corte para cada nivel.
Puede ser tan simple como cortar sus vistas de página por día en 1/10 secciones, es decir. Si la página más grande de su sitio recibe 100 visitas al día, puede dividirla en 100+, 90-100, 80-90, 70-80, etc. Corté mis visitas de página de esa manera.
-
Enumere sus elementos en el orden de visualización de la página y asígnele un rango basado en el paso 2
No se preocupe si no tiene ningún elemento en algunas de las ranuras, eso hace que la nube sea más interesante.
-
Recurra a su lista en orden alfabético (o el segundo tipo de orden que quiera usar).
Esto es lo que hace que la nube sea interesante. Si lo deja ordenado por rango, solo será una lista con los elementos más grandes en la parte superior hacia abajo hasta el más pequeño en la parte inferior.
-
Escribe tu HTML para que el rango sea un número de clase.
class = "tag4"> Agregar archivos de audio de transmisión
-
¡Eso es!
Una vez que tenga el HTML para cada elemento de la lista individual y el orden en el que desea visualizarlos, deberá tomar una decisión. Puedes colocar los enlaces en un párrafo y ya habrás terminado. Pero esto no se marcaría semánticamente, y cualquier persona sin CSS que venga a su nube de etiquetas solo verá 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. Es un par de líneas más de código HTML y CSS, pero asegura que el contenido será legible sin importar quién venga a verlo. 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 diseña una nube de etiquetas, normalmente cambia el tamaño de fuente 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: centre el texto de la nube, establezca una altura de línea para que la nube sea legible y asegúrese de que las etiquetas de anclaje no tengan relleno:
Finalmente, si está utilizando el método de estilo semántico (es decir, la lista desordenada), deberá agregar dos líneas más de CSS para que la lista no tenga viñetas y no tenga sangría:
