New Media Initiatives

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]

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).

A few days ago Microsoft announced their standards compatibility plans for IE8. It starts off talking about how IE8 passes the Acid 2 test, and then goes on to talk about the viewing “modes” in the various IE browsers.

IE handled these modes like most of the other browsers. There was “quirks” mode, which is invoked if no doctype is set (or a deprecated doctype), and “standards” mode if you used an appropriate doctype. Safari and Firefox work the same way. This gives a bit of flexibility to those who may have some older site with nonstandard or old spec code, and still follows general web standards for new code like you would expect.

Microsoft however decided to change things again in IE8. One would think the new and better standards that came about through the Acid 2 test would work in “standards” mode in IE8 given they follow the standard. But that is not the case. If you use “standards” mode in IE8, the browser will instead render the page like IE7 did, you will not get the new up to date standards fixes. And “quirks” mode will still render in IE8 like IE6 did.

Instead, to get the “super standards” mode, web developers will need to add a special meta tag to their sites to tell IE8 to render it in the new mode. This is just short sighted. It’s a band aid fix us web devs will have to live with for another 5 to 10 years.

The biggest problem here is the fact that standards compliance means “opt in”. Standards compliance should be determined by the doctype of the page, like the standards say, not some random meta tag. Microsoft’s comeback is that adding in standards means many pages build specifically for IE6 or 7 will break, and expecting everyone to rewrite their entire websites to standards compliance is not feasible.

Which is why I want to know why standards compliance can’t be an “opt out”? The meta tag idea is fine, but it should be the fix for the old, out of date, non-standard content, not new content. Microsoft can (and should) save companies the time and effort in having to rewrite all their sites, but that saving should come at the cost of adding a simple meta tag in the header of your old pages.

If you look at Microsoft’s OS’s they do similar things. XP broke some of the Windows 2000 programs because the API changed. Same thing happened in Vista. Microsoft rightly gave developers notice of these changes and gave them time to implement fixes for compatibility, so that when the new OS came out, the old programs could already be updated to run on the new OS. I’m not sure why a browser should be any different. Give legacy site devs the meta tag to add now, so that when IE8 comes out it “just works” like it used to. But leave the standards compliance the way it should be, the way the spec says.

This also has the added benefit of allowing legacy code and this fix to die off faster. If meta tags are only put into old code, as those sites are replaced, we can get rid of this “fix” much quicker. Making developers put it into new code just means we have to deal with this for that much longer, which is a pain.

I’m happy that Microsoft has finally decided to embrace web standards for a change. But in their quest for legacy support, their decision to slap an ugly band aid onto future code is a bad one. And it opens a slippery slope for future versions of IE that I’m not looking forward to, and that is unfortunate.