Websites as Graphs
2007-04-18
Via Matt, another wonderful web gadget: Websites as Graphs. Take a look at the following (it devolves into Geek-fu to some extent after the break).
The left image is the Quixotic Evil homepage, just before writing. The site runs on Nucleus CMS (which isn't a full-featured CMS, but is good at running a blog, as far as I'm concerned) and the template is more or less stock: I've added new sidebar blocks and so on, but done no real structural work.
It's entirely <div>-based, hence the mass of green dots. That's the trick that allows me to change the style entirely with just a stylesheet switch (Firefox users can view the other style by selecting 'New' from 'Page Style' in the 'View' menu: IE users don't get that menu option, but it's just as well because IE can't render the standards-compliant CSS I used).
The middle graph is from the index page of a fairly busy forum I run, using phpBB. The functionality that phpBB provides is great, and it remains my choice of free board software (I've seen some nice non-Open solutions, but asking for any payment makes it unsuitable for many volunteer-run communities). However, as Dragon has pointed out, the customisation is pretty poor. The site in the graph is a mostly stock version of the default template.
The page is structured in tables, with each table, row and cell marked as a red dot on the diagram. Arguably, some of the information on the page is true 'tabular data': the purpose of the page is to list the available forums and display various attributes of each (topic count, post count, most recent poster, etc.), after all. However, the template uses a lot of tables for purely layout purposes, because it's a convenient way to get things rendered in columns, thereby tricking text-to-speech engines and the like into presenting links and things as proper tabular data. It's bad practice and something I could fix, but I only have so much time...
The right-hand graph is a bit of a mix. It's a sort of gaming knowledge-base kind of a site, running on Drupal, which is a versatile and extensible (as well as somewhat obtuse and arcane) general-purpose CMS. I use a stock template - not the default - with even less tinkering than the other two. Besides the fact that the page is quite simple, it's easy to see from the graph the way it uses tables as overall structure then divisions for per-element styling. Not ideal, but again, I don't have time to fix it all...
I don't really have a conclusion. I just felt that it was mildly interesting that three different sites had such different diagrams, and since I know that some of my readers have an interest in HTML&friends - professional or otherwise - I thought I'd use it as an excuse to waffle at length.
 |  |  |
The left image is the Quixotic Evil homepage, just before writing. The site runs on Nucleus CMS (which isn't a full-featured CMS, but is good at running a blog, as far as I'm concerned) and the template is more or less stock: I've added new sidebar blocks and so on, but done no real structural work.
It's entirely <div>-based, hence the mass of green dots. That's the trick that allows me to change the style entirely with just a stylesheet switch (Firefox users can view the other style by selecting 'New' from 'Page Style' in the 'View' menu: IE users don't get that menu option, but it's just as well because IE can't render the standards-compliant CSS I used).
The middle graph is from the index page of a fairly busy forum I run, using phpBB. The functionality that phpBB provides is great, and it remains my choice of free board software (I've seen some nice non-Open solutions, but asking for any payment makes it unsuitable for many volunteer-run communities). However, as Dragon has pointed out, the customisation is pretty poor. The site in the graph is a mostly stock version of the default template.
The page is structured in tables, with each table, row and cell marked as a red dot on the diagram. Arguably, some of the information on the page is true 'tabular data': the purpose of the page is to list the available forums and display various attributes of each (topic count, post count, most recent poster, etc.), after all. However, the template uses a lot of tables for purely layout purposes, because it's a convenient way to get things rendered in columns, thereby tricking text-to-speech engines and the like into presenting links and things as proper tabular data. It's bad practice and something I could fix, but I only have so much time...
The right-hand graph is a bit of a mix. It's a sort of gaming knowledge-base kind of a site, running on Drupal, which is a versatile and extensible (as well as somewhat obtuse and arcane) general-purpose CMS. I use a stock template - not the default - with even less tinkering than the other two. Besides the fact that the page is quite simple, it's easy to see from the graph the way it uses tables as overall structure then divisions for per-element styling. Not ideal, but again, I don't have time to fix it all...
I don't really have a conclusion. I just felt that it was mildly interesting that three different sites had such different diagrams, and since I know that some of my readers have an interest in HTML&friends - professional or otherwise - I thought I'd use it as an excuse to waffle at length.
Comments