Permalink

View your web site as a graph

web tree

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
gray grey: all other tags

Notice there are no red dots (tables) in Drawn’s graph? That’s because Johnny is web-standards compliant.

[Link] via

  • Lone

    My web browser wept silent tears when I put in Amazon.com ;)

  • http://deleted Lone

    My web browser wept silent tears when I put in Amazon.com ;)

  • http://www.mikeleuszler.com/ Mike

    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

  • http://www.mikeleuszler.com Mike

    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

  • Peter

    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

  • Peter

    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

  • http://www.internetvibes.net/2006/08/19/411/ Internet Vibes » Blog Archive »

    [...] You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your ownsite. [...]

  • Rocky Todd

    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!

  • Rocky Todd

    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://www.preshaa.com/ jim

    http://flickr.com/photos/tags/websitesasgraphs/

    Don’t forget to add them and tag them on Flickr.

  • http://www.preshaa.com jim

    http://flickr.com/photos/tags/websitesasgraphs/

    Don’t forget to add them and tag them on Flickr.

  • Holly

    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?

  • Holly

    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?

  • http://cabanadigital.com/weblog/2006/08/19/tu-sitio-como-un-grafico/ cabanadigital » Blog Archive » Tu sitio como un gráfico

    [...] 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: [...]

  • http://www.spacejack.org/ Link

    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.

  • http://www.spacejack.org/ Link

    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.

  • go away there’s nothing to see

    HELLO WORLD
    THANK YOU TIME MAGAZINE FOR NUKING MY FAVORITE SITE FOR ABOUT A WEEK
    50 SLOWEST WEBSITES OF 2006-7 SHEEEEESH!

    ahem.

  • go away there’s nothing to see here

    HELLO WORLD
    THANK YOU TIME MAGAZINE FOR NUKING MY FAVORITE SITE FOR ABOUT A WEEK
    50 SLOWEST WEBSITES OF 2006-7 SHEEEEESH!

    ahem.

  • http://www.mikkaworks.com/ Mikkaworks.com

    That shit is just beautiful, i love it! Actually by analysing what each color meant, i actually found what my site is lacking.

  • http://www.mikkaworks.com Mikkaworks.com

    That shit is just beautiful, i love it! Actually by analysing what each color meant, i actually found what my site is lacking.

  • Louis

    “htmlgraph cannot be instanciated”
    Please tell me that is not a real word.

  • Louis

    “htmlgraph cannot be instanciated”
    Please tell me that is not a real word.

  • http://deadringerart.com/ Ragdoll

    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.

  • http://deadringerart.com Ragdoll

    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.

  • http://www.blogs.ravasthi.name/tepumpkin/2006/08/23/see-your-website-as-a-graph/ The Emotional Pumpkin » See your website as a graph

    [...] Pretty cool. (Via Drawn!) Filed under Internet/Technology , Diversions []   [...]

  • http://www.yomis-onlineshop.de/ Hundefutter Onlineshop

    A quite intrestingidea is realized in this website! And a good and easy to handle design has been found too!

  • http://www.yomis-onlineshop.de Hundefutter Onlineshop

    A quite intrestingidea is realized in this website! And a good and easy to handle design has been found too!

  • http://www.der-tierfreund.eu/ Der Tierfreund

    A quite intrestingidea is realized in this nice website! And a good and easy to handle design has been found too!

  • http://www.der-tierfreund.eu Der Tierfreund

    A quite intrestingidea is realized in this nice website! And a good and easy to handle design has been found too!

  • http://medvegonok.blogspot.com/ Michael Hosting

    Just wow…

  • http://medvegonok.blogspot.com Michael Hosting

    Just wow…

  • http://www.tikirobot.net/wp/2006/10/03/what-tr-looks-like/ TikiRobot!, Mai Tais and Blinky Lights, Ahoy! » What TR Looks Like

    [...] (via Drawn!) [...]

  • http://mitchbox.wordpress.com/2007/04/26/%e8%a8%ad%e8%a8%88-%e4%bb%a5%e8%a6%96%e8%a6%ba%e5%8c%96%e5%9c%96%e5%83%8f%e5%91%88%e7%8f%be%e4%bd%a0%e7%9a%84%e7%b6%b2%e7%ab%99-websites-as-graphs/ [設計]-以視覺化圖像呈現你的網站 Websites as Graphs « [MitchBox] – 米奇的藏寶箱

    [...] 哇~真的是很有趣的一個應用阿 所以囉~在我原本看到的網站上就有那麼一句話當開場白 “If code is poetry, then it is also art.” [...]

  • a-piao

    I think this article is in a better place

  • a-piao

    I think this article is in a better place

  • Kunsthandwerk

    There are many informations in the comments. Nice.

  • Kunsthandwerk

    There are many informations in the comments. Nice.