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:

TAMBIÉN TE INTERESA

seguridad de los datos personales

Descuidos en tu día a día que comprometen la seguridad de los datos personales

Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

planes de entrenamiento con IA

La era de los gimnasios smart y los planes de entrenamiento con IA

El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,

apps de citas

Apps de citas y el fraude romántico: ligoteo y estafas

Hay a quien las apps de citas le funcionan muy bien en todos los sentidos. Además de lograr el match deseado, su seguridad no se ve comprometida en ningún momento. Así da gusto, encontrar pareja nunca fue tan sencillo. Otra cosa es que la otra persona con la que se hace match no sea la

riesgos DeepSeek

Reportan los primeros riesgos de seguridad en DeepSeek

Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha

dispositivos Alexa

Cómo controlar la privacidad de tus conversaciones con los dispositivos Alexa

Los dispositivos Alexa se han convertido en un miembro más de muchas familias. Ciertamente útiles para recordatorios de la lista de la compra, alarmas, recetas o para disfrutar de un rato de música, estos famosos asistentes virtuales en forma de altavoces son indispensables para muchos y han dado un plus de inteligencia para los hogares.