Explode any web pages lately?

If you have any engineering sensibilities you're probably aware of what exploded diagrams are and why they're a valuable tool for understanding the innards of an otherwise simple-looking object. Take this diagram of the Sun Blade 2500 for example.

Being things that tend to be clean-looking on the outside but complex inside, web pages are perfect candidates for the exploded diagram, and I've actually got a bookmarklet to do this very thing. But before proceeding to the bookmarklet, let me explain what it does:

First, it strips out all presentational tags and attributes. This includes things like:

  • border attributes
  • cellpadding and cellspacing attributes
  • align/valign attributes
  • width/height attributes
  • bold, italic, and underline tags
  • etc.

It doesn't strip out structural tags and attributes such as:

  • colspan and rowspan attributes
  • paragraph and blockquote tags
  • list tags
  • header tags
  • table tags
  • em, strong and code tags
  • etc.

It also strips out all scripts (including event handler attributes), iframes and plugin objects. It strips out all images and replaces them with their alt value, or a question mark if no alt value is supplied. It then applies a style sheet that emphasizes structure, highlighting the arrangement and nesting of elements. Semantically qualified elements like h1 are color coded, while semantically generic elements like div are a neutral gray.

The end result is a visualization of the page's structure in a non-visual context. Why would this be useful? Among other things, you get a feel for the accessibility of a page, and how careful the authors were to mark up the content in a semantically meaningful way. If a page is accessible and does a good job of separating structure from presentation you'll see a neatly arranged and colorful stack of information that is actually readable. If the page is inaccessible and does a poor job of separating structure and presentation you'll see a mind-bendingly bizarre maze of gray ziggurats peppered with question marks and empty blocks that is quite unreadable. Here's the bookmarklet. (To add, drag the link onto your bookmarks toolbar and rename it to whatever you want.) Try it on a few websites and you'll see what I mean.

Please Read! This requires a wee bit of processing power and memory since it's basically using JavaScript to run regular expressions against a big string. Also, and here's the bad news for IE users, it only works (to my knowledge) in Gecko-based browsers (Mozilla, Firefox, Camino, etc). That said, happy exploding.

[Update] Chris Adams reports that it works in the Safari browser. Rock on.

[Update] I've modified the bookmarklet to display table summaries since they're also part of a page's content structure.

Comments:

It also works in the Safari browser

Posted by Chris Adams on November 01, 2004 at 08:42 AM MST #

Thanks for the info. From my experience, when in doubt, Safari will tend to work as long as your code is non-proprietary. That's pretty cool.

Posted by greim on November 02, 2004 at 01:59 AM MST #

Post a Comment:
Comments are closed for this entry.
About

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today