Geek Post: My blog looks like mold

Yep, that's my blog pictured above! While searching for images tagged "blog" on flickr (don't ask me why), I came across the following flickr group (websites_as_graphs). This led me to a program/little piece of code that will visually render any web site. (I know you are going to love this DK!) Neato says the inner and outer geek in me! I LOVE information translated into the visual (see my previous Geek post) and vice versa.

I quote the explanation/key of the graphic rendering from the author below. If you go to the link directly, you can see the graphs of dozens of other web sites (google, boing boing, and mac) for comparison. They are quite beautiful, no?

You can try it out here. Try typing in any url - www.aharef.info/static/htmlgraph - and watch it grow!

The above image is my blog and at the very bottom of this post is the PRC web site (dreamweaver) and the PRC blog (wordpress). As you can see, the PRC web site uses tables and is fairly simple - a good thing! On the other hand, the blogs use lots of links. Enjoy!

Websites as graphs

Everyday, we look at dozens of websites. The structure of these websites is defined in HTML, the lingua franca for publishing information on the web. Your browser's job is to render the HTML according to the specs (most of the time, at least). You can look at the code behind any website by selecting the "View source" tab somewhere in your browser's menu.

HTML consists of so-called tags, like the A tag for links, IMG tag for images and so on. Since tags are nested in other tags, they are arranged in a hierarchical manner, and that hierarchy can be represented as a graph. I've written a little app that visualizes such a graph, and here are some screenshots of websites that I often look at.

I've used some color to indicate the most used tags in the following way:

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

www.prcboston.org


www.bostonphotographyfocus.org