View your web site as a graph
If code is poetry, then it is also art. This site allows you to graphically display your web site as a rather elegant heirarchical graphic. The graph above is what happened when we fed Drawn.ca into the engine.
Here’s the legend:
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
graygrey: all other tags
Notice there are no red dots (tables) in Drawn’s graph? That’s because Johnny is web-standards compliant.
My web browser wept silent tears when I put in Amazon.com ;)
This is simply the most beautiful translation of HTML into another medium, ever. I am in awe of people who think the way necessary to create programs and sites like this. Thanks for bringing it to my attention. I may use it in my future website design presentations.
Mike
MikeLeuszler.com
I don’t think that tables are a sign of a non-compliant website. Tables used to show data (e.g. a bus schedule) are fine. Using a table to create a website layout is not…
I guess you don’t have a bus schedule on Drawn :P
[...] You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your ownsite. [...]
Hey! You need to credit the inventor/creator of this amazing app- He’s Marcel Salathe and he’d probably like it if I directed you to one of his websites-http://www.onethousandpaintings.com
Come on Canadians! Give credit where credit is due!
http://flickr.com/photos/tags/websitesasgraphs/
Don’t forget to add them and tag them on Flickr.
For some reason I think (some of) these would make lovely embroidery patterns. Maybe a toss pillow or tapestry with your website’s graph embroidered onto it?
[...] VÃa Drawn! encontramos esta herramienta, en la cual puedes introducir la Url de tu sitio web y sentarte a ver como se forma un gráfico que representa lo siguiente: [...]
It doesn’t do the whole site, otherwise the thing could be seen as a malicious app. It just does the page at the url you feed it. It looks kinda nifty, but I’ve seen many similar Flash & Java applets.
HELLO WORLD
THANK YOU TIME MAGAZINE FOR NUKING MY FAVORITE SITE FOR ABOUT A WEEK
50 SLOWEST WEBSITES OF 2006-7 SHEEEEESH!
ahem.
That shit is just beautiful, i love it! Actually by analysing what each color meant, i actually found what my site is lacking.
“htmlgraph cannot be instanciated”
Please tell me that is not a real word.
Tables actually are standards complient; they’re in the XHMTL specs. The word you were looking for was semantic. Your designer designs with semantics in mind (and probably accessibility, for that matter), and therefore doesn’t use tables in a circumstance when tables should not be used.
[...] Pretty cool. (Via Drawn!) Filed under Internet/Technology , Diversions [] [...]
A quite intrestingidea is realized in this website! And a good and easy to handle design has been found too!
A quite intrestingidea is realized in this nice website! And a good and easy to handle design has been found too!
Just wow…
[...] (via Drawn!) [...]
[...] 哇~真的是很有趣的一個應用阿 所以囉~在我原本看到的網站上就有那麼一å¥è©±ç•¶é–‹å ´ç™½ “If code is poetry, then it is also art.” [...]
I think this article is in a better place
There are many informations in the comments. Nice.