Website as Graphs

Eine wirklich nette Kleinigkeit ist der HTML DOM Visualisierer von aharef. Das Java Applet zeigt eine zumindest im Aufbau nett animierte Baumstruktur die den Aufbau der Website visuslisiert.

Also all die DIV-Tags, Links und Meta-Teile die dazu führen daß eine HTML-Site eben so ausschaut wie sie ausschaut.

Inzwischen findet sich natürlich auch schon die entsprechende Flickr-Sammlung mit diversen Screensots wie die Seitenstruktur sonst noch so ausschauen kann.

 
 

Natürlich haben die kleinen Farbpünktchen auch ein bissel was zu bedeuten:

  • blue: for links (the A tag)
  • red: for tables (TABLE, TR and TD tags)
  • green: for the DIV tag
  • violet: for images (the IMG tag)
  • yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
  • orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
  • black: the HTML tag, the root node
  • gray: all other tags

gefunden via chat und wiederentdeckt via spreeblick.