Cómo diseñar una nube de etiquetas utilizando CSS en su sitio web

Cómo diseñar una nube de etiquetas utilizando CSS en su sitio web

Cómo diseñar una nube de etiquetas utilizando CSS en su sitio web

VALORACIÓN DEL ARTÍCULO:
5/5

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. Escribe tu HTML para que el rango sea un número de clase.

    >Adding Streaming Audio Files
  6. ¡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:

Deja un comentario

TAMBIÉN TE INTERESA

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo