Webseiten als Graphen

06.07.2007

Wer täglich mit Webseiten umgeht, weiß, dass eine Seite immer mit denselben Tags beschrieben wird. So steht beispielsweise das <a> für einen Link und <img> für ein Bild.
Diese Tags folgen gewissen Regeln, die eine Seite hierarchisch aufbauen. Dies wird auch ersichtlich, wenn man den Quellcode einer Seite betrachtet.

Ahref Websites As Graph

Eine andere interessante Betrachtungsmöglichkeit einer Seite bietet www.aharef.info/static/htmlgraph/
Gibt man auf dieser Seite eine URL ein, wird ein Applet (Autor: Sala) gestartet, welches die in der Seite verwendeten Tags als Knotenpunkte abbildet. Was daraus entsteht, ist ein organisch anmutendes Gebilde.
Zunächst mag man keinen wirklichen Nutzen dieser Art der Abbildung erkennen. Betrachtet man jedoch die Bedeutung der einzelnen Farbgebungen, so kann man einen visuellen Eindruck von der Struktur der Seite gewinnen.

Wofür stehen die Farben?
blau: für Verlinkungen (das A Tag)
rot: für Tabellen (TABLE, TR und TD Tags)
grün: für das DIV Tag
lila: für Bilder (das IMG Tag)
gelb: für Formelemente (FORM, INPUT, TEXTAREA, SELECT und OPTION Tags)
orange: für Zeilenumbrüche und  Absätze (BR, P, und BLOCKQUOTE Tags)
schwarz: das HTML Tag, der Wurzelknoten (root node)
grau: alle anderen Tags

Abbildung zeigt die Seite https://blog.doubleslash.de

Auch wenn man nun keinen wirklichen Mehrwert aus der Erzeugung dieses Graphen ziehen mag, so ist es dennoch interessant anzusehen, wie die Struktur ensteht und sich entfaltet. Und im Idealfall hat man ein schönes Bild, was gerahmt an der Wand als Kunstobjekt durchgehen kann.

Peter’s Validation Graph

Einen ähnlichen Graphen kann man mit dem kleinen Javatool „Validation Graphs“ von Peter’s Site erzeugen lassen.
Bei diesem Graphen wird die Darstellung um ein Feature erweitert. Der HTML Inhalt  wird durch den HTML Validator des W3C geprüft. Zudem bildet er die gesamte Seitenstruktur und nicht nur die einer einzelnen Seite ab.

 Validation Graph

Die Abbildung zeigt ebenfalls die Seite https://blog.doubleslash.de. Man kann jedoch erkennen, dass die Knoten von einem Kreis umrandet sind.

Diese Kreise geben das Ergebnis der Validierung wieder. Wäre ein Kreis rot, würde dies auf eine invalide Seite hinweisen. Bei grün ist die Seite valide. Was ein schwarzer Kreis bedeutet, ist der Seite des Autors leider nicht zu entnehmen. Vermutlich sind dies die Rootnodes der einzelnen Seiten.
Die Farbe der Knoten selbst  stehen für den Dateityp. Blau ist bspw. ein XML Dokument.
Leider kann auch hier den Knoten nicht entnommen werden, wo genau sie sich im Dokument befinden. Dies wäre interessant, wenn ein invalides Dokument erkannt wird.

Aber zumindest bekommt man schnell einen Überblick, ob die Seite an sich W3C konform ist.

Zurück zur Übersicht

Ein Kommentar zur “Webseiten als Graphen

  1. Tja, gleich nach dem Binärsystem ist wohl das hierarchische Ordnungskriterium mit die wichtigste Erfindung in der Informatik.

    Die Frage ist, wie weit wir von der grafischen Programmierung via Zweige verschieben entfernt sind.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*