New Media Initiatives Blog

Resolving one of the great mysteries of the web 2.0, Flickr has added video capabilities! Finally, the best photo sharing site on the web has what iPhoto could do two years ago, and what YouTube has been doing since day one. As John Gruber so accurately put this:

Why Yahoo didn't do this immediately after acquiring Flickr, instead choosing to stand on the sidelines playing pocket pool while YouTube swelled into a multi-billion-dollar product, is a mystery for the ages.

From what I can tell, it’s note entirely a shot off of YouTube’s bow, but it could be. The video quality is much, much better. It looks like they’re using the On2 VP6 codec, which has quite good quality. YouTube, on the other hand is using the ancient h.263 codec that looks straight out of 1999. At 150mb for a 90 second file, there are some limitations, but the quality can be excellent. There’s no API yet for video, but I would expect that to be coming soon.

The difference from YouTube, is that, at least right now, only users who have gotten over the big hurdle of paying $25 for a pro account can use it. This will keep a lot of people away, but if you’re a savvy flickr user, that’s probably not a bad thing. Expect to still see mash-ups and other more pop-culture stuff on YouTube, and video of people’s vacation on flickr. However, it lights more of a fire on YouTube to add some much needed polish.

Flickr’s video player interface fits in very nice with the look of the site. It also looks like a a lot like Vimeo, which has alway seemed to me the most flick-inspired web video solution. This probably hurts them more than anyone.

Here’s a sample video on flickr:

This has me excited.

For this year’s Museums and the Web Conference, my colleague Witt Siasoco and I wrote a paper about our experiences designing the new Teen Programs and WACTAC website. Our paper is now online: From Boring and Non-Offensive to Dancing Unicorns and Glitter Text: How to Create a Teen Web Site with Teenagers. Here’s an excerpt:

Our first goal was to provide WACTAC with a sense of ownership of the site. Teen Programs' staff believe that in order for programs to be successful, WACTAC must be involved with the process. All of the WACTAC programs and events are conceived and implemented by WACTAC members themselves. In order to make WACTAC ownership a priority, the staff had to treat teens.walkerart.org as an educational program in itself. The staff realized that if WACTAC actively engaged in the site, other teenagers would be interested. While a new site might bring increased traffic, we decided our measure of success would be the site's relevance to WACTAC teens and their social circle.

Witt and I will be part of a panel, Designing with Teens, on the last day of the conference, discussing the paper and process of making the site and our favorite. We may also have some super-slick give-aways. We hope to see you there.

As for the title of our paper, From Boring and Non-Offensive to Dancing Unicorns and Glitter Text: How to Create a Teen Web Site with Teenagers, it started off as a joke. Then we decided it accurately described the design process and reflected the tone of the site, so it stuck. And whenever we mention the name to people, they get a kick out of it.

This video speaks for itself, but this guy obviously knows how to find a niche:

If you have animation
Use with moderation
Cause search engines can’t index the information
…
Dont use bold
Please use strong
Cuz if you use bold that’s old and wrong

Full lyrics here.

Be sure to check out m0serious’s other videos. Paid Search 101 and Link Building 101 are both funny and informative. m0serious would appear to fall into the web development branch of the nerdcore hip hop genre.

For some time, most Walker websites have been without an important branding element: a favicon. Most often, favicons appear in the location bar, next to the URL of the site. They can also appear when a site is saved as a bookmark and in a browser tab. For sites with RSS feeds, favicons also often appear in the RSS reader as an icon next to the feed name.

I find I don’t often notice when a site is missing a favicon, but do notice when it has one. Coming up with a 16×16 pixel icon that somehow encapsulates the identity or brand of an institution is difficult, especially when said institution doesn’t have an official logo. In discussion, we thought about using a W, but thought it looked bland. The Walker typeface has a nifty alternate W, which is what we ended up using:

Side note: I recall Matthew Carter, designer of the Walker Typeface, discussing the typeface and W at an Typecon 2003. I remember him telling a story about the W, so I contacted him to clarify:

I did the disjointed alternative W in the Walker type convinced that I had invented the form. But later when I was at the AIGA conference in New Orleans I saw the same W on manhole covers. Some of my type designs have been inspired by lettering I’ve seen in the everyday environment — Mantinia is partly based on lettering on the Boston Public Library, for example—I use the Walker W as a facetious example of the environment ripping me off.

We’ve made use of Walker’s alternate W for most neighborhoods. However, a few sites that have their own identities or are a bit more unique get their own favicons:

• Most Walker sites
• Walker Blogs
• New Media Initiatives
• Design
• Visual Arts
• Performing Arts
• Film and Video
• Families
• Teen Programs and WACTAC
• Art On Call
• Gallery 9

The simplest way to put a favicon in a page is to simply drop the favicon.ico file in the root folder of your site. Most browsers will automatically see the file and display it. An .ico file has some limitations, most notably it does not support transparency. Most modern browsers (e.g. not Internet Explorer) support using a gif or png file that supports transparency, and will display cleanly when in a bookmark menu or a tab. To satisfy both groups of browsers, we actually use two icon files, a favicon.ico for Internet Explorer and a png for everyone else. Here’s what the code that goes into the head of every page looks like:

<link rel="icon" type="image/png" href="/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->

Curiously, my browser of choice, Camino, ignores the favicon.png file and instead uses the .ico with it’s white background. However, I’m part of a very small minority and the .png with transparency works fine for Safari and Firefox users.

One of the myriad of things New Media Initiatives is responsible for around the Center is motion graphics. There are already great posts on here about some of the more interesting technical projects involving multiple projectors and fancy software. In addition to these more complicated solutions, we also do some old-fashioned linear motion graphics work in After Effects. I’ll dig into the recesses of my hard drive in the future and post some of that work.

In the meantime, here’s the latest piece for the Insights Lecture Series, which began yesterday. This video is entirely based on the poster designed by Vance Wellenstein and Ryan Nelson, I just added some slightly sophisticated transitions and timing.

2008 Insights Lecture Series Teaser from Justin Heideman on Vimeo.

This video runs for the period before each lecture start, while visitors are finding seats. It’s used as branding for the series and to remind those who haven’t bought tickets to the next lecture they might just want to. I’ve put the video on Vimeo rather than YouTube because Vimeo’s video quality is much better.

There are several events in the Twin Cities this week that might be of interest to readers of this blog:

• Minnesota Public Radio is hosting a discussion tonight on New Media journalism ethics, moderated by Dan Gillmor. It looks like all the tickets are gone, but Metroblogging Minneapolis is promising to live blog it. I’ll be there and probably ask a question or two about the role of design and credibility. If I have anything to add, I’ll post here tomorrow.
• The Spark Festival is this week. Always good stuff. Graffiti Research Lab is in town, and will be giving a talk on Wednesday, Feb 27 at 12:30 in the Regis Center on the West Bank campus.
• On a related note, Ali Momeni, a professor at the U is teaching a class this semester where his students are building GRL-inspired mobile bicycle projection units. The class has a blog and will likely be collaborating with The UnConvention. I’ve posted some more info on The UnConvention’s blog, too.

For the installation of Worlds Away, we needed to find a way to show the YouTube videos in the gallery. If you’ve visited the show, you’d see the videos installed in a Rec Room in the center of the gallery, complete with green shag carpeting, faux wood-gain paneling, low ceiling and bean bag chairs. It looks very much like my grandparent’s basement, minus the musty smell. The videos are viewable on a CRT television set on the floor in the corner of the room. I built a custom interface to allow people to control the TV, play the YouTube videos over the internet, at a decent quality, without violating the YouTube terms of service, and being mostly mischief-proof.

If you want to be spared the details, here’s a video:

Or, view it in a browser. This opens a pop-up window, Safari suggested, since that what it was built for. Use the left and right arrow keys, enter and escape to navigate.

When we started the project, we looked into ripping the flash video files from YouTube and creating a DVD. Testing showed the quality wasn’t great, but passable on a standard-def CRT television. The big hang-up about a DVD based approach was that it’s expressly forbidden in the YouTube terms of service:

You agree not to access User Submissions (defined below) or YouTube Content through any technology or means other than the video playback pages of the Website itself, the YouTube Embedable Player, or other explicitly authorized means YouTube may designate.

While it’s one thing to just avoid agreements like this with a wink and a nod for one-off or personal use, it didn’t seem like a good idea to blatantly violate the terms of service for an installation that would be in the gallery for months.

We also discussed setting up a computer in the gallery and simply putting a web page on it thin a custom player and view the videos. We weren’t too happy with that idea either, since it didn’t really fit within the Rec Room concept in the gallery — my grandparents don’t have a computer in the basement. We also discussed putting a big plasma TV on the wall, more like a modern TV, and using a remote or some sort of a pointing device to select videos using a custom YouTube player. Again, this option seemed costly (no spare plasma screens sitting around) and not within the theme of the room.

What we wanted was something kind of like the Apple TV, except limited to the 12 videos we selected for the exhibition. Quick research revealed no way to lock down an Apple TV or limit it to a particular YouTube playlist, so that was out. But what about making a web page that worked in a similar fashion?

It is possible to make Safari work in fullscreen mode using Saft. And there are applications that work with the Apple Remote to set up custom events and keystrokes. A computer with the right video card can also go out to a TV. And a little javascript magic in the browser could pull it all together with fancy fade and scroll effects.

jQuery and Safari fun
I started with the web page. I already knew I wanted to use jQuery for this project, if possible. I’ve been using MooTools for a while now and I wanted to expand my horizons to include a second Javascript library (half kidding). Using a TV screen for a display limits the usable resolution to 640×480, so there is not enough room to display all the entries on screen at once. Instead, I found the jCarousel plugin that I was able to use to scroll the video information across the screen. JCarousel has a lot of hooks for various events, so it made it quite easy to plug in to. The second thing I’d need was something to show the videos on screen once selected. The thickbox plugin is a lightbox clone, and seemed to do the trick. I tied it all together with some custom event hooks for keystrokes and a some logic to keep errant keystrokes from triggering multiple videos, excess scrolling, etc. In the end, I found that using the arrow keys and esc and enter are the best. In Safari, if you use any actual letter keys, it will default to type ahead find functionality and interfere with the scrolling offset.

The interface is designed explicitly for Safari. Since this is a single computer installation under our control, I don’t have to worry about whether or not it works in IE or Firefox. I have no idea if it works in IE (ignorance truly is bliss), but it only half-works in Firefox. Firefox doesn’t want to load the flash player in Thickbox. I’ve experienced problems with Firefox ignoring the z-index on Flash elements in the past, so this is not surprising.

Remote buddy
Now that I had figured out how to deal with the browser, I had to figure out a way to have the remote interface with the browser by sending specific keystrokes for each button. After looking at several programs that do this with the Apple remote, I settled on Remote Buddy. It was the easiest to configure so that it would only work with specific applications. I configured it to send the left arrow key on left arrow press, right on right, enter on play and escape key on menu button press.

One problem with the remote was that our computer was an older mirror-door G4 tower, which does not have an infrared receiver. Thankfully, Remote Buddy supports third-party usb receivers, so I ordered one, and it worked like a charm. Microsoft does build good hardware.

Video out
Unfortunately, we weren’t able to track down a G4 that had S-video or composite out, so I also ordered a newer video card for that. We got an ATI Radeon 9200 which has an excellent control panel for TV-out settings, letting you manipulate all aspects of the size, stretch, overscan, etc.

Net connection
In this configuration, the videos stream in real time from YouTube’s servers. Our galleries have pretty good wireless saturation, and an airport card in this tower allows the machine to connect to the network. I spent some time looking into using Squid for caching the youtube videos, but it appears YouTube recently changed the way videos are embedded, using some sort of a time-based token in the URL, making caching difficult if not impossible. Another option would be to keep the videos loaded in the browser, but in a hidden element. However, since there’s no interface for controlling the YouTube embedded player with javascript, starting and stopping the player is not possible.

Putting it together
After connecting all these things, I cleaned up the interface a bit, changing the typeface to Avenir, choosing colors that worked better on the Television (don’t use white). I configured Safari to start in full-screen kiosk mode, which Saft enables. Safari and Remote Buddy were set to launch on login, and the machine is set to automatically log in. Additionally, I set up a simple shell script that checks each of them to make sure they’re running and if not, relaunches them. With relaunching the applications, it’s important to use the command-line version of Applescript, since that will cleanly deal with backgrounding the process and giving correct screen focus.

Doc Czypinski, who was the lead tech for installing the show, was able to figure out a way to glue a white plastic strip to the back of the remote. He was then able to cable the remotes to the gallery furniture so that they don’t walk away during the show.

Post-mortem
Now that the computer has been in the gallery for about a week, there are two things we’ve learned. First, visitors tend to expect things to be playing automatically on the TV, since that’s the way most media things are in galleries. When they do figure out they need to use the remote, they tend to click the big play button and not cycle through the videos to choose. I’ve attempted to help this by putting arrows on the screen to indicate left and right so that visitors know to use the arrows on the remote to scroll.

The second issue is that the wireless hasn’t been 100% reliable. As anyone who uses Wifi on a regular basis knows, it’s not always up 100% of the time, and the wifi in our gallery goes out once in a while. I’m looking at writing a script that will cycle the Airport card off and on if it looses connectivity, or displays a message on screen if there is extended connectivity loss. A wired connection would certainly be better, but the convenience of Wifi cannot be beaten.

Gallery photo by Cameron Wittig. Arm of Justin Heideman.

In the research process for Worlds Away: New Suburban Landscapes, Design Director and Curator Andrew Blauvelt uncovered many interesting words invented to describe suburbia. Andrew enlisted now-former Design Fellow Jayme Yen and Visual Arts Fellow Rachel Hooper to assist in the research for the exhibit, and to further research the lexicon of suburbia. To make the collecting of the terminology easier, we set up a private wiki for them to use.

The wiki of terms has transformed into the lexicon found in the Worlds Away exhibition catalog (soon to be found in the Walker Shop). We thought the lexicon would make a great resource, so it was decided to build it into a larger exhibition website.

Site URL: http://design.walkerart.org/worldsaway/

The exhibition website is still a wiki, and you can help enhance and add to the terms in the lexicon. Each entry in the lexicon consists of a definition, a section for images, and a google map. You can modify or enhance the definitions, or add new terms we might not know about. Images can be added to better describe the term. And map locations can also be submitted to give a satellite overview for terms that may best be seen from above (cloverleaf, for instance). We also added bios for all the artists in the exhibition, as well as a few sample essays and excerpts from other essays found in the catalog. Additionally, the selected videos from our YouTube competition can be found on the video section of the site.

The design of the site is drawn from the exhibition catalog design by Senior Designer Chad Kloepfer. The book uses different paper and ink colors in different sections to compartmentalize the types of content (essays, interviews, lexicon, and topics). The site also takes the book or paper metaphor and uses it as the navigation mechanism, allowing you to always see the index for the other sections of the site.

I wanted to enforce a rigours structure on the wiki, not let it grow out of hand, and only allow public edits in the lexicon section. Like our other wiki sites, this one is based on pmwiki, which allows for a rigorous permissions system. We’re using a few extensions, extended markup (for footnotes), Google Map API, NewPageBoxPlus, and DictIndex (for the lexicon list). Pmwiki is quite hackable, and the skin we constructed makes good use of that hackability. For the animation and accordion, I’m using my favorite javascript library, MooTools.

Please take some time to explore the site and enhance the lexicon of terms.

Several months before I was employed by the Walker, I was one of the “resident artists” that participated in the OPEN-ENDED exhibition. The project that my collaborators, The Revolutionary Party, and I came up with was called Nothing (Nowhere) to Hide. We were asked by the Minnesota History Center to bring the project out of the archives for the opening of The Enemy Within: Terror in America - 1776 to Today. The opening reception will be Tuesday January 29, from 7-9pm.

The project is an examination of the aspects of secrecy in the government, and how much the government wants to know about the goings-on of citizens. The idea for the project was largely inspired by the warrantless wiretapping scandal, broken in the New York Times. We wanted to show how government secrecy is, for the time being, still a two way street, at least in a token manner, but highlight the disparities in the flow of information.

The project consists of four parts. One is documentation of de-classified, re-classified documents from the National Archives, a separate, but perhaps more mind-boggling example of government secrecy. The second is documentation of the FOIA request letters and responses to our request for our own FBI files (we requested them). The third part of the project is a computer and printer kiosk where users can fill out an on-screen form with their information to generate FOIA and Privacy Act letters to request their FBI file. The final aspect of the project is a video we created explaining how to request an FBI file. We shot this video with local actor Jim Bovino. Here’s the video, it’s kind of fun:

How To Request Your FBI File from Justin Heideman on Vimeo.

Sadly, our FBI file request generator does not work online, as it was designed for a specific browser and printer settings, but the site Get My FBI File seems to do the same thing (maybe even better).

We’ve decided to extend the deadline for our open call for videos about the suburbs. The deadline has been extended a week to January 22nd. So if you ran out of time, you have a little more. To participate, upload your video to YouTube and add the tag "walkerworldsaway" or post it as a response to our call video (seen below). To be considered for gallery screening, entries must be 5 minutes or less and be online by January 22, 2008.

Here’s a playlist of some of the great submissions we’ve already received:

• I have a thing for “ugly”, 1996-esque sites (I think they’re awesome). Here are some of my recent finds:
  • The Best Webs.net
  • Jim Jacobson’s Home Page
  • Killer Japanese Seizure Robots! (seriously, you might get a seizure)
  • American Beauty Equipment
• The Daily Mole has a good op-ed about the problems with accessible web video for hearing impaired people. This is an interesting topic, and one can see both sides of the issue, but clearly at some point the technology will have to evolved and web video will need captions. Target lost a suit for not making it’s website accessible, so one hope major media outlets are aware of the ramifications for avoiding accessibility. One has to wonder, though, what should someone who’s putting a video on YouTube be responsible for? When everyone is a media outlet, what is the cutoff?
• The 48 hour film project moves into second life.
• This is a pretty slick hack of Canon cameras to get a very high speed shutter.
• Neat threadless shirt, “The internet was closed so I thought I’d come outside today.” Cool, except the internet doesn’t close, and right now it’s 7 degrees outside, so I’ll just stay in, thanks.

Hat tip to Paul Schmelzer for some links.

Most techies probably know that Leopard has been out for a while now. Aside from all the goodness that is Time Machine, the thing that has me most excited is the new version of Quartz Composer. Create Digital Motion did a great post about what’s new, and you should read their post for the exhaustive info.

Aside from many useful things (closed loops!), there are two things that stick out to me as exceedingly useful for creating dynamic digital signage:

• Data crunching: Quartz Composer can now load, and download XML files, which makes it much easier to move large chunks of data in and out of your composition.
• Multiple screens -- or multiple projectors: There is now support for running Quartz compositions across multiple screens, and also a cluster.

Being able to use XML data rather than just an RSS feed could be extremely useful for specifying things beyond text and images. Color values, timing, or any number of things could be included here in XML. The way we generate most of our pages here at the walker, our output is XML, so piping something like the Walker Calendar into a Quartz Composition just got much easier.

The second thing on that list is the really exciting part. As part of the Developer Tools, apple added a new application called Quartz Composer Visualizer, aka QCV. It does a couple of things. It lets you play a single quartz composition across multiple screens, which you could not do with Quartz Composer in Tiger. I’m not sure yet how this works across multiple video cards. It also adds a network mode, where a host and clients share the same composition and synchronize via the network. Here’s a movie I made of a modified version of our Vineland Lobby Kiosk Screensaver:

This is running on two different computers, my laptop and my desktop (with two displays). For the most part, the displays are in perfect sync. There is a little blip, but I think that’s probably because my Desktop is struggling to keep up, due to an older video card. There is also the option to run a second composition as an “optional processing composition”. What this means is that you can create another composition that has the logic for processing the data and settings, which gets passed along to the display compositions. Basically, this allows you to use a MVC way of doing things. Here’s a screenshot of the app in use:

Finding clients is done via bonjour, so it is limited to the local network, but all you have to do is fire it up on each machine and they find each other. Depending on how well separate video cards are supported, it could be quite easy to run a multiple screen setup from one high-end Mac Pro, since most of QC processing happens on the video card(s). Mac minis could also work as well, though due to the underwhelming onboard video, might not have enough horsepower to do any fancy core image effects.

QCV isn’t an industrial level application; you couldn’t ship this off to a client as a complete solution for a digital signage project. But for use in house, or a situation where it could be monitored more closely, it could be extremely useful. The complete source code to QCV is also included in the developer tools, and it’s meant as a template and example for people. An enterprising objective-c developer (which I am not) could create such an industrial level application. But as a template application, it is surprisingly useful. QC and QCV are the things in leopard that excite me the most.

• Two blogs that I’ve recently stumbled upon are the Open Blog at the New York Times and Alpha Channel on MSNBC. Both are blogs from the developers behind the NYT and MSNBC, respectively. The entry on how TimeSelect was eliminated, partially powered by Amazon S3 is pretty interesting (if you like grid computing and the word terabyte), as is the entries on the redesign of MSNBC. It’s interesting to note that MSNBC and NYT have had blogs for a while, but not developer blogs. Welcome to the party, guys.
• The Brooklyn Museum has been doing some experimenting with Twitter and it turns into a bit of a mixed bag. Is there a phone-based opportunity here? Certainly so, but Twitter doesn’t quite seem to be the right vector. Something we’ve discussed before, bluejacking the phone number of Art on Call, might be another approach.
• Jason Kottke has an interesting post up about FFFFOUND!, which, thanks to him, is my new daily RSS post-count king. FFFFOUND! is a social image bookmarking site that has amazingly good content. Jason thinks that perhaps our curators should be looking over their shoulder:
  

  Among the many things that the internet has democratized is curating, a task once more or less exclusive to editors (magazine, book, and newspaper), art gallery owners, media executives (music, TV, and film), and museum curators. They choose the art you see on a museum’s wall, the shows you see on TV, the movies that get made, and the stories you read in the newspaper. The ease and low cost of publishing on the web coupled with the abundance of sample-ready media has made the curating process available to many more people.

  I don’t think curators have to worry quite yet, but it isn’t unreasonable to say that the internet has and will continue to exert influence. It also works in the other direction. Jason points out a few bloggers that have crossed over into curating gallery shows. To that list I would also add I Heart Photograph.

I’m very happy to announce that the Walker Design Department now has a blog. The designers have been working in stealth mode for a short while preparing posts and putting in a little content so that the site wouldn’t launch empty. In true design style, they’ve thought the format out very cleanly. Emmet lays it out in the first post:

Bulletin Board: These posts will alert you to upcoming design programming at the Walker such as the Drawn Here architecture lecture series, the Insights design lecture series, and design exhibitions like Worlds Away: New Suburban Landscapes. And you will respond en masse resulting in many ticket sales.

Flat Files: There are boxes and boxes full of postcards, flyers, brochures, posters, gallery guides, and other Walker ephemera that we would love to properly document and archive. Since we don't have the time to do that, we'll just pull out a few pieces each month and tell you who designed them, what the project brief was, and why we love them even after all this time.

Memos: Here we will call your attention to the history of our department, how our studio operates today, and design issues that we address on a daily basis. Like fonts and stuff.

Interviews: . . . with designers. Sample question: "If you were stranded on a desert island, which 10 typefaces would you take with you?"

Junk Drawer: A catchall category for link dumps.

Additionally, many of the recent design fellows will be (and have already been) blogging:

We've invited a whole slew of former Walker designers to contribute whenever and whatever they feel like--reporting from places as far as England, Holland, and Korea, as well as places more close to home like MCAD. We want to hear what they're working on now, what is interesting to them, who they think is stroking it, seriously downloading the uploader. Who knows what they'll write about. Not we.

There are already ten posts in the blog, so interested readers will have some insightful catching up to do. Here’s the URL: http://blogs.walkerart.org/design.

Last week, after quite a bit of work, the re-designed teens site went live:

(larger screenshot)

In discussing what a new site might be like with Witt, Christi and WACTAC, we came to the conclusion that the types of content we wanted to be on the site didn’t have a very clear relationship to each other, and that the audiences for each are different. There is, in effect, a “business audience”, which is visiting the site looking for information on what Teen Programs is, what they do, how to apply, etc. This audience most likely consists of parents, other museum professionals, and Teens looking to apply to WACTAC. The other audience are other teens, or others interested in what the teens are interested in. The new site literally divides the page in half for each of these audiences.

“The business side of things” is a simple information based site, loosely based on the look and feel artistic program sites. The layout was adapted somewhat to fit better into the dynamic space of the Teens site, but the style is the same. “The play side of things” is where the teens make their mark by posting blog entries, artwork, links and events. There are several different ways that WACTAC makes this page theirs:

• Blogging: the site’s back-end is WordPress, so blogging is built-in. Every teen in WACTAC now has an account, and Witt is working with the council to cultivate ideas that can be formed into posts.
• Links, for when the teens find something that isn’t quite worthy of an entirely new blog post, but maybe deserves a short note and a link, we’ve got that covered too. The links are culled from del.icio.us via RSS feed. Right now we use a shared wactac account, but in the future, and should any of the teens want to have their own del.icio.us account, a network can be set up and we can pull a combined feed.
• Events are highly important to the site as well, and these are pulled via RSS from a shared account on Upcoming.org. We wanted the teens to be able to not only highlight their events at the Walker, but non-WACTAC Walker events as well as non-Walker events. I looked into several systems to essentially create a group calendar, and using Upcoming in this way seemed the easiest. It is essentially a social bookmarking service like del.icio.us, except it deals with the temporal and location based data that an event has. The time and location is in the RSS feed, which makes it a cinch to pull and display.
• Art from the teens and other people that have influenced them will also be on the site. For the time being, this section is a category within the blog that gets special treatment. Images posted here are displayed in a larger size using a lightbox clone. Down the road, depending on how much this is used, we might consider replacing this with flickr. We’re using yahoo services for everything else, so why not make it complete?
• Customizing the interface is one of the features of the site that I think makes this page really the teen’s space. Much like myspace, the teens can customize the colors, text, and background of this side of the site. Unlike myspace, they don’t edit the CSS themselves. Instead, the theme includes an admin panel that allows the teens to pick the colors for the boxes and text, as well as change the header and background images. I’m using a handy color picker based on mootools to make it easy to use.

This is the most “dynamic” site I’ve built so far, and I re-learned a lot about using javascript, especially with the Mootools framework. The hyper-object-oriented nature of JS + moo is both confusing and extremely powerful. For a javascript framework, mootools is quite compact and does a lot. There are also quite a few classes and user-contributed scripts out there based on it. In addition to the color picker mentioned above, the business side of things uses a heavily modified version of SmoothGallery. This article on “The Hows and Whys of Degradable Ajax” was also helpful in figuring out how to do the ajax loading on the business side of things in a semi-accessible fashion.

There are other things in the works for the site, including a Facebook app and perhaps a MySpace widget. That is the subject for another day, however.

If you’re looking for the old site, it still exists in archived form: Arhived Walker teens website.