Today I stumbled onto this website: http://www.aharef.info/static/htmlgraph/. It runs an applet (so you must have Java installed) that analyzes the html code of any website you submit (must start with http://) and creates a representative graphical output. The result is pretty neat. Below I'll show you some of the maps I've created using this website.
Before I show you the maps, here is what the different dots mean, according to color:
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
Okay. Now for the maps. First up is the home page of my blog before I posted this today:
And now my most recent post [1]:
The Star Wars homepage [2]:
The website for the Geek Test (which you should take) [3]:
And last, but not necessarily least, the Pedestrian 6.0 [4]:
Pretty cool, huh? If you do it yourself you can actually watch an animation of the graph being made.[5]
Notes:
[1] See Unexpected Delivery II.
[2] See http://starwars.com/.
[3] See http://www.innergeek.us/geek-test.html.
[4] See http://duck-of-doom.com/.
[5] You can see more examples at this Flickr feed.
Before I show you the maps, here is what the different dots mean, according to color:
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
Okay. Now for the maps. First up is the home page of my blog before I posted this today:
And now my most recent post [1]:
The Star Wars homepage [2]:
The website for the Geek Test (which you should take) [3]:
And last, but not necessarily least, the Pedestrian 6.0 [4]:
Pretty cool, huh? If you do it yourself you can actually watch an animation of the graph being made.[5]
Notes:
[1] See Unexpected Delivery II.
[2] See http://starwars.com/.
[3] See http://www.innergeek.us/geek-test.html.
[4] See http://duck-of-doom.com/.
[5] You can see more examples at this Flickr feed.
No comments:
Post a Comment