il tuo sito come un Grafo

cos’e’ un grafo ?

i grafi sono l’oggetto di studio della teoria dei grafi e trovano applicazioni in diversi ambiti che vanno dalla topologia all’informatica.

Possiamo immaginare geometricamente un grafo come un insieme di punti nello spazio e di curve continue che connettono coppie di punti senza intersecarsi tra loro.

Fatta questa premessa passiamo a parlare di questa nuova piccola applicazione web (in java, o mio dio quanta CPU si ciuccia ?) che si occupa di analizzare il vostro sito / blog / wiki e restituirvi a video un grafo colorato. I colori sono in pratica i pesi dei vari tag HTML usati nella pagina che vorrete esaminare.

Vediamo dunque il grafo del mio sito:

Diamone ora una interpretazione basandoci sul post dell’ autore che ne spiega le motivazioni e illustra i concetti analizzando alcuni siti famosissimi.

La struttura di un sito web è definita in HTML, la lingua franca utilizzata per la pubblicazione di informazioni sul web. Il lavoro del vostro browser è quello di eseguire un render del codice HTML secondo delle specifiche

e come dice l’autore, questa è la funzione di base di un browser web, ma andiamo al passaggio saliente:

HTML consiste nell’aggiungere al testo quelli che sono chiamati tags, come il tag A tag per indicare i link, IMG per le immagini e cosi’ via. Inoltre siccome abbiamo tipicamente un annidamento di tag all’interno di altri tag di fatto si ha che questi sono organizzati in una maniera gerarchica e dunque possono essere rappresentati attraverso l’ uso di un grafo.

Tutto chiaro ? Spero di si. L’uso che Aharef ne ha fatto secondo me è molto interessante, proprio per il motivo accennato prima, con l’ uso dei colori per dare un peso a determinati tag, nello specifico ha utilizzato la seguente palette di colori per indicare:

blue: per i link (tag A)
rosso: per le tabelle (tag TABLE, TR e TD)
verde: per i DIV
viola: per le immagini(tag IMG)
giallo: per le form (tag FORM, INPUT, TEXTAREA, SELECT e OPTION)
arancio: per i tag BR, P e BLOCKQUOTE
nero: per i tag HTML, il nodo radice
grigio: per tutti gli altri tag

Con uno sguardo veloce quindi possiamo capire a quali contenuti e secondo quale “politica” viene gestito un sito web. Interessante vero ? Ad esempio quello qui sotto è il grafo ottenuto analizzando il mio blog inglese ospitato su wordpress.com, nonostante il “back end” sia identico il risultato finale è abbastanza diverso …