New Media Initiatives

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.

The good news: about 8 million music lovers are simultaneously clicking on our email blast for information on Rock the Garden!

The bad news: about 8 million music lovers are subsequently melting our server. I feel like I should drive out there and blow on it to help keep it from overheating, but I’m on my bike today and not up for the extra miles. So…

Dear music lovers,

I’m glad there’s so much interest in the show! I think it’s going to be great. But please, please, click slower!

Love,

Your frantic webmaster

While preparing a presentation on multi-user digital tables, I was directed to the Great War tables at the National World War One Museum, Kansas City, MO. Produced by Second Story, these tables are just one part of the museum’s use of interactive technology to tell the story of WWI. The two tables, each 26-feet long, feature “individual interactives where visitors can: learn about military technologies through 3D reconstructions; compare the arsenals, artillery and airplanes used by the combatant armies; watch archival video footage and browse photographic collections; and create their own propaganda posters and war memorials that they can email to themselves and others. At any time, museum staff can launch the tables into a group based interactive experience where up to 24 visitors engage in a series of interactive challenges that parallel the military, political and civilian aspects of the war.” For more on the tables, see the Second Story page. And don’t miss the Quicktime demo.

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:

ul#faviconlist{ background-color: white; }

ul#faviconlist li img{ border:0; vertical-align: middle;}

• 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" />

<![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.

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:

ul#faviconlist{ background-color: white; }

ul#faviconlist li img{ border:0; vertical-align: middle;}

• 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" />

<![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.

The museum technical community got some good news today: MuseTechCentral officially launched. Billing itself as the MCN Project Registry, the site seeks to “provide a place for the MCN community to share information about technology-related museum projects”.

After some quick browsing (encouragingly, there are already a good number of entries, including several cell phone tour projects I was interested in) it was easy to see the potential of the site:

• When starting a new project, it’s smart to see if this problem has been solved before. If so, how? And for how much? Is it worth the investment? Or is there a vendor to avoid? Now you can find out.
• Vice versa, upon completing a project, you may find yourself being hit up constantly for information requests. Now you can now simply refer people to your project page on MuseTechCentral.

While I was there I created an account and added our Art on Call project to the registry. The site is full of ajaxy goodness that makes form entry and navigation a breeze, although I do wish you could bookmark filtered results.

So far the projects seems to be fairly art-museum-centric, but hopefully that will change as more institutions start to contribute. The registry will be most useful if it truly represents the museum community, so if you’ve got a project to add… go add it!

Overall, this is a great effort by the Museum Computer Network and the Museum Software Foundation. Looking forward to future browsing and adding many more projects!

[via Musematic]