Programmare una Tag Cloud

Rappresenta una delle maggiori mode del momento. Uno dei primi siti (se non il primo...) a lanciare le Tag Clouds è stato del.icio.us, ma la tecnica ha subito preso piede ed oggi è quasi diventata il simbolo dei siti progettati con un approccio Web 2.0. Cerchiamo di capire meglio di cosa si tratta.

Le Tag Clouds, tanto per capirci, sono quei box che contengono i tag associati ad un entry in un blog, piuttosto che ad un semplice dato, e che a secondo della loro densità  di inserimento hanno dimensioni differenti. Per la serie un esempio funziona più di mille parole eccovi un esempio preso dal blog di Peter Freitag.
Perfetto, adesso che abbiamo capito di cosa stiamo parlando, vediamo anche come poter programmare questi "new mullets", come li ha definiti Jeffrey Zeldman .

Concettualmente il lavoro è molto semplice; si tratta di gestire queste operazioni:

• ritirare la lista di TAG conservata all'interno del nostro database usando la funzione COUNT() di SQL
  SELECT COUNT(tag) AS myTag, tag FROM tabellaTag GROUP BY tag;
• calcolare la differenza tra la frequenza massima e quella minima del valore che vi viene ritornato dalla query, dividendolo per un coefficente distributivo (a piacere, a secondo di quante dimensioni diverse dei font si vogliono usare);
• eseguire il loop all'interno dell'array restituito dalla query e stampare i risultati usando a secondo del valore un CSS diverso;
• usare i CSS per definire le classi usate;


.moltopiccolo { font-size: xx-small; }
.piccolo{ font-size: small; }
.medio { font-size: medium; }
.grande{ font-size: large; }
.enorme{ font-size: xx-large; }


A questo punto potete scegliere il vostro linguaggio preferito ed applicare questa semplice procedura, ed il gioco è fatto. Avete anche voi il box Tag Cloud :). Peter sul suo blog fa un esempio in Coldfusion:


<cfquery datasource="#dsn#" name="tags">
SELECT COUNT(tag) AS tagCount, tag
FROM tblblogtags
GROUP BY tag
</cfquery>


Calcolo della frequenza:


<cfset tagValueArray = ListToArray(ValueList(tags.tagCount))>
<cfset max = ArrayMax(tagValueArray)>
<cfset min = ArrayMin(tagValueArray)>


Calcolo la differenza:


<cfset diff = max - min>
<cfset distribution = diff / 3>


Loop tra i tag e output:


<cfoutput query="tags">
<cfif tags.tagCount EQ min>
<cfset class="smallestTag">
<cfelseif tags.tagCount EQ max>
<cfset class="largestTag">
<cfelseif tags.tagCount GT (min + (distribution*2))>
<cfset class="largeTag">
<cfelseif tags.tagCount GT (min + distribution)>
<cfset class="mediumTag">
<cfelse>
<cfset class="smallTag">
</cfif>
<a href="/tag/#tags.tag#" class="#class#">#tags.tag#</a>
</cfoutput>


CSS:


.smallestTag { font-size: xx-small; }
.smallTag { font-size: small; }
.mediumTag { font-size: medium; }
.largeTag { font-size: large; }
.largestTag { font-size: xx-large; }