webthreads.de als Graph
Das Applet “Websites as graphs” um eine Webseite als schönen Graph darstellen zu lassen ist schon vor einiger Zeit durch das Netz gewandert. Noch bevor es richtig publik wurde hatte ich das Tool entdeckt aber nicht weiter beachtet – wohl ein Fehler, denn sonst hätte ich mit einer der ersten sein können die dieses Tool beschreiben.
Naja, ein Grund damals das Tool nicht zu beschreiben war, dass mir die Erläuterungen zu den einzelnen Knotenenden und deren Farben gefehlt haben. Ich konnte somit neben dem schönen Aufbau und Darstellung des Baumes die Darstellung nicht deuten und fand das schnell langweilig. Aber evtl. war ich damals auch einfach nur blind und die Beschreibung war schon längst vorhanden… Jedenfalls habe ich sie heute entdeckt und möchte den Graph für webthreads.de natürlich auch präsentieren.
Was bedeuten die Farben an den Knotenenden?
blau: sind Links (<a> Tag)
rot: für Tabellen (<table>, <tr> und <td> Tags)
grün für das <div> Tag
violet: für Bilder (the <img> Tag)
gelb: für Formulare (<form>, <input>, <textarea>, <select> und <option> Tags)
orange: Für Zeilenumbrücke und Blöcke (<br>, <p> und <blockquote> Tags)
schwarz: das <html> Tag, dem Wurzelelement
grau: alle anderen Tags
Definitiv neu dazugekommen ist die Sammlung erstellter Graphen bei flickr. Auf der Seite wird aufgerufen seinen erstellten Graphen zu flickr hochzuladen und diesen mit dem Tag “websitesasgraphs” zu versehen.
Sehr schön ist auch, dass der Source Code zu diesem Applet frei verfügbar ist. Also jeder der sich dafür interssiert kann den Source Code herunterladen und erweitern oder damit herumspielen. Dabei werden für das Applet das Framework HTMLParser, Traer Physics sowie Processing genutzt. Alle drei Frameworks sind sehr interessant und man sollte sie sich auf jedenfall noch einmal näher anschauen. Was man damit anstellen kann wurde ja schon mit dem “websites as graphs” Applet eindrucksvoll dargestellt.
