Artists
Page 2 of 3
Interactive In-Gallery Video Kiosk for Artist Midi Onodera
Interactive Touchscreen Interface using jQuery and HTML5 Video
In 2009 artist Midi Onodera created a series of 52 short clips designed for podcasting. I have been fortunate to be involved in this project, providing technical support and new media development. When exhibition opportunities arise, such as Onodera’s recent show at Concordia University in Montreal, we grapple with ways to present these new-media-specific works in the gallery setting. Knowing Concordia had some sweet gear, Onodera chose show this series on a large touch-screen monitor. I designed and implemented the interface using web-standard technologies including jQuery and HTML5 Video.
I have posted the code on Github. It uses a jQuery vertical center function I previously created, as well as some other interface effects. One of my favourite of its features is the randomization: The thumbnails are shuffled as the page is loaded and then each moves to the end of the page upon being selected. At its core are the functions to load and play the clips.
Swapping Sources in an HTML 5 Video
The interface provides access to 53 video clips, but rather than giving each its own instance, I set up an single video element, omitting a source.
<video class="video" id="video" controls="" autoplay="" width="640" height="426"></video> |
And then, when a video is selected, its source is added in and the element begins to play.
$('.video').attr('src','movies/' + movieNum + '.m4v');
document.getElementById('video').play(); |
But the strangest thing happened when the next video is loaded and played: The audio from the first clip would play along with the new! I tried all sorts of things, including completely unloading the video element and creating a new one for each cycle, but still the audio could be heard. What a strange bug!
In the end I found it could be solved by, upon closing the clip, pausing the playback and then removing the video source:
document.getElementById('video').pause();
$('.video').removeAttr('src'); |
All of this can be seen in-context over at Github.
Website for Photographer Seth Anderson
Photographer Seth Anderson is based in Chicago, a city that is often his subject. Prolific on Flickr, his images are frequently licensed for reproduction in blogs, books, documentaries and other media. We created a site that makes it easy to order physical prints.
Anderson’s photos are perhaps best approached through categories, making image discovery the site’s central mecanism. The approaches we employed became the basis for my techincal tutorial posts on creating a WordPress Tag Search using jQuery and a Categories Page using Nested Loops.
Website Redesign for Tiffany Malakooti’s “Belog”
An artist’s project I collaborated on has recently launched. Or I should say re-launched, as it existed before; I’ve been involved in getting it back to fighting form.
Belog is Tiffany Malakooti’s jam. She’s assembled a collection of Persian art and culture that is beautiful and often quite funny. I assisted in the realization of Tiff’s vision by rebuilding her WordPress theme and doing some jQuery. There was also some UNIX along the way to deal with some weirds.
Website Redevelopment for Honoria in Ciberspazio
An artist’s project I collaborated on has recently launched. Or I should say re-launched, as it existed before; I’ve been involved in getting it back to fighting form.
Honoria in Ciberspazio is Honoria Starbuck’s jam. Begun in 1997, it’s “the first internet opera” — written via online collaboration and performed via webcast, with the online condition as its subject. As a first step towards a possible version-two, I have ported the site and all its media to WordPress. The site retains the look designed many moons ago by Knut Graff.
Website for Photographer Andres Gonzalez
Andres Gonzalez’s website
I recently had the pleasure of creating sites with documentary photographer Andres Gonzalez. EachAndreshas an amazing eye and strong sense of narrative, which he brought to his layout and navigation. The site is built on WordPress, with custom a gallery-presentation plugin and theme.
Website for Photographer Carolyn Drake
I recently had the pleasure of creating sites with documentary photographer Carolyn Drake. Carolyn has an amazing eye and strong sense of narrative, which she brought to her layout and navigation. This site is built on WordPress, with custom gallery-presentation plugins and theme.
Website for Photographer Samuel James
I’m happy to launch a new website for documentary photographer Samuel A. James, an American working in Nigeria. The site runs the WordPress theme/plugin package I’ve dubbed “Carolyn”, after its initial commissioner, Carolyn Drake. The idea behind this package is to create a system that can be used to quickly deploy portfolio sites of a certain kind. To adapt the package to James’ needs I added features like an automatically-advancing slideshow and, most importantly, the ability to give each site a unique layout / style sheet. Check it out!
Website for Photographer Adam Nadel
Adam Nadel’s photographic practice is located “at the intersections of journalism, science, and human rights.” He knew exactly what he wanted and was a joy to work with! Using the WordPress-based package I’ve been developing, we were able put his site together quickly and efficiently.
Website for Photographer Lana Šlezić
Lana Šlezić’s work has documented the plight of women and children. Her book Forsaken studied the conditions faced by women in Afghanistan. Her next project, A Walk in the Park portrays street kids in India. She is currently based in Canada.
Working closely with the artist, we created a website to represent her practice and aesthetic. The site is built using WordPress, extending the codebase we’ve developed for the deployment photography sites. The font is Aften, by Monokrom.
Lana Šlezić’s website is hosted by MediaTemple.
Goshka Macuga microsites for the Museum of Contemporary Art Chicago
This post is a collaboration between Sarah Wambold and Marty Spellerberg. Sarah Wambold is a Denver-based project manager and documentary producer. Marty Spellerberg is an Austin-based interactive media designer/developer.
Goshka Macuga is the MCA Chicago’s 2013 Artist In Residence.
“Macuga’s work interweaves two strands that have helped define contemporary art in the last decade: artists’ increasing tendency toward historical and archival research and their growing interest in strategies of display and the dialogue between artistic and curatorial practice.”
— Dieter Roelstraete
Inspired by Hamburg Conversations on Art: Hamburg Comedy, a 1896 work German Jewish art historian Aby Warburg, Macuga’s residency project is to create a Chicago Comedy. But because the resulting work, likely to be a play, will not exist until the end of the term, the artist’s process is being documented and presented to the public as Preparatory Notes for a Chicago Comedy. Our team became involved as interactive media designers/developers.
With no artist on site—she’s in London—and no objects being produced in the early phases, how would museum visitors know there was, in fact, a residency taking place? We needed a physical manifestation or marker that would let the public know what was happening as it was happening.
In-Gallery iPad Kiosk
The artist was opposed to creating a object or an installation “as a placeholder,” so digital, with its ability to present a depth of information in a physically economical and engaging way, emerged as the best candidate. iPads as part of a title wall installation became the solution for a physical, onsite manifestation of the residency.
Early in the year, Macuga was joined by MCA Curator Dieter Roelstraete for a romp around the city, seeking to “excavate Chicago’s lesser-known histories, forgotten folktales, and best-kept secrets.” The material they generated became the basis for our presentation.
Since the artist’s notes were organized around places she visited around the city, we chose an interactive map interface. This provided an instantly relevant format: Onsite visitors are, by definition, present in Chicago and likely to relate to a map of the city. This also served to emphasize the project’s connection and relevance to the local community, a goal of the Museum’s residency program generally.
The technical solution was based on the technique demonstrated in Marty’s Integrating WordPress and Google Maps tutorial, which he previously used to create an in-gallery kiosk for the Chinese American Museum, Los Angeles.
Museum Website
We also wanted to put something online that could live-on once the residency itself is completed. We realized, over several discussions with the curator, that Macuga’s work would find its form in phases: Lateral research of canvassing Chicago; vertical research of deep dives at the Warburg Institute; production, likely to happen abroad; and a to-be-determined final presentation. The digital strategy would need to respond to each of these.
We recognized that the map interface would be inadequate for telling the rest of the story of the residency; as Macuga moved from research-based activities, some happening abroad, and into production, using a map to navigate the content would no longer make sense.
The Museum had a history of stand-alone project blogs, and we made the choice to continue that format in this case. The first thing we did was to consolidate the most recent blogs under a unified banner and feed, which improved the prospects for long-term maintenance, as well as providing added context for future researchers. But we also wanted to provide a unique feel specific to the here-and-now, so we designed a two-column landing page using the Packery layout library.
The project was driven by a core creative concept that came into view over a period of time, as the artist’s process revealed the characteristics of the artwork she is creating. By adopting an agile design and development methodology, our team was able to respond to the changing needs for the project mid-course. The result was a compelling, revealing and engaging presentation for Museum visitors both onsite and online.
Project Collaborators
Digital Team
Producer and Project Manager: Sarah Wambold
Designer and Developer: Marty Spellerberg
Content Coordinator: Marian Oman
Residency Team
Project Manager: Erika Hanner
Curator: Dieter Roelstraete
Content Creators: Michelle Puetz, Dieter Roelstraete, and Goshka Macuga
Website development for Photographer Nicholas Calcott
Nicholas Calcott was born in 1983 in Midland, MI. He currently lives and works in New York, NY. Visit website.
Project team
Designed by Everything Type Company.
Developed by Marty Spellerberg / Spellerberg Associates.
Websites for Artists Workshop 2014
Next month I’ll be teaching a “Websites for Artists” workshop at LIFT in Toronto. It’ll take place Monday, December 15 and Wednesday, December 17 2014, from 6 to 10 pm. From the programme:
This two-evening workshop provides an overview of how to establish a web presence from the preparation of content to the creation of a website for their artistic medium. Participants learn basic web theory and an understanding of how websites are constructed by planning and visualizing a layout for a multi-page site. An introduction to Hypertext markup language (HTML) and cascading style sheets (CSS) will be used as a basis of constructing web content. Dynamic content management systems such as WordPress and additional third-party web platforms (Youtube, Vimeo, Flickr, etc.) will be explored as alternative means of establishing a web presence and sharing work. This workshop will also cover getting your site published, registering your domain, hosting, and maintaining your website.
It’ll be a small group, so I’m looking forward to taking it in whatever direction the participants want. If you’re in Toronto, and looking to get started with your website or take it to the next level, I hope you’ll attend! Register in person at LIFT or by telephone: 416.588.6444.
LIFT (The Liaison of Independent Filmmakers of Toronto) is a member-driven non-profit organization that provides affordable access to equipment, education and space for those who want to make films, out of a passion for, and commitment to, the practice of filmmaking.