David the Designer sent readers to a very interesting link today, where one can get a web page plotted graphically. The graphs’ applet has been developed by Marcel Salathe, who I understand works at Stanford University. It’s worth waiting for the Javascript applet to work as the animation is very interesting.
   For starters, here’s how this site’s home page looks:

The screen shots were taken on my laptop, and the wide screen meant I could not get the entire image in tidily.
   Here is the key given on M. Salathe’s site:

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 [sic]: all other tags

David was interested in where his links were—the blue dots. In the above case, the site could do with a few more outward-bound ones.
   It’s a fairly simple page, in any case. To get more complex, I fed in the company’s site to see how that would look:



   Logically, Lucire’s home page should have more images (the purple dots):



   I tried my supplementary blog on Vox to see how that would fare. That led to the most complex one of this series:



   Finally, what surprises me was how complex Font Police is, despite it appearing relatively simple:



   The site gives one a very different view of how a web page looks—but be warned. You might spend longer than you thought on it, trying different URLs. Posted by Jack Yan, 11:39  permalink

comments

Post a Comment  Links to this post