Published on 2006-05-28 19:54:51

It's common to talk about the visual aspect of a website, but it's not common to see the DOM structure of a website represented in a graph like an ADN. The result simply beautiful and impressive, a Java aplet where you can enter your website domain name and which generate a graph similar to the screenshot below. The graph is a simply a reconstruction of the DOM structure of the page, and the different colors represent the different tags for example blue: for links, red: for tables, green: for the DIV tag, violet: for images , yellow: for forms, orange: for linebreaks and blockquotes, black: the HTML tag, the root node and gray for all other tags.

http://design.phpmagazine.net/upload/2006/05/phpmagazine-graph-thumb.png


The author have posted some screenshots from different websites such CNN, boingboing, apple, yahoo, google, wired, msn ... Looking at the graphs more closely it will give you an impression of looking at an ADN graph, complex, with lot of nodes and different colors ! For the Java-sources addicted, here is the source code of the aplet, and the aplet online. Enjoy !


Related Entries

Member of the PHP Magazine Network, Copyright (C) 2005-2008 phpmagazine.net All Rights Reserved