ProjectVISUAL » Uncategorized http://projectvisual.net Intensify Your World With HDR Photography. Learn How To Create High Dynamic Range Photographs With Photomatix. Tue, 24 Jan 2012 12:02:17 +0000 en hourly 1 Visualise Your Website With HTML DOM Visualizer http://projectvisual.net/2008/08/visualise-your-website-with-html-dom-visualizer/ http://projectvisual.net/2008/08/visualise-your-website-with-html-dom-visualizer/#comments Tue, 19 Aug 2008 22:28:29 +0000 Stephen http://projectvisual.net/?p=47

]]> I remember long ago finding a great java applet online that allowed you to view any website as a huge entanglement of colour coded nodes, representing every type of tag in your HTML source code, connected to each other to give a visual layout at what your source code looks like. Finding it again has eluded me for a long time but I finally found it today and I’m rather chuffed with myself! The HTML DOM Visualizer is a great way to see how well layed out your website is, how many of each tag you employ in you sites design, and it’s really just a very novel idea – I’ve never seen any other similar program. I wonder if there’s a way to deduce how search engine friendly a website is just by looking at its DOM graph – any ideas?… anyone?…. hello?….

Here is what each colour in the chart means:

  • blue: for links (‘a’ tags)
  • 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

    • grey: any other tags

As a perfect example, here’s how this site looks when passed through the script:

projectvisual map Visualise Your Website With HTML DOM Visualizer

To see the applet in action check out how the graph for projectVISUAL evolves.

]]> http://projectvisual.net/2008/08/visualise-your-website-with-html-dom-visualizer/feed/ 2