Una tag cloud in ASP .NET

Immagini

di Michele Bertoli

Tra gli innumerevoli strumenti che il web 2.0 ha il merito di avere diffuso c’è senza dubbio il tagging.
Un tag (etichetta) non è altro che un’informazione aggiuntiva associata ad un oggetto digitale (sia esso un video, un’immagine o un testo).
Il tagging si è affermato come standard di fatto per moltissime web application e gli utenti hanno risposto in modo positivo a questo fenomeno.
Le etichette associate ai contenuti sono spesso applicate, infatti, dagli stessi fruitori del servizio: come nel caso di Flickr (il celebre portale di condivisione di fotografie) in cui viene data la possibilità di collegare parole chiave ad ogni immagine caricata, al fine di facilitare ricerca e catalogazione.
In altri casi invece sono gli autori a taggare, come ad esempio un blogger che etichetta i propri post inserendoli in determinate categorie.

Parallelamente allo sviluppo di questo tipo di gestione delle informazioni, hanno visto la luce nuovi elementi dell’interfaccia utente atti a rappresentarle.
Tali strumenti innovativi hanno il compito di guidare l’utente agevolando la fruizione dei contenuti.
Uno tra i meccanismi a supporto della navigazione che merita menzione è la tag cloud (nuvola di etichette).

Nell’esempio la tag cloud di Flickr (Immagine 1).

La tag cloud si presenta come un elenco di etichette in ordine alfabetico, la cui dimensione riflette il numero di informazioni associate ad ognuna di esse.
Ogni tag è solitamente rappresentato da un link ad una pagina in cui sono mostrati i contenuti legati al termine stesso. Di fronte ad una tag cloud l’utente può rapidamente farsi un’idea di quali contenuti siano presenti nel sito e in che misura. L’esperienza di navigazione risulta quindi gradevole, mirata ed intuitiva.

In questo articolo vedremo come costruire una nuvola di etichette in ASP.NET e in particolare in C#.

Cominciamo analizzando gli step fondamentali dello script che andremo ad implementare:

- Selezione dal database di una lista composta da due colonne: tag e numero di elementi cui fa riferimento.

- Individuazione del minimo e del massimo numero di informazioni associati alle etichette.

- Creazione della tag cloud proporzionando il font-size di ciascuna etichetta dinamicamente in base al peso.

Ora possiamo dare uno sguardo alla struttura di un database predisposto per il tagging.
Supponiamo ad esempio, in estrema sintesi, che la base dati di un blog sia costruita come da Immagine 2.
A questo punto iniziamo a scrivere il codice.
La prima operazione consiste nel creare un component Literal che avrà il compito di contenere la nostra tag cloud.

<asp:Literal ID=”Literal” runat=”server”></asp:Literal>

using (OleDbConnection connection = new OleDbConnection(connectionString))
{
string selectCommand;
OleDbDataAdapter adapter;
DataSet dataSet;
double fontSize;
int numberOfPostsMin;
int numberOfPostsMax;
int numberOfPostsDiff;

int fontSizeMin = 10;
int fontSizeMax = 30;
int fontSizeDiff = fontSizeMax - fontSizeMin;

selectCommand = “SELECT Tag.Name, COUNT(TagMap.Id) AS NumberOfPosts “ +
“FROM Tag INNER JOIN TagMap ON Tag.Id = TagMap.TagId “ +
“GROUP BY Tag.Name “ +
  		“ORDER BY Tag.Name”;
 
  	adapter = new OleDbDataAdapter(selectCommand, connection);
  	dataSet = new DataSet();
adapter.Fill(dataSet, “Tag”);
adapter.Dispose();

numberOfPostsMin = Convert.ToInt32(dataSet.Tables[“Tag”].Compute(“Min(NumberOfPosts)”, null));numberOfPostsMin = Convert.ToInt32(dataSet.Tables[“Tag”].Compute(“Min(NumberOfPosts)”, null));
numberOfPostsMax = Convert.ToInt32(dataSet.Tables[“Tag”].Compute(“Max(NumberOfPosts)”, null));
 	numberOfPostsDiff = numberOfPostsMax - numberOfPostsMin;

foreach (DataRow dataRow in dataSet.Tables[“Tag”].Rows)
{
fontSize = fontSizeMin + (((Convert.ToInt32(dataRow[“NumberOfPosts”].ToString()) - numberOfPostsMin) * fontSizeDiff) / numberOfPostsDiff);
 
Literal.Text += String.Format(“<a href=’search.aspx?q={0}’ style=’font-size:{1}px;’>{0}</a> “,
dataRow[“Name”].ToString(),
Convert.ToInt32(fontSize));
 	}
}

Potrete così migliorare l’esperienza dei vostri utenti offrendo una navigazione semplificata grazie alla tag cloud.

____________________________________________________________

Michele Bertoli
michele@havana7.com
Studente all’università Cattolica del Sacro Cuore con 5 anni di esperienza alle spalle nello sviluppo di software gestionali multipiattaforma. Ama progettare e realizzare servizi Web 2.0,
imparare nuove tecniche di programmazione e cimentarsi nella sperimentazione di sistemi di comunicazione evoluti come i social network.