Schlagwörter

, ,

…oder eher Baum, allerdings ist ein Baum ja auch nur ein spezieller Graph😉

http://www.aharef.info/static/htmlgraph/

Dieses nette Java-Applet visualisiert die Struktur des Quelltextes einer Webseite als Graph. Beispielsweise sieht dieser Blog so aus (bzw. sah vor diesem Artikel):

Blau: Links (A)
Rot: Tabellen (TABLE, TR, TD)
Grün: DIV
Pink: Bilder (IMG)
Gelb: Formulare (FORM, INPUT, TEXTAREA, SELECT, OPTION)
Orange: Zeilenumbrüche, Absätze, Einrückungen (BR, P, BLOCKQUOTE)
Schwarz: Wurzelknoten (HTML)
Grau: alles andere (Listen etc.)

Wie man also sehr gut sehen kann, verwendet dieser Blog keine Tabellen, dafür sind viele Links vorhanden.

Interessant sind auch meine anderen beiden Webseiten (Freewar lass ich mal außen vor):

AngelOfDark.de:

Gut erkennbar ist, dass ich dort ebenfalls keinerlei Tabellen verwende (außer, wo es wirklich sinnvoll ist und das ist auf der Hauptseite nicht der Fall). Oben rechts die grauen Knoten sind die Metatags, unten Links die Links mit Bildern sind die Social-Bookmarks-Knubbellinks,  unten rechts ist die linke Navigationsspalte dargestellt. Der eigentliche Inhalt ist die orange ‚Blume‘, da dort viele Zeilenumbrüche und Absätze vorkommen. Außerdem sind nur noch relativ wenige DIVs zu finden, da ich bei der Umstellung der Navigation auf Listen gleich mal noch ein paar sinnfreie DIVs rausgeschmissen hab😉

samael.angelofdark.de:

Hier ist dann auch mal eine Tabelle zu sehen – die Updates der Seite stehen tabellarisch mit Datum in der linken Spalte und gemachten Sachen in der rechten Spalte auf der Hauptseite, diese Tabelle ist auch relativ lang, deshalb ist diese ‚Blume‘ so groß.

Ein echtes Tabellenlayout sieht anders aus😉

Unten die Blume ist die Navigation, gut erkennbar an den vielen Links, die in grauen Tags stehen, d.h. als Liste organisiert sind.

Interessantes:

Eine extrem interessante Seite für dieses Tool ist de.eurosport.yahoo.com, allerdings sollte man dafür etwas Zeit mitbringen. Es sieht aus, als hätten unterschiedliche Menschen mit unterschiedlichen Prioritäten an dieser Seite gearbeitet, erst erscheinen relativ strukturierte DIVs und dann auf einmal geht es los mit Tabellen ohne Ende.

Bei Flickr gibt es einen eigenen Tag (websitesasgraphs), mit dem man extrem viele Screenshots verschiedenster Seiten finden kann: http://www.flickr.com/photos/tags/websitesasgraphs/