in from the WEB (with the fish) 🌐, Software

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:
tassonomia cromatica

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 così 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 …

grafo koolinus.wordpress.com

  1. come si interpreta questo grafico?
    ho capito il significato di ogni ma… le varie connessioni? con quale criterio? ogni nodo sarebbe? non mi sembra granchè utile questo grafo

    complimenti per il sito.
    ciao

I commenti sono chiusi.

Webmention

  • Il tuo sito come un grafo, take 3 | kOoLiNuS ☞ il blog 17 Settembre 2007

    […] in due precedenti articoli (2006 e 2007) di questo blog mi sono dilungato nell’illustrare l’affascinante strumento messo […]

  • Che faccia ha il tuo sito? « il blog di rocco zanni 17 Settembre 2007

    […] — roccozanni Facendomi un giro tra i vari blog che circolano in rete, sono incappato in questo post sul blog di Nicola Losito, una vecchia conoscenza dei miei trascorsi universitari, dove viene […]

  • kOoLiNuS » Blog Archive » evoluzione del grafo 17 Settembre 2007

    […] avevo parlato tempo fa. Magari puoi usarlo per rinfrescare la chiave di lettura del grafo e dei colori […]