Questa è la traduzione dell'articolo Tag Clouds - Styling and Adding Sort Options di Alen Grakalic pubblicato originariamente su CSS Globe il 31 Marzo 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Gli utenti hanno opinioni molto diverse quando si parla di tag cloud. Qualunque siano le preferenze di ciascuno, comunque, categorizzare degli item (per esempio i post di un blog) usando i tag è cosa divenuta popolare e molto diffusa. In questo articolo vedremo come poter gestire le tag cloud usando i CSS e Javascript.
Ecco subito la demo dell'esempio finale che andremo a realizzare. Potete anche scaricare un pacchetto zip contenente tutti i file utilizzati.
L'articolo consiste di due parti. La prima è relativa al markup HTML e agli stili applicati con i CSS; la seconda è dedicata all'aggiunta di una semplice interazione alla tag cloud usando Javascript. Mostrerò il mio modo di applicare uno stile alla tag cloud, sebbene possiate trovare in rete molti altri tutorial simili dedicati all'argomento.
HTML e CSS
Una tag cloud è una lista di link. Punto. L'unico elemento accettabile per organizzare i tag è una lista, ordinata o non ordinata. Il mio suggerimento è di usare una lista non ordinata per via della natura stessa delle tag cloud, che non hanno di per sé una struttura 'ordinata'. Nella maggior parte dei casi non avremo bisogno di elementi contenitori, la lista dovrebbe essere più che sufficiente. Ma se avete particolari esigenze a livello di stili potete fare un compromesso e aggiungere un div contenitore intorno alla lista. Alla fine di tutto avremo questo codice:
<div class="tags">
<ul>
<li class="tag1"><a href="#">Lorem ipsum</a></li>
</ul>
</div>In base a certi parametri, gli item compresi nella tag cloud avranno un differente trattamento visuale. L'idea è quella di dare enfasi agli item con un maggiore valore (per esempio i tag più usati). Ciò si ottiene in genere dando una dimensione e un peso maggiore a questi ultimi. Ecco un esempio.
L'altra opzione è di usare il colore e il contrasto per ottenere lo stesso risultato. In questo esempio, gli item con un valore inferiore hanno un contrasto minore e quelli con un valore maggiore un contrasto più alto.
Sebbene le tag cloud siano generate da un CMS a livello di back-end, il mio suggerimento è quello di usare nomi di classe per identificare gli item in base al loro valore. È infatti molto più facile cambiare una riga nel foglio di stile per modificare l'aspetto della tag cloud. A seconda del numero di step di valori, aggiungete un nome di classe tipo "tag1", "tag2", etc, dove la classe con il valore 1 dovrebbe definire gli item con i valori più bassi e quelle con numeri maggiori a 1 gli item con i valori più alti.
Azione!
Molti utenti trovano le tag cloud troppo confuse da usare. Perché allora non fornire ad essi un'alternativa? Con poche righe di Javascript potete aggiungere un'opzione per ordinare la lista alfabeticamente, cosa che potrebbe rendere la cloud più usabile. È anche possibile presentare la lista basandosi su elementi blocco invece che inline: la tag cloud sarà così più leggibile e pulita.
Quello che andremo a fare è aggiungere un nome di classe all'elemento ul che modificherà l'aspetto della tag cloud. Prima di tutto facciamolo senza javascript. Ecco la demo statica con entrambi gli stili. Ed ecco il codice CSS usato:
.tags ul{
margin:1em 0;
padding:.5em 10px;
text-align:center;
background:#71b5e9 url(bg_tags.gif) repeat-x;
}
.tags li{
margin:0;
padding:0;
list-style:none;
display:inline;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
}
.tag1{font-size:100%;}
.tag2{font-size:120%;}
.tag3{font-size:140%;}
.tag4{font-size:160%;}
.tag5{font-size:180%;}
/* layout alternativo */
.tags .alt{
text-align:left;
padding:0;
background:none;
}
.tags .alt li{
padding:2px 10px;
background:#efefef;
display:block;
}
.tags .alt .tag1,
.tags .alt .tag2,
.tags .alt .tag3,
.tags .alt .tag4,
.tags .alt .tag5{font-size:100%;}
.tags .alt .tag1{background:#7cc0f4;}
.tags .alt .tag2{background:#67abe0;}
.tags .alt .tag3{background:#4d92c7;}
.tags .alt .tag4{background:#3277ad;}
.tags .alt .tag5{background:#266ca2;}Aggiungendo un pulsante per cambiare l'aspetto visuale della tag cloud con poche righe di Javascript e l'uso di jQuery, possiamo facilmente modificare con un click gli stili. Ecco la demo con lo style switcher.
Inoltre, consentiremo di ordinare il tutto alfabeticamente o in base la valore di un tag. Useremo un grande plugin per jQuery creato da Sjeiti e chiamato TinySort. Potete scaricarlo da qui.
Ecco la demo.
