lunedì 5 gennaio 2015

Creare una tag cloud

Oggi vedremo come creare una tag cloud. Ma cosa è una tag cloud? La trovate anche in questo blog, si tratta di una specie indice dove le voci sono messi a nuvola, grandi quando l'argomento è ripetuto nel sito, c'è chi la chiama anche nuvola di parole. Più un argomento è trattato, più grande sarà la voce:
Ad esempio ogni post scritto su questo blog ha delle etichette (tag) e in basso a destra trovate il tag cloud di questo blog.
Creiamo uno stack con due campi di testo e un pulsante:
Il campo a sinistra lo chiamiamo lista e gli mettiamo una serie di parole seguite da virgola e un numero casuale; il numero rappresenta il numero di occorrenze nel sito.

Il campo a destra lo chiamiamo tagCloud. Lì apparirà il nostro tag cloud.
Cerchiamo di riempire tutto il nostro spazio a disposizione, perciò mettiamo nel pulsante il seguente codice:

on mouseUp
   aggiorna 1
end mouseUp

on aggiorna scala
   #prendiamo la lista
   put the text of field lista into tLista
   #calcoliamo il minimo e il massimo delle occorrenze   
   put item 2 of line 1 of tLista into minimo
   put item 2 of line 1 of tLista into massimo
   repeat for each line tLine in tLista
      put item 2 of tLine into temp
      put max(massimo,temp) into massimo
      put min(minimo,temp) into minimo
   end repeat
   #calcoliamo lo scostamento
   put massimo - minimo into delta
   #facciamo in modo da riempire tutto lo spazio a disposizione
   put the height of field tagCloud into maxh
   repeat for each line tLine in tLista
      put item 1 of tLine into testo
      put item 2 of tLine into temp
      put (temp - minimo + 1) / delta into perc
      put round(maxh * perc * scala) into ff #grandezza font
      #assicuriamoci che sia leggibile impostando il minimo font a 8
      if ff < 8 then
         put 8 into ff
      end if      
      put " <font size=" & ff & ">" & testo & "</font> " after tagc
   end repeat
   set the htmltext of field tagCloud to tagc
   if (the formattedheight of field tagCloud ) > maxh then
      aggiorna (scala * 0.9)
   end if   
end aggiorna

In questo modo verranno fatti più tentativi, cercando di diminuire il font massimo fino a far entrare tutto nel campo di testo, e il font più piccolo sarà 8. Premendo il pulsante dovreste ottenere un risultato simile a questo:
Potete anche aggiungere altre proprietà al testo, ad esempio possono essere dei link o molto altro.
Se avete dubbi, chiedete pure nei commenti.

Nessun commento:

Posta un commento