Tuesday, May 23, 2006

some assembly required

last week i hinted that i had a new "design project that should go live soon", and now it has.

some assembly required is a syndicated radio show hosted by minneapolis native jon nelson (who is also an audio collage artist under the name escape mechanism). some assembly required features only recordings that are made out of other recordings; everything on the show uses sampling of some sort, whether it's turntablism, digital remixing, tape manipulation, or what-have-you. if you're interested in sample-based audio art, some assembly required is your dream show.

jon contacted me awhile ago about reworking the website for the show, some-assembly-required.net. he wanted to snazz up the design a little bit, making the text larger and easier to read, as well as changing the banner imagemap at the top of the site, changing the links there and making them larger/more legible as well. also, the old version of the site would automatically resize your browser window, which rightfully annoys some people. this resize script needed to be stripped out.

most importanly, jon wanted to be able to update all parts of the site by himself. a few key pages on the site has been done using ASP, and he could add bits of text to these pages using a client application on his computer, but large chunks of the site were static html pages, which he didn't know how to update. but he did know how to use blogger, which he's been using for awhile on his blog (previously mentioned here).

so here's what i did:
  1. reformatted the site to use <DIV>s and CSS-based layout rather than the original table-based layout, while keeping the overall design the same.
  2. reworked the banner imagemap and made changes to the stylesheet to update fonts, etc.
  3. stripped out ASP code wherever possible, replacing it with static html.
  4. converted key parts of the site to be updatable using blogger (namely, the news page is one blog, the home page is another, and so on.)
  5. instructed jon on some basic html tags he could use to edit the static html portions of the site.

of course, the html guidance wasn't a big deal... the idea of learning html seems intimidating if you've never used it, especially if you've looked at machine-generated code, which can be virtually illegible even to the best coders, but basic html syntax is surprisingly simple once you get down to it. (presentation and layout code can be a bitch, but the html to input paragraphs, images, etc is shockingly easy.)

the crowning achievement of this redesign is the new playlists blog. the original version of this page (screenshot) used ASP to automatically generate a list of links to playlists (drawn from a database), complete with month and year headers. we wanted to rework this site so jon could add playlists using blogger. i wasn't able to duplicate the original format 100%, as blogger simply isn't designed to do stuff like output year headers, but i was able to build something damn close—though doing so involved intermixing three different blogger hacks.

<!-- begin semi-boring techy talk -->
a typical blogger blog replicates each new post in 2-3 distinct places. the most recent posts appear on the main blog page (for example, /stallio/blog.html for my blog). all posts also appear on a weekly or monthly archive page (this post appears on /stallio/2006_05_01_archive.html). and if you have the "post pages" feature turned on, each post also appears on its own separate page (/stallio/2006/05/some-assembly-required.html for this post).

with the SAR playlists blog, each post only appears once, on the post page. each month's archive page is simply a list of links to these post pages (utilizing this blogger hack). the main page actually includes all the monthly archive pages, each one inside its own iframe. this was the second blogger hack. (wieland recommends using <object> tags rather than iframes to do this, claiming that object "offers the exact same functionality". but i don't think this is quite true, at least not as supported. when i tried implementing this using object instead of iframe, it looked beautiful in firefox, but in internet explorer the objects would appear inside an inset-looking "box", with a useless verical scrollbar. i couldn't turn these off in IE, so i went with iframe. if you know how to make such objects invisible, let me know.)

this was all well and good, and produced a list of playlists by month that looked pretty much like the original page, but there was one remaining problem. if you look at my blog archives, you'll note that they are listed in ascending order (the first archive listed for my blog is from nov 2003, and the bottom one is this month). however, we want the playlists in descending order, so the most recent playlist is at the top, with the links separated by month. this template spat out a list of months in ascending order, but the posts inside each month were in descending order. fixing this required a third blogger hack, and i had to rewrite the script so it would spit out <iframe>s instead of a bulleted list.

finally, we didn't want to re-enter five years' worth of playlists into blogger, so i copied the old playlist links for all months prior to may 2006 from the old playlist page. so all playlists from april 2006 or earlier use the old system, while all new playlists starting this month use the new system. however, you shouldn't be able to notice any difference between the two unless you look at the status bar of your browser while hovering over playlist links; they should look and function virtually identically.
<!-- end techy talk -->

this really put my knowledge of blogger templates to the test, and i now have an almost rock-solid grasp of how to do sophisticated stuff using blogger's template tags. it's pretty cool that i was able to help jon out by reworking his site (and making it so he can update it by himself) and that we both learned some things in the process.

anyway, take a look at the newly redesigned some-assembly-required.net. even if you don't live close to any of the syndicating stations, several of them broadcast online. and jon is podcasting old episodes, so you can subscribe to the podcast or just check out the blog and look for the mp3 links. the blog's worth reading in its own right, as it's full of interviews with audio artists... including this interview with yours truly and lots of interviews with artists who are way more popular, like negativland and jason forrest.

No comments: