Tag cloud con i CSS

Dopo aver parlato di tag list nell'articolo Tag List con background
e CSS torniamo a parlare di tag. Questa volta l'argomento sono le tag cloud, sempre più presenti in siti di natura
sociale, Web2.0 e blog.

A differenza delle tag list, che caratterizzano un singolo elemento (ad esempio un bookmark, un post, un articolo
o un prodotto) una tag cloud è un modo per offrire ai visitatori, in un solo colpo d'occhio, la diffusione di frequenza di tutti i tag presenti su un
sito. Dopo alcune considerazioni di carattere generale, presenteremo un semplice esempio
che dovrebbe costituire una buona base di partenza per le tag cloud che vorrete realizzare.

Tag cloud: alcuni consigli

Le tag cloud sono uno strumento di consultazione a volte utilissimo e in alcuni casi quasi necessario, ma ci sono
alcuni aspetti implementativi che vengono spesso trascurati. Prima di iniziare con codice ed esempi, ci sono alcuni
consigli che mi sento di dare:

• Se possibile, usare un carattere ridimensionabile anche per gli elementi delle tag cloud; ed in
  ogni caso accertarsi che anche i tag a frequenza più bassa siano abbastanza leggibili
• È indispensabile controllare il line-height della tag cloud: un valore senza unità di misura è nella maggior parte
  dei casi più indicato. Un buon valore da utilizzare potrebbe esssere quello corrispondente alla
  misura del tag più grande: se questo ad esempio è 180% del font-size di base (oppure 1.8em)
  si potrebbe specificare un valore di line-height di 1.8
• Il testo delle tag cloud generalmente si presenta centrato o giustificato: nel secondo caso è importante,
  per questioni di leggibilità, che la larghezza della tag cloud sia sufficientemente grande in modo da non generare troppo
  spazio vuoto e/o "buchi" tra i vari tag
• Il numero di grandezze dei tag da usare è variabile: un minimo di tre e un massimo di cinque dovrebbe andare
  nella maggior parte dei casi.
• L'informazione visiva sulla grandezza dei tag è importantissima, ma non dovrebbe essere l'unico modo
  per convogliare l'informazione della loro frequenza: l'uso dell'attributo "title" è il modo più diffuso
  ed efficace per fornire la frequenza numerica dei tag: qualcosa del tipo <a href="#" title="33 post con tag CSS">CSS</a>.
• In quanto al markup: trattandosi di un elenco di tag, la tag cloud dovrebbe essere codificata come
  una lista non ordinata

Esempio di tag cloud

Siamo così pronti a presentare l'esempio che accompagna l'articolo:
gli elementi della lista sono stati presi dai miei preferiti di del.icio.us.
Vediamo un estratto del markup:

Per brevità di editing, nell'esempio non ho indicato i titoli dei link... ma ci terrei a ricordare che sono
importantissimi. Da notare che ciascun link ha una classe che serve come aggancio al CSS per poter
attribuirne la grandezza visiva: a "size1" corrisponde la misura più piccola, mentre
a "size5" quella più grande.

Siamo così pronti a procedere con il CSS dell'esempio.
Per prima cosa verranno eliminati bullet, margini e padding dalla lista.Verrà poi regolata la larghezza,
l'altezza di linea e la giustificazione del testo.

I list-item verranno poi resi inline. Infine
per i link, questi verranno resi in grigio medio senza sottolineatura, con un margine destro di 0.2em per distanziarli un po',
sottolineati e un po' più scuri in fase hover. Le ultime cinque regole definiranno poi le dimensioni dei vari tag.
Ecco il CSS dell'esempio per intero:

Il nostro esempio è così ultimato: sono bastate poche regole per
avere una tag cloud ben presentata. Una piccola nota pratica per Internet Explorer

Conclusioni

Abbiamo visto alcuni consigli pratici e un semplice esempio per realizzare una tag cloud, che
dovrebbe essere compatibile con tutti i browser attuali e anche quelli meno recenti.

Non ci siamo soffermati molto sulla sua marcatura, che tipicamente è generata dalle piattaforme
di blogging o dai CMS. A tale proposito, due approfondimenti interessanti si possono trovare
sul nostro blog, in Il markup
di una tag cloud e Ispirazioni e riflessioni sui
tag. Alla prossima