Un nuage de tags est une représentation visuelle d'une liste d'éléments. Vous verrez souvent des nuages de tags sur les blogs. Il a été rendu populaire par des sites comme Flickr.
Les nuages de tags sont une liste de liens dont la taille et le poids (parfois aussi la couleur) changent en fonction de certains attributs mesurables. La plupart des nuages de tags sont construits en fonction de la popularité ou du nombre de pages étiquetées avec ce tag. Mais vous pouvez créer un nuage de tags à partir de n'importe quelle liste d'éléments de votre site pouvant au moins deux manières de les afficher. Par exemple:
- Une liste d'articles dans l'ordre alphabétique avec les styles indiquant la popularité des articles.
- Liste de sites Web classés par ordre alphabétique, avec les styles indiquant ceux qui vous conviennent le mieux.
- Liste des éditeurs Web classés par ordre de prix, avec les styles indiquant à quel point ils se rapprochent d'un ensemble de critères prédéfini.
- Une liste d'amis avec les styles indiquant la distance entre votre maison et la leur.
De quoi avez-vous besoin pour créer un nuage de tags?
Il est facile de créer un nuage de tags, vous n'avez besoin que de deux choses:
- Une liste d'éléments (articles Web, sites Web ou amis, par exemple)
- Une mesure pour chacun des éléments (comme les pages vues par jour, votre classement de 1 à 10 ou la distance de votre domicile).
La plupart des nuages de tags sont des listes de liens, il est donc utile que chaque élément soit associé à une URL. Mais cela n'est pas nécessaire pour créer une hiérarchie visuelle.
Étapes pour créer un nuage de tags contenant des liens populaires
Notre site contient des articles qui sont visionnés quotidiennement, ce qui nous permet d’utiliser facilement cette métrique pour créer un nuage de tags. Ainsi, pour cet exemple, nous allons créer un nuage de tags à partir d'une liste d'articles, les 25 articles les plus consultés sur mon site pour la semaine du 1er janvier 2007.
-
Déterminez le nombre de niveaux que vous souhaitez dans votre hiérarchie.
Bien qu'il soit possible d'avoir autant de niveaux dans votre nuage que d'éléments dans votre liste, cela devient fastidieux pour le code et les différences peuvent être très minimes. Je recommande de ne pas avoir plus de 10 niveaux dans votre hiérarchie.
-
Décidez des points de coupure pour chaque niveau.
Cela peut être aussi simple que de couper vos pages vues par jour en 1/10 tranches - c'est-à-dire. Si la plus grande page de votre site obtient 100 pages vues par jour, vous pouvez la découper en 100+, 90-100, 80-90, 70-80, etc. J'ai découpé mes vues de page de cette façon.
-
Répertoriez vos éléments dans l'ordre d'affichage des pages et attribuez-leur un classement basé sur l'étape 2.
Ne vous inquiétez pas si vous ne disposez d'aucun élément dans certaines des machines à sous, le nuage devient plus intéressant.
-
Utilisez votre liste par ordre alphabétique (ou la seconde sorte que vous souhaitez utiliser).
C'est ce qui rend le nuage intéressant. Si vous le laissez trié par rang, ce sera simplement une liste avec les plus gros articles du haut vers le bas et le plus petit en bas.
-
Ecrivez votre code HTML pour que le rang soit un numéro de classe.
class = "tag4"> Ajout de fichiers audio en streaming
-
C'est tout!
Une fois que vous avez le code HTML pour chaque élément de la liste et l'ordre dans lequel vous souhaitez les afficher, vous devez prendre une décision. Vous pouvez placer les liens dans un paragraphe et vous auriez terminé. Mais cela ne serait pas marqué sémantiquement, et quiconque sans CSS viendrait dans votre nuage de tags verrait juste un grand paragraphe de liens. Le code HTML pour ce type de liste ressemblerait à ceci:
Au lieu de cela, nous vous recommandons de créer votre nuage de tags en utilisant une liste non ordonnée. Il ne reste que quelques lignes de code HTML et CSS, mais il garantit que le contenu sera lisible, quel que soit le lecteur qui le visualise. Le HTML ressemblerait à ceci:
Mais où sont les styles pour le nuage de tags
Nous arrivons maintenant à la partie amusante: les styles CSS. Lorsque vous modélisez un nuage de tags, vous modifiez généralement la taille et l'épaisseur de la police. Vous pouvez également modifier la couleur de la police, de l'arrière-plan ou tout autre attribut de style, mais la taille et le poids sont traditionnels.
Vous avez besoin de 10 classes de style, une pour chaque rang de balise:
Nous aimons inclure des styles autour du nuage lui-même: centrez le texte du nuage, définissez une hauteur de ligne afin que le nuage soit lisible et assurez-vous que les balises d'ancrage ne sont pas rembourrées:
Enfin, si vous utilisez la méthode de style sémantique (c'est-à-dire la liste non ordonnée), vous devez ajouter deux lignes CSS supplémentaires afin que la liste ne comporte pas de puces et ne soit pas mise en retrait:
