Under the Hood

If the golden rule of standards based design is separating presentation, structure and behavior, then the golden rule of designing web content should be the separation of the static from the dynamic. Keeping your dynamic content separate allows you to manage your changing information in an organized way, making it easy to archive, sort, or rearrange the data at a later time.

Organized change is the overriding paradigm of the living web. In other words, nobody wants to see the same thing again and again. In typical fashion, web technologies have been accelerating to keep up with the demand for disseminating, managing, and creating dynamic content. We now have RSS, PHP and CSS (among many others) to help us create these living documents easily. The popularity of WordPress and other blogging software shows that this is not a passing trend, but the future of the web.

With that said, I thought I would illustrate the parts of my website that take advantage of these new technologies to serve as an example of their use and maybe provide some tricks to use on your own blog.

The front page contains the static “mission statement” and “services” list, but directly below it and on the sidebar you will see live content. The “recent projects” list, the Communique and the testimonials are all LiveLists. The testimonials list is a new Javascript “compact” LiveList that is generated on-the-fly. PHP creates JavaScript which creates HTML which creates an interface to your brain… I’m working on this feature for the next beta release of LiveList. All of this data is managed from the LiveList administrative web interface, allowing me to make changes from any Internet-connected computer in the world.

The Photos section is created with the PostcardViewer from Airtight Interactive. This program is a Flash based photo gallery which reads from a dynamically generated XML file. The XML is pre-rendered by a PHP script which simply takes all the photos you have in a directory and creates entries for them. XML allows us to share information in a cross-platform, cross-application manner, potentially allowing us to use our image data XML file for another gallery.

The Journal is created with a hacked-to-pieces WordPress installation with several plug-ins. The “grooves” list, which is on the Journal sidebar, is a live feed from my iTunes software. This was created with a hacked version of the WP-iTunes plug-in and iTunesBlogger. iTunesBlogger is an application that runs in the background of Windows, quietly collecting information each times you change tracks on your iTunes software. The software, when configured correctly, sends an encoded URL to the WP-iTunes plug-in on your blog. This plug-in, in turn, queries the Amazon web services to get the album art and other information from the XML data that is returned. The result of all this madness is that your iTunes playlist is updated in real time on your blog while you are running iTunesBlogger.

The “recently commented” list on the side is created by the wonderful “customizable post listings” plug-in from Coffee2Code. This plug-in allows you to list random posts, recently modified posts, recently commented and a slew of other great features.

The “related posts” functionality that pops up when you open up a single post is created using the Related Posts Plug-in. This plug-in attempts to find other posts in your archive with similar content to the one your reading. The results are mixed, I noticed that it often returns unrelated results. The new version of this plug-in allows you to give your posts keywords to help with this problem.

So that’s my website — seemingly very complex but ultimately completely simplified.