060708_websitesasgraphs.jpg

Websites as graphs: Code & Form HTML structure

A while back I blogged Websites as Graphs on Generator.x. It’s a nice visualization of the structure of HTML documents. Since a well-formed HTML document has a logical hierarchy of tag containers, it is possible to visualize it as a strict graph. The results are both informative and beautiful, revealing the strategies used for structuring the document’s content. It will also reveal whether the document holds up to that most essential of post-CSS web principles: A tableless design.

The original post by Sala shows some examples, and also provides a live applet that you can try out on your own site. Be sure to have a look at all the pictures tagged 'websitesasgraphs' on Flickr.

Sala has generously provided the Processing for the application. It requires the HTMLParser, Traer.Animation and Traer Physics libraries to run. HTMLParser is a standard Java library and hence does not come with instructions for Processing. According to the project home page, all you should need to do is download the latest version of the library, and then copy the file htmlparser.jar from the /lib folder to your sketch’s “code” folder. I haven’t tested this, so if you find otherwise let me know.