Una tag cloud è una rappresentazione visiva di un elenco di elementi. Vedrai spesso tag cloud sui blog. È stato reso popolare da siti come Flickr.
Le nuvole di tag sono un elenco di collegamenti che cambiano di dimensioni e peso (a volte anche il colore) a seconda di alcuni attributi misurabili. La maggior parte delle nuvole di tag sono costruite in base alla popolarità o al numero di pagine etichettate con quel particolare tag. Ma puoi creare un tag cloud da qualsiasi elenco di elementi sul tuo sito che abbiano almeno due modi per visualizzarli. Per esempio:
- Un elenco di articoli in ordine alfabetico con gli stili che indicano la popolarità degli articoli.
- Un elenco di siti Web in ordine alfabetico con gli stili che indicano quali ti piacciono di più.
- Un elenco di editor Web elencati in ordine di prezzo con gli stili che indicano quanto ciascuno di essi si avvicina a un insieme predefinito di criteri.
- Una lista di amici con gli stili che indicano la distanza dalla tua casa alla loro.
Di cosa hai bisogno per costruire una nuvola di tag?
È facile creare un tag cloud, hai solo bisogno di due cose:
- Un elenco di elementi (come articoli Web, siti Web o amici)
- Una misurazione per ciascuno degli elementi (come le visualizzazioni di pagina al giorno, la classifica 1-10 o la distanza dalla casa).
La maggior parte delle nuvole di tag sono elenchi di collegamenti, quindi è utile se a ciascun elemento è associato un URL. Ma questo non è richiesto per creare una gerarchia visiva.
Passi per costruire un tag cloud di collegamenti popolari
Il nostro sito contiene articoli che visualizzano ogni giorno visualizzazioni di pagina e questa è una metrica facile da utilizzare per creare un tag cloud. Quindi, per questo esempio, creeremo un tag cloud da un elenco di articoli, i primi 25 articoli sul mio sito per la settimana del 1 ° gennaio 2007.
-
Determina quanti livelli vuoi nella tua gerarchia.
Mentre è possibile avere tanti livelli nella tua nuvola quanti sono gli elementi nel tuo elenco, questo diventa noioso per il codice e le differenze possono essere molto minime. Raccomando di non avere più di 10 livelli nella tua gerarchia.
-
Decidi i punti di interruzione per ogni livello.
Potrebbe essere semplice come tagliare le pagine viste al giorno in 1/10 fette, ad es. se la pagina più grande del tuo sito riceve 100 visualizzazioni di pagina al giorno, puoi suddividerla come 100+, 90-100, 80-90, 70-80, ecc. Ho tagliato le mie pagine viste in quel modo.
-
Elenca i tuoi articoli nell'ordine di visualizzazione delle pagine e assegna loro un rango basato sul passaggio 2
Non preoccuparti se non hai elementi in alcune delle slot, ciò rende il cloud più interessante.
-
Ricarica il tuo elenco in ordine alfabetico (o qualunque altro secondo tipo tu voglia usare).
Questo è ciò che rende il cloud interessante. Se la lasci in ordine di classifica, sarà solo una lista con gli articoli più grandi in alto e in basso nella più piccola in basso.
-
Scrivi il tuo codice HTML in modo che la classifica sia un numero di classe.
class = "tag4"> Aggiunta di file audio in streaming
-
Questo è tutto!
Una volta ottenuto l'HTML per ogni singolo elemento dell'elenco e l'ordine in cui si desidera visualizzarli, è necessario prendere una decisione. È possibile inserire i collegamenti in un paragrafo e si sarebbe fatto. Ma questo non sarebbe marcato semanticamente, e chiunque senza CSS arrivasse alla tua nuvola di tag vedrebbe solo un ampio paragrafo di link. L'HTML per questo tipo di elenco sarebbe simile a questo:
Invece, ti consigliamo di creare il tuo tag cloud utilizzando un elenco non ordinato. Sono poche altre righe di codice HTML e CSS, ma garantisce che il contenuto sia leggibile indipendentemente da chi viene a vederlo. L'HTML sarebbe simile a questo:
Ma dove sono gli stili per il Tag Cloud
Ora arriviamo alla parte divertente: gli stili CSS. Quando modifichi una tag cloud, di solito cambi la dimensione del font e il peso del font. Puoi anche cambiare il colore del carattere o dello sfondo o qualsiasi altro attributo di stile, ma le dimensioni e il peso sono tradizionali.
Hai bisogno di 10 classi di stile, una per ogni tag rank:
Ci piace includere alcuni stili attorno al cloud stesso: centrare il testo del cloud, impostare un line-height in modo che il cloud sia leggibile e assicurarsi che i tag di ancoraggio non abbiano padding su di essi:
Infine, se si utilizza il metodo di stile semantico (ad esempio l'elenco non ordinato), è necessario aggiungere altre due righe di CSS in modo che l'elenco non abbia punti elenco e non sia rientrato:
